<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - #1 Day Challenge - Responsive About Me Box #2 </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="about-card">
<div class="col">
<div class='avatar'>
<img src='https://previews.123rf.com/images/alekseiveprev/alekseiveprev1809/alekseiveprev180900125/109676769-contract-vector-icon-in-a-flat-style-isolated-on-a-colored-background-design-icons-of-the-signed-con.jpg' alt='Avatar'/>
</div>
</div>
<div class="col">
<h2>M.Muzammil</h2>
<strong>Web & Graphics Designer</strong>
<div class='inline-social'>
<a href=''><i class='fab fa-facebook'></i></a>
<a href=''><i class='fab fa-twitter'></i></a>
<a href=''><i class='fab fa-whatsapp'></i></a>
<a href=''><i class='fab fa-youtube'></i></a>
</div>
</div>
<div class="col">
<div class='inline-social-long'>
<span><i class='fas fa-compass'></i> <a href=''>Bahawalpur, Punjab Pakistan ( 63261 )</a></span>
<span><i class='fas fa-envelope'></i> <a href=''>https://linkedin.com/softwebtuts</a></span>
<span><i class='fab fa-internet-explorer'></i> <a href=''>https://www.softwebtuts.com</a></span>
<span><i class='fas fa-phone'></i> <a href=''>+92-3037465988</a></span>
</div>
</div>
</div>
<!-- partial -->
</body>
</html>
body{
background-image: radial-gradient(#cecece, #ececec);
font-family:'roboto';
padding-top:30px;
}
.about-card{
background-image: linear-gradient(to left top, #626566, #383E40);
padding:20px;
border-bottom:35px solid #fff;
max-width:700px;
display:block;
margin:auto;
color:#fff;
border-radius: 10px;
}
.col {
float: left;
padding: 10px;
height: 90px;
line-height:10px;
}
.col:nth-child(1){width: 24.53%;}
.col:nth-child(2){width: 26.33%;}
.col:nth-child(3){width: 40%;}
.col:not(:last-child){border-right:2px solid white;}
/* Clear floats after the columns */
.about-card:after {
content: "";
display: table;
clear: both;
}
.col h2,.col strong{
margin-top:0px;
font-weight:400;
text-shadow: 2px 2px rgba(0,0,0,0.75);
}
.col strong{
color:#ffff;
font-weight:300;
text-transform:uppercase;
line-height:1em;
font-size:14px
}
.avatar{
height:140px;
width:140px;
margin-top:-15px;
padding:5px;
}
.avatar img{
width:100%;
background:#fff;
border-radius:50%;
border:5px solid #fff;
}
.inline-social{
margin-top:25px;
}
.inline-social a{
text-decoration:none;
color:#ffbe1b;
background:#fff;
padding: 0px 5px;
font-size:17px;
text-align:center;
border-radius:50px;
margin-right:5%;
}
.fa-youtube {
color:#D80707 ;
}
.fa-whatsapp {
color:#07D84D ;
}
.fa-twitter {
color:#55ACEE ;
}
.fa-facebook {
color:#3b5998 ;
}
.inline-social-long{
line-height:1.5em;
}.inline-social-long a{color:#fff;text-decoration:none;font-size:13px}
.inline-social-long span{
color:#fff;
text-decoration:none;
font-size:20px;
display:block;
}
.inline-social-long span i{
margin:0px 10px;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.about-card{height:auto;text-align:center}
.col:nth-child(1),.col:nth-child(2),.col:nth-child(3){width: 100%;border:none}
.avatar{margin:auto}
.col h2,.col strong{
display:inline-block;
margin-top:50px
}.inline-social{margin:0px 0px;}
}