Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- codes by hellmouths
- don't copy, steal or redistribute
- -->
- <html>
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="altertnate" type="application/rss+xml" href="{RSS}">
- <!--- SCRIPTS - DO NOT REMOVE OR ALTER --->
- <script src="http://code.jquery.com/jquery-1.10.0.min.js">
- </script>
- <script>
- $(document).ready(function(){
- $(".one").click(function(){
- $(".a").toggle();
- $(".b,.c,.d").hide();
- });
- $(".two").click(function(){
- $(".b").toggle();
- $(".a,.c,.d").hide();
- });
- $(".three").click(function(){
- $(".c").toggle();
- $(".b,.a,.d").hide();
- });
- $(".four").click(function(){
- $(".d").toggle();
- $(".b,.c,.a").hide();
- });
- });
- </script>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script type="text/javascript" src="http://static.tumblr.com/ko1mcho/PMbmlkh9e/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("[title],a[title],img[title]").style_my_tooltips({
- tip_follows_cursor:"true",
- tip_delay_time:100,
- tip_fade_speed:100,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <!--- END SCRIPTS --->
- <!--- FONTS --->
- <link href='http://fonts.googleapis.com/css?family=VT323|Lekton' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,100italic,300italic,700italic,900italic' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Signika:400,300,600,700' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700' rel='stylesheet' type='text/css'>
- <!--- END FONTS --->
- </head>
- <style type="text/css">
- /*---- SCROLLBAR ----*/
- ::-webkit-scrollbar { width:3px; height:auto; background:#FFFFFF;}
- ::-webkit-scrollbar-corner { background:#000000;}
- ::-webkit-scrollbar-thumb:vertical { background:#000000;}
- ::-webkit-scrollbar-thumb:horizontal { background:#000000;}
- /*---- MAIN BODY ----*/
- body {
- background-color: #FFFFFF;
- font-family: lato;
- font-size:11px;
- line-height: 140%;
- }
- a { color:#000000; text-decoration: none; }
- a:hover { color:#9d4242; }
- h1 { font-size: 19px; font-style:italic; }
- .wrap {
- width:730px;
- margin:140px auto;
- height:410px;
- overflow: hidden;
- background-color: #000000; }
- /*---- SIDE IMAGE ----*/
- .sideimg {
- width:235px;
- display:inline-block;
- background-color:#FFFFFF;
- height:410px;
- float:left;
- overflow:hidden; }
- .sideimg img {
- width:235px;
- height:410px; }
- /*---- MIDDLE PART ----*/
- .con {
- height:410px;
- padding:0 1px;
- float:left;
- width:420px;
- display: inline-block;
- background-color: #FFFFFF; }
- .base {
- text-align: center;
- margin:auto;
- font-family: old standard tt;
- font-size: 19px;
- line-height: 120%;
- width:260px;
- padding:25px 10px;
- margin-top:100px;
- border-top:1px solid #000000;
- border-bottom:1px solid #000000;
- font-style: italic; }
- .a, .b, .c, .d {
- display: none;
- width:390px;
- height:390px;
- padding:10px 15px;
- position: absolute;
- overflow: auto;
- text-align: justify;
- background-color: #FFFFFF; }
- .q {
- display:block;
- width:390px;
- height:390px;
- padding:10px 15px;
- text-align: center;
- position: absolute;
- overflow: auto;
- background-color: #FFFFFF; }
- /*---- TAB 1 ----*/
- .log { display:inline-block; margin:-1px; }
- .me {
- font-family:lato;
- text-transform: uppercase;
- color:#000000;
- display: block;
- text-align: right;
- padding:5px 10px;
- width:80px;
- margin:1px 0px; }
- .this {
- font-family:lekton;
- display: block;
- text-align: left;
- padding:4px 10px;
- width:265px;
- background-color: #f6f6f6;
- margin:3px 0px; }
- .a p { padding:10px 15px; line-height: 160%; }
- /*---- TAB 2 ----*/
- #links {
- margin:auto;
- width:380px;
- }
- #links a {
- display: inline-block;
- background-color: ;
- border: 1px solid #f6f6f6;
- font-family: lato;
- text-transform: uppercase;
- font-size:10px;
- width:185px;
- height:120px;
- text-align: center;
- line-height: 120px;
- margin:2px 1px;
- color:#000000;
- }
- #links a:hover {
- background-color: #000000;
- color:#FFFFFF;
- }
- /*---- TAB 3 ----*/
- .para {
- font-family: lato;
- font-weight:bold;
- font-size: 19px;
- font-style: italic;
- text-transform: lowercase;
- display: block;
- width:250px;
- margin:0 5px;
- }
- .para:first-letter { font-size:25px; }
- .c blockquote {
- margin-left: 15px;
- padding-left:10px;
- border-left: 1px solid #9d4242;
- margin-bottom: 25px;
- }
- /*---- NAVIGATION ----*/
- #nav {
- width:234px;
- position: absolute;
- text-align: center;
- margin-top:10px;
- background-color:transparent; }
- #nav a {
- background-color: #FFFFFF;
- height:5px;
- width:5px;
- border-radius: 1px;
- margin:1px;
- display:inline-block; }
- #nav a:hover { background-color:#FF0000; }
- /*---- CREDIT ----*/
- .right {
- background-color: transparent;
- width:73px;
- float:right;
- height:100%;
- text-align: center;
- font-family: Signika;
- letter-spacing: 1px;
- font-size: 8px;
- text-transform: uppercase;
- padding-top:384px;
- }
- .right a { border-radius:1px; color:#FFFFFF; padding:2px; }
- .right a:hover {
- background-color: #FFFFFF;
- color:#000000;
- padding:2px;
- border-radius:1px;
- }
- /*---- HOVER TITLE ----*/
- #s-m-t-tooltip{
- font-size:7px;
- text-align:center;
- letter-spacing: 1px;
- width:auto;
- padding:0px 4px;
- text-transform: uppercase;
- margin-top:10px;
- margin-left:10px;
- background-color: #000000;
- color:#FFFFFF;
- position:absolute;
- z-index:1000;
- display:none;
- }
- </style>
- <body>
- <div class="wrap">
- <div class="sideimg">
- <!--- NAVIGATION (SELECTS WHICH TAB TO DISPLAY) --->
- <!--- Replace "title here" with a word describing your tab/section (for example, "bio") --->
- <!--- Do not replace # with anything --->
- <div id="nav">
- <a class="one" href="#" title="title here"></a>
- <a class="two" href="#" title="title here"></a>
- <a class="three" href="#" title="title here"></a>
- <a class="four" href="#" title="title here"></a>
- </div>
- <!--- THE IMAGE --->
- <!--- Replace "URL HERE" with the URL to your image --->
- <!--- Size must be 235x410px --->
- <img width="235" src="URL HERE"></div>
- <div class="con">
- <!--- QUOTE --->
- <!--- Replace "Quote" with your text/quote --->
- <div class="q">
- <div class="base">"Quote"</div>
- </div>
- <!--- END QUOTE --->
- <!--- TAB 1 --->
- <div class="a">
- <!--- THE SURVEY / INFO --->
- <div class="log">
- <!--- LEFT COLUMN --->
- <div class="me">Name</div> <div class="me">Occupation</div>
- <div class="me">Age</div> <div class="me">Face Claim</div>
- <!--- LEFT COLUMN ENDS --->
- </div>
- <div class="log">
- <!--- RIGHT COLUMN --->
- <div class="this">Your name</div> <div class="this">Your occupation</div>
- <div class="this">Your age</div> <div class="this">Your face claim</div>
- <!--- RIGHT COLUMN --->
- </div>
- <!--- THE SURVEY / INFO ENDS --->
- <p> YOUR BIOGRAPHY / PARAGRAPH GOES HERE </p>
- </div>
- <!--- TAB 1 ENDS --->
- <!--- TAB 2 --->
- <div class="b">
- <div id="links">
- <!--- Each row of links should end with a <br> --->
- <!--- Replace "URL HERE" with your URL (for example, "http://blog.tumblr.com") --->
- <!--- Replace "Link" with the name of your link (for example, "Tags") --->
- <a href="URL HERE">Link</a> <a href="URL HERE">Link</a><br>
- <a href="URL HERE">Link</a> <a href="URL HERE">Link</a><br>
- <a href="URL HERE">Link</a> <a href="URL HERE">Link</a><br>
- </div>
- </div>
- <!--- TAB 2 ENDS --->
- <!--- TAB 3 --->
- <div class="c">
- <div class="para"><a href="URL HERE">Para Title</a></div>
- <blockquote>SUMMARY OF PARA/INFO</blockquote>
- <div class="para"><a href="URL HERE">Para Title</a></div>
- <blockquote>SUMMARY OF PARA/INFO</blockquote>
- <div class="para"><a href="URL HERE">Para Title</a></div>
- <blockquote>SUMMARY OF PARA/INFO</blockquote>
- </div>
- <!--- TAB 3 ENDS --->
- <!--- TAB 4 --->
- <div class="d">
- <!--- <h1>TEXT</h1> gives you a heading (example below) --->
- <h1>Heading</h1>
- <!--- <p>TEXT</p> can be added around your text or not! --->
- <p>Text goes here</p>
- <!--- Below is how you add a link --->
- <a href="URL HERE">Link</a>
- </div>
- <!--- TAB 4 ENDS--->
- </div>
- <!--- CREDIT - DON'T REMOVE --->
- <div class="right">
- <a href="http://hmthemes.tumblr.com/">hmthemes</a>
- </div>
- <!--- CREDIT ENDS --->
- </div>
- <!--- Link back to your blog/other --->
- <div style="text-align:center;"><a href="URL HERE">back to blog</a></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement