HTML VRS CSS:CREATING A TRAVEL WEBSITE

in #esteemapp5 years ago (edited)

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

A sample for a travel page website

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

Another view
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



transparent Dropdown Menu

(html comment removed:  Start WOWSlider.com HEAD section )

(html comment removed: End WOWSlider.com HEAD section )

Al Futahiem Travels

<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>

(html comment removed: Start WOWSlider.com BODY section )

  • download (5)
  • ebun99
  • fight
  • photo-1544442633-7625254bada0
  • ebun2.jpg - Copy - Copy
  • ebun4 - Copy - Copy
  • ebun5 - Copy - Copy
  • ebun7 - Copy (2) - Copy
  • ebun22 - Copy - Copy
  • photo-1544442633-7625254bada0 - Copy
  • photo-1490644658840-3f2e3f8c5625 - Copy
  • photo-1507065255811-f3b9fe968f84 - Copy
  • photo-1517935706615-2717063c2225 - Copy
  • photo-1569540087509-cbaf868e1ba1 - Copy
  • photo-1569540087509-cbaf868e1ba1
  • wordpress gallery plugin
  • photo-1569504499034-028522ee6ceb
download (5)1 ebun992 fight3 photo-1544442633-7625254bada04 ebun2.jpg - Copy - Copy5 ebun4 - Copy - Copy6 ebun5 - Copy - Copy7 ebun7 - Copy (2) - Copy8 ebun22 - Copy - Copy9 photo-1544442633-7625254bada0 - Copy10 photo-1490644658840-3f2e3f8c5625 - Copy11 photo-1507065255811-f3b9fe968f84 - Copy12 photo-1517935706615-2717063c2225 - Copy13 photo-1569540087509-cbaf868e1ba1 - Copy14 photo-1569540087509-cbaf868e1ba115 photo-1569556666948-cf63b49f52fe16 photo-1569504499034-028522ee6ceb17
jquery image slider by WOWSlider.com v7.7
(html comment removed: End WOWSlider.com BODY section )
</div>

  <link rel="stylesheet" href="stylesheet.css">

<stlye></stlye>

(html comment removed: Start WOWSlider.com HEAD section )

(html comment removed: 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>

Designed by:Fatogun Alex


Contact Info <a href="mailto:[email protected]" color:blue;> Copyright @ 2019 © 2019 right reserved

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.

Sort:  


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

If you appreciate the work we are doing, then consider supporting our witness @stem.witness. Additional witness support to the curie witness would be appreciated as well.

For additional information please join us on the SteemSTEM discord and to get to know the rest of the community!

Please consider using the steemstem.io app and/or including @steemstem in the list of beneficiaries of this post. This could yield a stronger support from SteemSTEM.

many thanks @steemstem😊

Congratulations @diodio! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You received more than 3000 upvotes. Your next target is to reach 4000 upvotes.

You can view your badges on your Steem Board and compare to others on the Steem Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

SteemitBoard Ranking update - A better rich list comparator
Vote for @Steemitboard as a witness to get one more award and increased upvotes!