Last active
June 23, 2022 14:27
-
-
Save jeffersondev/5d30d21aab80eacb9d673c1d78e80790 to your computer and use it in GitHub Desktop.
Curso de FrontEnd da TOTI - Módulo de CSS3 - Aula de Layouts III (template simplificado do G1 com CSS Grid - https://g1.globo.com/economia/tecnologia/inovacao)
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 > * { | |
| padding: 20px; | |
| text-align: center; | |
| font-weight: bold; | |
| } | |
| body { | |
| min-height: 100vh; | |
| display: grid; | |
| grid-template-columns: 2fr 1fr; | |
| grid-template-rows: 80px 200px auto auto 200px 50px; | |
| column-gap: 30px; | |
| row-gap: 20px; | |
| } | |
| .cabecalho { | |
| background-color: red; | |
| grid-column: 1 / 3; | |
| } | |
| .publicidade-topo { | |
| background-color: orange; | |
| grid-column: 1 / span 2; | |
| } | |
| .conteudo { | |
| background-color: gray; | |
| grid-row: 3 / span 2; | |
| } | |
| .lateral { | |
| background-color: darkgray; | |
| } | |
| .publicidade-lateral { | |
| background-color: gold; | |
| } | |
| .publicidade-final { | |
| background-color: darkorange; | |
| grid-column-start: 1; | |
| grid-column-end: 3; | |
| } | |
| .rodape { | |
| background-color: red; | |
| grid-column: 1 / 3; | |
| } |
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" | |
| /> | |
| </head> | |
| <body> | |
| <header class="cabecalho">Cabeçalho</header> | |
| <div class="publicidade-topo">Publicidade topo</div> | |
| <main class="conteudo"> | |
| <ul> | |
| <li>Noticia 1</li> | |
| <li>Noticia 2</li> | |
| <li>Noticia 3</li> | |
| <li>Noticia 4</li> | |
| <li>Noticia 5</li> | |
| <li>Noticia 6</li> | |
| <li>Noticia 7</li> | |
| <li>Noticia 8</li> | |
| <li>Noticia 9</li> | |
| <li>Noticia 10</li> | |
| <li>Noticia 11</li> | |
| <li>Noticia 12</li> | |
| <li>Noticia 13</li> | |
| <li>Noticia 14</li> | |
| <li>Noticia 15</li> | |
| <li>Noticia 16</li> | |
| <li>Noticia 17</li> | |
| <li>Noticia 18</li> | |
| <li>Noticia 19</li> | |
| <li>Noticia 20</li> | |
| <li>Noticia 21</li> | |
| <li>Noticia 22</li> | |
| <li>Noticia 23</li> | |
| <li>Noticia 24</li> | |
| </ul> | |
| </main> | |
| <aside class="lateral">Mais lidas</aside> | |
| <div class="publicidade-lateral">Publicidade lateral</div> | |
| <div class="publicidade-final">Publicidade final</div> | |
| <footer class="rodape">Rodape</footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment