CV card

cv-card.markdown

CV card

A Pen by HARUN PEHLİVAN on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,500,700,800,900&amp;subset=cyrillic-ext" rel="stylesheet">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<div class="card">
	
	<div class="photo-wrapper">
	</div>
	<div class="content">
		
		<div class="speciality">PUBLİSHER,DIGITAL CONTENT PRODUCER</div>
		<h1>HARUN PEHLİVAN</h1>
		<h2>HP IT GROUP (TEBIM TEBITAGEM) TTGRT FOUNDER CEO</h2>
		
		<p><i class="fa fa-calendar fa-fw w3-margin-right"></i>22/07/1984 Çorum'da Doğdum Aslen Samsun'un Havza ilçesi 
    </p>
		
		<a href="https://vk.com/harunpehlivan" target="_blank" class="social-vk">
			<i class="fab fa-vk"></i> HARUN PEHLİVAN
		</a>
		
		
		<a href="https://t.me/harunpehlivan" target="_blank" class="social-tg">
			<i class="fab fa-telegram-plane"></i> Telegram
		</a>

		
	</div>
	
</div>

style.css

html {
	height: 100%;
}

body {
	height: 100%;
  background-color: LightGreen;
	background-image: url('https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1638301858/responsivecomingsoon_ed5wod.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Alegreya Sans', sans-serif;

}

.card {
	width: 600px;
	height: 300px;
	background-color: #fff;
	
	display: flex;
	flex-direction: row;
	
	padding: 35px;
}

.photo-wrapper {
	width: 200px;
	height: 100%;
	background-color: LightSeaGreen;
	margin-right: 35px;
	background-image: url('https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1651776169/IMG_20220504_183211_huraai.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.photo-img {
	width: 200px;
}

.content {
	width: 365px;
	height: 100%;
/* 	background-color: LightSlateGray; */
}

.speciality {
	display: inline-block;
	padding: 5px 10px;
	background-color: MediumSpringGreen;
	color: #fff;
	margin-bottom: 20px;
}

h1 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-weight: 900;
	color: #37474F;
}

h2 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-weight: 500;
	color: #607D8B;
	font-size: 18px;
}

p {
	font-size: 14px;
}

.social-vk {
	display: inline-block;
	padding: 5px 10px;
	background-color: #45668e;
	color: #fff;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.social-vk:hover {
	background-color: #1565C0;
}

.social-vk i {
	margin-right: 5px;
}

.social-tg {
	display: inline-block;
	padding: 5px 10px;
	background-color: #0088cc;
	color: #fff;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.social-tg:hover {
	background-color: #1565C0;
}

.social-tg i {
	margin-right: 5px;
}