Profile-Card-UI is a simple and awesome profile card UI using pure HTML & CSS. It is a good example for us to learn.
How to learn this example?
You can download this example source code, and open index.html to learn.
<!Doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://fonts.googleapis.com/css2?family=Righteous&family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="./css/style.css" rel="stylesheet" type="text/css">
<title>Profile Card UI | YCC</title>
</head>
<body>
<div class="container">
<div class="card-template card-template-1">
<div class="left-part">
<span>John</span>
<img alt="left-circular-image" src="./media/undraw_male_avatar.png" width="100%" />
<div class="social-profiles">
<a href="https://facebook.com/"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="https://twitter.com/"><i class="fa fa-twitter-square fa-2x"></i></a>
<a href="https://linkedin.com/"><i class="fa fa-linkedin-square fa-2x"></i></a>
</div>
</div>
<div class="right-part">
<h1 class="text-center orig-font">John Doe</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Turpis massa tincidunt dui ut ornare lectus sit. Eget nunc scelerisque...
</p>
</div>
</div>
<div class="card-template card-template-2">
<div class="left-part">
<span>Jane</span>
<img alt="left-circular-image" src="./media/undraw_female_avatar.png" width="100%" />
<div class="social-profiles">
<a href="https://facebook.com/"><i class="fa fa-facebook-square fa-2x"></i></a>
<a href="https://twitter.com/"><i class="fa fa-twitter-square fa-2x"></i></a>
<a href="https://linkedin.com/"><i class="fa fa-linkedin-square fa-2x"></i></a>
</div>
</div>
<div class="right-part">
<h1 class="text-center orig-font">Jane Doe</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Turpis massa tincidunt dui ut ornare lectus sit. Eget nunc scelerisque...
</p>
</div>
</div>
</div>
<footer>
<p>
Created with <i class="fa fa-heart"></i> by <span class="orig-font">Your Coding Companion</span>
</p>
</footer>
</body>
</html>
