Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- net page #1 ver 1 'social club' by sur southcodes.tumblr.com
- - modify as you please but please do not touch the credit
- - any errors? need help? have questions? let me know!
- southcodes.tumblr.com/ask
- -->
- <!DOCTYPE html>
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <link href="https://fonts.googleapis.com/css?family=Open Sans:400,600|Montserrat:500,300" rel="stylesheet">
- <style type="text/css">
- ::-webkit-scrollbar-thumb:vertical {
- background-color: #ddd;
- border-right: 4px solid #fcfcfc;
- border-bottom: 4px solid #fcfcfc;
- border-top: 4px solid #fcfcfc;}
- ::-webkit-scrollbar {
- width:5px;
- }
- .tmblr-iframe {
- margin:80px 10px 10px;
- opacity:.2;
- -moz-transition-duration: 0.2s;
- -o-transition-duration: 0.2s;
- -webkit-transition-duration: 0.2s;
- transition-duration: 0.2s;}
- .tmblr-iframe:hover{
- opacity:.65;
- -moz-transition-duration: 0.6s;
- -o-transition-duration: 0.6s;
- -webkit-transition-duration: 0.6s;
- transition-duration: 0.6s;
- }
- #s-m-t-tooltip{
- font-family:calibri;
- max-width:300px;
- margin-top:25px;
- margin-left:15px;
- z-index:999999;
- letter-spacing:1.6px;
- text-transform:uppercase;
- font-size:8.5px;
- border: solid 1px #ddd;
- background-color:#fcfcfc;
- color:#666;
- padding:3px 5px;
- }
- body {
- color:#333;
- font-size:13px;
- font-family: 'Open Sans', sans-serif;
- background-color:#fdfdfd;
- letter-spacing:1px;
- }
- a{
- color:#8c8c8c;
- text-decoration:none;
- -moz-transition-duration: 0.6s;
- -o-transition-duration: 0.6s;
- -webkit-transition-duration: 0.6s;
- transition-duration: 0.6s;}
- a:hover{
- color:#000;
- -moz-transition-duration: 0.6s;
- -o-transition-duration: 0.6s;
- -webkit-transition-duration: 0.6s;
- transition-duration: 0.6s;
- }
- /* head */
- .topbar {
- width:100%;
- height:70px;
- position:fixed;
- z-index:9999;
- top:0px;
- left:0px;
- right:0px;
- border-bottom:2px solid #eee;
- background:#fff;
- }
- .bar {
- width:670px;
- margin:auto;
- margin-top:10px;
- }
- .simg {
- display:inline-block;
- width:50px;
- height:50px;
- margin: 0 10px 0 0;
- }
- .simg img{
- width:50px;
- height:50px;
- border-radius:10px;
- }
- .inside {
- display:inline-block;
- vertical-align:top;
- width:270px;
- }
- .title{
- font-family: 'Montserrat', sans-serif;
- font-weight:500;
- text-transform:uppercase;
- font-size:14px;
- margin-bottom:2px;
- }
- .links {
- line-height:17px;
- font-size:14px;
- font-variant:small-caps;}
- .links a{padding-right:5px;}
- .links a:last-child{padding-right:0px;}
- .desc {
- float:right;
- text-align:right;
- width:310px;
- height:50px;
- display: flex;
- justify-content: center;
- flex-direction: column;
- }
- /* body */
- .content{
- width:720px;
- margin:140px auto 40px;
- }
- .box{
- width:130px;
- margin: 0px 25px 30px;}
- .box a{color:#393838;}
- .name {
- text-align:center;
- font-size:11px;
- text-transform:uppercase;
- margin-bottom:3px;
- font-weight:600;
- }
- .icon img{
- width:130px;
- height:auto;
- }
- .caption {
- font-size:12px;
- letter-spacing:1.2px;
- text-align:justify;
- border:1px solid #eee;
- padding:2px 5px;
- background:#fcfcfc;
- text-transform:lowercase;
- }
- .blog{
- font-family: 'Montserrat', sans-serif;
- font-weight:300;
- text-align:center;
- font-size:13px;
- margin:-1px 0 5px;
- font-variant:small-caps;
- }
- /* extras */
- .credit {font-family:calibri;position:fixed;bottom:10px;right:10px;font-size:11px;}.credit a{color:#999;font-variant:small-caps;}
- </style>
- </head>
- <body>
- <div class="topbar"><div class="bar"><div class="simg"><a href="/">
- <!-- topbar image -->
- <img src=""/>
- </a></div><div class="inside"><div class="title">
- <!-- page title -->
- page title
- </div><div class="links">
- <!-- links -->
- <a href="/">home;</a>
- <a href="/ask">ask;</a>
- <a href="/">link 2;</a>
- <a href="/">link 3;</a>
- <a href="/">link 4;</a>
- </div></div><div class="desc">
- <!-- page description -->
- a description goes here if you want it
- </div></div></div><div class="content" data-masonry='{ "itemSelector": ".box"}'>
- <!-- BOX START -->
- <div class="box">
- <div class="name">
- name <!-- name -->
- </div>
- <div class="icon">
- <a href="blog url"><img src="image url"/></a> <!-- icon -->
- </div>
- <div class="blog">
- <a href="blog url">blog url</a> <!-- url -->
- </div>
- <div class="caption">
- description <!-- description -->
- </div>
- </div>
- <!-- BOX END -->
- <!-- BOX START -->
- <div class="box">
- <div class="name">
- name <!-- name -->
- </div>
- <div class="icon">
- <a href="blog url"><img src="image url"/></a> <!-- icon -->
- </div>
- <div class="blog">
- <a href="blog url">blog url</a> <!-- url -->
- </div>
- <div class="caption">
- description <!-- description -->
- </div>
- </div>
- <!-- BOX END -->
- <!-- BOX START -->
- <div class="box">
- <div class="name">
- name <!-- name -->
- </div>
- <div class="icon">
- <a href="blog url"><img src="image url"/></a> <!-- icon -->
- </div>
- <div class="blog">
- <a href="blog url">blog url</a> <!-- url -->
- </div>
- <div class="caption">
- description <!-- description -->
- </div>
- </div>
- <!-- BOX END -->
- <!-- BOX START -->
- <div class="box">
- <div class="name">
- name <!-- name -->
- </div>
- <div class="icon">
- <a href="blog url"><img src="image url"/></a> <!-- icon -->
- </div>
- <div class="blog">
- <a href="blog url">blog url</a> <!-- url -->
- </div>
- <div class="caption">
- description <!-- description -->
- </div>
- </div>
- <!-- BOX END -->
- <!-- BOX START -->
- <div class="box">
- <div class="name">
- name <!-- name -->
- </div>
- <div class="icon">
- <a href="blog url"><img src="image url"/></a> <!-- icon -->
- </div>
- <div class="blog">
- <a href="blog url">blog url</a> <!-- url -->
- </div>
- <div class="caption">
- description <!-- description -->
- </div>
- </div>
- <!-- BOX END -->
- </div>
- <!-- dont touch pls --><div class="credit"><a href="http://southcodes.tumblr.com" title="southcodes">s.</a></div>
- </body>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("a[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:30,
- tip_fade_speed:300,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
- <script>
- $('.content').masonry({
- itemSelector: '.box',
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement