Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!---------------
- IV - FAMILY TREE by DOMINICWRITES
- Rules and Regulations:
- #1: Please DO NOT commit thievery and steal this theme/page. I've worked hard on in so I'd appreciate if you didn't.
- #2: DO NOT redistribute this theme/page,
- #3: You can customize to your liking, just make sure that your theme/page is readable and credible for your viewers.
- ---------------->
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <title>{Title}</title>
- <meta charset="utf-8">
- <meta name="description" content="{MetaDescription}" />
- <link rel="shortcut icon" href="{Favicon}" />
- <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
- <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Raleway:400,700,800,900,500' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
- <script src="http://use.edgefonts.net/londrina-sketch.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
- <script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
- <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>
- </head>
- <style type="text/css">
- body {
- margin: 0px;
- list-style: none;
- background-color: #000000;
- font-family: 'Roboto', sans-serif;
- font-weight: 300;
- font-size: 10px;
- color: #877b76;
- background-image:url('http://static.tumblr.com/kamm2qy/t84n3g3m2/wild_oliva.png');
- background-attachment: fixed;
- }
- a {
- text-decoration: none;
- color: #0195ab;
- }
- b,i,strong,em {
- color: #cbd165;
- }
- ::-webkit-scrollbar-thumb:vertical {
- background-color: #877b76;
- height: 10px;
- }
- ::-webkit-scrollbar-thumb:horizontal {
- background-color: #877b75;
- height: 7px!important;
- }
- ::-webkit-scrollbar {
- background-color: #FFF;
- height: 2px;
- width: 2px;
- }
- content {
- width: 100%;
- height: 100%;
- overflow: auto;
- }
- #content {
- margin: auto;
- width: 703px;
- height: 100%;
- padding: 20px;
- background-color: #101010;
- margin-bottom: 170px;
- }
- .box {
- width: 300px;
- height: 390px;
- background-color: #FFFFFF;
- padding: 15px;
- margin: 10px;
- display: inline-block;
- }
- .box .header {
- width: 330px;
- height: 120px;
- background-color: #202020;
- margin-left: -15px;
- margin-top: -15px;
- margin-bottom: 50px;
- }
- .box .icon {
- width: 48px;
- height: 48px;
- border-radius: 48px;
- border: 5px solid #101010;
- margin-left: 24px;
- position: absolute;
- margin-top: 104px;
- }
- .nametag {
- width: 233px;
- padding: 7px;
- background-color: #101010;
- padding-left: 90px;
- color: #eee;
- text-align: left;
- position: absolute;
- margin-top: 120px;
- font-family: 'cambria';
- font-size: 12px;
- font-style: italic;
- text-transform: lowercase;
- letter-spacing: 1px;
- }
- .info {
- width: 300px;
- height: auto;
- }
- .general {
- font-family: 'cambria';
- font-size: 8px;
- font-style: italic;
- text-transform: uppercase;
- color: #202020;
- columns:100px 2;
- -webkit-columns:102px 2;
- -moz-columns:100px 2;
- margin-bottom: 10px;
- }
- .gen {
- border-left: 10px solid #202020;
- padding-left: 10px;
- margin-bottom: 3px;
- display: block;
- }
- .desc {
- width: 100%;
- display: block;
- height: 150px;
- overflow: auto;
- font-family: cambria;
- font-size: 10px;
- color: #303030;
- margin-bottom: 10px;
- }
- .desc:first-letter {
- float: left;
- font-family: 'cambria';
- font-size: 24px;
- margin-right: 5px;
- border: 3px double #eee;
- padding: 0px 10px 1px 10px;
- font-style: italic;
- background-color: #505050;
- color: #eee;
- }
- .links {
- display: block;
- height: auto;
- }
- .links a {
- display: inline-block;
- padding: 5px;
- width: 138px;
- background-color: #202020;
- text-align: center;
- font-family: 'cambria';
- font-size: 10px;
- font-style: italic;
- color: #eee;
- letter-spacing: 1px;
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- -ms-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
- }
- .links a:hover {
- color: #202020;
- background-color: #fff;
- }
- #leftbar {
- width: 100%;
- height: auto;
- bottom: 0px;
- margin: auto;
- position: fixed;
- }
- .all {
- margin: auto;
- width: 703px;
- padding: 20px;
- background-color: #101010;
- }
- .lefttitle {
- font-family: arial black;
- font-weight: 700;
- color: #fff;
- font-size: 24px;
- letter-spacing: -2px;
- text-align: center;
- }
- .llinks {
- display: block;
- width: 220px;
- margin: auto;
- height: auto;
- margin-top: 10px;
- columns:100px 2;
- -webkit-columns:102px 2;
- -moz-columns:100px 2;
- margin-bottom: 10px;
- }
- .llinks a {
- border-left: 10px solid #aaa;
- padding-left: 10px;
- margin-bottom: 3px;
- display: block;
- font-family: 'cambria';
- font-size: 8px;
- font-style: italic;
- text-transform: uppercase;
- color: #ccc;
- letter-spacing: 1px;
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- -ms-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
- }
- .llinks a:hover {
- background-color: #fff;
- color: #303030;
- border-left: 10px solid #fff;
- }
- </style>
- <body>
- <content>
- <div id="content">
- <!--- START COPYING BOX CODE HERE ---->
- <div class="box">
- <div class="header" style="background-image:url('HEADER URL HERE');">
- <div class="nametag">CHARACTER NAME</div>
- <div class="icon" style="background-image:url('ICON URL HERE');">
- </div>
- </div>
- <div class="info">
- <div class="general">
- <div class="gen" >FIRST TAB</div>
- <div class="gen" style="border-left: 10px solid #303030;">SECOND TAB</div>
- <div class="gen" style="border-left: 10px solid #404040;">THIRD TAB</div>
- <div class="gen" style="border-left: 10px solid #505050;">FOURTH TAB</div>
- <div class="gen" style="border-left: 10px solid #606060;">FIFTH TAB</div>
- <div class="gen" style="border-left: 10px solid #707070;">SIXTH TAB</div>
- </div>
- <div class="desc">
- DESCRIPTION HERE.
- </div>
- </div>
- <div class="links">
- <a href="#">biography post</a>
- <a href="#">character tag</a>
- </div>
- </div>
- <!------ END COPYING BOX CODE HERE ------->
- <!-- Then, paste is on the space here ---->
- <!-- POST ALL BOXES ABOVE THIS LINE -->
- </div>
- <div id="leftbar">
- <div class="all">
- <div class="lefttitle">characters.</div>
- <div class="llinks">
- <a href="#">Link 1</a>
- <a href="#">Link 2</a>
- <a href="#">Link 3</a>
- <a href="#">Link 4</a>
- <a href="#">Link 5</a>
- <a href="#">Link 6</a>
- <a href="#">Link 7</a>
- <a href="http://dominicwrites.tumblr.com">copyright</a>
- </div>
- </div>
- </div>
- </content>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement