daily pastebin goal
73%
SHARE
TWEET

Untitled

a guest Mar 26th, 2019 64 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <head>
  3.   <style media="screen">
  4.     html {
  5.         height: 100vh;
  6.     }
  7.     body {
  8.       height: 100vh;
  9.     }
  10.     .flex {
  11.       display: flex;
  12.     }
  13.     .flex-align-center {
  14.       flex-direction: column;
  15.       justify-content: center;
  16.       align-items: center;
  17.     }
  18.     .section {
  19.       flex: 1;
  20.     }
  21.     img {
  22.       display: block;
  23.       height: 200px;
  24.       width: 200px;
  25.     }
  26.     #balance-section {
  27.       background: #76869e;
  28.     }
  29.     #history-section {
  30.       background: #5a6981;
  31.     }
  32.     body {
  33.       display: flex;
  34.       flex-direction: column;
  35.     }
  36.     header, footer {
  37.       flex-shrink: 0;
  38.     }
  39.     main {
  40.       width: 100%;
  41.     }
  42.     footer {
  43.       height: 50px;
  44.     }
  45.     .btn {
  46.       font-size: 18px;
  47.       font-weight: 400;
  48.       padding: 10px 15px;
  49.       boder: 1px solid #FFF;
  50.       background-color: transparent;
  51.       color: #FFF;
  52.     }
  53.     .section {
  54.       min-width: 700px;
  55.       flex-wrap: wrap;
  56.     }
  57.     @media all and (min-width: 700px) {
  58.       main {
  59.         display: flex;
  60.         flex: 1;
  61.       }
  62.     }
  63.   </style>
  64. </head>
  65. <body>
  66.   <header>
  67.     <div class="nav">
  68.       <div class="nav-left">
  69.         <div class="brand"><img /></div>
  70.         <div class="nav-menu">
  71.           <ul>
  72.           </ul>
  73.         </div>
  74.       </div>
  75.       <div class="nav-right">
  76.         <a>Log Out</a>
  77.       </div>
  78.     </div>
  79.   </header>
  80.   <main>
  81.     <div id="balance-section" class="flex flex-align-center section">
  82.       <div>
  83.         <img>
  84.       </div>
  85.       <button class="btn">
  86.         Pay Your Balance
  87.       </button>
  88.     </div>
  89.     <div id="history-section" class="flex flex-align-center section">
  90.       <div><img></div>
  91.       <button class="btn">
  92.         Pay Your Balance
  93.       </button>
  94.     </div>
  95.   </main>
  96.   <footer>
  97.     <div class="footer-left">
  98.  
  99.     </div>
  100.     <div class="footer-right">
  101.  
  102.     </div>
  103.   </footer>
  104. </body>
RAW Paste Data
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
 
Top