<DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web:400,600">
<link rel="stylesheet" href="main.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="compare">
<h1 class="version1">Normal CSS</h1>
<div class="profile-card">
<div class="card-header">
<h1>Natsu Dragon</h1>
<p>User Experience Designer,</p>
<p>Hacker, Full-time Fiddler</p>
<p>Dragon Slayer</p>
</div>
<img class="image1" src="http://vignette2.wikia.nocookie.net/fairytail/images/7/77/Natsu_prof.jpg/revision/latest?cb=20110731042906" alt="profile Image">
<div class="card-info">
<p>Natsu is, apart from being an extrodarnary wizard from Fairy Tale, with very rare fire magic Natsu is a Dragon Slayer trained the ancient dragon igneil.</p>
</div>
<div class="bottom">
<h2>Find Natsu Dragon Online</h2>
<ul>
<li><a href="#"><i class="fa fa-fw fa-twitter"></i>Twitter</a></li>
<li><a href="#"><i class="fa fa-fw fa-github"></i>Github</a></li>
<li><a href="#"><i class="fa fa-fw fa-codepen"></i>Codepen</a></li>
</ul>
</div><!--bottom of card-->
<div class="card-footer">
<ul>
<li><a href="#"><i class="fa fa-fw fa-share"></i>share</a></li>
<li><a href="#">Report<i class="fa fa-fw fa-exclamation"></i></a></li>
</ul>
</div>
</div><!--end of profile-card-->
<!--=========================================
FLEXBOX VERSION
============================================-->
<h1 class="version2">FLEXBOX</h1>
<div class="profile-card2">
<div class="card-header2">
<h1>Natsu Dragon</h1>
<p>User Experience Designer,</p>
<p>Hacker, Full-time Fiddler</p>
<p>Dragon Slayer</p>
</div>
<img class="image2" src="http://vignette2.wikia.nocookie.net/fairytail/images/7/77/Natsu_prof.jpg/revision/latest?cb=20110731042906" alt="profile Image">
<div class="card-info2">
<p>Natsu is, apart from being an extrodarnary wizard from Fairy Tale, with very rare fire magic Natsu is a Dragon Slayer trained the ancient dragon igneil.</p>
</div>
<div class="bottom2">
<h2>Find Natsu Dragon Online</h2>
<ul>
<li><a href="#"><i class="fa fa-fw fa-twitter"></i>Twitter</a></li>
<li><a href="#"><i class="fa fa-fw fa-github"></i>Github</a></li>
<li><a href="#"><i class="fa fa-fw fa-codepen"></i>Codepen</a></li>
</ul>
</div><!--bottom of card-->
<div class="card-footer2">
<ul>
<li><a href="#"><i class="fa fa-fw fa-share"></i>share</a></li>
<li><a href="#">Report<i class="fa fa-fw fa-exclamation"></i></a></li>
</ul>
</div>
</div><!--end of profile-card-->
</div><!--end of compare-->
</body>
</html>
/*Global styles*/
body{
font-family: "Titillium Web", serif;
}
*{
text-decoration: none;
list-style-type: none;
}
.profile-card{
position: relative;
/*margin: 0 auto;*/
border: 1px solid gray;
width: 320px;
transition: all 150ms ease-in-out;
}
.profile-card:hover{
border: 1px solid blue;
box-shadow: 0 0 10px 1px;
}
/*position of header content*/
.card-header{
width: 320px;
padding:10px 0 100px 0;
margin: 0 auto;
text-align: center;
background: #2196F3;
color: #fff;
}
.card-header:hover{
background: #0960a5;
}
/*profile info*/
.card-info{
padding: 1em;
margin: 50px 5px 0 5px;
}
/*Image position*/
.image1{
position:absolute;
top:234px;
margin-left: 5.35rem;
margin-right: 5.35rem;
width: 150px;
height: 150px;
border-radius:50%;
transition: all 150ms ease-in-out;
}
.image1:hover{
border-radius: 10%;
}
/*card footer*/
.card-footer{
border-top: 1px solid gray;
width: 310px;
margin: 0 auto;
}
.card-footer ul li{
display: inline-block;
}
.card-footer ul li:first-child{
margin-right: 116px;
}
.bottom h2{
text-align: center;
margin-bottom: 0;
}
/*========================================================
END OF NORMAL CSS STYLES FOR PROFILE CARD
=========================================================*/
/*========================================================
START OF PROFILE CARD FLEXBOX VERSION
=========================================================*/
.profile-card2{
width:320px;
display: flex;
flex-direction: column;
border: 1px solid gray;
transition: all 150ms ease-in-out;
}
.profile-card2:hover{
border: 1px solid blue;
box-shadow: 0 0 10px 1px;
}
.card-header2{
align-self: center;
text-align: center;
background: #2196F3;
color: #FAFAFA;
border-left: 66px solid #2196F3;
border-right: 65px solid #2196F3;
padding-bottom: 115px;
transition: all 150ms ease-in-out;
}
.card-header2:hover{
background: #0960a5;
border-left: 66px solid #0960a5;
border-right: 65px solid #0960a5;
}
.image2{
margin-top: -90px;
height: 150px;
width: 150px;
align-self: center;
border-radius: 50%;
transition: all 150ms ease-in-out;
z-index: 100;
}
.image2:hover{
border-radius: 10%;
}
.card-info2{
padding: 1em;
}
.bottom2 h2{
text-align:center;
}
.card-footer2{
width: 310px;
border-top: 1px solid gray;
align-self: center;
}
.card-footer2 ul{
display:flex;
justify-content: flex-start;;
}
.card-footer2 ul li:last-child{
margin-left: 85px;
}
/*COMPARE CSS VS FLEXBOX*/
.compare{
display:flex;
justify-content: center;
padding-bottom: 2rem;
margin-left: -6%;
}
/*Align cards so normal css an flexbox display above cards*/
.profile-card, .profile-card2{
margin-top: 100px;
}
/*.profile-card{
margin-left: -10%;
}*/
.version1, .version2{
position:relative;
left: 14rem;
color: #BDBDBD;
transition: color 0.4s ease-in-out;
}
/*Misc hover animations for titles*/
.version1:hover, .version2:hover{
color: #37474F;
max-height:100px;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.