Süper Üye
Merhabalar,bugün basit bir hareketli web sitesi oluşturuyoruz.Siz değerli vaktinizi harcamayın diye direk kodları alt tarafta paylaşacağım.Tek yapmanız gereken dosya yollarını (C:\Users\User\Desktop\Klasör\) kendinize göre ayarlamak.Ayrıca projede kullanılan görsellere de
Bağlantıları görmek için lütfen
Giriş Yap
ulaşabilirsiniz.
HTML:
<html>
<head>
<title>HTML&CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="navbar">
<nav>
<div class="logo">
<img src="C:\Users\User\Desktop\Klasör\logo.png">
</div>
<div class="nav-link">
<ul>
<li class="active"><a href="#">ANASAYFA</a></li>
<li><a href="#">ETKİNLİKLER</a></li>
<li><a href="#">TURNUVALAR</a></li>
<li><a href="#">HAKKIMIZDA</a></li>
</ul>
</div>
<div class="menu-icon"></div>
<img src="C:\Users\User\Desktop\Klasör\menu.png">
</div>
</nav>
</div>
<div class="content">
<div class="social-icons">
<img src="C:\Users\User\Desktop\Klasör\instagram.png">
<img src="C:\Users\User\Desktop\Klasör\facebook.png">
<img src="C:\Users\User\Desktop\Klasör\twitter.png">
<img src="C:\Users\User\Desktop\Klasör\youtube.png">
</div>
<div class="search-box">
<input type="text" placeholder="Ara">
<img src="C:\Users\User\Desktop\Klasör\search.png">
</div>
</div>
<img src="C:\Users\User\Desktop\Klasör\cloud.png" id="clouds">
<img src="C:\Users\User\Desktop\Klasör\uçak.png" id="airplane">
<div id="paraşüt">
<img src="C:\Users\User\Desktop\Klasör\paraşüt.png" class="paraşüt1">
<img src="C:\Users\User\Desktop\Klasör\paraşüt.png"class="paraşüt2">
<img src="C:\Users\User\Desktop\Klasör\paraşüt.png"class="paraşüt3">
</div>
</body>
</html>
CSS:
*{
margin:0;
padding:0;
font-family:sans-serif;
}
.main{
height:100vh;
background:linear-gradient(#21b3e1,#fff);
overflow:hidden;
position:relative;
}
.navbar{
width:100%;
border-bottom:1px solid #b7e7f6;
}
nav{
width:80%;
margin:20px auto 0;
display:flex;
align-items:center;
position:sticky;
z-index:2;
}
.logo{
flex-basis: 15%;
}
.logo img{
width:100px;
}
.nav-link{
flex: 1;
text-align:center;
}
.nav-link ul li{
display:inline-block;
list-style:none;
padding:15px 5px;
margin:0 25px;
position:relative;
}
.nav-link ul li a{
text-decoration:none;
color:#b7e7f6;
}
.nav-link ul li::after{
content:'';
width:100%;
height:3px;
background:transparent;
position:absolute;
bottom:0;
left:0;
}
.nav-link ul li:hover::after{
background:#fff;
}
.active::after{
background:#fff !important;
}
.menu-icon{
flex-basis:15%;
}
.menu-icon img{
width:35px;
float:right;
}
.content{
width:300px;
position:absolute;
top:90px;
left:50%;
transform:translateX(-50%);
text-align:center;
z-index:2;
}
.social-icons img{
width:18px;
margin:0 10px;
cursor:pointer;
}
.search-box{
margin-top:20px;
border:1px solid #b7e7f6;
border-radius:30px;
display:flex;
align-items:center;
background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0));
}
.search-box input{
width:100%;
padding:7px 15px;
border-radius:30px;
border:0;
outline:none;
background:transparent;
color:#b7e7f6;
}
::placeholder{
color:#b7e7f6;
}
.search-box img{
width:20px;
margin:5px 10px;
}
#clouds{
width:100%;
position:absolute;
left:0;
top:100px;
animation:clouds 5s linear infinite;
}
@keyframes clouds{
0%{
top:-100px;
}
20%{
top:100px;
}
80%{
top:100px;
}
100%{
top:100px;
}
}
#airplane{
width:200px;
position:absolute;
top:180px;
left:-250px;
z-index:2;
animation: fly 10s linear infinite;
}
@keyframes fly{
0%{
left: -250px;
}
20%{
left: 250px;
}
80%{
top:250px;
}
100%{
left:110%;
}
}
#paraşüt{
height:400px;
width:800px;
position:absolute;
bottom:-450px;
left:50%;
transform:translateX(-50%);
animation: hotairballoon 10s linear infinite;
}
@keyframes paraşüt{
0%{
bottom:-450px;
}
20%{
bottom:100px;
}
80%{
bottom:100px;
}
100%{
bottom:-450px;
}
}
.paraşüt1{
width:150px;
opacity:0.4;
}
.paraşüt2{
width:350px;
}
.paraşüt3{
width:180px;
opacity:0.5;
}
#myImg{
width:70px;
height:70px;
position:absolute;
bottom:30px;
left:50%;
transform:translateX(-50%);
cursor:pointer;
}
Son düzenleme:
