Tek Sayfa Responsive Web Sitesi Yapımı - One Page Responsive Web Site - HTML5 - CSS3 - Part2
Bu video serimizin ikinci bölümünde navigasyonumuzu, yani menümüzü sabitlemeyi öğrendik. Menülerimizi sayfalara yönlendirdik. Ve bu sayfalara geçiş efekti uyguladık. Devam eden videolarda sonuna kadar gidip siteyi yayınlanabilir hale getireceğiz. İzlediğiniz için teşekkürler. Derslerimizi takip edebilmek için kanalımıza abone olmayı unutmayın.
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<title>Web Sitem</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="site.js"></script>
<link rel="stylesheet" href="style.css">
<body>
<nav class="menü">
<a href="#" class="down">ANA SAYFA</a>
<a href="#s2" class="down">BİZ KİMİZ</a>
<a href="#s3" class="down">PROJELER</a>
<a href="#s4" class="down">MİSYON</a>
<a href="#s5" class="down">VİZYON</a>
<a href="#s6" class="down">İLETİŞİM</a>
</nav>
<div id="s1" class="sayfa">
<div class="filtre"></div>
<div class="yazı">
<h1> WEB SİTEM</h1>
<p>Şu anda WEB SİTEM kanalının videosunu izliyorsunuz.</p>
</div>
</div>
<div id="s2" class="bant"></div>
<div id="s3" class="sayfa">
<div class="filtre"></div>
</div>
<div id="s4" class="bant"></div>
<div id="s5" class="sayfa">
<div class="filtre"></div>
</div>
<div id="s6" class="bant"></div>
</body>
</head>
</html>
CSS İÇERİĞİ:
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
}
.menü{
position: fixed;
height: 80px;
width: 100%;
text-align: center;
line-height: 80px;
background-color: rgba(39,13,24,0.4);
z-index: 9999;
}
.menü a{
color: white;
font-family: arial;
font-size: 1.2em;
text-decoration: none;
margin-left: 7px;
padding: 10px 10px;
border-radius: 10px;
transition: 1s;
}
nav a:hover{
background-color: white;
color: #270d18;
}
.sayfa{
height: 100%;
background-color: #bd94db;
background-size: cover;
background-attachment: fixed;
z-index: 9999;
}
.bant{
height: 60%;
background-color: #270d18;
}
#s1{
background-image: url("arkaplan/1.jpg");
}
#s1 .filtre{
position: absolute;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
z-index: 0;
}
#s1 .yazı{
position: absolute;
width: 100%;
height: 100%;
color: white;
z-index: 1;
margin-top: 25%;
text-align: center;
}
#s1 .yazı h1{
color: #e6f6f7;
font-size: 4em;
font-family: calibri;
padding-bottom: 35px;
}
#s1 .yazı p{
color: white;
font-size: 1.5em;
font-family: calibri;
letter-spacing: 4px;
}
#s3{
background-image: url("arkaplan/2.jpg");
}
#s3 .filtre{
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
#s5{
background-image: url("arkaplan/3.jpg");
}
#s5 .filtre{
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
#s6{
height: 40%;
background-color: #484848;
}
JAVASCRİPT İÇERİĞİ:
$(document).ready(function(){
$('.down').click(function(e){
var linkHref = $(this).attr('href');
$('html, body').animate({
scrollTop: $(linkHref).offset().top
}, 1000);
});
});
Yorumlar
Yorum Gönder