Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <!-- Theme by @sleepwatersun -->
- <title>{Title}</title>
- <style>
- body{
- font-size: 12px;
- background: #000000;
- font-family: calibri, Arial, Sans-serif;
- }
- /* Circle */
- #container{
- width: 600px;
- height: 600px;
- left: 50%;
- top: 50%;
- -webkit-border-radius: 100%;
- -moz-border-radius: 100%;
- border-radius: 100%;
- margin-top: -300px;
- position: absolute;
- margin-left: -300px;
- background-image: url(http://static.tumblr.com/zibrynf/5rJn9ji5g/img08.gif);
- border: 1px solid #bebebe;
- }
- /* Main Navigation */
- #mainnavigation{
- position: absolute;
- left: -150px;
- margin-top: 250px;
- width: 100px;
- }
- #mainnavigation a{
- display: block;
- text-transform: uppercase;
- color: #bebebe;
- text-decoration: none;
- letter-spacing: 2px;
- margin: 2px 0px 2px 0px;
- -webkit-transition-duration: .7s;
- -moz-transition-duration: .7s;
- -o-transition-duration: .7s;
- transition-duration: .7s;
- }
- #mainnavigation a:before{
- content: "ยท";
- font-weight: 900;
- margin-right: 5px;
- color: turquoise;
- width: 0px;
- }
- #mainnavigation a:hover{
- background: turquoise;
- color: black;
- width: 75px;
- }
- /* Small Description */
- p.small{
- margin: 10px 0px 0px 0px;
- font-style: italic;
- color: #bebebe;
- }
- #outline{
- width: 550px;
- height: 550px;
- left: 50%;
- top: 50%;
- -webkit-border-radius: 100%;
- -moz-border-radius: 100%;
- border-radius: 100%;
- margin-top: -275px;
- position: absolute;
- margin-left: -275px;
- border: 1px solid #bebebe;
- }
- /* Constellations */
- #star1{
- position: absolute;
- margin-left: 350px;
- margin-top: 80px;
- }
- #star1 img{
- width: 100px;
- transform:rotate(360deg);
- -ms-transform:rotate(360deg);
- -webkit-transform:rotate(360deg);
- }
- #star2{
- margin-left: 140px;
- position: absolute;
- margin-top: 100px;
- }
- #star2 img{
- width: 120px;
- }
- #star3{
- margin-left: 80px;
- position: absolute;
- margin-top: 290px;
- }
- #star3 img{
- width: 100px;
- }
- #star4{
- margin-left: 430px;
- position: absolute;
- margin-top: 250px;
- }
- #star4 img{
- width: 100px;
- transform:rotate(350deg);
- -ms-transform:rotate(350deg);
- -webkit-transform:rotate(350deg);
- }
- #star5{
- margin-left: 230px;
- position: absolute;
- margin-top: 240px;
- }
- #star5 img{
- width: 180px;
- transform:rotate(350deg);
- -ms-transform:rotate(350deg);
- -webkit-transform:rotate(350deg);
- }
- #star6{
- margin-left: 240px;
- position: absolute;
- margin-top: 350px;
- }
- #star6 img{
- width: 140px;
- transform:rotate(350deg);
- -ms-transform:rotate(350deg);
- -webkit-transform:rotate(350deg);
- }
- #star7{
- margin-left: 90px;
- position: absolute;
- margin-top: 420px;
- }
- #star7 img{
- width: 130px;
- transform:rotate(390deg);
- -ms-transform:rotate(350deg);
- -webkit-transform:rotate(390deg);
- }
- .label{
- position: absolute;
- color: #bebebe;
- letter-spacing: 2px;
- cursor: pointer;
- text-transform: uppercase;
- }
- .label a{
- color: #bebebe;
- text-decoration: none;
- }
- #cl1{
- top: 60px;
- margin-left: 55px;
- }
- #cl2{
- top: 90px;
- margin-left: 15px;
- }
- #cl4{
- top: 35px;
- margin-left: 35px;
- }
- #cl5{
- top: 20px;
- margin-left: 40px;
- }
- #cl6{
- top: 70px;
- margin-left: 40px;
- }
- #cl7{
- margin-left: 70px;
- }
- #sws{
- position: fixed;
- bottom: 0;
- right: 0;
- margin: 10px;
- }
- #sws a{
- color: #bebebe;
- font-size: 14px;
- font-style: italic;
- text-decoration: none;
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div id="mainnavigation">
- <a href="/">home</a>
- <a href="/ask">message</a>
- <a href="/archive">archive</a>
- <!-- Small Description -->
- <p class="small">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- </p>
- </div>
- <div id="outline"><div id="one"></div><div id="two"></div><div id="three"></div><div id="four"></div></div>
- <div id="star1"><img src="http://static.tumblr.com/zibrynf/9i5n9jlix/one.png"/><div class="label" id="cl1">
- <a href="/">link</a></div> <!-- link 1 -->
- </div>
- <div id="star2"><img src="http://static.tumblr.com/zibrynf/DEzn9jlau/two.png"/><div class="label" id="cl2">
- <a href="/">link</a></div> <!-- link 2 -->
- </div>
- <div id="star3"><img src="http://static.tumblr.com/zibrynf/uLgn9jlx9/three.png"/><div class="label">
- <a href="/">link</a></div> <!-- link 3 -->
- </div>
- <div id="star4"><img src="http://static.tumblr.com/zibrynf/DETn9jmd0/four.png"/><div class="label" id="cl4">
- <a href="/">link</a></div> <!-- link 4 -->
- </div>
- <div id="star5"><img src="http://static.tumblr.com/zibrynf/TnFn9jmte/five.png"/><div class="label" id="cl5">
- <a href="/">link</a></div> <!-- link 5 -->
- </div>
- <div id="star6"><img src="http://static.tumblr.com/zibrynf/dPKn9jna5/six.png"/><div class="label" id="cl6">
- <a href="/">link</a></div> <!-- link 6 -->
- </div>
- <div id="star7"><img src="http://static.tumblr.com/zibrynf/mavn9jnp0/seven.png"/><div class="label" id="cl7">
- <a href="/">link</a></div> <!-- link 7 -->
- </div>
- </div>
- <div id="sws"><a href="http://swsthemes.tumblr.com">sws</a></div>
- </body>
- <!--
- Heavily influenced by constellations and that one constellation picture
- -->
- </html>
Add Comment
Please, Sign In to add comment