API tools faq
paste
Advertisement
flormzel

page 01. Citie by @flormzel

flormzel
Feb 17th, 2018
174
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.42 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     : page by @flormzel
  4.    
  5.     DONT — steal or claim as
  6.     your own.
  7.     - do not remove the credit
  8.     DO - edit whoever you like
  9.     I allow you to use my code
  10.     for personal purposes such
  11.     as learning (beginners only).
  12.  
  13. -->
  14.  
  15. <!-- cursor -->
  16. <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), progress !important;}</style><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Small Grey Outline Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>
  17.  
  18. <!DOCTYPE html>
  19. <html>
  20. <head>
  21.     <meta charset="UTF-8">
  22.     <title>{Title}</title> <!-- change title -->
  23.     <link rel="shortcut icon" href="{Favicon}">
  24.  
  25.     <!-- google fonts -->
  26.     <link href="https://fonts.googleapis.com/css?family=Anonymous+Pro|Archivo+Black|Lekton|Oxygen+Mono" rel="stylesheet">
  27.  
  28.     <!--FONT AWESOME-->
  29.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  30.     <link href='https://static.tumblr.com/8pnyeus/sXxofi7lt/outicons.css' rel='stylesheet' type='text/css'>
  31.     <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  32.     <!-- list
  33.     https://www.3nions.com/font-awesome-icon-codes-css-content-values-list/
  34.     https://raw.githubusercontent.com/antonps/outicons/master/complete/css/outicons.css
  35.     https://linearicons.com/free#cheat-sheet
  36.     -->
  37.  
  38. <style type="text/css">
  39.  
  40.     /* BASIC */
  41.  
  42.     body {color: #000; /*text color*/
  43.     background: url("https://i.imgur.com/cMFHfyQ.jpg"); /*background image*/
  44.     -webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover; background-size:cover;}
  45.  
  46.     .icon {display: inline-block;vertical-align: middle;}
  47.     img {max-width: 100%;height: auto;-moz-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
  48.     img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);transform: scale(1.1);}
  49.  
  50.     a {color:#fff; /*link color*/ text-decoration: none; }
  51.     a:hover {color: #5191b8; /*link hover color*/}
  52.     i {color: #c38b70;font-style: italic;} /*italic color*/
  53.     b {color: #5191b8;font-weight: bold;} /*bold color*/
  54.     u {color:#819cb1;text-decoration: underline;}/*underline color*/
  55.     s {color: #054d65;text-decoration: line-through;}/*line hover text color*/
  56.     big {color: #054d65;font-size: 12px;}
  57.     small {color: #c38b70;font-size: 8px;}
  58.     sub {font-size:9px;color: #5191b8}
  59.     sup {font-size:9px;color:#c38b70;}
  60.     mark {padding-left: 3px;padding-right: 3px;color: #fff;/*text color*/
  61.     background: #c38b70;/*background color*/}
  62.  
  63.     /* fonts */
  64.     @font-face { font-family: "playlist"; src: url('http://www.mediafire.com/file/n88lenk2sb0qshm/Playlist.otf'); }
  65.  
  66.     /* scrollbar */
  67.     ::-webkit-scrollbar {width: 2px;height: 0px;}::-webkit-scrollbar-button:start:decrement,
  68.     ::-webkit-scrollbar-button:end:increment {height: 0px;display: block;background-color: transparent;}::-webkit-scrollbar-track-piece {background-color: transparent;}
  69.     ::-webkit-scrollbar-thumb:vertical {height: 0px;
  70.     background-color: #5191b8; /*scrollbar color*/border:2px solid transparent;}
  71.        
  72.     #container{position:absolute;width:650px;height:500px;left:50%;top:50%;border-radius: 10px;
  73.     background: #e4dcdd; /*background color*/
  74.     opacity: 0.95; z-index:100;-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);
  75.     -ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
  76.        
  77.     /* end of BASIC */
  78.  
  79.  
  80.     /* TOP */
  81.  
  82.     /* icons */
  83.     .top .circle {position: absolute;top: 20px;left: 30px;width: 70px;height: auto;}
  84.     .top-one {position: absolute;top: 45px;left: 40px;width: 50px;z-index: 99999999;text-align: center;}
  85.     .circle {display: static;padding: 4px;
  86.     border: 2px solid #c38b70; /*border color - 1st/2nd icon*/
  87.     overflow: hidden;margin: 0px;width: 70px;height: 70px;border-radius: 50%;}
  88.  
  89.     /* title */
  90.     /*if title starts to move try to change its position: change the numbers on 'top' and 'left*/
  91.     .title {position: absolute;top: 20px;left: 130px;padding: 8px;font-family:"playlist";
  92.     text-align: center;color:#5191b8; /*title color*/
  93.     text-shadow: 2px 2px #c38b70; /*title shadow color*/
  94.     font-size:45px;line-height:100%;font-weight:600;letter-spacing: 0px;z-index: 99999999;transform: rotate(-5deg);}
  95.  
  96.     /* description */
  97.     .description {position: absolute;text-align: center;overflow: auto;width: 200px;height: 30px;padding: 3px;padding-left: 20px;top: 70px;left: 110px;
  98.     font-family: 'Lekton', sans-serif;font-size: 9px;text-transform: uppercase;vertical-align: middle;z-index: 9;
  99.     background: #c38b70; /*description background*/
  100.     color: #fff; /*text color*/
  101.     transform: rotate(-5deg);}
  102.  
  103.     /* round social media buttons */
  104.     .social {position: absolute;top: 120px;left: 120px;width: 200px;text-align: center;z-index: 999999999;}
  105.     .social a {width: 17px;height: 17px;font-size: 15px;margin-left: 3px; padding: 5px;line-height: 100%;vertical-align: middle;text-align: center;
  106.     background: #5191b8; /*background color*/
  107.     border-radius: 50%;display: inline-block;
  108.     box-shadow: 2px 2px #c38b70; /*shadow color*/}
  109.     .social i {color:#fff; /*social media icon color*/}
  110.     .social a:hover{background: #c38b70; /*background hover color*/
  111.     box-shadow: 2px 2px #5191b8; /*hover shadow color*/}
  112.     .social a:hover i {color:#ffffff; /*social media icon color hover*/}
  113.  
  114.     /* end of TOP */
  115.  
  116.  
  117.     /* ABOUT */
  118.  
  119.     .about {position: absolute;overflow: hidden;top: 30px;left: 380px;width: 240px;height: 270px;}
  120.     /* about title */
  121.     h2 {font-weight: 700;
  122.     color: #c38b70; /*about title color*/
  123.     font-size: 18px;margin-top: 20px;margin-left: 100px;text-transform: uppercase;font-family: 'Archivo Black', sans-serif;}
  124.  
  125.     /* icon */
  126.     .top-two .circle1 {position: absolute;top: 5px;left: 180px;width: 40px;text-align: center;}
  127.     .circle1 {display: static;padding: 4px;
  128.     border: 2px solid #5191b8; /*border color - 3rd icon*/
  129.     overflow: hidden;margin: 0px;width: 40px;height: 40px;border-radius: 50%;}
  130.  
  131.     /* text */
  132.     .text {position: absolute;overflow: auto;padding: 20px;padding-top: 20px;margin: 10px;margin-left: 50px;width: 140px;height: 130px;
  133.     border: 1px solid #5191b8; /*about border color*/
  134.     text-align: justify;font-family: 'Lekton', sans-serif;font-size: 9px;vertical-align: middle;z-index: 9;line-height: 120%;
  135.     color: #000; /*text color*/
  136.     text-transform: uppercase;}
  137.  
  138.     /* end of ABOUT */
  139.        
  140.        
  141.     /* NAVIGATION */
  142.  
  143.     .navigation { position: absolute;top: 170px;left: 40px;width: 330px;height: 160px;margin: 0px;padding: 4px;z-index: 999999;}
  144.     /* navigation title */
  145.     h3 {font-weight: 700;
  146.     color: #c38b70; /*navigation title color*/
  147.     font-size: 18px;margin-top: 0px;margin-left: 5px;text-transform: uppercase;font-family: 'Archivo Black', sans-serif;}
  148.  
  149.     /* rectangle links */
  150.     .links {position: absolute;padding-top: 0px;margin-top: -10px;margin-left: 0px;width: 325px;height: 120px;}      
  151.     .links a {width: 60px;height: 10px;font-size: 7px;vertical-align: middle;font-family: 'Oxygen Mono', monospace;padding: 4px;margin: 5px;
  152.     text-align: center;font-weight: 600;
  153.     background: #5191b8; /*links background color*/
  154.     color: #fff; /*link text color*/
  155.     border-radius: 10px;display: inline-block;}
  156.     .links a:hover {background: transparent; /*link background hover color*/
  157.     color:#c38b70; /*link hover color*/
  158.     box-shadow: inset 0 0 0 1px #c38b70; /*border hover color*/}
  159.  
  160.     /* end of NAVIGATION */
  161.    
  162.  
  163.     /* FAQ */
  164.  
  165.     .faq {position: absolute;overflow: hidden;top: 290px;left: 420px;width: 200px;height: 180px;}
  166.     /* faq title */
  167.     h4 {font-weight: 700;
  168.     color: #5191b8; /*faq title color*/
  169.     font-size: 18px;margin-top: 0px;margin-left: 5px;text-transform: uppercase;font-family: 'Archivo Black', sans-serif;}
  170.  
  171.     /* faq box */
  172.     .qna {position: absolute;overflow: auto;padding: 20px;padding-top: 0px;margin-top: -10px;margin-left: 5px;width: 150px;height: 120px;}
  173.  
  174.     /* question bubble */
  175.     .question {position:relative;
  176.     background:#c38b70; /*question bubble background color*/
  177.     box-shadow: 2px 2px #aa7a62; /*box shadow color*/
  178.     margin-left: -30px;margin-top: 10px;padding:8px;width:50%;transform:translate(20%,0); border-radius:10px; border-top-left-radius:0px;
  179.     font-family: 'Anonymous Pro', monospace;text-align: left;font-size: 9.5px;
  180.     color:#fff; /*text color*/
  181.     letter-spacing: 0.5px;}
  182.  
  183.     /* answer bubble */
  184.     .answer {position:relative;
  185.     background:#5191b8; /*answer bubble background color*/
  186.     box-shadow: -2px 2px #4880a3; /*box shadow color*/
  187.     padding:8px;transform:translate(20%, 0);margin:10px;margin-left: 50px;margin-bottom: 0px;width:50%;border-radius:10px;
  188.     border-top-right-radius:0px;font-family: 'Anonymous Pro', monospace;text-align: right;font-size: 9.5px;
  189.     color:#fff; /*text color*/
  190.     letter-spacing: 0.5px;}
  191.  
  192.     /* end of FAQ */
  193.  
  194.  
  195.     /* BOTTOM */
  196.  
  197.     /* icons */
  198.     .top-three .circle2 {position: absolute;top: 360px;left: 140px;width: 80px;text-align: center;}
  199.     .circle2 {display: static;padding: 4px;
  200.     border: 2px solid #c38b70; /*icon border color - 4º*/
  201.     overflow: hidden;margin: 0px;width: 40px;height: 80px;border-radius: 50%;}
  202.     .top-four .circle3 {position: absolute;top: 360px;left: 200px;width: 60px;text-align: center;}
  203.     .circle3 {display: static;padding: 4px;
  204.     border: 2px solid #5191b8; /* icon border color - 5º */
  205.     overflow: hidden;margin: 0px;width: 40px;height: 60px;border-radius: 50%;}
  206.  
  207.     /* home link */
  208.     .home {position: absolute;text-align: left;top: 370px;left: 120px;width: 40px;font-size: 12px;z-index: -1;}
  209.     .home a {width: 40px;height: 10px;line-height: 100%;vertical-align: middle;padding: 5px;padding-left: 10px;
  210.     background: #c38b70; /*home link background color*/
  211.     font-size: 10px;display: inline-block;}
  212.     .home a:hover {text-shadow: 2px 2px #8f6653; /*home link hover shadow color*/}
  213.     .home i {color: #fff; /*icon text color*/}
  214.  
  215.     /* ask link */
  216.     .ask {position: absolute;text-align: left;top: 420px;left: 120px;width: 40px;font-size: 12px;z-index: -1;}
  217.     .ask a {width: 40px;height: 10px;line-height: 100%;vertical-align: middle;padding: 5px;padding-left: 10px;
  218.     background: #c38b70; /*ask link background color*/font-size: 10px;display: inline-block;}
  219.     .ask a:hover {text-shadow: 2px 2px #8f6653; /*ask link hover shadow color*/}
  220.     .ask i {color: #fff; /*icon text color*/}
  221.  
  222.     /* end of LINKS */
  223.  
  224.  
  225.     /* CREDIT */
  226.  
  227.     /*ONLY change its color*/
  228.     /*do not delete*/
  229.     .credit {position: absolute;text-align: right;top: 380px;left: 240px;width: 40px;font-size: 12px;z-index: -1;}
  230.     .credit a {width: 40px;height: 10px;line-height: 100%;vertical-align: middle;padding: 5px;padding-left: 10px;
  231.     background: #5191b8; /*credit background color*/
  232.     font-size: 10px;display: inline-block;}
  233.     .credit a:hover {text-shadow: 2px 2px #3a6b8a; /*link hover shadow color*/}
  234.     .credit i {color: #fff; /*icon text color */}
  235.  
  236.     /* end of CREDIT */
  237.          
  238. </style>
  239. </head>
  240. <body>
  241.     <div id="container">
  242.  
  243.         <!-- TOP -->
  244.         <div class="top">
  245.             <img class="icon circle" src="https://i.imgur.com/7NIVCvz.png"><!-- change image -->
  246.         <div class="top-one">
  247.             <img class="icon circle" src="https://i.imgur.com/GFg4OXA.png"><!-- change image -->
  248.         </div></div>
  249.         <!-- title -->
  250.         <div class="title">blog title</div>
  251.         <div class="description">
  252.             Description goes here sweetie. Description goes here sweetie. Description goes here sweetie.
  253.         </div>
  254.         <!-- social media -->
  255.         <div class="social">
  256.             <a href="URL HERE"><i class="oi-twitter"></i></a>
  257.             <a href="/"><i class="fa fa-youtube"></i></a>
  258.             <a href="/"><i class="fa fa-spotify"></i></a>
  259.             <a href="/"><i class="oi-facebook"></i></a>
  260.             <a href="/"><i class="fa fa-instagram"></i></a>
  261.         </div>
  262.         <!-- end of TOP -->
  263.  
  264.         <!-- ABOUT -->
  265.         <div class="about">  
  266.         <!-- title -->          
  267.         <h2>About</h2>
  268.         <!-- icon -->
  269.         <div class="top-two">
  270.             <img class="icon circle1" src="https://i.imgur.com/Cqw7dMg.png"><!-- change image -->
  271.         </div>
  272.         <!-- text -->
  273.         <div class="text">
  274.             <b><big>❝</big></b> It was a <b>cold</b> <u>grey</u> <mark>day</mark> in late <i>November</i>.
  275.             <br>The <s>weather</s> had changed <big>overnight</big>, when a backing
  276.             <b><small>wind</small></b> brought a <sub>granite</sub> sky and a <s>mizzling</s> <sup>rain</sup> with it.
  277.             <br>And although <i>it</i> was now only a <mark>little</mark> after <i>two o'clock</i> in the <sub>afternoon</sub>
  278.            the <sub>pallor</sub> of a <b>winter</b> evening seemed to have <small>closed</small> upon the <mark>hills</mark>,
  279.            <s>cloaking</s> them in <u>mist</u>.❞
  280.        </div>
  281.        </div>
  282.        <!-- end of ABOUT -->
  283.  
  284.        <!-- NAVIGATION -->
  285.        <div class="navigation">
  286.        <!-- title -->
  287.        <h3>Navigation</h3>
  288.        <!-- links -->
  289.        <div class="links">
  290.            <a href="/">1</a> <a href="/">2</a> <a href="/">3</a> <a href="/">4</a>
  291.            <a href="/">5</a> <a href="/">6</a> <a href="/">7</a> <a href="/">8</a>
  292.            <a href="/">9</a> <a href="/">10</a> <a href="/">11</a> <a href="/">12</a>
  293.            <a href="/">13</a> <a href="/">14</a> <a href="/">15</a> <a href="/">16</a>
  294.        </div></div>
  295.        <!-- end of NAVIGATION -->
  296.  
  297.        <!-- FAQ -->
  298.        <div class="faq">
  299.        <!-- title -->
  300.        <h4>FAQ</h4>
  301.        <!-- faq bubbles -->
  302.        <div class="qna">
  303.            <div class="question">Example of a question?</div>
  304.            <div class="answer">Example of an answer.</div>
  305.            <div class="question">A longer example of a question? You can see how longer it is.</div>
  306.            <div class="answer">Here's a longer answer, so you can also see how much space it takes.</div>
  307.             <div class="question">Short question?</div>
  308.             <div class="answer">Short answer.</div>  
  309.            
  310.             <!-- copy and paste to add more
  311.             <div class="question">?</div>
  312.             <div class="answer">.</div>  
  313.             -->
  314.         </div></div>
  315.         <!-- end of FAQ -->
  316.  
  317.         <!-- BOTTOM -->
  318.         <!-- icons -->
  319.         <div class="top-three">
  320.             <img class="icon circle2" src="https://i.imgur.com/ymwqNFc.png"><!-- change image -->
  321.         <div class="top-four">
  322.             <img class="icon circle3" src="https://i.imgur.com/ONugISe.png"><!-- change image -->
  323.         </div></div>
  324.  
  325.         <!-- you don't need to change this -->
  326.        <!-- links -->
  327.        <div class="home">
  328.            <a href="/"><i class="lnr lnr-home"></i></a>
  329.        </div>
  330.        <div class="ask">
  331.            <a href="/ask"><i class="lnr lnr-envelope"></i></a>
  332.        </div>
  333.        <!-- end of BOTTOM -->
  334.  
  335.        <!-- CREDIT -->
  336.        <!-- pls don't touch -->
  337.         <div class="credit">
  338.             <a href="https://flormzel.tumblr.com/"><i class="lnr lnr-rocket"></i></a>
  339.         </div>
  340.         <!-- end of CREDIT -->
  341.  
  342.         </div>
  343.  
  344.     </body>
  345. </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!