Skip to content

Instantly share code, notes, and snippets.

@nrdobie
Created February 9, 2013 04:48
Show Gist options
  • Save nrdobie/4743882 to your computer and use it in GitHub Desktop.
Save nrdobie/4743882 to your computer and use it in GitHub Desktop.
A CodePen by Nicholas Dobie. Social Network Profile Header - This is a social network profile header that was done entirely in CSS and HTML.
// This just toggles the follow/following of the button
$('a.follow').click(function () {
$(this).toggleClass('followed');
if($(this).hasClass('followed')) {
$(this).text('Followed');
$('ul li:last-child').html('325<span>Followers</span>');
}
else {
$(this).text('Follow Nick');
$('ul li:last-child').html('324<span>Followers</span>');
}
});
<h1>GitSocial <small>A social network for programmers.</small></h1>
<header>
<figure class="profile-banner">
<img src="https://s3.amazonaws.com/doubleslash-codepen/mnpls.jpg" alt="Profile banner" />
</figure>
<figure class="profile-picture"
style="background-image: url('https://s3.amazonaws.com/doubleslash-codepen/me-and-arron.jpg')">
</figure>
<div class="profile-stats">
<ul>
<li>13 <span>Projects</span></li>
<li>1,354 <span>Commits</span></li>
<li>32 <span>Following</span></li>
<li>324 <span>Followers</span></li>
</ul>
<a href="javascript:void(0);" class="follow">
Follow Nick
</a>
</div>
<h1>Nick Dobie</h1>
</header>
body {
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 100px;
}
h1 {
display: block;
font-size: 50px;
margin: 25px auto 0;
width: 975px;
}
h1>small {
color: #aaaaaa;
font-size: 30px;
}
header {
box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
margin: 25px auto 50px;
height: 300px;
position: relative;
width: 975px;
}
figure.profile-banner {
left: 0;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
figure.profile-picture {
background-position: center center;
background-size: cover;
border: 5px #efefef solid;
border-radius: 50%;
bottom: -50px;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2), 1px 1px 4px rgba(0,0,0,0.3);
height: 148px;
left: 150px;
position: absolute;
width: 148px;
z-index: 3;
}
div.profile-stats {
bottom: 0;
border-top: 1px solid rgba(0,0,0,0.5);
left: 0;
padding: 15px 15px 15px 350px;
position: absolute;
right: 0;
z-index: 2;
/* Generated Gradient */
background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0.51) 3%, rgba(0,0,0,0.75) 61%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(3%,rgba(0,0,0,0.51)), color-stop(61%,rgba(0,0,0,0.75)), color-stop(100%,rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(0,0,0,0.51) 3%,rgba(0,0,0,0.75) 61%,rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(0,0,0,0.51) 3%,rgba(0,0,0,0.75) 61%,rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(0,0,0,0.51) 3%,rgba(0,0,0,0.75) 61%,rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(0,0,0,0.51) 3%,rgba(0,0,0,0.75) 61%,rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80000000',GradientType=0 );
}
div.profile-stats ul {
list-style: none;
margin: 0;
padding: 0;
}
div.profile-stats ul li {
color: #efefef;
display: block;
float: left;
font-size: 24px;
font-weight: bold;
margin-right: 50px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.7)
}
div.profile-stats li span {
display: block;
font-size: 16px;
font-weight: normal;
}
div.profile-stats a.follow {
display: block;
float: right;color: #ffffff;
margin-top: 5px;
text-decoration: none;
/* This is a copy and paste from Bootstrap */
background-color: #49afcd;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
div.profile-stats a.follow.followed {
/* Once again copied from Boostrap */
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #5bb75b;
background-image: -moz-linear-gradient(top, #62c462, #51a351);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
background-image: -webkit-linear-gradient(top, #62c462, #51a351);
background-image: -o-linear-gradient(top, #62c462, #51a351);
background-image: linear-gradient(to bottom, #62c462, #51a351);
background-repeat: repeat-x;
border-color: #51a351 #51a351 #387038;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
header>h1 {
bottom: -50px;
color: #354B63;
font-size: 40px;
left: 350px;
position: absolute;
z-index: 5;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment