Last active
July 5, 2023 01:02
-
-
Save jeffersondev/4e6f56e9861c1124b1ed3d17ff25aef5 to your computer and use it in GitHub Desktop.
Curso de FrontEnd da TOTI - Módulo de CSS3 - Aula de Layouts I (replicação do layout da home page da Wikipedia - https://www.wikipedia.org)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .cabecalho { | |
| text-align: center; | |
| margin: 50px 0; | |
| } | |
| .titulo__principal { | |
| display: block; | |
| font-size: 32px; | |
| text-transform: uppercase; | |
| } | |
| .titulo__secundario { | |
| font-size: 14px; | |
| } | |
| .paises { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 325px; | |
| width: 546px; | |
| position: relative; | |
| margin: 0 auto; | |
| } | |
| .paises__imagemcentral { | |
| height: 183px; | |
| width: 200px; | |
| } | |
| .paises nav { | |
| height: 0; | |
| width: 0; | |
| } | |
| .paises__idioma, | |
| .paises__artigos { | |
| display: block; | |
| text-align: center; | |
| } | |
| .paises__item { | |
| position: absolute; | |
| } | |
| .paises__1 { | |
| top: 0; | |
| right: 60%; | |
| } | |
| .paises__2 { | |
| top: 0; | |
| left: 60%; | |
| } | |
| .paises__3 { | |
| top: 20%; | |
| right: 70%; | |
| } | |
| .paises__4 { | |
| top: 20%; | |
| left: 70%; | |
| } | |
| .paises__5 { | |
| top: 40%; | |
| right: 72%; | |
| } | |
| .paises__6 { | |
| top: 40%; | |
| left: 72%; | |
| } | |
| .paises__7 { | |
| top: 60%; | |
| right: 70%; | |
| } | |
| .paises__8 { | |
| top: 60%; | |
| left: 70%; | |
| } | |
| .paises__9 { | |
| top: 80%; | |
| right: 60%; | |
| } | |
| .paises__10 { | |
| top: 80%; | |
| left: 60%; | |
| } | |
| .busca__container { | |
| width: fit-content; | |
| margin: 10px auto; | |
| border: 1px solid #999999; | |
| } | |
| .busca__texto, | |
| .busca__idioma, | |
| .busca__botao { | |
| border: none; | |
| } | |
| .busca__menu { | |
| width: fit-content; | |
| margin: 10px auto; | |
| } | |
| .rodape { | |
| border-top: 1px solid #c8ccd1; | |
| border-bottom: 1px solid #c8ccd1; | |
| padding: 40px 50px; | |
| display: flex; | |
| } | |
| .rodape__info { | |
| max-width: 300px; | |
| } | |
| .rodape__suporte, | |
| .rodape__apps { | |
| display: flex; | |
| padding: 10px; | |
| } | |
| .rodape__apps { | |
| margin-top: 30px; | |
| background-color: #f8f9fa; | |
| } | |
| .rodape__suporte__imagem, | |
| .rodape__apps__imagem { | |
| margin-right: 10px; | |
| } | |
| .rodape__apps__link { | |
| display: block; | |
| margin-bottom: 10px; | |
| } | |
| .rodape__suporte__imagem, | |
| .rodape__apps__imagem, | |
| .rodape__wikisites__imagem { | |
| height: 37px; | |
| width: 37px; | |
| } | |
| .rodape__appstore__imagem { | |
| height: 28px; | |
| margin-top: 10px; | |
| } | |
| .rodape__wikisites { | |
| display: flex; | |
| flex-wrap: wrap; | |
| margin-left: 60px; | |
| } | |
| .rodape__wikisites__item a { | |
| display: flex; | |
| } | |
| .rodape__wikisites__info { | |
| display: flex; | |
| flex-direction: column; | |
| margin-left: 8px; | |
| width: 180px; | |
| } | |
| .licenca { | |
| width: fit-content; | |
| margin: 20px auto; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" | |
| integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" | |
| crossorigin="anonymous" | |
| referrerpolicy="no-referrer" | |
| /> | |
| <link rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" | |
| integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" | |
| crossorigin="anonymous" | |
| referrerpolicy="no-referrer" | |
| /> | |
| </head> | |
| <body> | |
| <header class="cabecalho"> | |
| <h1 class="titulo"> | |
| <span class="titulo__principal">Wikipedia</span> | |
| <span class="titulo__secundario">The Free Encyclopedia</span> | |
| </h1> | |
| </header> | |
| <section class="paises"> | |
| <img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2@2x.png" alt="Wikipedia" class="paises__imagemcentral"> | |
| <nav> | |
| <ul class="paises__menu"> | |
| <li class="paises__item paises__1"> | |
| <a href="#"> | |
| <span class="paises__idioma">English</span> | |
| <span class="paises__artigos">6 326 000 + articles</span> | |
| </a> | |
| </li> | |
| <li class="paises__item paises__2"> | |
| <a href="#"> | |
| <span class="paises__idioma">Português</span> | |
| <span class="paises__artigos">1 066 000+ articles</span> | |
| </a> | |
| </li> | |
| <li class="paises__item paises__3"> | |
| <a href="#"> | |
| <span class="paises__idioma">日本語</span> | |
| <span class="paises__artigos">1 275 000+ 記事</span> | |
| </a> | |
| </li> | |
| <li class="paises__item paises__4"> | |
| <a href="#"> | |
| <span class="paises__idioma">Español</span> | |
| <span class="paises__artigos">1 696 000+ artículos</span> | |
| </a> | |
| </li> | |
| <li class="paises__item paises__5"> | |
| <a href="#"> | |
| <span class="paises__idioma">Deutsch</span> | |
| <span class="paises__artigos">2 590 000+ Artikel</span> | |
| </a> | |
| </li> | |
| <li class="paises__item paises__6"> | |
| <a href="#"> | |
| <span class="paises__idioma">Русский</span> | |
| <span class="paises__artigos">1 734 000+ статей</span> | |
| </a> | |
| </li> | |
| <li class="paises__item paises__7"> | |
| <a href="#"> | |
| <span class="paises__idioma">Français</span> | |
| <span class="paises__artigos">2 340 000+ articles</span> | |
| </a> | |
| </li> | |
| <li class="paises__item paises__8"> | |
| <a href="#"> | |
| <span class="paises__idioma">中文</span> | |
| <span class="paises__artigos">1 206 000+ 條目</span> | |
| </a> | |
| </li> | |
| <li class="paises__item paises__9"> | |
| <a href="#"> | |
| <span class="paises__idioma">Italiano</span> | |
| <span class="paises__artigos">1 701 000+ voci</span> | |
| </a> | |
| </li> | |
| <li class="paises__item paises__10"> | |
| <a href="#"> | |
| <span class="paises__idioma">Polski</span> | |
| <span class="paises__artigos">1 480 000+ haseł</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </section> | |
| <section class="busca"> | |
| <form action="#"> | |
| <div class="busca__container"> | |
| <input type="text" class="busca__texto"> | |
| <select name="idioma" id="idioma" class="busca__idioma"> | |
| <option value="pt" selected>PT</option> | |
| <option value="de" lang="de">DE</option> | |
| <option value="en" lang="en">EN</option> | |
| <option value="es" lang="es">ES</option> | |
| <option value="fr" lang="fr">FR</option> | |
| <option value="ja" lang="ja">日</option> | |
| <option value="ce" lang="ce">Нйн</option> | |
| <option value="pt" lang="pt">PT</option> | |
| <option value="ta" lang="ta">தம</option> | |
| <option value="tt" lang="tt">TT</option> | |
| <option value="tr" lang="tr">TR</option> | |
| <option value="zh-yue" lang="yue">粵語</option> | |
| <option value="zh" lang="zh">中文</option> | |
| <option value="ko" lang="ko">한</option> | |
| </select> | |
| <button class="busca__botao" type="submit"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </form> | |
| <div class="busca__menu"> | |
| <button class="busca__menu__idiomas">Read Wikipedia in your language</button> | |
| </div> | |
| </section> | |
| <footer class="rodape"> | |
| <div class="rodape__info"> | |
| <div class="rodape__suporte"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" class="rodape__suporte__imagem"> | |
| <div class="rodape__suporte__texto"> | |
| <p>Wikipedia is hosted by the Wikimedia Foundation, a non-profit organization that also hosts a range of other projects.</p> | |
| <a href="#">You can support our work with a donation.</a> | |
| </div> | |
| </div> | |
| <div class="rodape__apps"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" alt="" class="rodape__apps__imagem"> | |
| <div class="rodape__apps__info"> | |
| <a href="#" class="rodape__apps__link">Download Wikipedia for Android or iOS</a> | |
| <p>Save your favorite articles to read offline, sync your reading lists across devices and customize your reading experience with the official Wikipedia app.</p> | |
| <div class="rodape__apps_lojas"> | |
| <img src="https://prefnm.ouvidoriabr.com/imgs/default/google.svg" class="rodape__appstore__imagem"> | |
| <img src="https://prefnm.ouvidoriabr.com/imgs/default/apple.svg" class="rodape__appstore__imagem"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <ul class="rodape__wikisites"> | |
| <li class="rodape__wikisites__item"> | |
| <a href="#"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" alt="" class="rodape__wikisites__imagem"> | |
| <div class="rodape__wikisites__info"> | |
| <span class="rodape__wikisites__nome">Commons</span> | |
| <span class="rodape__wikisites__descricao">Freely usable photos & more</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape__wikisites__item"> | |
| <a href="#"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" alt="" class="rodape__wikisites__imagem"> | |
| <div class="rodape__wikisites__info"><span class="rodape__wikisites__nome">Wikivoyage</span> | |
| <span class="rodape__wikisites__descricao">Free travel guide</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape__wikisites__item"> | |
| <a href="#"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" alt="" class="rodape__wikisites__imagem"> | |
| <div class="rodape__wikisites__info"> | |
| <span class="rodape__wikisites__nome">Wiktionary</span> | |
| <span class="rodape__wikisites__descricao">Free dictionary</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape__wikisites__item"> | |
| <a href="#"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" alt="" class="rodape__wikisites__imagem"> | |
| <div class="rodape__wikisites__info"> | |
| <span class="rodape__wikisites__nome">Wikibooks</span> | |
| <span class="rodape__wikisites__descricao">Free textbooks</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape__wikisites__item"> | |
| <a href="#"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" alt="" class="rodape__wikisites__imagem"> | |
| <div class="rodape__wikisites__info"> | |
| <span class="rodape__wikisites__nome">Wikinews</span> | |
| <span class="rodape__wikisites__descricao">Free news source</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape__wikisites__item"> | |
| <a href="#"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" alt="" class="rodape__wikisites__imagem"> | |
| <div class="rodape__wikisites__info"> | |
| <span class="rodape__wikisites__nome">Wikidata</span> | |
| <span class="rodape__wikisites__descricao">Free knowledge base</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape__wikisites__item"> | |
| <a href="#"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" alt="" class="rodape__wikisites__imagem"> | |
| <div class="rodape__wikisites__info"> | |
| <span class="rodape__wikisites__nome">Wikiversity</span> | |
| <span class="rodape__wikisites__descricao">Free course materials</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape__wikisites__item"> | |
| <a href="#"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" alt="" class="rodape__wikisites__imagem"> | |
| <div class="rodape__wikisites__info"> | |
| <span class="rodape__wikisites__nome">Wikiquote</span> | |
| <span class="rodape__wikisites__descricao">Free quote compendium</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape__wikisites__item"> | |
| <a href="#"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" alt="" class="rodape__wikisites__imagem"> | |
| <div class="rodape__wikisites__info"> | |
| <span class="rodape__wikisites__nome">MediaWiki</span> | |
| <span class="rodape__wikisites__descricao">Free & open wiki application</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape__wikisites__item"> | |
| <a href="#"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" alt="" class="rodape__wikisites__imagem"> | |
| <div class="rodape__wikisites__info"> | |
| <span class="rodape__wikisites__nome">Wikisource</span> | |
| <span class="rodape__wikisites__descricao">Free library</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape__wikisites__item"> | |
| <a href="#"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" alt="" class="rodape__wikisites__imagem"> | |
| <div class="rodape__wikisites__info"> | |
| <span class="rodape__wikisites__nome">Wikispecies</span> | |
| <span class="rodape__wikisites__descricao">Free species directory</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape__wikisites__item"> | |
| <a href="#"> | |
| <img src="https://banner2.cleanpng.com/20180406/dkw/kisspng-wikipedia-logo-computer-icons-wikipedia-zero-wikim-link-5ac80fcd0b7410.9231595215230606850469.jpg" alt="" class="rodape__wikisites__imagem"> | |
| <div class="rodape__wikisites__info"> | |
| <span class="rodape__wikisites__nome">Meta-Wiki</span> | |
| <span class="rodape__wikisites__descricao">Community coordination & documentation</span> | |
| </div> | |
| </a> | |
| </li> | |
| </ul> | |
| </footer> | |
| <p class="licenca"> | |
| <small>This page is available under the <a href="#">Creative Commons Attribution-ShareAlike License</a> •</small> | |
| <small><a href="#">Terms of Use</a> •</small> | |
| <small><a href="#">Privacy Policy</a></small> | |
| </p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment