Bootstrap 4 İle Profil Kartı

Bugün ki yazımda sizlere Bootstrap 4 ile responsive bir şekilde profil kartı tasarlamayı göstereceğim.

1-Bootstrap 4 ve Font-Awesome yükleyin.

Bu sayfadan Bootstrap 4’ü yükleyebilirsiniz.

Bu sayfadan font-awesome’u yükleyebilirsiniz.

2-Dosyaları oluşturun.

index.php ve style.css adlarında iki adet dosya oluşturun ve geliştirmeye hazır olun.

Her şey tamam olduktan sonra kartımızın görünümü bu şekilde olacaktır;

index.php

<div class="card" style="width: 18rem; background: #f1f1f1; color: #333">
	  <img src="https://picsum.photos/id/35/340/160" class="card-img-top" alt="...">
	  <img src="https://it.gravatar.com/userimage/3434071/205a00fc16ae537b26b56f40790910fe.jpg?size=140" height="40px" class="card-img-top kart-resim" alt="...">
	  <div class="card-body kart-icerik">
		<h5 class="card-title text-center">Kadir Balçın</h5>
		<p class="card-text text-center">Web Developer</p>
	  </div>
	  <div class="card-body kart-sosyal-bolum text-center">
		<i class="fab fa-instagram" id="instagram"></i>
		<i class="fab fa-twitter" id="twitter"></i>
		<i class="fab fa-facebook" id="facebook"></i>
		<i class="fab fa-linkedin" id="linkedin"></i>
		<i class="fab fa-github" id="github"></i>
	  </div>
	</div>

index.css

.kart-resim {
	width: 140px;
	height: 140px;
	border: 3px solid #ddd;
	padding: 4px;
	border-radius: 50%;
	position: absolute;
	top: 80px;
	left: 70px;
}

.kart-icerik {
	margin-top: 80px;
}

.kart-sosyal-bolum i{
	margin-left: 18px;
	-webkit-transition: .5s all ease;
	-moz-transition: .5s all ease;
	transition: .5s all ease;
}

.kart-sosyal-bolum i:hover {
	font-size:30px;
	margin-top:-10px;
}

#instagram {
	color: #517fa4
}

#facebook {
	color: #3b5998;
}

#twitter {
	color: #00aced;
}

#linkedin {
	color: #517fa4
}

#github {
	color: gray;
}

Her hangi bir hata ve istek durumlarında yorum yapmayı unutmayınız. Güle güle kullanın.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir