Profile Cards
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="STYLESHEET" type="text/css" href="web.css">
<title>web design</title>
</head>
<body>
<h1 style="text-align: center;">Use Profile Cards</h1>
<div class="cards">
<img src="team2.jpg" style="width: 100%;">
<h1>John Doe</h1>
<p class="title">CEO & Founder, Example
</p>
<p> Harvard University</p>
<div style="margin: 24px 0;">
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
</div>
<p><button>Contact</button></p>
</div>
</body>
</html>
CSS Cards Style
.cards{
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);
min-width:300%;
margin: auto;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.title{
color: grey;
font-size:18px;
}
button{
background-color: black;
border: none;
color: #fff;
padding: 8px;
text-align: center;
display: inline-block;
width:100%;
cursor: pointer;
font-size: 18px;
}
a{
text-decoration: none;
font-size:27px;
color: #000;
}
button:hover, a:hover{
opacity:0.7;
}
No comments:
Post a Comment