Skip to content

Instantly share code, notes, and snippets.

/facebook-cover-photo-tester.html

Created February 13, 2012 02:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/1812780 to your computer and use it in GitHub Desktop.
Save anonymous/1812780 to your computer and use it in GitHub Desktop.
Download ZIP
Facebook Cover Photo Tester
Raw
facebook-cover-photo-tester.html
<html>
<head>
<style>
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin-top: 40px;
margin-left: 40px;
background-color: white;
}
.background img {
position: absolute;
top: 40;
left: 40;
z-index: -1;
}
.cover {
width: 849px;
height: 313px;
z-index: 1;
}
.profile {
width: 125px;
height: 125px;
position: relative;
left: 23px;
margin-top: -92px;
z-index: 2;
border: 4px solid white;
-webkit-border-radius: 2px;
opacity: 1;
filter: alpha(opacity=1); /* For IE8 and earlier */
}
.profile img {
width: 125px;
height: 125px;
position: relative;
left: 0;
top:0;
z-index: 2;
}
.topClip {
background-color: black;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 40px;
}
.leftClip {
background-color: black;
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 100%;
}
.rightClip {
background-color: black;
position: absolute;
top: 0px;
margin-left: 40px;
left: 849px;
width: 100%;
height:100%;
}
.bottomClip {
background-color: black;
position: absolute;
margin-top: 82px;
top: 312px;
left: 0;
width: 100%;
height: 100%;
}
.bottomLeftClip {
background-color: black;
position: absolute;
margin-top: 40px;
top: 313px;
left: 0;
width: 63px;
height: 100%;
}
.bottomRightClip {
background-color: black;
position: absolute;
margin-top: 40px;
top: 313px;
left: 0;
width: 100%;
height: 100%;
margin-left: 196px;
}
</style>
</head>
<body>
<div class="background">
<div class="cover">
</div>
<div class="profile">
<!--<img src="profile-6.png" />-->
</div>
<img src="cover-6.png" />
<div class="topClip">
</div>
<div class="leftClip">
</div>
<div class="rightClip">
</div>
<div class="bottomLeftClip">
</div>
<div class="bottomRightClip">
</div>
<div class="bottomClip">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment