Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <!---
- SATIN
- an about me page
- theme by Caroline
- ciralism.tumblr.com
- do not remove the credit
- do not borrow bits of coding
- edit as much as you want
- :: message guidelines ::
- // ask off anon where possible
- // provide examples/theme name/number
- // due to limited time, I only do personalized customizations at a small cost. You should be able to figure out everything you need with Google!
- --->
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
- <style type="text/css">
- body {width:100%;height:100%;background-color:#f3f3f3;font-family:Muli, Sans-Serif;}
- a {text-transform:uppercase;text-decoration:none;color:#000;border:none;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;}
- a:hover, a:visited {text-decoration:none;color:#000;}
- a:hover {color:#f09f91;/*ACCENT COLOR*/}
- .container {border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;background-color:#fff;width:600px;position:fixed;left:50%;margin-left:-300px;height:500px;margin-top:-250px;top:50%;border:1px solid #eee;overflow:hidden;}
- .right-side {background-color:#fff;width:299px;float:right;height:500px;}
- .title {color:#000;font-size:18px;margin:95px 0 0 35px}
- .about-text {font-weight:lighter;font-size:12px;padding:10px 30px 15px 30px;line-height:180%;height:300px;overflow-x:hidden;overflow-y:scroll;}
- .window {margin-top:100px;}
- .item {width:200px;margin-left:44px;background-color:#fff;z-index:99;display:block;margin-top:20px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;padding:8px;font-size:11px;text-align:center;}
- .item b, .navigation b {display:block;padding:1px;}
- .navigation b {margin-bottom:10px;}
- .navigation b::after {content:"";position:absolute;height:3px;width:20px;background-color:#f09f91/*ACCENT COLOR*/;margin-top:20px;margin-left:-38px;}
- .navigation {border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;width:200px;padding:8px;padding-bottom:12px;margin-left:44px;font-size:11px;background-color:#fff;text-align:center;margin-top:20px;}
- .navigation a {display:inline-block;width:90px;font-size:10px;letter-spacing:1px;margin-top:5px;text-transform:none;}
- /* animation */
- .side-image img,.side-image {width:299px;height:500px;float:left;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;transition-delay:1.2s;-webkit-transition-delay:1.2s;-o-transition-delay:1.2s;-ms-transition-delay:1.2s;-moz-transition-delay:1.2s;}
- .menu {width:300px;float:left;height:500px;background-image:url(SECOND IMAGE URL HERE);margin-top:-500px;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;transition-delay:600ms;-webkit-transition-delay:700ms;-o-transition-delay:700ms;-ms-transition-delay:700ms;-moz-transition-delay:700ms;}
- .container:hover .side-image {margin-left:-300px;transition-delay:0ms;-webkit-transition-delay:0ms;-o-webkit-transition-delay:0ms;-ms-webkit-transition-delay:0ms;-moz-webkit-transition-delay:0ms;}
- .container:hover .menu {margin-top:0;transition-delay:500ms;-webkit-transition-delay:500ms;-o-webkit-transition-delay:500ms;-ms-webkit-transition-delay:500ms;-moz-webkit-transition-delay:500ms;}
- .un, .deux, .trois,.navigation {opacity:0;-webkit-transition-duration:500ms;-moz-transition-duration:500ms;-o-transition-duration:500ms;-m-transition-duration:500ms;transition-duration:500ms;}
- .container:hover .un {opacity:1;transition-delay:1s;}
- .container:hover .deux {opacity:1;transition-delay:1.1s;}
- .container:hover .trois {opacity:1;transition-delay:1.2s;}
- .container:hover .navigation {opacity:1;transition-delay:1.3s;}
- .navigation {transition-delay:0s;}
- .trois {transition-delay:.1s;}
- .deux {transition-delay:.2s;}
- .un {transition-delay:.3s;}
- .credit {position:fixed;text-transform:uppercase;font-size:7px;font-weight:bold;right:5px;bottom:5px;letter-spacing:1px;}
- </style>
- </head>
- <body>
- <div class="container">
- <div class="side-image">
- <img src="FIRST IMAGE URL HERE">
- </div>
- <div class="menu">
- <div class="window">
- <div class="item un"><b>name</b> YOUR NAME</div>
- <div class="item deux"><b>birthday</b> YOUR BIRTHDAY</div>
- <div class="item trois"><b>location</b> YOUR HOME</div>
- <div class="navigation"><b>navigation</b>
- <a href="/">LINK TITLE</a>
- <a href="/">LINK TITLE</a>
- <a href="/">LINK TITLE</a>
- <a href="/">LINK TITLE</a>
- <a href="/">LINK TITLE</a>
- <a href="/">LINK TITLE</a>
- </div>
- </div></div>
- <div class="right-side">
- <div class="title">about me</div>
- <div class="about-text">Your text goes here. Remember to separate paragraphs with < p > tags! Search "accent" to change the accent color, and remember to put in images where it says "first image URL here" and "second image url here" so that your page is perfectly personalized!<p>I hope you enjoy it!</p><p>XOXO, Caroline</p></div>
- </div>
- </div>
- <!---this is the credit. you may not alter it in any way-->
- <a href="http://ciralism.tumblr.com" class="credit">ciralism</a>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
