//Hi guys I've tried to keep the code as clean as
//possible, you can find the images and redirect at the
//bottom.
//Note 1: This will not work until you put your own images in!
//Note 2: Due to Woobox Admin Options bar which displays when you
//view the tab in action the lay out will be distorted, just
//log out to see the actual result
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,300,700,900' rel='stylesheet' type='text/css'>
<link rel='stylesheet' id='googlefonts-css' href='https://fonts.googleapis.com/css?family=ABeeZee:400|Lobster:400&subset=latin' type='text/css' media='all' />
<style>
div.testi {
margin-bottom: 1.5em;
line-height: 1.2;
color: #555;
text-align: justify;
width: 289px;
}
div.testi {
display: none;
}
div.fi {
text-align: center!important;
}
body {
background-color: transparent;
padding-top: 70px;
}
div.cardpage {
width: 400;
margin-left: auto;
margin-right: auto;
margin-top: 32px;
}
div.contacttext {
width: 400px;
margin-top: 13px;
margin-left: 0px;
font-size: 2.5em;
font-family: 'lobster';
font-weight: 200!important;
color: #5a5a5a;
text-align: center;
}
div.contacttext p {
width: 400px;
text-shadow: 1px 0px -1px #f1f1f1!important;
margin-top: 136px;
}
div.contacttext a {
color: #fa4c00;
text-decoration: none!important;
}
div.contacttext a:hover {
text-decoration: underline!important;
}
img.alignright.size-full.wp-image-410 {
border-radius: 150px;
margin-left: 0px!important;
margin-top: -40px;
position: relative;
width: 175px;
height: 175px!important;
float: right;
border: 2px solid #B6B6B6;
}
img.alignright.size-full.wp-image-410:hover {
border: 2px solid #555!important;
}
div.circ {
z-index: 0;
position: relative;
width: 180px;
margin-left: auto;
margin-right: auto;
}
div.wing {
position: relative;
width: 621px;
margin-left: auto;
margin-right: auto;
opacity: .1;
margin-top: 0px;
}
html {
background: url("http://PUT YOUR BG IMAGE HERE.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #BDBDBD;
border-radius: 8px;
height: 99.7%;
}
img.topclass {
margin-bottom: 153px;
margin-top: -82px;
opacity: 0.7;
width: 400px;
}
</style>
</head>
<body>
//Ok start replacing the images and redirects here, don't forget to replace the repeated
//background image three blocks up!
<div class="wing"> <img src="http://REPLACE THE WINGS IMAGE HERE.png" class="wing" /></div>
<div class="cardpage">
<div class="top"><a href="http://jaaadesign.nl/" title="Come visit us!" target="_blank"><img src="http://THIS IMAGE REPLACES THE TOP IMAGE.png" class="topclass" /></a></div>
<div class="circ"> <a href="http://jaaadesign.nl/" title="Come visit us!" target="_blank"><img class="alignright size-full wp-image-410" src="http://THIS IS THE ROUND CENTERED IMAGE.jpg" /></a></div>
<div class="contacttext">
<p>"That rug <a href="http://www.youtube.com/watch?v=ezQLP1dj_t8" title="Well, it did." target="_blank">really tied the room together,</a> man"</p> </div>
</div>
</body>
</html>
A Wordpress wielding cool rocking daddy in the lowlands. WPMU DEV member, carpenter, Yoga and meditation.
Geef een reactie