A Pen by Gilbertogil1965 on CodePen.
Created
October 28, 2021 14:02
-
-
Save Gilbertogil1965/2d44fb90cb5da0b7075b3f8c56349fc6 to your computer and use it in GitHub Desktop.
Aula 8 Ex: Wikipedia
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
| <!DOCTYPE html> | |
| <html lang="en-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Wikipedia</title> | |
| </head> | |
| <body> | |
| <header class="cabecalho"> | |
| <h1 class="titulo"> | |
| <span class="titulo_principal">Wikipedia</span> | |
| <span class="titulo_secundario">The Freed Enciclopedia</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"></img> | |
| <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">Portugal</span> | |
| <span class="paises_artigo">1 066 000 + articles</span> | |
| </a> | |
| </li> | |
| <li class="paises_item paises_3"> | |
| <a href="#"> | |
| <span class="paises_idioma">China</span> | |
| <span class="paises_artigo">1 275 000 + articles</span> | |
| </a> | |
| </li> | |
| <li class="paises_item paises_4"> | |
| <a href="#"> | |
| <span class="paises_idioma">Espanhol</span> | |
| <span class="paises_artigo">1 696 000 + articles</span> | |
| </a> | |
| </li> | |
| <li class="paises_item paises_5"> | |
| <a href="#"> | |
| <span class="paises_idioma">Alemania</span> | |
| <span class="paises_artigo">2 890 000 + articles</span> | |
| </a> | |
| </li> | |
| <li class="paises_item paises_6"> | |
| <a href="#"> | |
| <span class="paises_idioma">Rusia</span> | |
| <span class="paises_artigo">1 480 000 + articles</span> | |
| </a> | |
| </li> | |
| <li class="paises_item paises_7"> | |
| <a href="#"> | |
| <span class="paises_idioma">Francia</span> | |
| <span class="paises_artigo">2 340 000 + articles</span> | |
| </a> | |
| </li> | |
| <li class="paises_item paises_8"> | |
| <a href="#"> | |
| <span class="paises_idioma">Japon</span> | |
| <span class="paises_artigo">1 275 000 + articles</span> | |
| </a> | |
| </li> | |
| <li class="paises_item paises_9"> | |
| <a href="#"> | |
| <span class="paises_idioma">Italia</span> | |
| <span class="paises_artigo">1 701 000 + articles</span> | |
| </a> | |
| </li> | |
| <li class="paises_item paises_10"> | |
| <a href="#"> | |
| <span class="paises_idioma">Brasil</span> | |
| <span class="paises_artigo">2 745 000 + articles</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="en" lang="en">EN</option> | |
| <option value="pt" lang="pt">PT</option> | |
| <option value="ch" lang="ch">CH</option> | |
| <option value="es" lang="es">ES</option> | |
| <option value="al" lang="al">AL</option> | |
| <option value="rs" lang="rs">RS</option> | |
| <option value="fr" lang="fr">FR</option> | |
| <option value="jp" lang="jp">JP</option> | |
| <option value="it" lang="it">IT</option> | |
| <option value="br" lang="br">BR</option> | |
| </select> | |
| <button class="busca_botao" type="submit"> | |
| <i class="fas fa-search-plus"></i> | |
| </button> | |
| </div> | |
| </form> | |
| <div class="busca_menu"> | |
| <button class="busca_menu_idiomas">Read Wikipedia in your lenguage | |
| </button> | |
| </div> | |
| </section> | |
| <footer class="rodape"> | |
| <div class="rodape_info"> | |
| <div class="rodape_suporte"> | |
| <img src="https://seeklogo.com/images/C/ciudad-de-carros-2-0-logo-096CEF666A-seeklogo.com.png" alt="" class="rodape_suporte_imagem"> | |
| <div class="rodape_suporte_texto"> | |
| <p>Wikipedia is hosted by the Wikimedia foundation, a non-profit organization tha also hots a range of other projects.</p> | |
| <a href="#">You can suport our work with a donation</a> | |
| </div> | |
| </div> | |
| <div class="rodape_apps"> | |
| <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_dDOj_t2CQWT8i19Q6w-SvQCu4oM-GUUHpQ&usqp=CAU" alt="" class="rodape_apps_imagem"> | |
| <div class="rodape_apps_info"> | |
| <a href="#" class="rodape_apps_link"> Dowload Wikipedia for Androide 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://logodownload.org/wp-content/uploads/2014/09/honda-carros-logo-4.png | |
| " class="rodape_appstore_imagem"> | |
| <img src="https://motorshow.com.br/wp-content/uploads/sites/2/2020/05/bmw-logo-1997-1200x1200.png" alt="" class="rodape_appstore_imagem"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <ul class="rodape_wikisites"> | |
| <li class="rodape_wikisites_item"> | |
| <a href="#"> | |
| <img src="https://upload.wikimedia.org/wikipedia/pt/3/34/Chevrolet_logo.png" alt="" class="rodape_wikisites_imagem"> | |
| <div class="rodape_wikisites_info"> | |
| <span class="rodape_wikisites_nome">Commos</span> | |
| <span class="rodape_wikisites_descricao">Freely Usable photos & more</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape_wikisites_item"> | |
| <a href="#"> | |
| <img src="https://upload.wikimedia.org/wikipedia/pt/3/34/Chevrolet_logo.png" alt="" class="rodape_wikisites_imagem"> | |
| <div class="rodape_wikisites_info"> | |
| <span class="rodape_wikisites_nome">Commos</span> | |
| <span class="rodape_wikisites_descricao">Freely Usable photos & more</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape_wikisites_item"> | |
| <a href="#"> | |
| <img src="https://upload.wikimedia.org/wikipedia/pt/3/34/Chevrolet_logo.png" alt="" class="rodape_wikisites_imagem"> | |
| <div class="rodape_wikisites_info"> | |
| <span class="rodape_wikisites_nome">Commos</span> | |
| <span class="rodape_wikisites_descricao">Freely Usable photos & more</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape_wikisites_item"> | |
| <a href="#"> | |
| <img src="https://upload.wikimedia.org/wikipedia/pt/3/34/Chevrolet_logo.png" alt="" class="rodape_wikisites_imagem"> | |
| <div class="rodape_wikisites_info"> | |
| <span class="rodape_wikisites_nome">Commos</span> | |
| <span class="rodape_wikisites_descricao">Freely Usable photos & more</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape_wikisites_item"> | |
| <a href="#"> | |
| <img src="https://upload.wikimedia.org/wikipedia/pt/3/34/Chevrolet_logo.png" alt="" class="rodape_wikisites_imagem"> | |
| <div class="rodape_wikisites_info"> | |
| <span class="rodape_wikisites_nome">Commos</span> | |
| <span class="rodape_wikisites_descricao">Freely Usable photos & more</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape_wikisites_item"> | |
| <a href="#"> | |
| <img src="https://upload.wikimedia.org/wikipedia/pt/3/34/Chevrolet_logo.png" alt="" class="rodape_wikisites_imagem"> | |
| <div class="rodape_wikisites_info"> | |
| <span class="rodape_wikisites_nome">Commos</span> | |
| <span class="rodape_wikisites_descricao">Freely Usable photos & more</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape_wikisites_item"> | |
| <a href="#"> | |
| <img src="https://upload.wikimedia.org/wikipedia/pt/3/34/Chevrolet_logo.png" alt="" class="rodape_wikisites_imagem"> | |
| <div class="rodape_wikisites_info"> | |
| <span class="rodape_wikisites_nome">Commos</span> | |
| <span class="rodape_wikisites_descricao">Freely Usable photos & more</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape_wikisites_item"> | |
| <a href="#"> | |
| <img src="https://upload.wikimedia.org/wikipedia/pt/3/34/Chevrolet_logo.png" alt="" class="rodape_wikisites_imagem"> | |
| <div class="rodape_wikisites_info"> | |
| <span class="rodape_wikisites_nome">Commos</span> | |
| <span class="rodape_wikisites_descricao">Freely Usable photos & more</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape_wikisites_item"> | |
| <a href="#"> | |
| <img src="https://upload.wikimedia.org/wikipedia/pt/3/34/Chevrolet_logo.png" alt="" class="rodape_wikisites_imagem"> | |
| <div class="rodape_wikisites_info"> | |
| <span class="rodape_wikisites_nome">Commos</span> | |
| <span class="rodape_wikisites_descricao">Freely Usable photos & more</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape_wikisites_item"> | |
| <a href="#"> | |
| <img src="https://upload.wikimedia.org/wikipedia/pt/3/34/Chevrolet_logo.png" alt="" class="rodape_wikisites_imagem"> | |
| <div class="rodape_wikisites_info"> | |
| <span class="rodape_wikisites_nome">Commos</span> | |
| <span class="rodape_wikisites_descricao">Freely Usable photos & more</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape_wikisites_item"> | |
| <a href="#"> | |
| <img src="https://upload.wikimedia.org/wikipedia/pt/3/34/Chevrolet_logo.png" alt="" class="rodape_wikisites_imagem"> | |
| <div class="rodape_wikisites_info"> | |
| <span class="rodape_wikisites_nome">Commos</span> | |
| <span class="rodape_wikisites_descricao">Freely Usable photos & more</span> | |
| </div> | |
| </a> | |
| </li> | |
| <li class="rodape_wikisites_item"> | |
| <a href="#"> | |
| <img src="https://upload.wikimedia.org/wikipedia/pt/3/34/Chevrolet_logo.png" alt="" class="rodape_wikisites_imagem"> | |
| <div class="rodape_wikisites_info"> | |
| <span class="rodape_wikisites_nome">Commos</span> | |
| <span class="rodape_wikisites_descricao">Freely Usable photos & more</span> | |
| </div> | |
| </a> | |
| </li> | |
| </ul> | |
| </footer> | |
| <p class="licença"> | |
| <small>El texto está disponible bajo la Licencia Creative Commons Atribución Compartir Igual 3.0; <a href="#">•</a></small> | |
| <small>Termos of use<a href="#">•</a></small> | |
| <small>Privacy Policy<a href="#"></a></small> | |
| </body> | |
| </html> |
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
| .body { | |
| background-color: red; | |
| } | |
| .cabecalho { | |
| text-align: center; | |
| margin: 50px 0; | |
| background-color: red; | |
| } | |
| .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_item { | |
| position: absolute; | |
| } | |
| .paises_idioma, | |
| .paises_artigo { | |
| display: block; | |
| text-align: center; | |
| } | |
| .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: 2px solid green; | |
| border-radius:4px; | |
| } | |
| .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_apps_link { | |
| display: block; | |
| margin-bottom: 10px; | |
| } | |
| .rodape_suporte_imagem, | |
| .rodape_apps_imagem { | |
| margin-right: 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: 6px; | |
| width: 180px; | |
| } | |
| .licença { | |
| font-family: sans serif; | |
| font-size: 12px; | |
| width: fit-content; | |
| margin: 20px auto; | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Pratica de Wikipedia