Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/index.html

Created September 6, 2017 12:25
Show Gist options
  • Save harunpehlivan/5f6fa69de6aa2dd5040830f68eb002f1 to your computer and use it in GitHub Desktop.
Save harunpehlivan/5f6fa69de6aa2dd5040830f68eb002f1 to your computer and use it in GitHub Desktop.
Download ZIP
Profile Cards
Raw
index.html
<!----------------------
Our profile cards
------------------------>
<div class="cards-container">
<div class="card card-one">
<header>
<div class="avatar">
<img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1504470047" alt="
HARUN PEHLİVAN
" />
</div>
</header>
<h3>
HARUN PEHLİVAN
</h3>
<div class="desc">
FOUNDER,CEO BLOGGER </div>
<div class="contacts">
<a href="https://plus.google.com/+HarunPEHL%C4%B0VANtebimtebitagem"><i class="fa fa-plus"></i></a>
<a href=""><i class="fa fa-whatsapp"></i></a>
<a href=""><i class="fa fa-envelope"></i></a>
<div class="clear"></div>
</div>
<footer>
<a href="https://www.facebook.com/profile.php?id=100008152065270"><i class="fa fa-facebook"></i></a>
<a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252"><i class="fa fa-linkedin"></i></a>
<a href="https://twitter.com/HTERCUMANP"><i class="fa fa-twitter"></i></a>
<a href="https://www.instagram.com/harunpehlivantebimtebitagem"><i class="fa fa-instagram"></i></a>
</footer>
</div>
<div class=" card card-two">
<header>
<div class="avatar">
<img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1504470047" alt="
HARUN PEHLİVAN
" />
</div>
</header>
<h3>
HARUN PEHLİVAN
</h3>
<div class="desc">
FOUNDER,CEO BLOGGER </div>
<div class="contacts">
<a href="https://plus.google.com/+HarunPEHL%C4%B0VANtebimtebitagem"><i class="fa fa-plus"></i></a>
<a href=""><i class="fa fa-whatsapp"></i></a>
<a href=""><i class="fa fa-envelope"></i></a>
<div class="clear"></div>
</div>
<footer>
<p>
<a href="https://www.facebook.com/profile.php?id=100008152065270"><i class="fa fa-facebook"></i></a>
<a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252"><i class="fa fa-linkedin"></i></a>
<a href="https://twitter.com/HTERCUMANP"><i class="fa fa-twitter"></i></a>
<a href="https://www.instagram.com/harunpehlivantebimtebitagem"><i class="fa fa-instagram"></i></a>
</p>
</footer>
</div>
<div class="clear"></div>
</div>
Raw
script.js
/**
Samples of profile card.
**/
Raw
style.scss
/*** VARS ***/
$main-col: #c8c;
$sec-col: lighten(#303f9f, 20%);
$back-col: #c5cae9;
/*** GENERAL STYLES ***/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: 'Dosis', sans-serif;
background: $back-col;
text-align: center;
}
.clear{clear:both;}
/*** CARD STLES ***/
.cards-container{
width: 793px;
max-width: 100%;
margin: 2rem auto;
}
.card{
float: left;
margin: 3rem;
}
.card-one{
position: relative;
width: 300px;
background: #fff;
box-shadow: 0 10px 7px -5px rgba(#000,.4);
header{
position: relative;
width: 100%;
height: 60px;
background-color: $main-col;
&::before, &::after{
content: '';
position: absolute;
top: 0;bottom: 0;left: 0;right: 0;
background: inherit;
}
&::before{
-webkit-transform: skewY(-8deg);
-moz-transform: skewY(-8deg);
-ms-transform: skewY(-8deg);
-o-transform: skewY(-8deg);
transform: skewY(-8deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
&::after{
-webkit-transform: skewY(8deg);
-moz-transform: skewY(8deg);
-ms-transform: skewY(8deg);
-o-transform: skewY(8deg);
transform: skewY(8deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.avatar{
position: absolute;
left: 50%;
top: 30px;
margin-left: -50px;
z-index: 5;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
background: #ccc;
border:3px solid #fff;
img{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100px;
height: auto;
}
}
}
h3{
position: relative;
margin: 80px 0 30px;
text-align: center;
&::after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -15px;
width: 30px;
height: 1px;
background: #000;
}
}
.desc{
padding: 0 1rem 2rem;
text-align: center;
line-height: 1.5;
color: #777;
}
.contacts{
width: 200px;
max-width: 100%;
margin: 0 auto 3rem;
a{
display: block;
width: 33.333333%;
float: left;
text-align: center;
color: $main-col;
&:hover{
color: #333;
.fa{
&::before{
color: #fff;
}
&::after{
width: 100%;
height: 100%;
}
}
}
.fa{
position: relative;
width: 40px;
height: 40px;
line-height: 39px;
overflow: hidden;
text-align: center;
font-size: 1.3em;
&:before{
position: relative;
z-index: 1;
}
&::after{
content: '';
position: absolute;
top: 50%; left: 50%;
width: 0; height: 0;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background: $main-col;
-webkit-transition: width .3s, height .3s;
-moz-transition: width .3s, height .3s;
-ms-transition: width .3s, height .3s;
-o-transition: width .3s, height .3s;
transition: width .3s, height .3s;
}
}
&:last-of-type .fa{line-height: 36px;}
}
}
footer{
position: relative;
padding: 1rem;
background-color: $sec-col;
text-align: center;
a{
padding: 0 1rem;
color: #e2e2e2;
-webkit-transition: color .4s;
-moz-transition: color .4s;
-ms-transition: color .4s;
-o-transition: color .4s;
transition: color .4s;
&:hover{
color: $main-col;
}
}
&::before{
content: '';
position: absolute;
top: -27px;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-bottom-color: $sec-col;
}
}
}
.card-two{
position: relative;
width: 300px;
background: #fff;
box-shadow: 0 10px 7px -5px rgba(#000,.4);
header{
position: relative;
width: 100%;
height: 60px;
background-color: $main-col;
&::after{
content: '';
position: absolute;
top: 0;bottom: 0;left: 0;right: 0;
background: inherit;
-webkit-transform: skewY(8deg);
-moz-transform: skewY(8deg);
-ms-transform: skewY(8deg);
-o-transform: skewY(8deg);
transform: skewY(8deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.avatar{
position: absolute;
left: 50%;
top: 30px;
margin-left: -50px;
z-index: 5;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
background: #ccc;
border:3px solid #fff;
img{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100px;
height: auto;
}
}
}
h3{
position: relative;
margin: 80px 0 30px;
text-align: center;
&::after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -15px;
width: 30px;
height: 1px;
background: #000;
}
}
.desc{
padding: 0 1rem 2rem;
text-align: center;
line-height: 1.5;
color: #777;
}
.contacts{
width: 200px;
max-width: 100%;
margin: 0 auto 3.5rem;
a{
display: block;
width: 33.333333%;
float: left;
text-align: center;
color: $main-col;
&:hover{
color: #333;
.fa{
&::before{
color: #fff;
}
&::after{
top: 0;
}
}
}
.fa{
position: relative;
width: 40px;
height: 40px;
line-height: 39px;
overflow: hidden;
text-align: center;
border: 2px solid $main-col;
border-radius: 50%;
&:before{
position: relative;
z-index: 1;
}
&::after{
content: '';
position: absolute;
top: -50px; left: 0;
width: 100%; height: 100%;
-webkit-transition: top .3s;
-moz-transition: top .3s;
-ms-transition: top .3s;
-o-transition: top .3s;
transition: top .3s;
background: $main-col;
}
}
&:last-of-type .fa{line-height: 36px;}
}
}
footer{
position: relative;
height: 45px;
background-color: $sec-col;
text-align: center;
p{
position: absolute;
bottom: 0; left: 0;
width: 100%;
z-index: 1;
a{
padding: 0 1rem;
color: #e2e2e2;
-webkit-transition: color .4s;
-moz-transition: color .4s;
-ms-transition: color .4s;
-o-transition: color .4s;
transition: color .4s;
&:hover{
color: $main-col;
}
}
}
&::before{
z-index: 0;
content: '';
position: absolute;
top: 0px;bottom: 0;left: 0;right: 0;
background: inherit;
-webkit-transform: skewY(8deg);
-moz-transform: skewY(8deg);
-ms-transform: skewY(8deg);
-o-transform: skewY(8deg);
transform: skewY(8deg);
-webkit-transform-origin: 100%;
-moz-transform-origin: 100%;
-ms-transform-origin: 100%;
-o-transform-origin: 100%;
transform-origin: 100%;
}
}
}
/*** RESPONSIVE ***/
@media only screen and (max-width: 810px) {
.card {
float: none;
margin-left: auto;
margin-right: auto;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment