API tools faq
paste
Advertisement
flormzel

page 05. The Team by @flormzel

flormzel
Oct 11th, 2018
304
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.12 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <!--
  3.  
  4.     PAGE
  5.     by @flormzel
  6.  
  7. — don't steal this
  8.  
  9. credits:
  10.   images - kendall jenner instagram
  11.  
  12. -->
  13.  
  14. <head>
  15.    <meta charset="UTF-8">
  16.    <title>the team</title> <!-- title -->
  17.    <link rel="shortcut icon" href="https://i.imgur.com/GGhZLzd.png"> <!-- icon -->
  18.    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <!-- font -->
  19.  
  20.    <!--FONT AWESOME-->
  21.    <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  22.    <!-- list
  23.    https://linearicons.com/free#cheat-sheet -->
  24.  
  25.    <!-- tooltip -->
  26.    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  27.    <script src="https://static.tumblr.com/eytkop6/FEApgele0/tooltip.js"></script>
  28.    <script>(function($){ $(document).ready(function() {$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:20,tip_fade_speed:200,attribute:"title"});});})(jQuery);</script>
  29.  
  30.    <style type="text/css">
  31.    body {color: white; /* colors */font-family: 'Roboto', sans-serif;
  32.    background: #e6e6e6; /* background color */    }
  33.    a {color: #6980d3;/* colors */text-decoration: none;transition:0.5s ease;-o-transition:0.5s ease;-moz-transition:0.5s ease;-webkit-transition:0.5s ease;}
  34.    a:hover {opacity:0.5; text-decoration: none;}
  35.    i {color:white; /* colors */font-style:italic;}
  36.    b, bold { font-weight:bold; font-weight:900; color:#000000;}
  37.  
  38.    /* scrollbar */
  39.    ::-webkit-scrollbar {width:0px;height:0px;/* change to 12px */background-color:transparent;}
  40.    ::-webkit-scrollbar-thumb {background-clip:padding-box;background-color:transparent; /* scrollbar color */border:1px solid transparent;}
  41.    .square::-webkit-scrollbar {width:0px;}
  42.    /* image size */
  43.    img {max-width: 100%;height: auto;}
  44.    .icon {display: inline-block;vertical-align: middle;}
  45.    /* icon moving */
  46.    .pump {display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility:
  47.    hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;}
  48.    .pump:hover, .pump:focus, .pump:active {-webkit-transform: scale(1.1) rotate(4deg);transform: scale(1.1) rotate(4deg);}
  49.    /* tooltip */
  50.    #s-m-t-tooltip {max-width:100px;border-radius:3px; padding:8px; padding-left:12px;padding-right:12px;margin:20px 20px 5px 0px;
  51.    color:white; background: #6980d3;/* colors */font-size:7px; text-transform:uppercase; letter-spacing:2px; font-weight:700;z-index:9999999999;}
  52.    
  53.    /* credit - DO NOT NOT NOT NOT NOT DELETE - CHANGE COLORS ONLY */
  54.    .credit {bottom:20px;right:20px;position:fixed;}
  55.    .credit a {font-size:9px;letter-spacing: 1px;font-family:"cocogoose";font-weight:bold;border-radius:3px;background:#6980d3;color:#f9f9f9;/* CHANGE COLORS ONLY */
  56.    margin-right:5px;margin-bottom:5px;padding-bottom:3px;padding-top:3px;padding-right:5px;padding-left:5px;z-index:99999;text-decoration:none;display:inline-block;width:auto;}
  57.    .credit a:hover {color:#f9f9f9;background:#6980d3;} /* CHANGE COLORS ONLY */
  58.    /* credit - DO NOT NOT NOT NOT NOT DELETE - CHANGE COLORS ONLY */
  59.  
  60.    /* fonts */
  61.    @font-face { font-family: "cocogoose"; src: url('cocogoose.woff2') format('woff2'),url('cocogoose.woff') format('woff');}
  62.    @font-face { font-family: "bijay"; src: url('https://static.tumblr.com/eytkop6/3XSpbioqn/bijay.otf');}
  63.    @font-face { font-family: "zipper"; src: url('https://static.tumblr.com/eytkop6/JgZpdh2yg/zipper-regular.ttf');}
  64.  
  65.    #container{position:absolute;width:460px;height:260px;left:40%;top:50%;border-radius: 5px;background:#f9f9f9; /* background color */
  66.    padding: 20px;overflow-x: scroll;overflow-y: hidden;white-space: nowrap;padding-right: 20px;
  67.    z-index:9;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
  68.  
  69.    /* title */
  70.    .title, .title-shadow {position: absolute;font-size: 70px; font-weight: 900;text-transform: uppercase;font-family: "bijay";width: auto;}
  71.    .title {color:#6980d3;/* colors */top:20%;left:45%;/* change top and left numbers if you change your title's name */z-index: 999999;}
  72.     .title-shadow {top:21%;left:44%;/* change top and left numbers if you change your title's name */
  73.     -moz-text-fill-color: transparent;-webkit-text-fill-color: transparent;-moz-text-stroke-color: #6980d3;-webkit-text-stroke-color: #6980d3;/* colors */
  74.     -moz-text-stroke-width: 1px;-webkit-text-stroke-width: 1px;text-decoration: none;z-index: 99;}
  75.     /* description */
  76.     .des {position: relative;font-size: 10px; font-weight: 900;top:17%;left:47%;color:#6980d3;/* colors */font-family: "zipper";width: 350px;}
  77.  
  78.     /* links */
  79.     #links {position:absolute;top:26%;left:23%;list-style-type:none;}
  80.     .links {height:12px;padding:8px;border-radius:5px;background:#6980d3;color:#f9f9f9;/* colors */float:left;font-weight:700;font-size:10px;}
  81.     .links {margin-right:10px;}
  82.     .links:hover {color:#f9f9f9;background:#dcc5af;/* colors */transition:0.5s ease;-o-transition:0.5s ease;-moz-transition:0.5s ease;-webkit-transition:0.5s ease;}
  83.  
  84.     /* img */
  85.     .images {position:absolute;width:140px;height:260px;left:20px;top:20px;border-radius: 5px;padding-right: 20px;}
  86.     .img img {width: 100%;height: 100%;z-index: 99;}
  87.     /* social media button */
  88.     .sm, .sm1 {position:absolute;width:auto;left:10px;height:10px;padding:8px;border-radius:5px;background:#dcc5af;color:#f9f9f9;/* colors */
  89.     font-weight:700;font-size:11px;text-align:center;}
  90.     .sm {top: 10px;}
  91.     .sm1 {top: 40px;}
  92.     /* name */
  93.     .name {position:absolute;width:100px;height:10px;padding:8px;bottom: 50px;right:-20px;font-weight:700;color:white;/* colors */font-size:12px;
  94.     letter-spacing:1px;transform:rotate(-90deg);}
  95.  
  96.     /* scroll text */
  97.     .scroll {position:absolute;width:auto;height:12px;padding:8px;bottom: 26%;left:50.5%;border-radius:5px;background:#dcc5af;color:#f9f9f9;/* colors */
  98.     font-weight:700;font-size:10px;text-align:center;}
  99.  
  100.     </style>
  101. </head>
  102. <body>
  103.     <!-- title -->
  104.     <!-- side note //
  105.         change css top and left numbers if you change your title's name -->
  106.    <div class="title">the team</div><div class="title-shadow">the team</div>
  107.    <!-- description -->
  108.    <div class="des">Meet our amazing team! Don't forget to follow us.</div><!-- description goes here -->
  109.     <!-- links -->
  110.     <div id="links">
  111.         <a href="/"><div class="links"><i class="lnr lnr-home"></i> home</div></a>
  112.         <a href="/ask"><div class="links"><i class="lnr lnr-inbox"></i> message</div></a>
  113.     </div>
  114.  
  115.     <!-- CONTAINER -->
  116.     <!-- for an extra link enable what's marked as optional -->
  117.    <div id="container">
  118.        <!-- 1 -->
  119.    <div class="images" style="margin-top:0px;margin-left:0px;"><div class="img"><img src="https://i.imgur.com/WLOdMJD.jpg"><!-- image -->
  120.    <div class="name">NAME</div><!-- name -->
  121.    <!-- links --><a href="URLHERE" title="social media"><div class="sm"><i class="lnr lnr-lighter"></i></div></a>
  122.    <!-- optional <a href="URLHERE" title="something else"><div class="sm1"><i class="lnr lnr-printer"></i></div></a>--></div></div>
  123.        
  124.        <!-- 2 -->
  125.    <div class="images" style="margin-top:0px;margin-left:160px;"><div class="img"><img src="https://i.imgur.com/OzT0INe.jpg"><!-- image -->
  126.    <div class="name">NAME</div><!-- name -->
  127.    <!-- links --><a href="URLHERE" title="social media"><div class="sm"><i class="lnr lnr-lighter"></i></div></a>
  128.    <!-- optional <a href="URLHERE" title="something else"><div class="sm1"><i class="lnr lnr-printer"></i></div></a>--></div></div>
  129.        
  130.        <!-- 3 -->
  131.    <div class="images" style="margin-top:0px;margin-left:320px;"><div class="img"><img src="https://i.imgur.com/J1OcDv1.jpg"><!-- image -->
  132.    <div class="name">NAME</div><!-- name -->
  133.    <!-- links --><a href="URLHERE" title="social media"><div class="sm"><i class="lnr lnr-printer"></i></div></a>
  134.    <!-- optional <a href="URLHERE" title="something else"><div class="sm1"><i class="lnr lnr-lighter"></i></div></a>--></div></div>
  135.        
  136.        <!-- 4 -->
  137.    <div class="images" style="margin-top:0px;margin-left:480px;"><div class="img"><img src="https://i.imgur.com/WLOdMJD.jpg"><!-- image -->
  138.    <div class="name">NAME</div><!-- name -->
  139.    <!-- links --><a href="URLHERE" title="social media"><div class="sm"><i class="lnr lnr-printer"></i></div></a>
  140.    <!-- optional <a href="URLHERE" title="something else"><div class="sm1"><i class="lnr lnr-lighter"></i></div></a>--></div></div>
  141.  
  142.    <!-- if you want more just copy and paste the code, make sure you change 'margin-left' inserted on the html code -->
  143.    </div><!-- end of CONTAINER -->
  144.  
  145.    <div class="scroll">scroll horizontally</div>
  146.  
  147.    <!-- DO NOT DELETE CREDIT DO NOT DELETE CREDIT DO NOT DELETE CREDIT -->
  148.    <div class="credit"><a href="http://flormzel.tumblr.com">flormzel</a></div>
  149.    <!-- DO NOT DELETE CREDIT DO NOT DELETE CREDIT DO NOT DELETE CREDIT -->
  150.  
  151. </body>
  152. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!