Facebook

Untitled safest cryptocurrency exchange

From Innocent Peafowl, 2 Years ago, written in Plain Text.
URL https://pastebin.pl/view/944ce03c
Embed
Download Paste or View Raw
Hits: 92
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Demo</title>
  8.     <style>
  9.       @import url("https://fonts.googleapis.com/css?family=Raleway");
  10.  
  11.       * {
  12.         font-family: Raleway;
  13.         font-size: 16px;
  14.       }
  15.  
  16.       html {
  17.         background-color: #dfdfdf;
  18.       }
  19.  
  20.       * {
  21.         box-sizing: border-box;
  22.       }
  23.  
  24.       body {
  25.         margin: 0;
  26.         padding: 0;
  27.       }
  28.  
  29.       .navbar {
  30.         display: flex;
  31.         justify-content: space-between;
  32.         align-items: center;
  33.         background-color: hsl(0, 0%, 0%);
  34.         color: white;
  35.       }
  36.  
  37.       .brand-title {
  38.         font-size: 1.5rem;
  39.         margin: 0.5rem;
  40.       }
  41.  
  42.       .navbar ul {
  43.         margin: 0;
  44.         padding: 0;
  45.         display: flex;
  46.         /* list-style: none; */
  47.       }
  48.  
  49.       .navbar-links li {
  50.         list-style: none;
  51.       }
  52.  
  53.       .navbar-links li a {
  54.         text-decoration: none;
  55.         color: white;
  56.         padding: 1rem;
  57.         display: block;
  58.       }
  59.       .navbar-links li:hover {
  60.         background-color: #555;
  61.       }
  62.  
  63.       .toggle-button {
  64.         position: absolute;
  65.         top: 0.75rem;
  66.         right: 1rem;
  67.         color: white;
  68.         display: none;
  69.         /* display: flex; */
  70.         flex-direction: column;
  71.         justify-content: space-between;
  72.         width: 30px;
  73.         height: 21px;
  74.       }
  75.  
  76.       .toggle-button .bar {
  77.         height: 3px;
  78.         width: 100%;
  79.         background-color: white;
  80.         border-radius: 10px;
  81.       }
  82.  
  83.       @media (max-width: 600px) {
  84.         .toggle-button {
  85.           display: flex;
  86.         }
  87.  
  88.         .navbar-links {
  89.           display: none;
  90.           width: 100%;
  91.         }
  92.         .navbar {
  93.           flex-direction: column;
  94.           align-items: flex-start;
  95.         }
  96.         .navbar-links ul {
  97.           width: 100%;
  98.           flex-direction: column;
  99.         }
  100.         .navbar-links li {
  101.           text-align: center;
  102.         }
  103.         .navbar-links li a {
  104.           padding: 0.5rem 1rem;
  105.         }
  106.         .navbar-links.active {
  107.           display: flex;
  108.         }
  109.       }
  110.       .card-text {
  111.         text-align: center;
  112.         font-size: 5rem;
  113.         font-weight: 600;
  114.       }
  115.       footer {
  116.         background: black;
  117.         color: white;
  118.         text-align: center;
  119.         padding: 0.5rem;
  120.       }
  121.       .card {
  122.         border: 1px solid #eee;
  123.         width: 50%;
  124.         height: 40vh;
  125.         display: flex;
  126.         justify-content: center;
  127.         align-items: center;
  128.       }
  129.       section {
  130.         display: flex;
  131.         flex-wrap: wrap;
  132.       }
  133.     </style>
  134.   </head>
  135.   <body>
  136.     <!-- Navbar -->
  137.     <nav class="navbar">
  138.       <div class="brand-title">Chotu & Co.</div>
  139.       <a href="#" class="toggle-button">
  140.         <span class="bar"></span>
  141.         <span class="bar"></span>
  142.         <span class="bar"></span>
  143.       </a>
  144.       <div class="navbar-links">
  145.         <ul>
  146.           <li><a href="#">Home</a></li>
  147.           <li><a href="#">Products</a></li>
  148.           <li><a href="#">About</a></li>
  149.           <li><a href="#">Contact Us</a></li>
  150.         </ul>
  151.       </div>
  152.     </nav>
  153.     <!-- Section -->
  154.     <section>
  155.       <div class="card">
  156.         <img class="card-img" src="" alt="" />
  157.         <div class="card-text">1</div>
  158.       </div>
  159.       <div class="card">
  160.         <img class="card-img" src="" alt="" />
  161.         <div class="card-text">2</div>
  162.       </div>
  163.       <div class="card">
  164.         <img class="card-img" src="" alt="" />
  165.         <div class="card-text">3</div>
  166.       </div>
  167.       <div class="card">
  168.         <img class="card-img" src="" alt="" />
  169.         <div class="card-text">4</div>
  170.       </div>
  171.     </section>
  172.  
  173.     <!-- Footer -->
  174.     <footer>All rights reserved © Chotu & Co.</footer>
  175.   </body>
  176. </html>
  177.  

Reply to "Untitled"