Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <!--
- TAGS PAGE #2
- By Paige @ neonbikethemes.tumblr.com
- Last updated 08.05.16
- Rules:
- - Do not steal code or design
- - Do not remove/alter credit
- - Please like/reblog the post
- Thanks!
- -->
- <meta charset="utf-8">
- <meta name="viewport" content="initial-scale=1.0, width=device-width" />
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <!-- JQUERY -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
- <!-- MASONRY -->
- <script src="https://static.tumblr.com/kfhytre/ZiDo96g3z/masonry.pkgd.min.js"></script>
- <script>
- $(document).ready(function(){
- var $container = $('.container');
- $container.masonry({
- itemSelector: 'article',
- columnWidth: 200
- });
- });
- </script>
- <!-- FONT SCRIPTS -->
- <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,600,700|PT+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
- <!-- CSS -->
- <style type=text/css>
- /* STUFF */
- body{
- font-family:'Open Sans', Helvetica, sans-serif;
- color:#000000;
- margin:0;
- background:#f0f0f0 url('');
- background-attachment:fixed;
- }
- a {
- text-decoration:none;
- color:#000;
- }
- a:hover {
- text-decoration:none;
- color:#a0a0a0;
- }
- .navbar{
- position:fixed;
- background:#fff;
- text-align:left;
- width:100%;
- height:50px;
- top:0px;
- z-index:99999999999999;
- }
- #title{
- float:left;
- margin-left:25px;
- margin-top:18px;
- text-transform:uppercase;
- text-align:center;
- font-size:10px;
- letter-spacing:1px;
- font-weight:bold;
- z-index:9999999999;
- }
- #navlinks{
- float:right;
- margin-top:13px;
- margin-right:20px;
- text-align:right;
- z-index:999999999;
- }
- .navlink{
- background:#fff;
- border:0px solid #a0a0a0;
- padding:4px;
- padding-left:8px;
- padding-right:8px;
- margin-left:3px;
- margin-right:3px;
- font-size:10px;
- letter-spacing:1px;
- position:relative;
- display:inline-block;
- text-transform:uppercase;
- }
- .container{
- width:80%;
- text-align:center;
- margin-left:auto;
- margin-right:auto;
- margin-top:120px;
- margin-bottom:100px;
- }
- article{
- float:left;
- width:160px;
- border: 0px solid #dbdbdb;
- padding:0px;
- margin-left:15px;
- margin-right:15px;
- margin-bottom:30px;
- background:;
- font-size:9px;
- text-align:left;
- }
- .sectiontitle{
- background:#fff;
- font-size:10px;
- padding:10px;
- margin:0px;
- margin-bottom:1px;
- text-align:center;
- text-transform:uppercase;
- font-weight:bold;
- letter-spacing:2px;
- border-bottom: 0px solid #dbdbdb;
- }
- .tag{
- font-size:9px;
- font-style:italic;
- letter-spacing:1px;
- margin-bottom:-1px;
- padding:7px;
- padding-left:11px;
- background:#fff;
- border-bottom:1px solid #eeeeee;
- margin-bottom:0px;
- -webkit-transition: all .5s;
- text-align:left;
- text-transform:lowercase;
- }
- .tag:hover{
- color:#a0a0a0;
- padding-left:18px;
- -webkit-transition: all .5s;
- }
- </style>
- </head>
- <body>
- <div class="navbar">
- <div id="title">Navigation</div>
- <div id="navlinks">
- <a href="/">
- <div class="navlink">Home</div></a>
- <a href="http://tumblr.com/dashboard">
- <div class="navlink">Dashboard</div></a>
- <a href="http://neonbikethemes.tumblr.com">
- <div class="navlink">Credit</div></a>
- </div>
- </div>
- <div class="container">
- <!-- START SECTION -->
- <article>
- <div class="sectiontitle">Section title</div>
- <a href="/"><div class="tag">Lorem ipsum</div></a>
- <a href="/"><div class="tag">dolor sit</div></a>
- <a href="/"><div class="tag">amet consectetur</div></a>
- <a href="/"><div class="tag">adipiscing</div></a>
- <a href="/"><div class="tag">elit sed do eiusmod</div></a>
- <a href="/"><div class="tag">tempor incididunt</div></a>
- <a href="/"><div class="tag">ut labore</div></a>
- <a href="/"><div class="tag">et dolore magna</div></a>
- <a href="/"><div class="tag">aliqua</div></a>
- <a href="/"><div class="tag">Ut enim ad minim </div></a>
- <a href="/"><div class="tag">veniam</div></a>
- </article>
- <!-- END SECTION -->
- <!-- START SECTION -->
- <article>
- <div class="sectiontitle">Section title</div>
- <a href="/"><div class="tag">ut labore</div></a>
- <a href="/"><div class="tag">et dolore magna</div></a>
- <a href="/"><div class="tag">Lorem ipsum</div></a>
- <a href="/"><div class="tag">dolor sit</div></a>
- <a href="/"><div class="tag">amet consectetur</div></a>
- <a href="/"><div class="tag">adipiscing</div></a>
- <a href="/"><div class="tag">elit sed do eiusmod</div></a>
- <a href="/"><div class="tag">tempor incididunt</div></a>
- </article>
- <!-- END SECTION -->
- <!-- START SECTION -->
- <article>
- <div class="sectiontitle">section title</div>
- <a href="/"><div class="tag">dolor sit</div></a>
- <a href="/"><div class="tag">amet consectetur</div></a>
- <a href="/"><div class="tag">adipiscing</div></a>
- <a href="/"><div class="tag">elit sed do eiusmod</div></a>
- <a href="/"><div class="tag">tempor incididunt</div></a>
- <a href="/"><div class="tag">ut labore</div></a>
- <a href="/"><div class="tag">ut labore</div></a>
- <a href="/"><div class="tag">et dolore magna</div></a>
- <a href="/"><div class="tag">adipiscing</div></a>
- <a href="/"><div class="tag">elit sed do eiusmod</div></a>
- <a href="/"><div class="tag">et dolore magna</div></a>
- <a href="/"><div class="tag">aliqua</div></a>
- <a href="/"><div class="tag">Ut enim ad minim </div></a>
- <a href="/"><div class="tag">veniam</div></a>
- </article>
- <!-- START SECTION -->
- <article>
- <div class="sectiontitle">section title</div>
- <a href="/"><div class="tag">et dolore magna</div></a>
- <a href="/"><div class="tag">ut labore</div></a>
- <a href="/"><div class="tag">et dolore magna</div></a>
- <a href="/"><div class="tag">Lorem ipsum</div></a>
- <a href="/"><div class="tag">dolor sit</div></a>
- <a href="/"><div class="tag">amet consectetur</div></a>
- <a href="/"><div class="tag">adipiscing</div></a>
- <a href="/"><div class="tag">elit sed do eiusmod</div></a>
- <a href="/"><div class="tag">tempor incididunt</div></a>
- </article>
- <!-- END SECTION -->
- <!-- START SECTION -->
- <article>
- <div class="sectiontitle">section title</div>
- <a href="/"><div class="tag">adipiscing</div></a>
- <a href="/"><div class="tag">elit sed do eiusmod</div></a>
- <a href="/"><div class="tag">Lorem ipsum</div></a>
- <a href="/"><div class="tag">dolor sit</div></a>
- <a href="/"><div class="tag">amet consectetur</div></a>
- <a href="/"><div class="tag">adipiscing</div></a>
- <a href="/"><div class="tag">elit sed do eiusmod</div></a>
- <a href="/"><div class="tag">veniam</div></a>
- </article>
- <!-- END SECTION -->
- <!-- START SECTION -->
- <article>
- <div class="sectiontitle">Section title</div>
- <a href="/"><div class="tag">adipiscing</div></a>
- <a href="/"><div class="tag">elit sed do eiusmod</div></a>
- <a href="/"><div class="tag">et dolore magna</div></a>
- <a href="/"><div class="tag">ut labore</div></a>
- <a href="/"><div class="tag">et dolore magna</div></a>
- <a href="/"><div class="tag">Lorem ipsum</div></a>
- <a href="/"><div class="tag">dolor sit</div></a>
- <a href="/"><div class="tag">amet consectetur</div></a>
- <a href="/"><div class="tag">adipiscing</div></a>
- <a href="/"><div class="tag">elit sed do eiusmod</div></a>
- <a href="/"><div class="tag">tempor incididunt</div></a>
- </article>
- <!-- END SECTION -->
- <!-- START SECTION -->
- <article>
- <div class="sectiontitle">section title</div>
- <a href="/"><div class="tag">dolor sit</div></a>
- <a href="/"><div class="tag">amet consectetur</div></a>
- <a href="/"><div class="tag">adipiscing</div></a>
- <a href="/"><div class="tag">elit sed do eiusmod</div></a>
- <a href="/"><div class="tag">tempor incididunt</div></a>
- <a href="/"><div class="tag">ut labore</div></a>
- <a href="/"><div class="tag">ut labore</div></a>
- <a href="/"><div class="tag">et dolore magna</div></a>
- <a href="/"><div class="tag">adipiscing</div></a>
- <a href="/"><div class="tag">elit sed do eiusmod</div></a>
- <a href="/"><div class="tag">et dolore magna</div></a>
- <a href="/"><div class="tag">aliqua</div></a>
- <a href="/"><div class="tag">Ut enim ad minim </div></a>
- <a href="/"><div class="tag">veniam</div></a>
- </article>
- <!-- END SECTION -->
- <!-- START SECTION -->
- <article>
- <div class="sectiontitle">Section title</div>
- <a href="/"><div class="tag">Lorem ipsum</div></a>
- <a href="/"><div class="tag">dolor sit</div></a>
- <a href="/"><div class="tag">amet consectetur</div></a>
- <a href="/"><div class="tag">adipiscing</div></a>
- </article>
- <!-- END SECTION -->
- <!-- START SECTION -->
- <article>
- <div class="sectiontitle">Section Title</div>
- <a href="/"><div class="tag">elit sed do eiusmod</div></a>
- <a href="/"><div class="tag">et dolore magna</div></a>
- <a href="/"><div class="tag">ut labore</div></a>
- <a href="/"><div class="tag">et dolore magna</div></a>
- <a href="/"><div class="tag">Lorem ipsum</div></a>
- <a href="/"><div class="tag">dolor sit</div></a>
- <a href="/"><div class="tag">amet consectetur</div></a>
- <a href="/"><div class="tag">adipiscing</div></a>
- <a href="/"><div class="tag">tempor incididunt</div></a>
- </article>
- <!-- END SECTION -->
- <!-- START SECTION -->
- <article>
- <div class="sectiontitle">Section title</div>
- <a href="/"><div class="tag">ut labore</div></a>
- <a href="/"><div class="tag">et dolore magna</div></a>
- <a href="/"><div class="tag">Lorem ipsum</div></a>
- <a href="/"><div class="tag">dolor sit</div></a>
- <a href="/"><div class="tag">amet consectetur</div></a>
- <a href="/"><div class="tag">adipiscing</div></a>
- </article>
- <!-- END SECTION -->
- </div>
- </div>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement