API tools faq
paste
Advertisement
flormzel

page 04. About:Cart by @flormzel

flormzel
Oct 11th, 2018
807
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.51 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>about</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.    <style type="text/css">
  26.    body {font-family: 'Roboto', sans-serif;
  27.    background: #e6e6e6; /* background color */}
  28.    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;}
  29.    a:hover {opacity:0.5; text-decoration: none;}
  30.  
  31.    /* scrollbar */
  32.    ::-webkit-scrollbar {width:0px;height:0px;/* change to 12px */background-color:transparent;}
  33.    ::-webkit-scrollbar-thumb {background-clip:padding-box;background-color:transparent; /* scrollbar color */border:1px solid transparent;}
  34.    .square::-webkit-scrollbar {width:0px;}
  35.    /* image size */
  36.    img {max-width: 100%;height: auto;}
  37.    .icon {display: inline-block;vertical-align: middle;}
  38.    /* icon moving */
  39.    .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:
  40.    hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;-webkit-transition-duration: 0.5s;transition-duration: 0.5s;}
  41.    .pump:hover, .pump:focus, .pump:active {-webkit-transform: scale(1.1) rotate(4deg);transform: scale(1.1) rotate(4deg);}
  42.    
  43.    /* credit - DO NOT NOT NOT NOT NOT DELETE - CHANGE COLORS ONLY */
  44.    .credit {bottom:20px;right:20px;position:fixed;}
  45.    .credit a {font-size:9px;letter-spacing: 1px;font-family:"cocogoose";font-weight:bold;border-radius:3px;background:#6980d3;color:#f9f9f9;/* CHANGE COLORS ONLY */
  46.    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;}
  47.    .credit a:hover {color:#f9f9f9;background:#6980d3;} /* CHANGE COLORS ONLY */
  48.    /* credit - DO NOT NOT NOT NOT NOT DELETE - CHANGE COLORS ONLY */
  49.  
  50.    /* fonts */
  51.    @font-face { font-family: "cocogoose"; src: url('cocogoose.woff2') format('woff2'),url('cocogoose.woff') format('woff');}
  52.  
  53.    #container{position:absolute;overflow: hidden;width:290px;height:290px;left:50%;top:50%;border-radius: 5px;background:#f9f9f9; /* background color */
  54.    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%);}
  55.  
  56.    /* links */
  57.    #links {position:fixed;width:auto;top:40px;left:50px;}
  58.    .links {height:12px;padding:8px;border-radius:5px;background:#6980d3;color:#f9f9f9;/* colors */float:left;font-weight:700;font-size:10px;}
  59.    .links {margin-right:10px;}
  60.    .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;}
  61.  
  62.  
  63.    /* icon */
  64.    .icon, icon img {position: absolute; top: 32%; left: 50%;height:80px;width:80px;border-radius: 50%; border: 10px solid #f9f9f9;/* colors */
  65.    z-index: 999;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
  66.    /*.icon {background: #6980d3;} */
  67.    .icon img {border-radius: 50%;}
  68.  
  69.    /* name and about */
  70.    #name, #about {position: absolute; left: 75px;width:140px;border-radius:5px;border: 1px solid #b4b4b4;/* colors */}
  71.    .name, .about {position: relative;margin-left: 35px;}
  72.    .name h1, .about h1 {color:#b4b4b4;/* colors */font-size: 10px;font-weight: 400;padding-right:4px;}
  73.    .lnr i {position: absolute;width:auto;padding: 9px;background:#eeeeee;font-size: 12px;color: #b4b4b4; /* colors */border-radius:5px 0px 0px 5px; font-weight: 900}
  74.    /* name */
  75.    #name {top: 70px;}
  76.    .name {padding: 3px;overflow: hidden;}
  77.    /* about */
  78.    #about {top: 120px;}
  79.    .about {padding: 3px;line-height: 80%;margin-top: 0px;overflow: auto;height: 60px; }
  80.    #about .lnr i {padding-bottom: 45px;}
  81.  
  82.    /* follow button */
  83.    .follow {position: absolute;left: 75px;top: 220px;height:12px;padding:8px 51px 8px 51px;border-radius:5px;
  84.    background:#dcc5af;color:#f9f9f9;/* colors */font-weight:700;font-size:10px;text-transform: lowercase;letter-spacing: 2px}
  85.  
  86.    </style>
  87. </head>
  88. <body>
  89.    <!-- icon -->
  90.    <!-- IMPORTANT NOTE //
  91.        if you wish to use a background color:
  92.            1. delete "<img src="LINK">"
  93.            2. enable ".icon {background: #6980d3;}" on css code
  94.            3. delete ".icon img {border-radius: 50%;}" on css code -->
  95.    <div class="icon"><img src="https://i.imgur.com/GGhZLzd.png"></div>
  96.  
  97.    <!-- CONTAINER -->
  98.    <div id="container">
  99.        <!-- name -->
  100.        <div id="name">
  101.        <div class="lnr"><i class="lnr lnr-user"></i></div>
  102.        <div class="name"><h1>title here</h1></div> <!-- title goes here -->
  103.        </div>
  104.        <!-- about -->
  105.        <div id="about">
  106.        <div class="lnr"><i class="lnr lnr-pointer-right"></i></div>
  107.        <div class="about"><!-- bio goes here -->
  108.            <h1 style="text-align: justify;">hi this is your bio, write anything you like.
  109.            <br>this container scrolls on it's own so u ok
  110.             <br>keep it cool.</h1></div>
  111.         </div>
  112.         <!-- follow button -->
  113.         <!-- side note //
  114.             change only "YOURUSERNAME"
  115.             ex: <a href="https://www.tumblr.com/follow/flormzel"> -->
  116.         <a href="https://www.tumblr.com/follow/YOURUSERNAME"><div class="follow">follow</div></a>
  117.     </div><!-- end of CONTAINER -->
  118.  
  119.     <!-- links -->
  120.     <div id="links">
  121.         <a href="/"><div class="links"><i class="lnr lnr-home"></i> home</div></a>
  122.         <a href="/ask"><div class="links"><i class="lnr lnr-inbox"></i> message</div></a>
  123.     </div>
  124.  
  125.     <!-- DO NOT DELETE CREDIT DO NOT DELETE CREDIT DO NOT DELETE CREDIT -->
  126.     <div class="credit"><a href="http://flormzel.tumblr.com">flormzel</a></div>
  127.     <!-- DO NOT DELETE CREDIT DO NOT DELETE CREDIT DO NOT DELETE CREDIT -->
  128.  
  129. </body>
  130. </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!