feature/estilizacao-da-pagina #2
BIN
assets/images/article-image-mobile.png
Normal file
BIN
assets/images/article-image-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
@ -1,6 +1,5 @@
|
|||||||
<svg width="86" height="104" viewBox="0 0 86 104" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="100" height="103" viewBox="0 0 100 103" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M62.8503 69.9238C62.1676 69.9238 61.492 69.8935 60.8245 69.8346V83.7216H4.66959V17.1732H60.8245V28.4152C61.492 28.3563 62.1676 28.326 62.8503 28.326C63.5329 28.326 64.2085 28.3563 64.876 28.4152V9.77092C64.876 4.38323 60.4883 0 55.095 0H10.3991C5.00586 0 0.618164 4.38323 0.618164 9.77092V94.2108C0.618164 99.6086 4.99755 104 10.3807 104H55.1135C60.4966 104 64.876 99.6086 64.876 94.2108V69.8346C64.2087 69.8937 63.5329 69.9238 62.8503 69.9238ZM4.66959 9.77092C4.66959 6.62309 7.23981 4.0625 10.3991 4.0625H55.095C58.2543 4.0625 60.8245 6.62309 60.8245 9.77092V13.1107H4.66959V9.77092ZM60.8245 94.2108C60.8245 97.3686 58.2626 99.9375 55.1135 99.9375H10.3807C7.23171 99.9375 4.66959 97.3686 4.66959 94.2108V87.7841H60.8245V94.2108Z" fill="black"/>
|
<path d="M62.7912 95.3056H17.2303V26.7631H27.9V37.1243C27.9 38.2353 28.7919 39.136 29.8922 39.136C30.9923 39.136 31.8844 38.2353 31.8844 37.1243V26.7631H59.2063V37.1243C59.2063 38.2353 60.0984 39.136 61.1984 39.136C62.2985 39.136 63.1906 38.2353 63.1906 37.1243V26.7631H73.5273V48.0779H77.5117V24.7514C77.5117 23.6403 76.6196 22.7397 75.5195 22.7397H63.1906V17.7287C63.1906 7.95313 55.2751 0 45.5454 0C43.3154 0 41.1805 0.417834 39.2145 1.17967C37.2484 0.417834 35.1135 0 32.8835 0C23.1536 0 15.2381 7.95313 15.2381 17.7287V22.7395H2.90923C1.80914 22.7395 0.917042 23.6401 0.917042 24.7512V89.7613C0.917042 95.0368 5.17415 99.3288 10.4068 99.3288H68.8044C66.8365 98.2564 64.7517 96.925 62.7912 95.3056ZM45.5454 4.02344C53.0781 4.02344 59.2063 10.1717 59.2063 17.7287V22.7395H50.5287V17.7287C50.5287 12.2528 48.045 7.34901 44.1501 4.09425C44.6089 4.04758 45.0745 4.02344 45.5454 4.02344ZM39.2145 5.58614C43.5682 7.8801 46.5445 12.4624 46.5445 17.7289V22.7397H31.8844V17.7287C31.8844 12.4622 34.8607 7.8801 39.2145 5.58614ZM19.2225 17.7287C19.2225 10.1717 25.3508 4.02344 32.8835 4.02344C33.3544 4.02344 33.8198 4.04738 34.2786 4.09445C30.3837 7.34901 27.8998 12.253 27.8998 17.7289V22.7397H19.2223V17.7287H19.2225ZM13.2459 95.3056H10.4068C7.37113 95.3056 4.90142 92.8185 4.90142 89.7615V26.7631H13.2459V95.3056Z" fill="black"/>
|
||||||
<path d="M31.3966 95.8921H34.0975C35.2163 95.8921 36.1232 94.9825 36.1232 93.8608C36.1232 92.739 35.2163 91.8296 34.0975 91.8296H31.3966C30.2778 91.8296 29.3709 92.739 29.3709 93.8608C29.3709 94.9825 30.2778 95.8921 31.3966 95.8921Z" fill="black"/>
|
<path d="M92.7992 54.7375C86.7766 54.7375 81.5819 51.191 79.165 46.0659H72.082C69.6651 51.1908 64.4705 54.7375 58.4479 54.7375C56.2051 54.7375 54.0772 54.2452 52.1641 53.3635V78.4196C52.1641 96.7462 75.6235 103 75.6235 103C75.6235 103 99.0829 96.7462 99.0829 78.4196V53.3635C97.1698 54.2452 95.0418 54.7375 92.7992 54.7375Z" fill="#0336DB"/>
|
||||||
<path d="M62.8502 26.2947C50.2758 26.2947 40.0824 36.5162 40.0824 49.125C40.0824 54.1306 41.689 58.7596 44.4132 62.5225L40.0824 71.2623L52.6667 69.5496C55.731 71.0887 59.1897 71.955 62.8502 71.955C75.4246 71.955 85.6182 61.7335 85.6182 49.125C85.6182 36.5164 75.4246 26.2947 62.8502 26.2947Z" fill="#0336DB"/>
|
<path d="M74.8531 81.6054C74.328 81.6054 73.8228 81.3957 73.4487 81.0201L69.1192 76.673C68.3389 75.8895 68.3353 74.6158 69.1113 73.828C69.8868 73.0401 71.1483 73.0364 71.9286 73.82L74.7249 76.6276L81.99 67.9301C82.6996 67.0807 83.9563 66.9733 84.7972 67.6895C85.6383 68.4059 85.745 69.6751 85.0354 70.5244L76.3762 80.891C76.0172 81.3207 75.4968 81.579 74.9406 81.6035C74.9113 81.6047 74.8824 81.6054 74.8531 81.6054Z" fill="white"/>
|
||||||
<path d="M65.0226 55.0342H64.8759V47.5356H65.0226C66.1414 47.5356 67.0483 46.6261 67.0483 45.5044C67.0483 44.3827 66.1414 43.4731 65.0226 43.4731H60.6781C59.5593 43.4731 58.6523 44.3827 58.6523 45.5044C58.6523 46.6261 59.5593 47.5356 60.6781 47.5356H60.8247V55.0342H60.6781C59.5593 55.0342 58.6523 55.9438 58.6523 57.0655C58.6523 58.1871 59.5593 59.0967 60.6781 59.0967H65.0226C66.1414 59.0967 67.0483 58.1871 67.0483 57.0655C67.0483 55.9438 66.1414 55.0342 65.0226 55.0342Z" fill="white"/>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 2.2 KiB |
@ -1,5 +1,6 @@
|
|||||||
<svg width="100" height="103" viewBox="0 0 100 103" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="86" height="104" viewBox="0 0 86 104" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M62.7912 95.3056H17.2303V26.7631H27.9V37.1243C27.9 38.2353 28.7919 39.136 29.8922 39.136C30.9923 39.136 31.8844 38.2353 31.8844 37.1243V26.7631H59.2063V37.1243C59.2063 38.2353 60.0984 39.136 61.1984 39.136C62.2985 39.136 63.1906 38.2353 63.1906 37.1243V26.7631H73.5273V48.0779H77.5117V24.7514C77.5117 23.6403 76.6196 22.7397 75.5195 22.7397H63.1906V17.7287C63.1906 7.95313 55.2751 0 45.5454 0C43.3154 0 41.1805 0.417834 39.2145 1.17967C37.2484 0.417834 35.1135 0 32.8835 0C23.1536 0 15.2381 7.95313 15.2381 17.7287V22.7395H2.90923C1.80914 22.7395 0.917042 23.6401 0.917042 24.7512V89.7613C0.917042 95.0368 5.17415 99.3288 10.4068 99.3288H68.8044C66.8365 98.2564 64.7517 96.925 62.7912 95.3056ZM45.5454 4.02344C53.0781 4.02344 59.2063 10.1717 59.2063 17.7287V22.7395H50.5287V17.7287C50.5287 12.2528 48.045 7.34901 44.1501 4.09425C44.6089 4.04758 45.0745 4.02344 45.5454 4.02344ZM39.2145 5.58614C43.5682 7.8801 46.5445 12.4624 46.5445 17.7289V22.7397H31.8844V17.7287C31.8844 12.4622 34.8607 7.8801 39.2145 5.58614ZM19.2225 17.7287C19.2225 10.1717 25.3508 4.02344 32.8835 4.02344C33.3544 4.02344 33.8198 4.04738 34.2786 4.09445C30.3837 7.34901 27.8998 12.253 27.8998 17.7289V22.7397H19.2223V17.7287H19.2225ZM13.2459 95.3056H10.4068C7.37113 95.3056 4.90142 92.8185 4.90142 89.7615V26.7631H13.2459V95.3056Z" fill="black"/>
|
<path d="M62.8503 69.9238C62.1676 69.9238 61.492 69.8935 60.8245 69.8346V83.7216H4.66959V17.1732H60.8245V28.4152C61.492 28.3563 62.1676 28.326 62.8503 28.326C63.5329 28.326 64.2085 28.3563 64.876 28.4152V9.77092C64.876 4.38323 60.4883 0 55.095 0H10.3991C5.00586 0 0.618164 4.38323 0.618164 9.77092V94.2108C0.618164 99.6086 4.99755 104 10.3807 104H55.1135C60.4966 104 64.876 99.6086 64.876 94.2108V69.8346C64.2087 69.8937 63.5329 69.9238 62.8503 69.9238ZM4.66959 9.77092C4.66959 6.62309 7.23981 4.0625 10.3991 4.0625H55.095C58.2543 4.0625 60.8245 6.62309 60.8245 9.77092V13.1107H4.66959V9.77092ZM60.8245 94.2108C60.8245 97.3686 58.2626 99.9375 55.1135 99.9375H10.3807C7.23171 99.9375 4.66959 97.3686 4.66959 94.2108V87.7841H60.8245V94.2108Z" fill="black"/>
|
||||||
<path d="M92.7992 54.7375C86.7766 54.7375 81.5819 51.191 79.165 46.0659H72.082C69.6651 51.1908 64.4705 54.7375 58.4479 54.7375C56.2051 54.7375 54.0772 54.2452 52.1641 53.3635V78.4196C52.1641 96.7462 75.6235 103 75.6235 103C75.6235 103 99.0829 96.7462 99.0829 78.4196V53.3635C97.1698 54.2452 95.0418 54.7375 92.7992 54.7375Z" fill="#0336DB"/>
|
<path d="M31.3966 95.8921H34.0975C35.2163 95.8921 36.1232 94.9825 36.1232 93.8608C36.1232 92.739 35.2163 91.8296 34.0975 91.8296H31.3966C30.2778 91.8296 29.3709 92.739 29.3709 93.8608C29.3709 94.9825 30.2778 95.8921 31.3966 95.8921Z" fill="black"/>
|
||||||
<path d="M74.8531 81.6054C74.328 81.6054 73.8228 81.3957 73.4487 81.0201L69.1192 76.673C68.3389 75.8895 68.3353 74.6158 69.1113 73.828C69.8868 73.0401 71.1483 73.0364 71.9286 73.82L74.7249 76.6276L81.99 67.9301C82.6996 67.0807 83.9563 66.9733 84.7972 67.6895C85.6383 68.4059 85.745 69.6751 85.0354 70.5244L76.3762 80.891C76.0172 81.3207 75.4968 81.579 74.9406 81.6035C74.9113 81.6047 74.8824 81.6054 74.8531 81.6054Z" fill="white"/>
|
<path d="M62.8502 26.2947C50.2758 26.2947 40.0824 36.5162 40.0824 49.125C40.0824 54.1306 41.689 58.7596 44.4132 62.5225L40.0824 71.2623L52.6667 69.5496C55.731 71.0887 59.1897 71.955 62.8502 71.955C75.4246 71.955 85.6182 61.7335 85.6182 49.125C85.6182 36.5164 75.4246 26.2947 62.8502 26.2947Z" fill="#0336DB"/>
|
||||||
|
<path d="M65.0226 55.0342H64.8759V47.5356H65.0226C66.1414 47.5356 67.0483 46.6261 67.0483 45.5044C67.0483 44.3827 66.1414 43.4731 65.0226 43.4731H60.6781C59.5593 43.4731 58.6523 44.3827 58.6523 45.5044C58.6523 46.6261 59.5593 47.5356 60.6781 47.5356H60.8247V55.0342H60.6781C59.5593 55.0342 58.6523 55.9438 58.6523 57.0655C58.6523 58.1871 59.5593 59.0967 60.6781 59.0967H65.0226C66.1414 59.0967 67.0483 58.1871 67.0483 57.0655C67.0483 55.9438 66.1414 55.0342 65.0226 55.0342Z" fill="white"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 1.9 KiB |
84
index.html
84
index.html
@ -4,6 +4,13 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
|
||||||
|
<!-- Font da pagina - Inter -->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="./styles/style.css">
|
||||||
<title>Landing Page</title>
|
<title>Landing Page</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -12,6 +19,7 @@
|
|||||||
<nav>
|
<nav>
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<img
|
<img
|
||||||
|
class="logo"
|
||||||
src="./assets/svgs/logo-m3academy.svg"
|
src="./assets/svgs/logo-m3academy.svg"
|
||||||
alt="Logo do treinamento M3 Academy"
|
alt="Logo do treinamento M3 Academy"
|
||||||
/>
|
/>
|
||||||
@ -40,11 +48,7 @@
|
|||||||
<div class="description-text">
|
<div class="description-text">
|
||||||
<h2 class="description-title">Lorem ipsum <span class="description-subtitle">dolor sit amet</span></h2>
|
<h2 class="description-title">Lorem ipsum <span class="description-subtitle">dolor sit amet</span></h2>
|
||||||
<p class="description">
|
<p class="description">
|
||||||
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet,
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.
|
||||||
consectetur adipiscing elit. Cras euismod enim non dui
|
|
||||||
fringilla interdum. Curabitur ut tortor sed lacus
|
|
||||||
egestas vulputate vel sit amet velit. Nulla suscipit
|
|
||||||
magna dui.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<figure class="image-description">
|
<figure class="image-description">
|
||||||
@ -77,45 +81,45 @@
|
|||||||
</section>
|
</section>
|
||||||
<!-- Container com tres imagens -->
|
<!-- Container com tres imagens -->
|
||||||
<div class="container-three-images">
|
<div class="container-three-images">
|
||||||
<figure>
|
<div class="three-images-wrapper">
|
||||||
<img src="./assets/images/notebook-1.png" alt="Notebook com sua tela quase fechada iluminando o teclado com cores alaranjadas">
|
<figure>
|
||||||
</figure>
|
<img src="./assets/images/notebook-1.png" alt="Notebook com sua tela quase fechada iluminando o teclado com cores alaranjadas">
|
||||||
<figure>
|
|
||||||
<img src="./assets/images/notebook-2.png" alt="Notebook com a tela semi-aberta iluminando o teclado com cores azuis e vermelho formando um rosa no centro">
|
|
||||||
</figure>
|
|
||||||
<figure>
|
|
||||||
<img src="./assets/images/notebook-3.png" alt="Primeiro notebook porem em um angulo baixo da direita para esquerda da tecla enter">
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
<!-- Segundo container com cards -->
|
|
||||||
<div class="container-cards second">
|
|
||||||
<div class="cards">
|
|
||||||
<figure class="card">
|
|
||||||
<img class="card-image" src="./assets/svgs/money.svg" alt="Duas notas uma por cima da outra, com a cor azul no centro">
|
|
||||||
<figcaption class="card-description">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
</figure>
|
||||||
<figure class="card">
|
<figure>
|
||||||
<img class="card-image" src="./assets/svgs/hand-coin.svg" alt="Uma mão segurando uma moeda com a cor azul no seu centro">
|
<img src="./assets/images/notebook-2.png" alt="Notebook com a tela semi-aberta iluminando o teclado com cores azuis e vermelho formando um rosa no centro">
|
||||||
<figcaption class="card-description">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
</figure>
|
||||||
<figure class="card">
|
<figure>
|
||||||
<img class="card-image" src="./assets/svgs/laptop.svg" alt="Notebook navegando em um site de compras">
|
<img src="./assets/images/notebook-3.png" alt="Primeiro notebook porem em um angulo baixo da direita para esquerda da tecla enter">
|
||||||
<figcaption class="card-description">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
|
||||||
<figure class="card">
|
|
||||||
<img class="card-image" src="./assets/svgs/smartphone.svg" alt="Celular recebendo uma notificação">
|
|
||||||
<figcaption class="card-description">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
|
||||||
</figcaption>
|
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Segundo container com cards -->
|
||||||
|
<section class="container-cards second">
|
||||||
|
<figure class="card">
|
||||||
|
<img class="card-image" src="./assets/svgs/money.svg" alt="Duas notas uma por cima da outra, com a cor azul no centro">
|
||||||
|
<figcaption class="card-description">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="card">
|
||||||
|
<img class="card-image" src="./assets/svgs/hand-coin.svg" alt="Uma mão segurando uma moeda com a cor azul no seu centro">
|
||||||
|
<figcaption class="card-description">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="card">
|
||||||
|
<img class="card-image" src="./assets/svgs/laptop.svg" alt="Notebook navegando em um site de compras">
|
||||||
|
<figcaption class="card-description">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<figure class="card">
|
||||||
|
<img class="card-image" src="./assets/svgs/smartphone.svg" alt="Celular recebendo uma notificação">
|
||||||
|
<figcaption class="card-description">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
<!-- Artigo da pagina -->
|
<!-- Artigo da pagina -->
|
||||||
<article class="container-article">
|
<article class="container-article">
|
||||||
<div class="article-text">
|
<div class="article-text">
|
||||||
@ -124,11 +128,11 @@
|
|||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
|
||||||
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
|
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
|
||||||
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
|
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
|
||||||
Lorem ipsum dolor sit amet
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<figure class="article-image">
|
<figure class="article-image">
|
||||||
<img src="./assets/images/article-image.png" alt="Varias telas de monitores desfocada">
|
<img src="./assets/images/article-image.png" alt="Varias telas de monitores desfocada">
|
||||||
|
<img class="image-mobile" src="./assets/images/article-image-mobile.png" alt="Um oculos na frente de um monitor com a tela desfocada">
|
||||||
</figure>
|
</figure>
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
203
styles/style.css
Normal file
203
styles/style.css
Normal file
@ -0,0 +1,203 @@
|
|||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cabecalho da pagina */
|
||||||
|
header nav{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
height: 101px;
|
||||||
|
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
header nav .logo{
|
||||||
|
height: 43px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Corpo da pagina */
|
||||||
|
|
||||||
|
/* Banner principal da pagina */
|
||||||
|
main .banner-container .banner-desktop img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .banner-container .banner-mobile{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Titulo e descricao do site */
|
||||||
|
main section.container-description{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 73px 0 178px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section.container-description .description-text h2.description-title{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section.container-description .description-text h2.description-title span.description-subtitle{
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section.container-description .description-text p.description{
|
||||||
|
width: 40%;
|
||||||
|
line-height: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
padding: 28px 0 73px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Primeiro container com cards */
|
||||||
|
main section.container-cards{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 21px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 0 15px 80px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section.container-cards .card{
|
||||||
|
width: 350px;
|
||||||
|
height: 287px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section.container-cards .card img.card-image{
|
||||||
|
padding-top: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section.container-cards .card figcaption.card-description{
|
||||||
|
line-height: 24px;
|
||||||
|
padding: 30px 25px 27px 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container com tres imagens */
|
||||||
|
main .container-three-images{
|
||||||
|
background-color: #E0E0E0;
|
||||||
|
margin-bottom: 192px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .container-three-images .three-images-wrapper{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 39px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
top: 62px;
|
||||||
|
|
||||||
|
padding: 0 62px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main .container-three-images .three-images-wrapper img{
|
||||||
|
width: 566px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Segundo container com cards */
|
||||||
|
main section.container-cards.second .card{
|
||||||
|
width: 432px;
|
||||||
|
height: 332px
|
||||||
|
}
|
||||||
|
|
||||||
|
main section.container-cards.second .card figcaption.card-description{
|
||||||
|
line-height: 24px;
|
||||||
|
padding: 30px 32px 65px 33px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Artigo da pagina */
|
||||||
|
main article.container-article{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 108px 10px 116px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main article.container-article .article-text{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
|
||||||
|
padding-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main article.container-article .article-text h3.article-title{
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 39px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main article.container-article .article-text p.article-description{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 550px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main article.container-article figure.article-image{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
main article.container-article figure.article-image img.image-mobile{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
main article.container-article figure.article-image img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer da pagina */
|
||||||
|
footer{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
background-color: #000000;
|
||||||
|
padding: 28px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .social-links{
|
||||||
|
display: flex;
|
||||||
|
gap: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer span.footer-description{
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #BDBDBD;
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user