<!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{
position: relative;
}
.image img{
width:100%;
object-fit: cover;
height:100vh;
animation:chge 12s infinite;
}
.container{
position: absolute;
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-sizing: border-box;
margin: 0;
padding: 0;
}
#company{
width:100%;
background:rgb(207, 37, 37);
cursor: pointer;
height:40px;
}
header{
display: flex;
justify-content: space-between;
width:80%;
margin:auto;
color:#fff;
height:40px;
align-items: center;
}
.contact span{
font-family: var(--roboto);
padding:0px 10px;
}
h1{
font-family: var(--poppins);
}
.socialmedia{
display: flex;
}
.fa-times{
color:#fff;
position: absolute;
right:10px;
font-size:1.3rem;
}
.socialmedia i{
padding:0px 10px;
}
.search{
margin-left:30px;
}
#topnav{
background-color: #000;
height:60px;
}
.navigation{
width:80%;
margin: auto;
height:60px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width:120px;
}
.logo img{
width:100%;
height:100%;
}
.navbar ul {
display: flex;
align-items: center;
list-style: none;
}
.navbar ul li{
padding:0px 10px;
}
.navbar ul li a{
text-decoration:none;
color:#fff;
font-family:var(--roboto);
text-transform: capitalize;
transition:all 0.4s linear;
font-weight: bold;
}
.navbar ul li a:hover{
color:#ffd130;
}
h3{
font-family: var(--roboto);
}
.fa-times,.fa-bars{
display: none;
}
@media(max-width:800px){
html{
font-size:10px;
}
.container h1{
font-size:3rem;
line-height:30px;
margin-bottom:10px;
}
.container{
position: absolute;
left:40%;
top:60%;
}
header{
width:100%;
}
.fa-times,.fa-bars{
display: block;
font-size:3rem;
}
.fa-times{
display: none;
}
.bar{
color:#fff;
font-size:3rem;
position: absolute;
right:10px;
top:5px;
}
#topnav{
background:none;
background-color: red;
height:50px;
transition:all 0.9s linear;
position: relative;
cursor: pointer;
}
.logo{
display: none;
}
.navigation{
display: block;
}
.navbar ul{
display: block;
padding-top:50px;
display:block;
background:red;
}
.navbar ul li {
padding:10px;
font-size:1.3rem;
}
.socialmedia{
display: none;
}
.socialmedia1 i{
padding:0px 10px;
margin:10px;
}
}
0 Comments
Connect with us