create account

HTML VRS CSS:CREATING A TRAVEL WEBSITE by diodio

View this thread on: hive.blog |  peakd.com |  ecency.com
esteemapp · @diodio · (edited)
$2.52
HTML VRS CSS:CREATING A TRAVEL WEBSITE
Hi everyone,
today we shall be talking about "HTML", "CSS" and "Bootstrap", "wowslider" and "embedded video",AND "FONT AWESOME", we shall combine all this to create a front page travel website, please note that i am a novice at this so i welcome any feedback, "Bracket IDE" Was used in writing this code. well lets dig dig in.
![923fw6.png](https://img.esteem.app/923fw6.png)

   <code>A sample for a travel page website</code>

from the front page website, it can be seen from the left that a video is playing, you'll find the code below, it was designed so that when a web-surfer views the page, the videos play automatically, though google is against this, but its just for learning purposes.

![n826zu.png](https://img.esteem.app/n826zu.png)

  <code>Another view</code>
also you'll notice that the "drop down menu" has a transparent feature, this gives the platform  a unique look, and then again, wow slider was used to display pictures on the page,it is just in its testing period, feel free to copy the code and use .

|	HTML|	CSS	|	FONT AWESOME | COMPANY LOGO |COMPANY| | NAME | BOOTSTRAP| EMBEDDED VIDEO |


**HTML CODE**

 <!doctype html>
<html>

<head>
     <link rel="stylesheet" href="ws-bg.css">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    
    
  <title>transparent Dropdown Menu</title>
    
    
    <!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->


</head>


<body style="background-color: #fff;margin:auto">
    <h2 align="center">Al Futahiem Travels</h2>
    
    <div class="logo">
        <img src="logo19%20(5).jpeg">
    </div>   
    
    
    <ul>
    <li ><a href="#"><i class="fa fa-home"></i>Home</a></li>
        <li><a href="#"><i class="fa fa-user"></i>About Us</a>
    
         <ul>
         
             <a><li>Our Team</li></a>
             <a><li>Campsites</li></a>
             <a><li>Mission</li></a>
             <a><li>Resource</li></a>
         
         </ul>
    
    </li>
     <li><a href="#"><i class="fa fa-clone"></i>Services</a>
         
     <ul>
             <a><li>Activities</li></a>
             <a><li>Parks</li></a>
             <a><li>Shops</li></a>
             <a><li>Events</li></a>
         
         </ul>
    
    
    
    
    </li>
     <li><a href="#"><i class="fa fa-phone"></i>Contact</a>
    
     <ul>
             <a><li>Maps</li></a>
             <a><li>Directions</li></a>
         <a href="form.html"><li>Feedback</li></a>
             
         
         </ul>
    
    
    </li>
     <li><a href="#"><i class="fa fa-inr"></i>News</a></li>
        <li><a href="#"><i class="fa fa-edit"></i>Training</a></li>
    
    
    
    
    </ul>
    
    
    
    
<div class="wowslider" >
    
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
		<li><img src="data1/images/download_5.jpg" alt="download (5)" title="download (5)" id="wows1_0"/></li>
		<li><img src="data1/images/ebun99.jpg" alt="ebun99" title="ebun99" id="wows1_1"/></li>
		<li><img src="data1/images/fight.jpg" alt="fight" title="fight" id="wows1_2"/></li>
		<li><img src="data1/images/photo15444426337625254bada0.jpg" alt="photo-1544442633-7625254bada0" title="photo-1544442633-7625254bada0" id="wows1_3"/></li>
		<li><img src="data1/images/ebun2.jpg__copy__copy.jpg" alt="ebun2.jpg - Copy - Copy" title="ebun2.jpg - Copy - Copy" id="wows1_4"/></li>
		<li><img src="data1/images/ebun4__copy__copy.jpg" alt="ebun4 - Copy - Copy" title="ebun4 - Copy - Copy" id="wows1_5"/></li>
		<li><img src="data1/images/ebun5__copy__copy.jpg" alt="ebun5 - Copy - Copy" title="ebun5 - Copy - Copy" id="wows1_6"/></li>
		<li><img src="data1/images/ebun7__copy_2__copy.jpg" alt="ebun7 - Copy (2) - Copy" title="ebun7 - Copy (2) - Copy" id="wows1_7"/></li>
		<li><img src="data1/images/ebun22__copy__copy.jpg" alt="ebun22 - Copy - Copy" title="ebun22 - Copy - Copy" id="wows1_8"/></li>
		<li><img src="data1/images/photo15444426337625254bada0__copy.jpg" alt="photo-1544442633-7625254bada0 - Copy" title="photo-1544442633-7625254bada0 - Copy" id="wows1_9"/></li>
		<li><img src="data1/images/photo14906446588403f2e3f8c5625__copy.jpg" alt="photo-1490644658840-3f2e3f8c5625 - Copy" title="photo-1490644658840-3f2e3f8c5625 - Copy" id="wows1_10"/></li>
		<li><img src="data1/images/photo1507065255811f3b9fe968f84__copy.jpg" alt="photo-1507065255811-f3b9fe968f84 - Copy" title="photo-1507065255811-f3b9fe968f84 - Copy" id="wows1_11"/></li>
		<li><img src="data1/images/photo15179357066152717063c2225__copy.jpg" alt="photo-1517935706615-2717063c2225 - Copy" title="photo-1517935706615-2717063c2225 - Copy" id="wows1_12"/></li>
		<li><img src="data1/images/photo1569540087509cbaf868e1ba1__copy.jpg" alt="photo-1569540087509-cbaf868e1ba1 - Copy" title="photo-1569540087509-cbaf868e1ba1 - Copy" id="wows1_13"/></li>
		<li><img src="data1/images/photo1569540087509cbaf868e1ba1.jpg" alt="photo-1569540087509-cbaf868e1ba1" title="photo-1569540087509-cbaf868e1ba1" id="wows1_14"/></li>
		<li><a href="http://wowslider.com"><img src="data1/images/photo1569556666948cf63b49f52fe.jpg" alt="wordpress gallery plugin" title="photo-1569556666948-cf63b49f52fe" id="wows1_15"/></a></li>
		<li><img src="data1/images/photo1569504499034028522ee6ceb.jpg" alt="photo-1569504499034-028522ee6ceb" title="photo-1569504499034-028522ee6ceb" id="wows1_16"/></li>
	</ul></div>
	<div class="ws_bullets"><div>
		<a href="#" title="download (5)"><span><img src="data1/tooltips/download_5.jpg" alt="download (5)"/>1</span></a>
		<a href="#" title="ebun99"><span><img src="data1/tooltips/ebun99.jpg" alt="ebun99"/>2</span></a>
		<a href="#" title="fight"><span><img src="data1/tooltips/fight.jpg" alt="fight"/>3</span></a>
		<a href="#" title="photo-1544442633-7625254bada0"><span><img src="data1/tooltips/photo15444426337625254bada0.jpg" alt="photo-1544442633-7625254bada0"/>4</span></a>
		<a href="#" title="ebun2.jpg - Copy - Copy"><span><img src="data1/tooltips/ebun2.jpg__copy__copy.jpg" alt="ebun2.jpg - Copy - Copy"/>5</span></a>
		<a href="#" title="ebun4 - Copy - Copy"><span><img src="data1/tooltips/ebun4__copy__copy.jpg" alt="ebun4 - Copy - Copy"/>6</span></a>
		<a href="#" title="ebun5 - Copy - Copy"><span><img src="data1/tooltips/ebun5__copy__copy.jpg" alt="ebun5 - Copy - Copy"/>7</span></a>
		<a href="#" title="ebun7 - Copy (2) - Copy"><span><img src="data1/tooltips/ebun7__copy_2__copy.jpg" alt="ebun7 - Copy (2) - Copy"/>8</span></a>
		<a href="#" title="ebun22 - Copy - Copy"><span><img src="data1/tooltips/ebun22__copy__copy.jpg" alt="ebun22 - Copy - Copy"/>9</span></a>
		<a href="#" title="photo-1544442633-7625254bada0 - Copy"><span><img src="data1/tooltips/photo15444426337625254bada0__copy.jpg" alt="photo-1544442633-7625254bada0 - Copy"/>10</span></a>
		<a href="#" title="photo-1490644658840-3f2e3f8c5625 - Copy"><span><img src="data1/tooltips/photo14906446588403f2e3f8c5625__copy.jpg" alt="photo-1490644658840-3f2e3f8c5625 - Copy"/>11</span></a>
		<a href="#" title="photo-1507065255811-f3b9fe968f84 - Copy"><span><img src="data1/tooltips/photo1507065255811f3b9fe968f84__copy.jpg" alt="photo-1507065255811-f3b9fe968f84 - Copy"/>12</span></a>
		<a href="#" title="photo-1517935706615-2717063c2225 - Copy"><span><img src="data1/tooltips/photo15179357066152717063c2225__copy.jpg" alt="photo-1517935706615-2717063c2225 - Copy"/>13</span></a>
		<a href="#" title="photo-1569540087509-cbaf868e1ba1 - Copy"><span><img src="data1/tooltips/photo1569540087509cbaf868e1ba1__copy.jpg" alt="photo-1569540087509-cbaf868e1ba1 - Copy"/>14</span></a>
		<a href="#" title="photo-1569540087509-cbaf868e1ba1"><span><img src="data1/tooltips/photo1569540087509cbaf868e1ba1.jpg" alt="photo-1569540087509-cbaf868e1ba1"/>15</span></a>
		<a href="#" title="photo-1569556666948-cf63b49f52fe"><span><img src="data1/tooltips/photo1569556666948cf63b49f52fe.jpg" alt="photo-1569556666948-cf63b49f52fe"/>16</span></a>
		<a href="#" title="photo-1569504499034-028522ee6ceb"><span><img src="data1/tooltips/photo1569504499034028522ee6ceb.jpg" alt="photo-1569504499034-028522ee6ceb"/>17</span></a>
	</div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com">jquery image slider</a> by WOWSlider.com v7.7</div>
<div class="ws_shadow"></div>
</div>	
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
      
    </div>
    
      <link rel="stylesheet" href="stylesheet.css">
    
    <stlye></stlye>
    
    
   <!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section --> 
    
    
    
    
    
     <video  width="200px; height=150px;" controls autoplay>
                                  
          <source src="john.mp4" type="video/mp4">
                                                  
          <source src="movie.ogg"  type="video/ogg">                                        
                                  
                                  
    </video>
    
    
    
  <footer class="site-footer">
      <div id="footer-content">
          <p>Designed by:Fatogun Alex</p><br>
          Contact Info <a href="mailto:diodio2286@gmail.com" color:blue;></a>
          Copyright @ 2019 © 2019 right reserved
      </div>
  </footer>

                                                   
</body>





</html>


**CASCADING STYLE SHEET CODE**







#wowslider-container1{
    
    position:relative;
    top:40px;
    left:500px;
    z-index:-1px;
}
.content{
    position: absolute;
    top:200px;
    left:0;
    bottom:0;
     right:0;
    overflow:auto;
    z-index:1;
        
}

body{

background-image:url("war.jpg"); 
    background-repeat: repeat-x;
background-size: cover;
    font-size: arial;
    color: aliceblue
    
}

    
    ul{
        margin:0px;
        padding:0px;
        list-style: none;
      
        
    }
ul li{
    
    float:left;
    width:200px;
     height:40px;
    background-color: lightpink;
    
    font-size:20px;
    opacity:.8;
    line-height: 40px;
    text-align: center;
    margin-right: 10px;
}
ul li a{
    
    text-decoration: none;
    display:block;
    color:aliceblue;

}
ul li  :hover {
    background-color:#ff8000;
}

}
ul li a :hover {
    background-color:#ff8000;
}

ul li ul li{
    display:none;

}

ul li:hover ul li {
    display:block;
}

.logo img{
    position:fixed;
    left:0;
    top:0;
    height:50px;
    width:150px;}


.fa{
  margin-right: 15px;
    color: firebrick}




#form input {
    background-color:#000;
    background-position: left;
    background-size: auto;
    font-weight: bold;
    text-align: left;
    padding: 5px;
     margin: 10px 10px 10px 30px;
    border:1px solid #fff;}

    
#myvideo {
     object-fit:none;
    z-index: -100;
    top:20px;
    left:500px;
    margin-top:200px;
    position: relative;}


.site-footer {
    
    color:white;
    margin:5px;
    padding:2px;
    font-size: bold;
    text-align: center;
}
#footer-content {
    background:grey;
    border-width: 2px;
    letter-spacing: normal;
}


NOTE:
FEEL FREE TO PROVIDE A FEEDBACK IN THE COMMENT SECTION BELOW, DONT FORGET TO VOTE THIS HANDLE.HAPPY CODING.
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 296 others
properties (23)
authordiodio
permlinkhtml-vrs-css-creating-a-travel-website
categoryesteemapp
json_metadata{"links":["https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css","http://wowslider.com","http://wowslider.com"],"image":["https://img.esteem.app/923fw6.png","https://img.esteem.app/n826zu.png"],"tags":["esteemapp","steemstem","gaming","blog","steemit"],"app":"esteem/2.2.2-surfer","format":"markdown+html","community":"esteem.app"}
created2020-02-01 19:45:00
last_update2020-02-01 19:48:27
depth0
children3
last_payout2020-02-08 19:45:00
cashout_time1969-12-31 23:59:59
total_payout_value1.255 HBD
curator_payout_value1.266 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length11,549
author_reputation671,400,776,099
root_title"HTML VRS CSS:CREATING A TRAVEL WEBSITE"
beneficiaries
0.
accountesteemapp
weight300
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id95,002,501
net_rshares10,029,279,376,278
author_curate_reward""
vote details (360)
@steemitboard · 
Congratulations @diodio! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td><img src="https://steemitimages.com/60x70/http://steemitboard.com/@diodio/voted.png?202002020115"></td><td>You received more than 3000 upvotes. Your next target is to reach 4000 upvotes.</td></tr>
</table>

<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@diodio) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=diodio)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



**Do not miss the last post from @steemitboard:**
<table><tr><td><a href="https://steemit.com/steemitboard/@steemitboard/steemitboard-ranking-update-a-better-rich-list-comparator"><img src="https://steemitimages.com/64x128/https://cdn.steemitimages.com/DQmfRVpHQhLDhnjDtqck8GPv9NPvNKPfMsDaAFDE1D9Er2Z/header_ranking.png"></a></td><td><a href="https://steemit.com/steemitboard/@steemitboard/steemitboard-ranking-update-a-better-rich-list-comparator">SteemitBoard Ranking update - A better rich list comparator</a></td></tr></table>

###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-diodio-20200202t013023000z
categoryesteemapp
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2020-02-02 01:30:24
last_update2020-02-02 01:30:24
depth1
children0
last_payout2020-02-09 01:30:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,369
author_reputation38,975,615,169,260
root_title"HTML VRS CSS:CREATING A TRAVEL WEBSITE"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id95,009,455
net_rshares0
@steemstem ·
re-diodio-html-vrs-css-creating-a-travel-website-20200202t002027047z
<div class='text-justify'> <div class='pull-left'> <center> <br /> <img width='200' src='https://res.cloudinary.com/drrz8xekm/image/upload/v1553698283/weenlqbrqvvczjy6dayw.jpg'> </center>  <br/> </div> 

This post has been voted on by the **SteemSTEM curation team** and voting trail. It is elligible for support from @curie and @minnowbooster.<br /> 

If you appreciate the work we are doing, then consider supporting our witness [@stem.witness](https://steemconnect.com/sign/account_witness_vote?approve=1&witness=stem.witness). Additional witness support to the [curie witness](https://steemconnect.com/sign/account_witness_vote?approve=1&witness=curie) would be appreciated as well.<br /> 

For additional information please join us on the [SteemSTEM discord]( https://discord.gg/BPARaqn) and to get to know the rest of the community!<br />

Please consider using the <a href='https://www.steemstem.io'>steemstem.io</a> app and/or including @steemstem in the list of beneficiaries of this post. This could yield a stronger support from SteemSTEM.
👍  
properties (23)
authorsteemstem
permlinkre-diodio-html-vrs-css-creating-a-travel-website-20200202t002027047z
categoryesteemapp
json_metadata{"app":"steemstem-bot"}
created2020-02-02 00:20:30
last_update2020-02-02 00:20:30
depth1
children1
last_payout2020-02-09 00:20:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,050
author_reputation262,017,435,115,313
root_title"HTML VRS CSS:CREATING A TRAVEL WEBSITE"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id95,008,232
net_rshares425,369,736
author_curate_reward""
vote details (1)
@diodio · 
many thanks @steemstem😊
properties (22)
authordiodio
permlinkre-steemstem-202022t234447118z
categoryesteemapp
json_metadata{"tags":["esteem"],"app":"esteem/2.2.2-surfer","format":"markdown+html","community":"esteem.app"}
created2020-02-02 22:44:45
last_update2020-02-02 22:44:45
depth2
children0
last_payout2020-02-09 22:44:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length23
author_reputation671,400,776,099
root_title"HTML VRS CSS:CREATING A TRAVEL WEBSITE"
beneficiaries
0.
accountesteemapp
weight300
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id95,035,608
net_rshares0
Help/Feedback