simple code 5/10/23


 <!DOCTYPE html>   <html>   <head>   <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simplest code</title>

 <style>  @import url(https://fonts.googleapis.com/css?family=Macondo|Handlee);  ::-webkit-scrollbar { width:16px;height:16px; }
 ::-webkit-scrollbar-track {background:lavender; }  ::-webkit-scrollbar-thumb { border-radius:22px;background:pink;box-shadow:0 0 11px 11px #300; }

 body { background:#404;font-size:32px;line-height:1.4;font-family:handlee;text-align:left;color:#0f0;margin:0px;padding:0; }

 header { background-color:#303;color:#90f;padding:20px; }

 nav { background-color:#404;border:1px solid #c0c;display:flex;flex-wrap:wrap;justify-content:space-between;padding:10px; }

 nav a { color:#373;padding:10px;text-decoration:none;transition:4s ease;background:#505; }

 nav a:hover { background-color:#333;color:#f0f; }

 .main { display:flex;flex-wrap:wrap;justify-content:space-between;margin:20px; }

 .main div { flex-basis:calc(50% - 10px);margin-bottom:20px;padding:10px; }

 @media screen and (max-width:768px);   { .main div { flex-basis: 100%; } }

 </style> </head>

 <body>

 <div class="text">  <header> <h1>Simple code</h1> </header>

 <nav>
 <a href="#">Início</a>
 <a href="#">Sobre</a>
 <a href="#">Contato</a>
 </nav>

 <div class="main">

 <div> <h2>Artigo 1</h2>
 <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>

 <div> <h2>Artigo 2</h2>
 <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>

 <div> <h2>Artigo 3</h2>
 <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>

 <div> <h2>Artigo 4</h2>
 <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>
 </div>

 </body> </html>