Advertisement
marshallsmyth

simple code 5/10/23

May 10th, 2023 (edited)
957
1
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.58 KB | None | 1 0
  1.  
  2.  <!DOCTYPE html>   <html>   <head>   <meta name="viewport" content="width=device-width, initial-scale=1">
  3. <title>Simplest code</title>
  4.  
  5.  <style>  @import url(https://fonts.googleapis.com/css?family=Macondo|Handlee);  ::-webkit-scrollbar { width:16px;height:16px; }
  6.  ::-webkit-scrollbar-track {background:lavender; }  ::-webkit-scrollbar-thumb { border-radius:22px;background:pink;box-shadow:0 0 11px 11px #300; }
  7.  
  8.  body { background:#404;font-size:32px;line-height:1.4;font-family:handlee;text-align:left;color:#0f0;margin:0px;padding:0; }
  9.  
  10.  header { background-color:#303;color:#90f;padding:20px; }
  11.  
  12.  nav { background-color:#404;border:1px solid #c0c;display:flex;flex-wrap:wrap;justify-content:space-between;padding:10px; }
  13.  
  14.  nav a { color:#373;padding:10px;text-decoration:none;transition:4s ease;background:#505; }
  15.  
  16.  nav a:hover { background-color:#333;color:#f0f; }
  17.  
  18.  .main { display:flex;flex-wrap:wrap;justify-content:space-between;margin:20px; }
  19.  
  20.  .main div { flex-basis:calc(50% - 10px);margin-bottom:20px;padding:10px; }
  21.  
  22.  @media screen and (max-width:768px);   { .main div { flex-basis: 100%; } }
  23.  
  24.  </style> </head>
  25.  
  26.  <body>
  27.  
  28.  <div class="text">  <header> <h1>Simple code</h1> </header>
  29.  
  30.  <nav>
  31.  <a href="#">Início</a>
  32.  <a href="#">Sobre</a>
  33.  <a href="#">Contato</a>
  34.  </nav>
  35.  
  36.  <div class="main">
  37.  
  38.  <div> <h2>Artigo 1</h2>
  39.  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae magna risus. Praesent auctor arcu quis justo porttitor, eget ullamcorper felis varius. Sed tincidunt, felis vel hendrerit pretium, lacus metus interdum diam, non finibus nulla elit sed elit.</p> </div>
  40.  
  41.  <div> <h2>Artigo 2</h2>
  42.  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae magna risus. Praesent auctor arcu quis justo porttitor, eget ullamcorper felis varius. Sed tincidunt, felis vel hendrerit pretium, lacus metus interdum diam, non finibus nulla elit sed elit.</p> </div>
  43.  
  44.  <div> <h2>Artigo 3</h2>
  45.  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae magna risus. Praesent auctor arcu quis justo porttitor, eget ullamcorper felis varius. Sed tincidunt, felis vel hendrerit pretium, lacus metus interdum diam, non finibus nulla elit sed elit.</p> </div>
  46.  
  47.  <div> <h2>Artigo 4</h2>
  48.  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae magna risus. Praesent auctor arcu quis justo porttitor, eget ullamcorper felis varius. Sed tincidunt, felis vel hendrerit pretium, lacus metus interdum diam, non finibus nulla elit sed elit.</p> </div>
  49.  </div>
  50.  
  51.  </body> </html>
  52.  
  53.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement