Tek Sayfa Responsive Web Sitesi Yapımı - One Page Responsive Web Site - HTML5 - CSS3 - Part4
Bu video uygulama dersimizde tek sayfa bir responsive web sitesi yapımına devam ediyoruz. ve sitemizin sosyal medya kanallarını yerleştiriyoruz. Birde ek olarak footer yapıyoruz ve sitemizi bitirmeye çok yakınız. Sizlerde derslerimizi beğendiyseniz 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="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<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">
<img src="logo.png">
<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">
<article class="boxB">
<ul>
<li class="box1">
<div class="yazı1">
<h2>Web Sitem</h2>
<p>Bu kanaldan online ders videolarına ulaşabilirsiniz.</p>
</div>
</li>
<li class="box2">
<div class="yazı2">
<h2>Web Sitem</h2>
<p>Bu kanaldan online ders videolarına ulaşabilirsiniz.</p>
</div>
</li>
<li class="box2">
<div class="yazı3">
<h2>Web Sitem</h2>
<p>Bu kanaldan online ders videolarına ulaşabilirsiniz.</p>
</div>
</li>
</ul>
</article>
</div>
<div id="s5" class="sayfa">
<div class="filtre"></div>
</div>
<div id="s6" class="bant">
<div class="sosyal">
<ul>
<li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li>
</ul>
<h1>Web Sitem</h1>
<p>Şu anda WEB SİTEM kanalının videosunu izlemektesiniz</p>
<p>Kanalımıza abone olmayı unutmayın ;)</p>
<p>Like +1</p>
</div>
<div class="foot">Copyright © 2017 Tema - Designed by <a href="https://www.youtube.com/channel/UCKgUvuv6kRa1QCs-JkKyiAQ">WEB SİTEM</div>
</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: 4;
}
.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 img{
width: 120px;
height: 100px;
position: absolute;
z-index: 5;
margin-left: 25px;
position: fixed;
}
#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;
}
#s4{
height: 100%;
}
#s4 .boxB{
width: 90%;
margin: 0 auto 0 auto;
}
#s4 .boxB ul{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#s4 .boxB ul li{
position: relative;
list-style: none;
width: 30%;
margin: 0 5% 0 0;
float: left;
background-position: left bottom;
background-position: cover;
min-height: 650px;
}
#s4 .boxB ul li:last-child{
margin: 0 0 0 0;
}
#s4 .boxB ul li .yazı1{
position: absolute;
bottom: 25px;
width: 90%;
height: 90%;
left: 25px;
background-image: url(box/box1.jpg);
background-attachment: fixed;
background-size: cover;
}
#s4 .boxB ul li .yazı1 p{
margin-top: 10%;
text-transform: uppercase;
font-size: 15px;
font-family: arial;
}
#s4 .boxB ul li .yazı1 h2{
margin-top: 120%;
text-transform: uppercase;
font-size: 35px;
font-family: calibri;
}
#s4 .boxB ul li .yazı2{
position: absolute;
bottom: 25px;
width: 90%;
height: 90%;
left: 25px;
background-image: url(box/box2.jpg);
background-attachment: fixed;
background-size: cover;
}
#s4 .boxB ul li .yazı2 p{
margin-top: 10%;
text-transform: uppercase;
font-size: 15px;
font-family: arial;
}
#s4 .boxB ul li .yazı2 h2{
margin-top: 120%;
text-transform: uppercase;
font-size: 35px;
font-family: calibri;
}
#s4 .boxB ul li .yazı3{
position: absolute;
bottom: 25px;
width: 90%;
height: 90%;
left: 25px;
background-image: url(box/box3.jpg);
background-attachment: fixed;
background-size: cover;
}
#s4 .boxB ul li .yazı3 p{
margin-top: 10%;
text-transform: uppercase;
font-size: 15px;
font-family: arial;
}
#s4 .boxB ul li .yazı3 h2{
margin-top: 120%;
text-transform: uppercase;
font-size: 35px;
font-family: calibri;
}
#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;
}
#s6 .sosyal{
position: absolute;
width: 80%;
height: 30%;
min-width: 650px;
text-align: center;
transform: translate(10%,10%);
border: 2px solid grey;
border-radius: 25px;
}
#s6 .sosyal ul{
display: flex;
text-align: center;
position: absolute;
padding-left: 35%;
}
#s6 .sosyal ul li{
background: black;
margin: 8px;
list-style: none;
font-size: 30px;
transition: .5s;
}
#s6 .sosyal ul li a{
width: 40px;
padding: 6px 0;
display: block;
color: white;
}
#s6 .sosyal ul li:nth-child(1){background: #3b5998;}
#s6 .sosyal ul li:nth-child(2){background: #00aced;}
#s6 .sosyal ul li:nth-child(3){background: #007bb6;}
#s6 .sosyal ul li:nth-child(4){background: #cb2027;}
#s6 .sosyal ul li:nth-child(5){background: #bb0000;}
#s6 .sosyal ul li:nth-child(6){background: #dd4b39;}
#s6 .sosyal ul li:hover{
transform: translateY(-8px);
box-shadow: 0 10px 10px rgba(0,0,0,0.6);
}
#s6 .sosyal h1{
padding-top: 6%;
font-family: calibri;
color: #007bb6;
}
#s6 .sosyal p{
font-family: arial;
color: #007bb6;
font-size: 20px;
}
#s6 .foot{
width: 100%;
height: 25px;
background-color: rgba(0,0,0,0.5);
text-align: center;
position: fixed;
bottom: 0px;
font-family: arial;
font-size: 12px;
color: grey;
}
Yorumlar
Yorum Gönder