Banner Alanı Kodlaması

April 1, 2018 Berkay Gülyaz 0 Comments

Merhaba arkadaşlar. Hepinizin hatırlayacağı üzere geçen yazımda header alanını kodlamıştık. Bugün de banner alanına geçiyoruz. Banner alanından bahsetmek gerekirse, Şirketin reklam yaptığı alan olarak tanımlanabilir. Zaten Türkçe’si de afiş anlamına geliyor. Kodlamaya başlayalım. Şimdi geçen en son kaldığımız yerden devam edelim.
Header id’sinin bittiği yerin hemen altına banner id’sini yazalım.

HTML

<div id="main-banner">

</div><!--Banner-->

Banner alanını belirttik. Şimdi bunu stillendirelim.

CSS

#main-banner{
	display: inline-block;
	width: 100%;
	padding-top: 180px;/*Header ve Banner'ın arka planı aynı olduğu için bu kadar yüksek bir pixelde*/
	padding-bottom: 20px;
	background-image: url(../img/header-bg.png);
	background-size: cover;/*Arka plan resminin ekranı tamamen kaplaması için*/
        background-position: center bottom;
        text-align: center;
}

Evet unutmadan hemen söyleyeyim. Css’te header classında bulunan background-color özelliğini silmeniz gerekli.

Container’ımızı da ekleyelim.

HTML

<div id="main-banner">
	<div class="container">

        </div><!--container-->
</div><!--Banner-->

Tasarımda da görmüş olduğunuz üzere bannerın ortasında yazılar ve bir buton var. Onları tanımlayalım.

HTML

<div id="main-banner">
	<div class="container">
	    <div class="txt-banner">
		<p>YOUR LIFE, A PHOTO</p>
		<span>print your life in a simple photo</span>
		<a href="#" class="button">GET STARTED</a>
	</div>


        </div><!--container-->
</div><!--Banner-->

CSS

#main-banner{
	display: inline-block;
	width: 100%;
	padding-top: 180px;
	padding-bottom: 20px;
	background-image: url(../img/header-bg.png);
	background-size: cover;/*Arka plan resminin ekranı tamamen kaplaması için*/
    background-position: center bottom;
    text-align: center;
}
#main-banner .txt-banner{
	text-align: center;/*Yazıların ortada durması için*/
	display: block;
	padding-top: 200px;
	padding-bottom: 200px;
}
#main-banner .txt-banner p{
	display: block;
	color: #ffffff;
	font-size: 35px;
	font-family: 'Poppins', sans-serif;
}
#main-banner .txt-banner span{
	display: block;
	padding-top: 15px;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
}
#main-banner .txt-banner .button{
    background-color: #16a085;
    border-radius: 3px;/*Border'ın Köşelerden Kaç Pixel Eğileceği*/
    color: #ffffff;
    padding: 10px 20px 10px 20px;/*Sıralaması şu şekildedir: Yukarı-Sağ-Aşağı-Sol*/
    text-align: center;/*Butonun Ortada Durması İçin*/
    display: inline-block;
	margin-top: 15px;/*azıyı 15px yukarıya itsin*/
	font-family: 'Poppins', sans-serif;
}
#main-banner .txt-banner .button:hover{
	color: #16a085;
	background-color: #ffffff;
	-webkit-transition: color 0.5s ease-out;/*Choreme için transition*/
	-moz-transition: color 0.5s ease-out;/*Mozilla için transition*/
	-o-transition: color 0.5s ease-out;/*Opera için transition*/
	transition: color 0.5s ease-out;/*Hepsi için geçerli transition*/
}

Sıra geldi sosyal medya linklerimize. Bu linkleri listeliyoruz ki yan yana gelebilsinler.

HTML

<div id="main-banner">
	<div class="container">
		<div class="txt-banner">
			<p>YOUR LIFE, A PHOTO</p>
			<span>print your life in a simple photo</span>
			<a href="#" class="button">GET STARTED</a>
		</div>
		<ul class="social"> 
			<li><a href="#"><img src="assets/img/twitter.png"></a></li>
			<li><a href="#"><img src="assets/img/dribble.png"></a></li>
			<li><a href="#"><img src="assets/img/flickr.png"></a></li>
		</ul>
		</div><!--container-->
	</div><!--Banner-->

CSS

#main-banner .social{
	display: inline-block;
}
#main-banner .social li{
	float: left;/*Yanyana Gelsinler*/
}
#main-banner .social li a{
	margin-right: 15px;/*Sağa doğru 15px itelensinler*/
}

Kodlamayı bitirdiğinzde aşağıdaki gibi olacak.

Hepinize iyi çalışmalar 🙂 .

Leave a Reply:

Your email address will not be published. Required fields are marked *