Create traveling site (Dark Mode) using HTML and CSS
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="dark.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="saidbar">
<header class="logo">
<h1>TRAVEL</h1>
</header>
<div class="saidbarmenu">
<nav>
<ul class="nav">
<li class="Home"> <i class="fa fa-home"></i><a href="" > HOME </a> </li>
<li> <i class="fa fa-history"></i><a href="" > HISTORY </a> </li>
<li> <i class="fa fa-calendar"></i><a href="" > RESERVATIONS </a> </li>
<li> <i class="fa fa-flag"></i><a href="" > REPORTS </a> </li>
<li> <i class="fa fa-cogs"></i><a href="" > SETTINGS </a> </li>
</ul>
<ul class="logout">
<li> <i class="fa fa-sign-out"></i><a href="" class="Home"> LOGOUT </a> </li>
</ul>
</nav>
</div>
</div>
<div class="content">
<nav class="mainNav">
<div class="navRight">
<h4>Hi Ayoub ,</h4>
<h1>Travel Destinations</h1>
</div>
<div class="navLeft">
<div class="searchdiv">
<i class="fa fa-search"></i>
<input type="search" name="" id="searchin">
</div>
<div class="profieimage">
<img src="avatar.jpg">
</div>
</div>
</nav>
<div class="imagetitle"><div class="text"><i> with us you can traveling for anywhere </i></div></div><br>
<div class="maincontent">
<div class="title"><h3>Travel Destinations</h3></div>
<div class="cards">
<div class="card">
<div class="information">
<img class="image" src="11.jpg" alt="">
<div class="name">
<h4> <i>France</i> </h4>
</div>
</div>
<div class="contact">
<i>date : 15-25/12/2022 <br>
price: 1500$</i>
</div>
</div>
<div class="card">
<div class="information">
<img class="image" src="12.jpg" alt="">
<div class="name">
<h4> <i>Malaysia</i> </h4>
</div>
</div>
<div class="contact">
<i>date : 15-25/12/2022 <br>
price: 1500$</i>
</div>
</div>
<div class="card">
<div class="information">
<img class="image" src="13.jpg" alt="">
<div class="name">
<h4> <i>Britain</i> </h4>
</div>
</div>
<div class="contact">
<i>date : 15-25/12/2022 <br>
price: 1500$</i>
</div>
</div>
</div>
<div class="seemore">
<div class="seelink">
<a href="#">See More</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS code
*{
margin: 0;
padding: 0;
color: white;
}
.container{
display: flex;
align-items: stretch;
width: 100%;
height: 41rem;
background-color: rgba(0, 0, 0, 0.85);
}
.saidbar{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 18%;
height: 100%;
}
header.logo{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 16%;
}
.saidbarmenu{
width: 100%;
height: 83%;
/*background-color: blue;*/
}
.saidbarmenu nav{
display: flex;
flex-direction: column;
justify-content: space-between;
/*background-color: brown;*/
height: 345px;
}
.nav{
width: 95%;
height: 200px;
/*background-color: burlywood;*/
display: flex;
flex-direction: column;
justify-content: space-between;
}
.logout{
display: flex;
align-items: center;
width: 95%;
height: 120px;
/*background-color: rgb(202, 178, 39);*/
}
nav ul>li{
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 35px;
cursor: pointer;
/*background-color: chartreuse;*/
}
nav ul>li>i{
padding-left: 20%;
}
nav ul>li>a{
text-decoration: none;
padding-left: 8%;
}
nav ul>li>a::after{
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 4px;
width: 68%;
height: 1px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 15px;
transition: 0.5s;
}
nav ul>li.Home{
background: linear-gradient(to right, #121efa44,#0b17f83a,#111cf736,#212cfd18,#1b26fa02 );
border-left: solid 4px #121efa;
}
nav ul>li:hover{
background: linear-gradient(to right, #1b26fa02,#212cfd18,#111cf736,#0b17f83a,#121efa44 );
border-left: solid 4px #121efa44;
}
.content{
display: flex;
flex-direction: column;
align-items: center;
border-radius: 50px 0px 0px 50px;
text-align: right;
width: 82%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
nav.mainNav{
display: flex;
/*align-items: center;
justify-content: center;
*/
width: 100%;
height: 17%;
}
.navRight{
display: flex;
flex-direction: column;
justify-content: center;
/*align-items: center;*/
text-align: left;
width: 25%;
height: 100%;
padding-left: 55px;
}
.navLeft{
display: flex;
flex-wrap: wrap;
justify-content: center;
justify-content: space-between;
align-items: center;
margin-left: auto;
width: 40%;
height: 100%;
}
.searchdiv{
background-color: rgba(0, 0, 0, 0.15);
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
}
.searchdiv > i{
font-size: 20px;
color: #777;
padding: 10px;
}
#searchin{
flex: 1;
height: 40px;
border: none;
font-size: 18px;
background-color: rgba(0, 0, 0, 0);
}
#searchin:focus{
outline: none;
}
.profieimage{
width: 50px;
height: 50px;
border-radius: 50px;
margin-right: 100px;
}
.profieimage > img{
width: 100%;
height: 100%;
border-radius: 50px;
margin-right: -35px;
}
.imagetitle{
width: 90%;
height: 140px;
border-radius: 30px;
background-color: white;
background-image: url(1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text{
display: flex;
justify-content: center;
align-items:flex-end;
width: 100%;
height: 30%;
border-radius: 35px;
text-align: center;
}
.text i{
width: 28%;
height: 50%;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
border-radius: 8px;
}
.maincontent{
width: 90%;
height: 340px;
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.03);
}
.title{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 60px;
}
.title h3::before{
content: "";
display: block;
width: 155px;
height: 2px;
background-color: rgba(0, 0, 0, 0.15);
top: 53%;
position: absolute;
}
.cards{
display: flex;
justify-content: center;
flex-wrap: wrap;
justify-content: space-around;
width: 90%;
height: 73%;
margin: 0% 5%;
}
.card{
width: 22%;
height: 185px;
background-color: rgba(0, 123, 255, 0.048);
border-radius: 25px 25px 0 0;
box-shadow: rgb(38, 57, 77) 0px 20px 50px -10px;
perspective: 100px;
transition: all .4s ease-in-out;
}
.card:hover{
height: 230px;
}
.information{
width: 200px;
height: 185px;
background: rgb(69, 70, 72);
border-radius: 25px 25px 0 0;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.image{
width: 200px;
height: 150px;
padding: 0;
margin: 0;
border-radius: 25px 25px 0 0;
}
.name{
width: 100%;
height: 30px;
color: white;
text-align: center;
background: #454648;
}
.contact{
width: 90%;
display: inline-flex;
justify-content: center;
position: fixed;
text-align: center;
bottom: 5px;
left: 5%;
color: white;
}
.contact a{
padding: 10px 15px;
border-radius: 25px;
color: black;
background: white;
}
.seemore{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 30px;
}
.seelink{
position: relative;
width: 120px;
height: 32px;
}
.seelink::before{
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -3px;
width: 80%;
height: 10px;
background: rgb(55, 84, 114);
box-shadow: rgb(38, 57, 77) 0px 20px 50px -10px;
border-radius: 15px;
transition: 0.5s;
}
.seelink:hover::before{
bottom: 0;
width: 90%;
height: 50%;
border-radius: 15px;
transition-delay: 0.2s;
}
.seelink::after{
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -2px;
width: 80%;
height: 10px;
background: rgb(55, 84, 114);
box-shadow: rgb(38, 57, 77) 0px 20px 50px 5px;
border-radius: 15px;
transition: 0.5s;
}
.seelink:hover::after{
top: 0;
width: 90%;
height: 50%;
border-radius: 15px;
transition-delay: 0.2s;
}
.seelink > a{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
letter-spacing: 1px;
border-radius: 15px;
background-color: rgba(255, 255, 255, 0.05);
box-shadow: 0px 15px 35px rgba(0,0,0,0.2);
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
transition: all .4s ease-in-out;
backdrop-filter: blur(15px);
z-index: 1;
}
.seelink a::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(to left,rgba(255,255,255,0.15),transparent);
transform: skewX(45deg) translateX(0);
transition: 0.5s;
}
.seelink:hover a::before{
transform: skewX(45deg) translateX(200px);
}
video link :- https://youtu.be/MeTDKQPdcLU
channel link :- https://www.youtube.com/channel/UC1DFWpD1k1PtxIzYbdBAj6g
Add your comment
Signature :- Ayoub Shindi (Dev AAS).
Picture?
ReplyDeleteThanks You!
Hello, can you make a responsive web for this source code?
ReplyDelete