【CSS】名刺の作り方【HTML】 - 頑張りすぎず頑張ろう

よくブログに載ってるプロフィールの名刺

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web名刺</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
　<div class="card">
<div class="avatar">
<div class="avatar-img"></div>
</div>
<div class="profile">
<ul class="me">
<li class="role">フロントエンドエンジニア</li>
<li class="name">ペリー</li>
<li class="company">株式会社Givery</li>
</ul>
<div class="contact">
<a href="https://twitter.com/codeprep_jp" target="_blank" rel="noopener noreferrer">
@codeprep_jp
</a>
</div>
</div>
</div>
</body>
</html>

style.css

画像はあらかじめ用意しておく

@import url('https://fonts.googleapis.com/css?family=Lato');

ul, li {
list-style: none;
margin: 0;
padding: 0;
}

.card {
background: #0D47A1;
font-family: 'Lato', sans-serif;
box-shadow: 2px 2px 4px #999;
width: 250px;
border: 1px solid #f5f5f5;
border-radius: 6px;
}

.avatar {
height: 85px;
padding-top: 20px;
background: #fff;
}

.avatar-img {
width: 150px;
height: 150px;
background-image: url('assets/avatar.png');
background-color: #fff;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
border-radius: 50%;
border: 3px solid #f5f5f5;
margin: 0 auto;
}

.profile {
padding-top: 85px;
}

.me {
margin-bottom: 20px;
color: #fff;
text-align: center;
}

.name {
font-size: 26px;
margin-bottom: 5px;
}

.role, .company {
color: #e3e3e3;
}

.contact {
padding: 20px 0;
border-top: 1px solid #f5f5f5;
text-align: center;
}

.contact a,
.contact a:link,
.contact a:visited,
.contact a:hover,
.contact a:active {
color: #fff;
}