Last active
June 21, 2023 22:56
-
-
Save jeffersondev/652149d7650f6ed141ee11c6937f63bd to your computer and use it in GitHub Desktop.
Curso de FrontEnd da TOTI - Módulo de CSS3 - Aula de Tipografia (replicação da tipografia do site https://tecnoblog.net)
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 { | |
| font-family: "Open Sans", sans-serif; | |
| font-weight: 400; | |
| font-size: 12px; | |
| } | |
| .menu { | |
| background-color: #2280a6; | |
| } | |
| .menu__item { | |
| text-transform: uppercase; | |
| color: #ffffff; | |
| opacity: 0.7; | |
| } | |
| .menu__item:hover { | |
| opacity: 1; | |
| } | |
| .destaque { | |
| background-color: #0a0b14; | |
| } | |
| .destaque__titulo { | |
| font-family: "PT Sans Narrow"; | |
| font-size: 32px; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| color: #ffffff; | |
| } | |
| .card__titulo { | |
| font-family: "PT Sans Narrow"; | |
| font-size: 26px; | |
| font-weigh: 700; | |
| line-height: 33px; | |
| color: #3e4248; | |
| } | |
| .card__titulo:hover { | |
| color: #229fd3; | |
| } | |
| .card__data { | |
| color: #999999; | |
| } | |
| .card__autor { | |
| color: #229fd3; | |
| text-decoration: none; | |
| } | |
| .card__descricao { | |
| font-size: 14px; | |
| line-height: 18px; | |
| color: #666666; | |
| } | |
| .breadcrumb { | |
| color: #888888; | |
| } | |
| .breadcrumb__home, | |
| .breadcrumb__categoria { | |
| color: #229fd3; | |
| text-decoration: none; | |
| } | |
| .noticia__titulo { | |
| font-family: "PT Sans Narrow", sans-serif; | |
| font-size: 52px; | |
| font-weight: 700; | |
| line-height: 62px; | |
| color: #3e4248; | |
| } | |
| .noticia__resumo { | |
| font-size: 17px; | |
| line-height: 20px; | |
| color: #777777; | |
| } | |
| .noticia__corpo { | |
| font-size: 17px; | |
| line-height: 28px; | |
| color: #555555; | |
| } | |
| .noticia__linkcorpo { | |
| color: #229fd3; | |
| text-decoration: none; | |
| } | |
| .noticia__linkcorpo:hover { | |
| text-decoration: underline; | |
| } | |
| .noticia__subtitulo { | |
| font-size: 25px; | |
| color: #3e4248; | |
| } | |
| .noticia__fonte { | |
| font-size: 17px; | |
| line-height: 28px; | |
| color: #555555; | |
| font-style: italic; | |
| } | |
| .noticia__fontelink { | |
| color: #229fd3; | |
| text-decoration: none; | |
| } | |
| .noticia__fontelink:hover { | |
| text-decoration: underline; | |
| } | |
| .rodape { | |
| background-color: #137399; | |
| } | |
| .rodape__link { | |
| font-size: 13px; | |
| color: #ffffff; | |
| opacity: 0.7; | |
| text-decoration: none; | |
| } | |
| .rodape__link:hover { | |
| opacity: 1; | |
| } | |
| .rodape__copyright { | |
| line-height: 12px; | |
| color: #87c1d9; | |
| } |
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="preconnect" href="https://fonts.gstatic.com"> | |
| <link rel="stylesheet" | |
| href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=PT+Sans+Narrow:wght@400;700&display=swap"> | |
| </head> | |
| <body> | |
| <header class="menu"> | |
| <p class="menu__item">Comunidade</p> | |
| </header> | |
| <hr> | |
| <div class="destaque"> | |
| <p class="destaque__titulo">Review Notebook Lenovo Ideapad Flex 5i</p> | |
| </div> | |
| <hr> | |
| <div class="card"> | |
| <h3 class="card__titulo">Headset Sem Fio Xbox: uma nova era para quem joga na caixa e fora dela</h3> | |
| <p class="card__data"> | |
| Hoje às 14h00 por <a href="#" class="card__autor">Felipe Vinha</a> | |
| </p> | |
| <p class="card__descricao">A nova geração de consoles da Microsoft trouxe boas novidades quando estreou, em 2020. Xbox Series S e Xbox Series X aprimoraram a forma de jogar e, apesar de alguns percalços, o saldo final</p> | |
| </div> | |
| <hr> | |
| <div class="breadcrumb"> | |
| <a href="#" class="breadcrumb__home">Início</a> » <a href="#" class="breadcrumb__categoria">Aplicativos e Software</a> » <span>Chrome, Safari, Edge e Firefox se unem para melhorar extensões na web</span> | |
| </div> | |
| <hr> | |
| <div class="noticia"> | |
| <h1 class="noticia__titulo">Chrome, Safari, Edge e Firefox se unem para melhorar extensões na web</h1> | |
| <p class="noticia__resumo">Google, Apple, Mozilla e Microsoft querem tornar as extensões de navegadores mais seguras, eficientes e fáceis de desenvolver</p> | |
| <p class="noticia__corpo">As extensões de navegadores web podem se tornar mais seguras e eficientes em breve, devido a um esforço em conjunto dos times de desenvolvimento responsáveis pelo Chrome, Safari, <a href="#" class="noticia__linkcorpo">Firefox</a> e Edge. As empresas por trás desses browsers estão deixando a rivalidade de lado para trabalhar na melhoria desses recursos – o que acontecerá por meio de um fórum de discussão unificado, o WebExtensions Community Group.</p> | |
| <h2 class="noticia__subtitulo">Compatibilidade é o principal objetivo do grupo</h2> | |
| <p class="noticia__corpo">Colocando tudo isso em discussões e grupos oficiais, a integração entre as empresas para oferecer maior compatibilidade entre navegadores deve se tornar ainda mais rápida e funcional.</p> | |
| <p class="noticia__fonte">Com informações: <a href="#" class="noticia__fontelink">CNET</a></p> | |
| </div> | |
| <hr> | |
| <footer class="rodape"> | |
| <a href="#" class="rodape__link">Aviso de ética</a> | |
| <span class="rodape__copyright">© Mobilon Mídia 2005 - 2021.</span> | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
muito bem desenvolvido o código