Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!------
- FANFIC REC PAGE by SOURWOLLF
- #1: Don't remove the credit.
- #2: Don't redistribute and claim as your own.
- #3: Do not use this as a base code.
- #4: Customize as you like!
- © Copyright 2013 - Sourwollf | Tumblr
- ------>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}" />
- <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
- </head>
- <style type="text/css">
- body {
- padding: 0;
- margin: 0;
- list-style: none;
- background-color: #FFFFFF;
- background-attachment: fixed;
- background-image:url('http://media.tumblr.com/tumblr_m20pw8bB8H1r9ly5j.png');
- margin-bottom: 50px;
- }
- a {
- text-decoration: none;
- color: black;
- }
- ::-webkit-scrollbar-thumb:vertical {
- height:10px;
- background-color: #0195ab; }
- ::-webkit-scrollbar-thumb:horizontal {
- height:30px;
- background-color: #0195ab; }
- ::-webkit-scrollbar {
- height: 10px;
- width: 5px;
- background-color: #FFFFFF; }
- #topbar {
- width: 100%;
- height: 60px;
- background-color: #202020;
- position: fixed;
- display: block;
- }
- .title {
- text-align: center;
- color: #FFFFFF;
- font-family: 'Fjalla One';
- font-size: 16px;
- letter-spacing: 10px;
- padding-top: 10px;
- text-transform: uppercase;
- }
- .links {
- text-align: center;
- }
- .links a {
- font-family: arial unicode ms;
- font-size: 9px;
- color: #FFFFFF;
- padding: 4px 10px;
- letter-spacing: 2px;
- text-align: center;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .links a:hover {
- color: #202020;
- background-color: #FFFFFF;
- }
- #stuff {
- margin-top: 50px;
- display: inline-block;
- }
- #row {
- width: 240px;
- height: auto;
- background-color: #FFFFFF;
- float: left;
- display: inline-block;
- margin-left: 20px;
- margin-top: 20px;
- padding: 5px;
- -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;
- }
- #row:hover {
- box-shadow: 0px 3px 11px 4px #b7e8ff;
- }
- #content {
- width: 240px;
- height: 240px;
- background-color: #FFFFFF;
- }
- .fanfic {
- display: block;
- padding: 4px;
- color: #FFFFFF;
- background-color: #0195ab;
- font-family: 'Fjalla One';
- font-size: 10px;
- text-align: center;
- text-transform: uppercase;
- letter-spacing: 1px;
- }
- .flink {
- text-align: center;
- margin-top: -5px;
- }
- .flink a {
- font-family: arial unicode ms;
- font-size: 8px;
- color: #FFFFFF;
- text-transform: uppercase;
- background-color: #0195ab;
- padding: 1px 5px;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .flink a:hover {
- background-color: #FFFFFF;
- }
- .general {
- display: block;
- height: 70px;
- padding: 4px;
- background-color: #0195ab;
- font-family: arial unicode ms;
- font-size: 8px;
- color: #FFFFFF;
- text-transform: uppercase;
- letter-spacing: 1px;
- margin-top: 1px;
- }
- .section {
- background-color: #FFFFFF;
- color: #0195ab;
- padding: 0px 2px;
- float: left;
- margin-right: 3px;
- border-radius: 1px;
- }
- .description {
- display: block;
- height: 114px;
- margin-top: 4px;
- overflow: auto;
- font-family: arial unicode ms;
- font-size: 8px;
- color: #202020;
- text-align: justify;
- padding: 4px;
- text-transform: uppercase;
- letter-spacing: 1px;
- }
- </style>
- <body>
- <div id="topbar">
- <div class="title">Fanfiction Rec Page</div>
- <div class="links">
- <a href="#">Home</a>
- <a href="#">Message</a>
- <a href="#">.001</a>
- <a href="#">.002</a>
- <a href="#">.003</a>
- <a href="http://jakehelps.tumblr.com">©</a>
- </div>
- </div>
- <div id="stuff">
- <!---------- BOX ---------->
- <div id="row">
- <div id="content">
- <div class="fanfic">Fanfic Title Here</div>
- <div class="flink">
- <a href="#">Fanfiction</a>
- <a href="#">AO3</a>
- </div>
- <div class="general">
- <div class="section">Pairing:</div> Here<br />
- <div class="section">Rating:</div> Here<br />
- <div class="section">Status</div> Here<br />
- <div class="section">Additional Char.:</div> Here<br />
- </div>
- <div class="description">
- The description can be as long as you want it to be.
- </div>
- </div>
- </div>
- <div id="row">
- <div id="content">
- <div class="fanfic">Fanfic Title Here</div>
- <div class="flink">
- <a href="#">Fanfiction</a>
- <a href="#">AO3</a>
- </div>
- <div class="general">
- <div class="section">Pairing:</div> Here<br />
- <div class="section">Rating:</div> Here<br />
- <div class="section">Status</div> Here<br />
- <div class="section">Additional Char.:</div> Here<br />
- </div>
- <div class="description">
- The description can be as long as you want it to be.
- </div>
- </div>
- </div>
- <div id="row">
- <div id="content">
- <div class="fanfic">Fanfic Title Here</div>
- <div class="flink">
- <a href="#">Fanfiction</a>
- <a href="#">AO3</a>
- </div>
- <div class="general">
- <div class="section">Pairing:</div> Here<br />
- <div class="section">Rating:</div> Here<br />
- <div class="section">Status</div> Here<br />
- <div class="section">Additional Char.:</div> Here<br />
- </div>
- <div class="description">
- The description can be as long as you want it to be.
- </div>
- </div>
- </div>
- <div id="row">
- <div id="content">
- <div class="fanfic">Fanfic Title Here</div>
- <div class="flink">
- <a href="#">Fanfiction</a>
- <a href="#">AO3</a>
- </div>
- <div class="general">
- <div class="section">Pairing:</div> Here<br />
- <div class="section">Rating:</div> Here<br />
- <div class="section">Status</div> Here<br />
- <div class="section">Additional Char.:</div> Here<br />
- </div>
- <div class="description">
- The description can be as long as you want it to be.
- </div>
- </div>
- </div>
- <div id="row">
- <div id="content">
- <div class="fanfic">Fanfic Title Here</div>
- <div class="flink">
- <a href="#">Fanfiction</a>
- <a href="#">AO3</a>
- </div>
- <div class="general">
- <div class="section">Pairing:</div> Here<br />
- <div class="section">Rating:</div> Here<br />
- <div class="section">Status</div> Here<br />
- <div class="section">Additional Char.:</div> Here<br />
- </div>
- <div class="description">
- The description can be as long as you want it to be.
- </div>
- </div>
- </div>
- <div id="row">
- <div id="content">
- <div class="fanfic">Fanfic Title Here</div>
- <div class="flink">
- <a href="#">Fanfiction</a>
- <a href="#">AO3</a>
- </div>
- <div class="general">
- <div class="section">Pairing:</div> Here<br />
- <div class="section">Rating:</div> Here<br />
- <div class="section">Status</div> Here<br />
- <div class="section">Additional Char.:</div> Here<br />
- </div>
- <div class="description">
- The description can be as long as you want it to be.
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement