Notes

*{
margin:0px;
padding:0px;
}
body, html{
height: 100%;box-shadow: inset 0 0 200px
}


.box{
background: #ddd;
border: 2px solid #fff;
box-shadow: 0 0 3px rgba(0,0,0,0.5), inset 0 0 100px rgba(0,0,0,0.4);
float: right;
height: 200px;
margin: 60px;padding: 60px;
margin-top: 100px;
position: relative;
width: 200px;
transition: background 0.3s ease-out;
}
.box p{
color: #eee;
font-size: 22px;
line-height: 34px;
padding: 12px;
opacity: 0;
text-align: left;
margin-top: 45px;
position: absolute;
top: 0;
}
.box img{
height: 200px;
width: 200px;
opacity: 1;
display: block;
transition: opacity 0.3s ease-in-out;
}
.box:hover img{
opacity: 0;
}
/* box colors */
.box:hover p{
opacity: 5;
transition: opacity .6s ease-in-out;
}
.box:nth-child(1):hover{
background: #ff0033;
}
.box:nth-child(2):hover{
background: #ff0033;
}





nav{

position: absolute;
height: 100px;
width: 100%;
text-align: center;
line-height: 140px;
z-index: 2;

opacity: 4;

}

nav a{
color:#FFF;
font-family: 'Poppins', sans-serif;
text-decoration: none;
font-size:20px;
margin-left:15px;
padding: 12px 12px;
}
nav a:hover{
background-color: #ff0033;
color:#FFF;
}
.gorsel{
height: 50%;
background-color: lightblue;
background-size: cover;
background-attachment: fixed;
}
.gorsel2{
height: 90%;
background-color: lightblue;
background-size: cover;
background-attachment: fixed;
animation-delay: 1s;
}
.gorsel3{
height: 90%;
background-color: lightblue;
background-size: cover;
background-attachment: fixed;
animation-delay: 1s;
}
.bant1{
height: 500px;
background-color: #fff;
}
.bant2{
height: 50%;
background-color: #fff;
background-image: url("images/question-mark.png");
background-repeat:no-repeat;
background-position: right;

}
.bant2 h1{
font-family: 'Lato', sans-serif;
font-size: 90px;
color:#ff0033;
top: 100px;
text-align: center;
}
.bant2 p{font-weight: bold;text-shadow: 1px 1px 1px #ccc;
color: #ff0033;
font-size: 25px;
font-family: 'Lato', sans-serif;

text-align: center;
}
.bant3{
height: 10%;
background-color: #272822;
opacity: 1;
}
.bant3 .footer{
top: 0;
margin-top: 0%;
}
.bant3 .footer p{
left:0;
color:#fff;
text-align: center;
font-size: 20px;
line-height:80px;
font-family:sans-serif;


}






#gor1{
background-image: url("images/2.jpg");
background-size: cover;
}
#gor2{
background-image: url("images/1.jpg");

}
#gor3{
background-image: url("images/3.jpg");

}


.anaSayfa{
position: absolute;
float:left;
}
.anaYazi{
width: 100%;
height: 100%;
margin-top: 250px;
z-index: 1;
text-align: center;
}
.anaYazi h1{
font-family: 'Lato', sans-serif;
font-size: 90px;
color:#ff0033;
}
.anaYazi p{
color: #fff;
font-size: 25px;
font-family: 'Lato', sans-serif;
margin-bottom: 40px;
letter-spacing:2px;
}
.anaYazi span{
color:#FFF;
padding: 20px 20px;
background-color: #ff0033;
font-size: 19px;
border:1px solid #ff0033;
border-radius: 5px;
font-family: 'Lato', sans-serif;
}
.anaYazi span:hover{
background-color: #fff;
color:#ff0033;
cursor:pointer;
}
.anaFiltre{
width: 100%;
height: 100%;
opacity: 0.34;
background-color: #000;
z-index: 0;
}







.anaSayfaa{
position: absolute;
float:left;
}
.anaYazii{
width: 100%;
height: 90%;
margin-top: 250px;
z-index: 1;
text-align: center;
}
.anaYazii h1{
font-family: 'Lato', sans-serif;
font-size: 90px;
color:#ff0033;
}
.anaYazii p{
color: #fff;
font-size: 25px;
font-family: 'Lato', sans-serif;
margin-bottom: 40px;
letter-spacing:2px;
}

.anaFiltree{
width: 100%;
height: 90%;
opacity: 0.34;
background-color: #000;
z-index: 0;
}








.anaSayfaaa{
position: absolute;
float:left;
}
.anaYaziii{
width: 100%;
height: 90%;
z-index: 1;
text-align: center;
}
.anaYaziii h1{
font-family: 'Lato', sans-serif;
font-size: 90px;
color:#ff0033;
margin-top: 250px;
}
.anaYaziii p{
color: #fff;
font-size: 25px;
font-family: 'Lato', sans-serif;
margin-bottom: 40px;
letter-spacing:2px;
margin-top: 100px;
}

.anaFiltreee{
width: 100%;
height: 90%;
opacity: 0.34;
background-color: #000;
z-index: 0;
}













#bant1{
transition-delay: 1s;
}





.bant1 div{
margin-top: 680px;
position:absolute;
top:50%;
left:15%;
transform:translate(-50%,-50%);
width:300px;
height:300px;
border-radius:50%;
box-shadow:0 0 0 15px #ff0033;
box-sizing:border-box;
text-align:center;
transition:.5s;
background:#ffffff;
}
.bant1 div:hover{border-radius:0;
background:#ffffff;}
.bant1 div:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#ff0033;
z-index:-1;
transform:rotate(-45deg);
border-radius:10px;
}
.bant1 div p{margin:0;
padding:0;
color:#fff;
font-size:16px;
padding:20px;
font-family:sans-serif;
box-sizing:border-box;
position:absolute;
margin-top:50%;
transform:translateY(-50%);
transition:.5s;}
.bant1 div:hover p{
box-shadow:0 0 50px rgba(0,0,0,.5);
}














.bant1 div .ikinci{

position:absolute;
top:50%;
left:55%;
transform:translate(-50%,-50%);
width:300px;
height:300px;
border-radius:50%;
box-shadow:0 0 0 15px #03a9f4;
box-sizing:border-box;
text-align:center;
transition:.5s;
background:#ffffff;
}
.bant1 div .ikinci:hover{border-radius:0;
background:#ffffff;}
.bant1 div .ikinci:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#03a9f4;
z-index:-1;
transform:rotate(-45deg);
border-radius:10px;
}
.bant1 div .ikinci p{margin:0;
padding:0;
color:#fff;
font-size:16px;
padding:20px;
font-family:sans-serif;
box-sizing:border-box;
position:absolute;
margin-top:50%;
transform:translateY(-50%);
transition:.5s;}
.bant1 div .ikinci:hover p{
box-shadow:0 0 50px rgba(0,0,0,.5);
}


.blogger ul{
position:absolute;
top:1100px;
left:896px;
transform:translate(-50%,-50%);
margin:0;
padding:0;
display:flex;
}
.blogger ul li{
list-style:none;
font-family:arial;
font-size:6em;
color:#484848;
letter-spacing:15px;
animation:animate 1.4s linear infinite;
}
@keyframes animate{

0%{
color:#484848;
text-shadow:none;

}
90%{
color:#484848;
text-shadow:none;
}
100%{
color:#ff0033;
text-shadow:0 0 7px #ff0033,0 0 50px #ff0033;
}
}
.blogger ul li:nth-child(1)
{animation-delay:.2s;}
.blogger ul li:nth-child(2)
{animation-delay:.4s;}
.blogger ul li:nth-child(3)
{animation-delay:.6s;}
.blogger ul li:nth-child(4)
{animation-delay:.8s;}
.blogger ul li:nth-child(5)
{animation-delay:1.2s;}
.blogger ul li:nth-child(6)
{animation-delay:1.4s;}
.blogger ul li:nth-child(7)
{animation-delay:1.6s;}


.sizde ul{
position:absolute;
top:950px;
left:896px;
transform:translate(-50%,-50%);
margin:0;
padding:0;
display:flex;
}
.sizde ul li{
list-style:none;
font-family:arial;
font-size:6em;
color:#484848;
letter-spacing:15px;
animation:animate 1.4s linear infinite;
}
@keyframes animate{

0%{
color:#484848;
text-shadow:none;

}
90%{
color:#484848;
text-shadow:none;
}
100%{
color:#ff0033;
text-shadow:0 0 7px #ff0033,0 0 50px #ff0033;
}
}
.sizde ul li:nth-child(1)
{animation-delay:.2s;}
.sizde ul li:nth-child(2)
{animation-delay:.4s;}
.sizde ul li:nth-child(3)
{animation-delay:.6s;}
.sizde ul li:nth-child(4)
{animation-delay:.8s;}
.sizde ul li:nth-child(5)
{animation-delay:1s;}


.olun ul{
position:absolute;
top:1250px;
left:896px;
transform:translate(-50%,-50%);
margin:0;
padding:0;
display:flex;
}
.olun ul li{
list-style:none;
font-family:arial;
font-size:6em;
color:#484848;
letter-spacing:15px;
animation:animate 1.4s linear infinite;
}
@keyframes animate{

0%{
color:#484848;
text-shadow:none;

}
90%{
color:#484848;
text-shadow:none;
}
100%{
color:#ff0033;
text-shadow:0 0 7px #ff0033,0 0 50px #ff0033;
}
}
.olun ul li:nth-child(1)
{animation-delay:.2s;}
.olun ul li:nth-child(2)
{animation-delay:.4s;}
.olun ul li:nth-child(3)
{animation-delay:.6s;}
.olun ul li:nth-child(4)
{animation-delay:.8s;}


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>İngilizce Ödev</title>

<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body><nav>
<a class="HOME" href="#">ANASAYFA</a>
<a class="ABOUT" href="#bant1">HAKKIMIZDA</a>
<a class="WORKS" href="#gor2">ÜRÜNLER</a>
<a class="SERVICES" href="#bant2">HİZMETLER</a>
<a class="PORTFOLIO" href="#gor3">PORTFOLYO</a>
<a class="CONTACT" href="#bant3">İLETİŞİM</a>
</nav>


<div id="gor1" class="gorsel">
<div class="anaSayfa anaYazi">
<h1>BLOGGER OLMAK</h1><br><br>
<p>Blogger Nedir ? Kime Denir? Ne İşe Yarar? Nasıl Para Kazanır? Ne Yapar? Nasıl Yazar Olunur?</p><br><br>
<span>Daha Fazlası İçin</span>
</div>
<div class="anaSayfa anaFiltre"></div>
</div>

<div id="gor1" class="gorsel"></div>
<div id="bant1" class="bant1">
<div>
<p>
<b>İnternet platformunda web sitesini hazırlayarak yazılarını yazmaya paylaşımlarını yapmaya çalışan blog yazarlığını tam zamanlı olarak profesyonel olarak yapan da var yarı zamanlı boş zamanlarında içerikler oluşturarak paylaşımlar yapanlar da var.Hepside Blogger olarak adlandırılmaktadır. </b>
</p>
</div>

<section class="box">
<img src="images/icon-blog-management.png"/>
<p> Kısaca e-Makale yazıp blog sayfasına ekleyen herkese Blogger diyebiliriz. </p>
</section> </div>
<div class="blogger">
<ul>
<li>B</li>
<li>L</li>
<li>O</li>
<li>G</li>
<li>G</li>
<li>E</li>
<li>R</li>

</ul>
</div>

<div class="sizde"><ul>
<li>S</li>
<li>İ</li>
<li>Z</li>
<li>D</li>
<li>E</li>
</ul></div>
<div class="olun"><ul>
<li>O</li>
<li>L</li>
<li>U</li>
<li>N</li>

</ul></div>






<div id="gor2" class="gorsel2">

<div class="anaSayfaa anaYazii">
<h1>BLOGGER İPUÇLARI</h1><br><br>
<p>
Blog okuyucusu çabuk sıkılır. Çok uzun yazıların sonunu getirmekte zorlanabilir. <br>Eğer birkaç ayrı yazı haline getiremiyorsanız sık sık paragraf yapmayı, yazı içinde görsel araçlardan yararlanmayı ihmal etmeyin. <br>Grafik, çizim, fotoğraf... vs ne olursa.<br><br>Yazım tarzınız olsun. Gün geçtikçe daha iyi yazmaya başlayacağınızı siz de fark edeceksiniz.<br> Edebi bir dille yazmaya uğraşmak yerine vermek istediğiniz fikri doğru kelimelerle ve anlaşılır bir şekilde yazıya dökmek<br> çok daha etkili ve kolay bir yöntemdir.</p>
</div>
<div class="anaSayfaa anaFiltree"></div>
</div>

<div id="bant2" class="bant2">
<h1>Nasıl Para Kazanılır?<br><br></h1>
<p>İlk önce blog sayfası açılır. Devamlı yazabileceğiniz bir konu belirleyin. Blogunuz size özel olsun kendi kimliğinizi oluşturun. <br>Makaleler yazın bu sayede devamlı takipçiniz olsun bunun akabinde Google ile anlaşma yapıp adsense alınca ziyaretçileriniz <br>üzerinden para kazanmaya başlayın. </p>
</div>
<div id="gor3" class="gorsel3">

<div class="anaSayfaaa anaYaziii">
<br><h1>Herşey Parmaklarının Ucunda</h1>
<p>Tek Yapman Gereken Adımları İzleyerek Blog Sayfanı Açıp Aramıza Katılmak...</p>
</div>
<div class="anaSayfaaa anaFiltreee"></div>

</div>
<div id="bant3" class="bant3">
<div class="footer">
<p>Copyright ©2018 Designed By Recep Kececi</p>
</div>

</body>
</html>