Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <!--
- Blossom Theme by Mhango
- A Faves / Networks Page Layout
- Version 1 (4th July 2016)
- Credits to
- fontawesome.com for the icons
- fonts.google.com for the fonts
- Example pictures found on tumblr.
- Rules: - don't reupload or claim as your own
- - don't edit or remove the credits!!!
- - don't use as a base code
- - thievery will be reported immediately
- (This theme works both as a blog and a page theme.)
- -->
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <meta charset="utf-8">
- <link href="https://fonts.googleapis.com/css?family=Muli:400,400i" rel="stylesheet">
- <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
- <!-- TOOLTIP CODE -->
- <script type="text/javascript"
- src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
- <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:200,
- tip_fade_speed:300
- }
- );
- });
- })(jQuery);
- </script>
- <!-- END OF TOOLTIP CODE -->
- <style type="text/css">
- /* Tooltips */
- #s-m-t-tooltip {
- max-width:300px;
- border-radius: 0px;
- padding:3px 5px 3px 5px;
- margin:20px 7px -2px 20px;
- background-color:#fff;
- border:1px solid #FEDBE2;
- font-family:'Muli', Helvetica, Arial, sans-serif;
- font-size:10px;
- color:#000;
- z-index:999999999999999999999999999999999999;
- font-weight:normal;
- text-align:center;
- text-transform:uppercase;
- }
- /* Scrollbar */
- ::-webkit-scrollbar-thumb{
- background-color: #FEDBE2;
- border: 3px solid #fff;
- height:auto;
- -moz-border-radius: 10px;
- border-radius: 0px;
- }
- ::-webkit-scrollbar {
- height:auto;
- width:9px;
- background-color: #fff;
- border: 4px solid #fff;
- }
- /* Text selection */
- ::-moz-selection {
- background: #FEF5F7;
- color: #000;
- }
- ::selection {
- background: #FEF5F7;
- color: #000;
- }
- /* Basic styles */
- body {
- font-family:'Muli', Helvetica, Arial, sans-serif;
- font-size: 11px;
- color: #000;
- background-position: fixed;
- background-attachment:fixed;
- background-repeat:repeat;
- background-color:#fff;
- }
- /* Basic links */
- a {
- color:#000;
- text-decoration:none;
- -webkit-transition-duration:.6s;
- -moz-transition-duration:.6s;
- -o-transition-duration:.6s;
- -ms-transition-duration:.6s;
- }
- a:hover {
- color: #FBC3CF;
- -webkit-transition-duration:.6s;
- -moz-transition-duration:.6s;
- -o-transition-duration:.6s;
- -ms-transition-duration:.6s;
- }
- /* Box container */
- #content {
- width:700px;
- margin-left:-350px;
- margin-top:150px;
- left:50%;
- float: left;
- position:absolute;
- }
- /* Member boxes */
- .member {
- overflow:hidden;
- display: inline-block;
- margin:18px;
- }
- .icon {
- padding: 10px;
- border:1px solid #FEDBE2;
- background: #fff;
- }
- .icon img {
- height:110px;
- width:110px;
- }
- .name {
- padding:8px;
- border-bottom:1px solid #FEDBE2;
- border-left:1px solid #FEDBE2;
- border-right:1px solid #FEDBE2;
- background: #fff;
- text-align:center;
- font-size:13px;
- letter-spacing:1px;
- text-transform:uppercase;
- font-family: 'Montserrat', 'Muli', Helvetica, Arial, sans-serif;
- }
- .overlay {
- text-align:center;
- opacity:0;
- width:110px;
- height:110px;
- position:absolute;
- background-color:rgba(255,255,255,.8);
- padding:10px;
- margin-top:-131px;
- margin-left:1px;
- -webkit-transition: all .6s ease;
- -moz-transition: all .6s ease;
- -o-transition: all .6s ease;
- transition: all .6s ease;
- }
- .member:hover .overlay {
- opacity:1;
- -webkit-transition: all .6s ease;
- -moz-transition: all .6s ease;
- -o-transition: all .6s ease;
- transition: all .6s ease;
- }
- .about {
- font-size:12px;
- margin-top:50px;
- }
- #important{
- bottom:5px;
- right:5px;
- font-size:12px;
- position:fixed;
- z-index:9999999999999999999999999999;
- }
- #important a{
- color:#000;
- }
- /* Header */
- #header {
- background: #fff;
- padding: 8px;
- border:1px solid #FEDBE2;
- color: #000;
- width: 200px;
- float:left;
- line-height:14px;
- height:auto;
- right: 50%;
- margin-top:10px;
- margin-right:-100px;
- margin-bottom:50px;
- top: 20px;
- position:absolute;
- box-shadow:0px 0px rgba(0,0,0,0.3);
- text-align:center;
- z-index: 99;
- }
- .blogtitle {
- padding:3px;
- margin-top:-16px;
- margin-right:20px;
- margin-left:20px;
- text-align:center;
- text-transform:uppercase;
- letter-spacing:2px;
- font-weight:normal;
- font-family: 'Montserrat', 'Muli', Helvetica, Arial, sans-serif;
- z-index: 999;
- background:white;
- color:#FBC3CF;
- }
- .blogtitle a{
- text-decoration:none;
- background-color:transparent;
- font-size:22px;
- color:#FBC3CF;
- }
- .blogtitle a:hover{
- text-decoration:none;
- background-color:transparent;
- color:#FEDBE2;
- }
- .description {
- font-size:11px;
- text-align:center;
- }
- .nav {
- border-top:1px solid #FEDBE2;
- padding-top:3px;
- }
- .nav a {
- color:#000;
- text-transform:uppercase;
- padding:6px 10px 3px 10px;
- opacity: 1.;
- font-size:13px;
- line-height:100%;
- -webkit-transition: all .2s ease-in-out;
- -moz-transition: all .2s ease-in-out;
- -ms-transition: all .2s ease-in-out;
- -o-transition: all .2s ease-in-out;
- transition: all .2s ease-in-out;
- display: inline-block;
- }
- .nav a:hover {
- text-decoration:none;
- color:#000;
- transform: scale(1.2);
- -webkit-transition: all .2s ease-in-out;
- -moz-transition: all .2s ease-in-out;
- -ms-transition: all .2s ease-in-out;
- -o-transition: all .2s ease-in-out;
- transition: all .2s ease-in-out;
- }
- </style>
- <body>
- <div id="header">
- <!-- Change the blog title below -->
- <div class="blogtitle"><a href="/">FAVORITES</a></div>
- <!-- Change the description below -->
- <p><div class="description">Write a short description here.</div></p>
- <!-- Change the navigation below, icons from https://fontawesome.com -->
- <div class="nav">
- <a href="https://www.tumblr.com/dashboard" title="dashboard"><i class="fa fa-home"></i></a>
- <a href="/" title="blog"><i class="fa fa-user"></i></a>
- <!-- Don't delete the credit please -->
- <a href="https://evas-themes.tumblr.com" target="_blank" title="theme by mhango"><i class="fa fa-code"></i></a>
- </div></div>
- <!-- This is where the box container begins -->
- <div id="content">
- <div class="member"> <!--1st row -->
- <div class="icon">
- <img src="https://67.media.tumblr.com/2dd79db3022fbf9d5ae1447576faae36/tumblr_nv6l6fc0s51qapuajo1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member">
- <div class="icon">
- <img src="https://66.media.tumblr.com/94e03efcffaf5d480fca06ed7fa2065e/tumblr_n5r0mksVTI1qzsvm1o1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member">
- <div class="icon">
- <img src="https://66.media.tumblr.com/68f7b346055afc08cf1f64d2b4f36043/tumblr_noxt1cS4Uq1sulnzno1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member">
- <div class="icon">
- <img src="https://66.media.tumblr.com/5928fbc5b231d945e93378157863dbd1/tumblr_nbjhy3yUX71r54ex6o1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member"> <!--2nd row -->
- <div class="icon">
- <img src="https://66.media.tumblr.com/f5da17b943a5b461fbaa0dc155992bbd/tumblr_nn0sm83aOi1u54b7lo1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member">
- <div class="icon">
- <img src="https://66.media.tumblr.com/8744c4ac9db23e6852b33bca9571778e/tumblr_nmrdljWyir1rnajv7o1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member">
- <div class="icon">
- <img src="https://67.media.tumblr.com/3d7cb969dcdff235a92481fba9d288a3/tumblr_ny9d29AFz21u78fn7o1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member">
- <div class="icon">
- <img src="https://66.media.tumblr.com/22c6b1b7fe1da9621bf1180ad4dcff9e/tumblr_nognkiosJZ1tn6jt3o1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member"> <!--3rd row -->
- <div class="icon">
- <img src="https://66.media.tumblr.com/88d1c52d3a65fb51d892da3d5591303a/tumblr_nir95kDwRH1sca8xco1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member">
- <div class="icon">
- <img src="https://66.media.tumblr.com/b2504b5fb3c22a6525e0f266b9c2d9bc/tumblr_o1ejjdo6IS1sg8ttro1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member">
- <div class="icon">
- <img src="https://65.media.tumblr.com/ec74fb7cf0dd9c3579716a50bbe5a250/tumblr_myu98u2i6x1r7z6aio1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member">
- <div class="icon">
- <img src="https://67.media.tumblr.com/c2c673ae7c22b4a0f67c1860495362d0/tumblr_nvtdh373Po1ro5o6xo1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member"> <!--4th row -->
- <div class="icon">
- <img src="https://66.media.tumblr.com/6ac1ee670cdb415919eda7caf8797676/tumblr_o10smmsaMk1semkxlo1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member">
- <div class="icon">
- <img src="https://67.media.tumblr.com/03e69adb0ecc1dcefc10edb782930a41/tumblr_o6b80pQA8T1t4c668o1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member">
- <div class="icon">
- <img src="https://66.media.tumblr.com/cd5341cee191433490c2377bc9a9d579/tumblr_nzb5m32EFl1skpo5ko1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <div class="member">
- <div class="icon">
- <img src="https://67.media.tumblr.com/3e42cfbb93bbcd8b575fbcf12946fdfa/tumblr_nmkex9Akmo1thynt0o1_500.jpg"/></div>
- <div class="overlay"><div class="about">Description here</div></div>
- <div class="name"><a href="MEMBER URL">NAME</a></div></div>
- <!-- To add more members just copy one paragraph from <div class="member"> to </div></div> and paste it above this comment. -->
- </div>
- <!-- Don't delete or edit this part in any way or I'll find you. -->
- <div id="important"><a href="https://mhango.tumblr.com" target="_blank" title="theme by mhango"><i class="fa fa-cloud" aria-hidden="true"></i></a></div>
- <!-- Seriously it's so small just leave it there, ok? -->
- </body>
- </html>
Add Comment
Please, Sign In to add comment