Second Alanı Kodlaması

April 7, 2018 Berkay Gülyaz 0 Comments

Hepinize merhaba arkadaşlar. Geçen yazımda banner alanını kodlamıştık. Bu yazımda ise banner alanının altında bulunan ve tasarımcının “second” diye adlandırdığı bölümü kodlayacağız. Hadi başlayalım.

İlk önce her zamanki gibi genel bir div açıp id veriyoruz.

HTML

<div id="second">

</div><!--second-->

Hatırlayacağınız üzere genel divde bir tane id olur demiştim.Şimdi bu divi stillendirelim.

CSS

#second{
	width:100%;
	padding-top: 110px;
	padding-bottom: 0px;/*Bir sonraki alan(yani third alanı) bu alanın üzerine gelebilmesi için*/
	display: inline-block;
	background-color: #ffffff;
}

Tabi hemen unutmadan containerı ekleyelim.

HTML

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

    </div><!--container-->
</div><!--second-->

Şimdi second alanı iki parçaya ayrılıyor. Sol taraf yazıların ve butonun bulunduğu kısım. Sağ tarafta ise resmin bulunduğu kısım. Bu yüzden de kodlamada böyle yapacağız. Left ve right olmak üzere iki parçaya ayıracağız.

HTML

<div id="second">
    <div class="container">
	<div class="left">

        </div><!--left-->
    </div><!--container-->
</div><!--second-->

Left alanını stillendirelim.

CSS

#second .left{
	width: 40%;
	display: inline-block;
	padding-bottom: 110px;
	padding-left: 64px;/*Container içerisinde sol taraftan 64px kendisini itiyor*/
	float: left;
}

Şimdi left alanı içerisinde bulunan başlık paragraf ve butonu ekleyelim.

HTML

<div id="second"><!--Projede böyle adlnadırıldığı için böyle bir id verdiğini yazarsın-->
    <div class="container">
	<div class="left"><!--Bu alanın 2 parçadan oluştuğunu yazarsın-->
	    <h2>Rappresent your life with a simple photo</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">GET STARTED</a>	
	</div><!--left-->
    </div><!--container-->
</div><!--second-->

Buradaki paragraf(p) tag’i içerisinde ki yazılar Lorem Ipsum sayfasından alıntıdır. Siz de kendi projelerinizde bu sayfayı kullanabilirsiniz. Şimdi bunları stillendirelim.

CSS

#second .left h2{
	color:#16a085;
	font-size: 20px;
	font-family: 'Poppins', sans-serif;
	width: 100%;/*Bulunduğu %40'lık alanın tamamını kaplasın ki yanına başka bir yazı veya resim herhangi bir şey gelemesin*/
	display: block;
}
#second .left p{
	color: #373737;
	display: block;
	margin-top: 50px;
	font-size: 9pt;
	font-family: 'Poppins', sans-serif;
	line-height: 20pt;
}
#second .left .button{
	display: inline-block;
	margin-top: 48px;
	padding: 20px 40px 20px 40px;/*Sıralaması: Yukarıdan 20px, Sağdan 40px, Aşağıdan 20px, Soldan 40px itmesini sağlıyoruz.*/
	background-color: #16a085;
	border-radius: 3px;
	font-size: 9pt;
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
}

Sıra geldi sağ tarafın kodlanmasına. Eğer ki tasarıma baktıysanız göreceksiniz ki resim kesilmiş gibi duruyor. Aslında resim kesilmemiştir. Nasıl mı? Hemen gösterelim.

HTML

<div id="second"><!--Projede böyle adlnadırıldığı için böyle bir id verdiğini yazarsın-->
    <div class="container">
	<div class="left"><!--Bu alanın 2 parçadan oluştuğunu yazarsın-->
	    <h2>Rappresent your life with a simple photo</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">GET STARTED</a>	
	</div><!--left-->
	<div class="right">
	    <img src="assets/img/hand.png">
       </div><!--right-->
     </div><!--container-->
</div><!--second-->

CSS

#second .right{
	width: 50%;
	float: right;
	display: inline-block;
	height: 328px;
        overflow: hidden;
}
#second .right img{
	width: 500px;
	height: 545px;
}

Yukarıdaki kodda right classına height ve owerflow verdim. Height’ı vermemin amacı right alanına bir boyut atıyorum ve overflow koduyla ise 328px dışında kalan alanları gizliyorum. Resime ise genişlik ve yükseklik vermemin amacı ise container içerisine sığmasını sağlamak.

Kodlamayı bitirdiğinizde aşağıdaki gibi olacaktır.

Hepinize iyi çalışmalar 🙂

Leave a Reply:

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