Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!---------------
- V - MARY'S CHILDREN 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;
- }
- 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: #877b76;
- height: 7px!important;
- }
- ::-webkit-scrollbar {
- background-color: #FFF;
- height: 3px;
- width: 3px;
- }
- content {
- width: 100%;
- height: 100%;
- overflow: auto;
- }
- #content {
- margin: auto;
- width: 863px;
- height: 100%;
- padding: 20px;
- background-color: #303030;
- margin-bottom: 170px;
- }
- .character {
- width: 380px;
- height: auto;
- background-color: #FFFFFF;
- padding: 15px;
- margin: 10px;
- display: inline-block;
- }
- .character .header {
- width: 380px;
- height: 120px;
- background-color: #202020;
- }
- .column1 {
- width: 182px;
- height: 240px;
- background-color: #202020;
- margin-top: 15px;
- display: inline-block;
- margin-right: 15px;
- float: left;
- }
- .column2 {
- width: 182px;
- height: 240px;
- margin-top: 15px;
- display: inline-block;
- }
- .name {
- display: block;
- width: 172px;
- height: auto;
- padding: 5px;
- background-color: #303030;
- color: #eee;
- font-family: 'cambria';
- font-size: 12px;
- font-style: italic;
- text-align: center;
- margin-bottom: 10px;
- }
- .general {
- display: block;
- height: auto;
- }
- .gen {
- border-left: 10px solid #202020;
- font-family: 'cambria';
- font-size: 8px;
- color: #202020;
- text-align: left;
- text-transform: uppercase;
- font-style: italic;
- margin-bottom: 3px;
- padding-left: 7px;
- }
- .description {
- width: 162px;
- height: 220px;
- padding: 10px;
- background-color: #fff;
- position: absolute;
- overflow: auto;
- opacity: 0;
- font-family: 'cambria';
- font-size: 10px;
- font-style: italic;
- color: #202020;
- -webkit-transition: all 0.2s ease-in;
- -moz-transition: all 0.2s ease-in;
- -o-transition: all 0.2s ease-in;
- -ms-transition: all 0.2s ease-in;
- transition: all 0.2s ease-in;
- }
- .description:hover {
- opacity: 1;
- }
- .description: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 {
- width: 182px;
- height: 110px;
- display: block;
- margin-top: 10px;
- }
- .links a {
- font-family: 'cambria';
- font-size: 10px;
- color: #eee;
- text-align: center;
- padding: 2px;
- width: 85px;
- background-color: #303030;
- display: inline-block;
- font-style: italic;
- margin-top: 3px;
- }
- .hover {
- position: absolute;
- margin: auto;
- display: block;
- width: 340px;
- padding: 15px;
- margin-top: 13px;
- padding-left: 25px;
- -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;
- }
- .icon {
- display: inline-block;
- float: left;
- width: 55px;
- height: 55px;
- border-radius: 35px;
- border: 5px solid #FFF;
- background-color: #202020;
- margin-right: 20px;
- }
- .title {
- padding: 10px 15px;
- width: 220px;
- text-align: center;
- display: inline-block;
- float: left;
- font-family: 'cambria';
- font-size: 12px;
- font-style: italic;
- color: #505050;
- color: #FFF;
- background-color: #FFF;
- margin-top: 15px;
- background:rgba(255, 255, 255, 0.3);
- }
- .topbar {
- display: block;
- padding: 30px 40px;
- background-color: #202020;
- text-align: center;
- width: 823px;
- margin-bottom: 30px;
- margin-left: -20px;
- margin-top: -20px;
- margin-bottom: 20px;
- }
- .topt {
- text-align: center;
- margin: auto;
- display: block;
- font-family: 'arial';
- font-weight: 700;
- letter-spacing: -2px;
- color: #FFF;
- font-size: 36px;
- }
- .rightbar {
- position: fixed;
- width: 210px;
- padding: 5px;
- float: right;
- height: 100%;
- text-align: right;
- padding-top: 20px;
- }
- .rightbar a {
- border-right: 10px solid #fff;
- padding-right: 7px;
- font-family: 'cambria';
- font-size: 8px;
- font-style: italic;
- color: #eee;
- text-transform: uppercase;
- letter-spacing: 1px;
- margin-bottom: 5px;
- display: block;
- -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;
- }
- .rightbar a:hover {
- background-color: #fff;
- color: #202020;
- }
- </style>
- <body>
- <content>
- <div class="rightbar">
- <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="#">Link 8</a>
- <a href="#">Link 9</a>
- <a href="http://winchesterwrites.tumblr.com">copyright</a>
- </div>
- <div id="content">
- <div class="topbar">
- <div class="topt">TOP BAR TITLE</div>
- </div>
- <!-- START COPYING BOX CODE HERE -->
- <div class="character">
- <div class="header" style="background-image:url('HEADER URL HERE');">
- <div class="hover">
- <div class="icon" style="background-image:url('ICON URL HERE');"></div>
- <div class="title">dean winchester</div>
- </div>
- </div>
- <div class="column1" style="background-image:url('CHARACTER COLUMN PORTRAIT URL HERE');">
- <div class="description">
- ADD IN CHARACTER BIOGRAPHY HERE
- </div>
- </div>
- <div class="column2">
- <div class="name">general info.</div>
- <div class="general">
- <div class="gen" style="border-left: 10px solid #000000;">FIRST TAB</div>
- <div class="gen" style="border-left: 10px solid #101010;">SECOND TAG</div>
- <div class="gen" style="border-left: 10px solid #202020;">THIRD TAB</div>
- <div class="gen" style="border-left: 10px solid #303030;">FOURTH TAB</div>
- <div class="gen" style="border-left: 10px solid #404040;">FIFTH TAB</div>
- <div class="gen" style="border-left: 10px solid #505050;">SIXTH TAB</div>
- <div class="gen" style="border-left: 10px solid #606060;">SEVENTH TAB</div>
- <div class="gen" style="border-left: 10px solid #707070;">EIGHT TAB</div>
- </div>
- <div class="links">
- <a href="#">bio post</a>
- <a href="#">character tag</a>
- <a href="#">tumblr link</a>
- <a href="#">photos</a>
- <a href="#">paragraphs</a>
- <a href="#">threads</a>
- </div>
- </div>
- </div>
- <!----- END COPYING BOX CODE HERE ------>
- <!---- Then, paste the code under this line ------>
- <!--- PASTE ALL CODES ABOVE THIS LINE --->
- </div>
- </content>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement