Travel Website

In thisTutorial We will Learn How to make a SlideShow Website USing Html and CSS JAVASCRIPT .


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.
com/a076d05399.js"></script>
    <link href="https://fonts.googleapis.com/css2
?family=Poppins&family=Raleway:wght@500&family=
Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

    <title>Document</title>
</head>
<body>
    <section id="company">
  <header>
      <div class="contact">
          <i class="fa fa-phone">
 <span>+9847234568</span></i>
          <i class="fa fa-envelope">  
<span>hellowworld123@gmail.com</span></i>
          <i class="fa fa-clock">
<span>6am-11pm</span></i>
      </div>
      <div class="socialmedia">
          <i class="fab fa-facebook"></i>
          <i class="fab fa-instagram"></i>
          <i class="fab fa-linkedin"></i>
          <i class="fab fa-youtube"></i>
          <div class="search">
              <i class="fa fa-search"></i>
          </div>
      </div>
  </header>
    </section>
  <section id="topnav">
<div class="navigation">
    <div class="logo">
        <img src="logo.png" alt="logo">
    </div>
    <div class="navbar">
        <ul>
            <li><a href="javascript:void(0)">
<i class="fa fa-times" id="close"></i></a></li>
            <li><a href="">Home</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="">Activities</a></li>
            <li><a href="">Details</a></li>
            <li><a href="">Contact</a></li>
            <div class="socialmedia1">
                <i class="fab fa-facebook"></i>
                <i class="fab fa-instagram"></i>
                <i class="fab fa-linkedin"></i>
                <i class="fab fa-youtube"></i>
                
        </ul>
    </div>
    </div>
    <div class="bar">
        <i class="fa fa-bars" id="open"></i>
    </div>
  </section>
  <main>
      <section id="landingpage">
          <div class="image" >
              <img src="langtang.jpg" id="image1" alt="">
          </div>
          <div class="container">
              <h1>Where your journey Begins</h1>
              <h3>Discover Your next great adventure<br>
            to Explore Nepal.</h3>
          </div>
      </section>
      
  </main>


  <script>


    
let collection=["kathmandu.jpg","pokhara.jpg",
"langtang.jpg","janakpur.jpg"];

let i=0;
function myfunc(){
    document.getElementById("image1").src=collection[i];
    if(i<(collection.length-1)){
    i++;
    }else
    i=0;
}


var x=setInterval(myfunc,3000);    
              
  </script>

  <script>
      let nav=document.getElementById("topnav");
      let open=document.getElementById("open");
      let close=document.getElementById("close");
      open.onclick=()=>{
topnav.style.height="330px";
open.style.display="none";
close.style.display="block";
      }
      close.onclick=()=>{
          topnav.style.height="50px";
          open.style.display="block";
          
      }
        </script>
</body>
</html>






 :root{

    --poppins:"poppins",cursive;
    --roboto:'Roboto'sans-serif;
    --lato:'Raleway'sans-serif;
}
/* body{
 overflow:hidden
} */
#landingpage{
    positionrelative;
}
.image img{
   width:100%;
   object-fitcover;
   height:100vh;
   animation:chge 12s infinite;
}


.container{
    positionabsolute;
   left:50%;
   top:60%;
   transform:translate(-50%,-50%);
   
}
.container h1{
    font-size:3rem;
    line-height:60px;
    margin-bottom:10px;
    color:#fff;
}
.container h3{
   font-size:2.3rem;
   color:#234567;
}

*{
   
box-sizingborder-box;
margin0;
padding0;

}
#company{
    width:100%;
    background:rgb(2073737);
    cursorpointer;
    height:40px;
}

header{
    displayflex;
    justify-contentspace-between;
    width:80%;
    margin:auto;
    color:#fff;
    height:40px;
 
    align-itemscenter;
}
.contact span{
    font-familyvar(--roboto);
    padding:0px 10px;
}
h1{
    font-familyvar(--poppins);
}
.socialmedia{
    displayflex;
    
    
}
.fa-times{
    color:#fff;
    positionabsolute;
    right:10px;
    font-size:1.3rem;
}
.socialmedia i{
    padding:0px 10px;
}
.search{
    margin-left:30px;
}
#topnav{
    background-color#000;
    height:60px;
}
.navigation{
    width:80%;
    marginauto;
   height:60px;
    displayflex;
    justify-contentspace-between;
    align-itemscenter;
}
.logo {
    width:120px;
   
}
.logo img{
    width:100%;
    height:100%;
}
.navbar ul {
    displayflex;
    align-itemscenter;
    list-stylenone;
}
.navbar ul li{
    padding:0px 10px;
}
.navbar ul li a{
    text-decoration:none;
    color:#fff;
    font-family:var(--roboto);
    text-transformcapitalize;
   transition:all 0.4s linear;
   font-weightbold;
}
.navbar ul li a:hover{
    color:#ffd130;
}
h3{
    font-familyvar(--roboto);
}
.fa-times,.fa-bars{
    displaynone;
}

@media(max-width:800px){

html{
    font-size:10px;
}
.container h1{
    font-size:3rem;
    line-height:30px;
    margin-bottom:10px;
}
.container{
    positionabsolute;
   left:40%;
   top:60%;
  
   
}
header{
    width:100%;
    
}

.fa-times,.fa-bars{
    displayblock;
    font-size:3rem;
}
.fa-times{
    displaynone;
}
.bar{
    color:#fff;
    font-size:3rem;
    positionabsolute;
    right:10px;
    top:5px;
}
#topnav{
  background:none;
  background-colorred;
  height:50px;
  transition:all 0.9s linear;
  positionrelative;
  cursorpointer;
  
}
.logo{
    displaynone;
}
.navigation{
    displayblock;
}
.navbar ul{
displayblock;
padding-top:50px;
display:block;

background:red;
}
.navbar ul li {
    padding:10px;
    font-size:1.3rem;
}
.socialmedia{
    displaynone;
}

.socialmedia1 i{
    padding:0px 10px;
    margin:10px;
}
}

Post a Comment

0 Comments