Tek Sayfa Responsive Web Sitesi Yapımı - One Page Responsive Web Site - HTML5 - CSS3

Tek Sayfa Responsive Web Sitesi Yapımı - One Page Responsive Web Site - HTML5 - CSS3 - Part3

Bu dersimizde sitemize html5 ve css3 kullanarak logo ekledik ve misyon sayfamıza görsellik katan 3 tane kutu ekleyerek içerisine bilgiler ekledik. Bundan sonraki video da iletişim bölümümüzü oluşturacağız ve footer yapacağız sitemize. Yeni derslerden haberdar olmak için kanalımıza abone olmayı unutmayın.
İzlediğiniz için teşekkürler.

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">
<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>
</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 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;
}

HTML ve CSS DERSLERİ

Bu Blogda Ara