Third Alanı Kodlaması

April 15, 2018 Berkay Gülyaz 0 Comments

Hepinize merhaba arkadaşlar. Geçen haftaki yazımda second alanını kodlamıştık. Bu hafta ise “third” alanını kodlayacağız. Kodlamadan önce alanı değerlendirelim. Yani neyi nasıl yapacağımızı. Aslında third alanı second alanına çok benziyor sadece 1-2 ufak fark var. Bu alanı yine ikiye ayıracağız. Bu sefer sol tarafta resim sağ tarafta ise yazılar olacak. Hadi başlayalım.

İlk önce her zamanki gibi third alanını belirten divleri açıp, bu divlerin içerisine de containerı ekliyoruz.

HTML

<div id="third">
   <div class="container">

   </div><!--container-->
</div><!--third-->

Şimdi işe bu alanı stillendirelim.

CSS

#third{
	width: 100%;
	display: inline-block;
}

Belki aklınıza gelmiştir neden padding vermedik? Onun cevabını birazdan göreceksiniz. Alanı iki parçaya böleceğiz demiştim. Right ve left olarak. İlk önce left alanını yapalım. Left adında bir div açıp içerisine img ekleyelim.

HTML

<div id="third">
   <div class="container">
       <div class="left">
	  <img src="assets/img/phone.png">
	</div>

    </div><!--container-->
</div><!--third-->

CSS

#third .left{
	width: 40%;
	padding-top: 145px;
	display: inline-block;
	padding-left: 64px;
	float: left;
	height: 400px;
        overflow: hidden;
}

Yine height ve overflow verdik. Çünkü resmin yarısı lazımdı bu yüzden resmin görünecek kısmı kadar bir yükseklik verip geri kalanı overflow özelliğiyle gizledik. Şimdi ise sağ alanın kodlamasına geçelim. Sağ alanda bir adet başlık, bir paragraf,buton ve bir sonraki veya bir önceki yazıya geçmek için 2 adet slider resmi bulunuyor. Tüm tagleri verip stillendirelim.

HTML

<div id="third">
    <div class="container">
	<div class="left">
	    <img src="assets/img/phone.png">
	</div>
	<div class="right">
	    <h2>DESIGN</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
		   sed do eiusmod tempor incididunt ut labore et dolore 
		   magna aliqua. Ut enim ad minim veniam, quis 
		   nostrud exercitation ullamco laboris nisi 
		   ut aliquip ex ea commodo consequat.</p>
		<a href="#" class="button">LEARN MORE</a>	
		<span class="numbers">01/05</span>
		<ul class="icons">
		   <li><img src="assets/img/left.png"></li>
		   <li><img src="assets/img/right.png"></li>
		</ul>
		</div>
     </div><!--container-->
</div><!--third-->

CSS

#third .right{
	float: right;
	display: inline-block;
	width: 40%;
	padding-top: 145px;
	padding-bottom: 77px;
}

Hatırlarsanız third alanını stillendirirken padding vermemiştik. Sebebi işte yukarıda. Third alanında yüksekliği içerisine açtığımız right alanı belirliyor. Css’e devam edelim.

CSS

#third .right h2{
	color: #16a085;
	width: 100%;
	font-size: 20px;
	display: block;
	font-family: 'Poppins', sans-serif;
}
#third .right p{
	color: #373737;
	display: block;
	margin-top: 40px;
	font-size: 9pt;
	font-family: 'Poppins', sans-serif;
	line-height: 20pt;
}
#third .right .button{
	display: inline-block;
	margin-top: 40px;
	padding: 20px 40px 20px 40px;
	background-color: #16a085;
	border-radius: 3px;/*Butonun kenarlarını yumuşatmak için kullanıyoruz.*/
	font-size: 9pt;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
}
#third .right .numbers{
	font-size: 12px;
        width: 100%;
        display: block;
        font-family: 'Poppins', sans-serif;
        color: #111111;
	font-weight: bold;
	margin-top:40px; 
	padding-left: 3px;
}
#third .right .icons{
	float: left;
	display: inline-block;
	width: 100%;
}
#third .right .icons li{
	float: left;
}
#third .right .icons li img{
	margin-right: 15px;
	margin-top: 8px;
	cursor: pointer;/*İmleci tıklama işareti şeklinde yapar*/
}

Kodlamayı bitirince aşağıdaki gibi olacak.

Hepinize iyi çalışmalar 🙂 .

Leave a Reply:

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