Compare commits
40 Commits
feature/he
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| e0d1d3ae8c | |||
| 7bdb2a7fb1 | |||
| d2c4ab3c2a | |||
| 411afa824c | |||
| 6b344b3fc2 | |||
| f3f8917ef4 | |||
| 5207c6ab31 | |||
| ad934d37f8 | |||
| 439efa5a12 | |||
| bbf9e72b90 | |||
| c8d2e3e5ff | |||
| 71887fd56c | |||
| 735c1a1b65 | |||
| 3270831b85 | |||
| 57d27a29eb | |||
| 210dc80235 | |||
| dea0dc524a | |||
| 4dc7256f3c | |||
| b24cc7c134 | |||
| dfe447e33e | |||
| 88f44e476b | |||
| 7fdd6a935d | |||
| 25d60c6fdf | |||
| 7c55a65592 | |||
| 972f71f498 | |||
| 29b1556218 | |||
| ff278c7f2f | |||
| 6f52f641bf | |||
| 04041d9f75 | |||
| 71a7c8f469 | |||
| 82daf44a63 | |||
| 4ce3df6153 | |||
| 7c50b5086a | |||
| 47c8e7efd0 | |||
| 45636c08f7 | |||
| 6d4aefc12c | |||
| c5bc02afc9 | |||
| 3bc8212af5 | |||
| 57c2da22ff | |||
| 3df91d0606 |
BIN
assets/images/bottom-infocard-image.png
Normal file
BIN
assets/images/bottom-infocard-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
BIN
assets/images/card-image-bag.png
Normal file
BIN
assets/images/card-image-bag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
assets/images/card-image-cellphone.png
Normal file
BIN
assets/images/card-image-cellphone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
assets/images/card-image-coin.png
Normal file
BIN
assets/images/card-image-coin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
assets/images/card-image-laptop.png
Normal file
BIN
assets/images/card-image-laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/images/card-image-money.png
Normal file
BIN
assets/images/card-image-money.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/images/card-image-shopping.png
Normal file
BIN
assets/images/card-image-shopping.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 962 B |
BIN
assets/images/main-banner-image-desktop.png
Normal file
BIN
assets/images/main-banner-image-desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
assets/images/main-banner-image-mobile.png
Normal file
BIN
assets/images/main-banner-image-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 333 KiB |
BIN
assets/images/middle-image-01.png
Normal file
BIN
assets/images/middle-image-01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
BIN
assets/images/middle-image-02.png
Normal file
BIN
assets/images/middle-image-02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
BIN
assets/images/middle-image-03.png
Normal file
BIN
assets/images/middle-image-03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 317 KiB |
BIN
assets/images/top-infocard-image.png
Normal file
BIN
assets/images/top-infocard-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
3
assets/svgs/facebook-logo.svg
Normal file
3
assets/svgs/facebook-logo.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.9993 0.0049936L14.887 0C11.3905 0 9.13087 2.31828 9.13087 5.90643V8.62969H6.00163C5.73123 8.62969 5.51226 8.84891 5.51226 9.11932V13.065C5.51226 13.3354 5.73148 13.5544 6.00163 13.5544H9.13087V23.5106C9.13087 23.781 9.34984 24 9.62025 24H13.703C13.9734 24 14.1924 23.7808 14.1924 23.5106V13.5544H17.8512C18.1216 13.5544 18.3406 13.3354 18.3406 13.065L18.3421 9.11932C18.3421 8.98948 18.2904 8.86514 18.1988 8.77326C18.1071 8.68138 17.9823 8.62969 17.8525 8.62969H14.1924V6.32115C14.1924 5.21157 14.4568 4.64829 15.9022 4.64829L17.9988 4.64755C18.2689 4.64755 18.4879 4.42833 18.4879 4.15817V0.494367C18.4879 0.224462 18.2692 0.00549296 17.9993 0.0049936Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 787 B |
5
assets/svgs/instagram-logo.svg
Normal file
5
assets/svgs/instagram-logo.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.3766 0H6.62295C2.97106 0 0 3.095 0 6.89906V18.1008C0 21.905 2.97106 24.9999 6.62295 24.9999H17.3766C21.0288 24.9999 23.9999 21.9049 23.9999 18.1008V6.89906C24 3.095 21.0288 0 17.3766 0ZM21.8706 18.1008C21.8706 20.6819 19.8547 22.7817 17.3768 22.7817H6.62295C4.1452 22.7819 2.12938 20.6819 2.12938 18.1008V6.89906C2.12938 4.31806 4.1452 2.21811 6.62295 2.21811H17.3766C19.8545 2.21811 21.8705 4.31806 21.8705 6.89906V18.1008H21.8706Z" fill="white"/>
|
||||
<path d="M11.9999 6.05847C8.58992 6.05847 5.81576 8.94822 5.81576 12.5003C5.81576 16.0522 8.58992 18.9418 11.9999 18.9418C15.4099 18.9418 18.1841 16.0522 18.1841 12.5003C18.1841 8.94822 15.4099 6.05847 11.9999 6.05847ZM11.9999 16.7236C9.7642 16.7236 7.94514 14.829 7.94514 12.5002C7.94514 10.1711 9.76406 8.27643 11.9999 8.27643C14.2358 8.27643 16.0547 10.1711 16.0547 12.5002C16.0547 14.829 14.2356 16.7236 11.9999 16.7236Z" fill="white"/>
|
||||
<path d="M18.4435 4.17761C18.0333 4.17761 17.6303 4.35062 17.3405 4.65377C17.0494 4.95543 16.882 5.37539 16.882 5.80422C16.882 6.23173 17.0495 6.65154 17.3405 6.95468C17.6301 7.25635 18.0333 7.43084 18.4435 7.43084C18.8552 7.43084 19.2569 7.25635 19.548 6.95468C19.839 6.65154 20.0051 6.23158 20.0051 5.80422C20.0051 5.37539 19.839 4.95543 19.548 4.65377C19.2584 4.35062 18.8552 4.17761 18.4435 4.17761Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
3
assets/svgs/youtube-logo.svg
Normal file
3
assets/svgs/youtube-logo.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.98 2.34C22.329 1.182 21.6225 0.969 20.184 0.888C18.747 0.7905 15.1335 0.75 12.003 0.75C8.8665 0.75 5.2515 0.7905 3.816 0.8865C2.3805 0.969 1.6725 1.1805 1.0155 2.34C0.345 3.4965 0 5.4885 0 8.9955C0 8.9985 0 9 0 9C0 9.003 0 9.0045 0 9.0045V9.0075C0 12.4995 0.345 14.5065 1.0155 15.651C1.6725 16.809 2.379 17.019 3.8145 17.1165C5.2515 17.2005 8.8665 17.25 12.003 17.25C15.1335 17.25 18.747 17.2005 20.1855 17.118C21.624 17.0205 22.3305 16.8105 22.9815 15.6525C23.658 14.508 24 12.501 24 9.009C24 9.009 24 9.0045 24 9.0015C24 9.0015 24 8.9985 24 8.997C24 5.4885 23.658 3.4965 22.98 2.34ZM9 13.5V4.5L16.5 9L9 13.5Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 743 B |
151
index.html
151
index.html
@ -1,19 +1,160 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-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">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
|
||||
<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>Desafio 1 - Landing Page</title>
|
||||
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="styles/main.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Header Page -->
|
||||
<header class="header-page">
|
||||
<a href="/">
|
||||
<img class="header-page-logo" src="assets/svgs/Logo-M3Academy.svg" alt="logo da m3 academy">
|
||||
<img class="header-page-logo" src="assets/svgs/Logo-M3Academy.svg" alt="logo da m3 academy" />
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Banner -->
|
||||
<div>
|
||||
<figure>
|
||||
<!-- Versão Desktop -->
|
||||
<img class="main-banner main-banner-desktop" src="assets/images/main-banner-image-desktop.png"
|
||||
alt="imagem do banner principal" />
|
||||
<!-- Versão Mobile -->
|
||||
<img class="main-banner main-banner-mobile" src="assets/images/main-banner-image-mobile.png"
|
||||
alt="imagem do banner principal" />
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<!-- Top Infocard -->
|
||||
<section class="top-infocard">
|
||||
<div class="top-infocard-content">
|
||||
<h2 class="top-infocard-subtitle">lorem ipsum</h2>
|
||||
<h1 class="top-infocard-title">Dolor sit amet</h1>
|
||||
<p class="top-infocard-description">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.</p>
|
||||
</div>
|
||||
|
||||
<figure class="top-infocard-image-container">
|
||||
<img class="top-infocard-image" src="assets/images/top-infocard-image.png"
|
||||
alt="imagem do infocard do topo" />
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<!-- Top Card -->
|
||||
<div class="cards top-cards">
|
||||
<figure class="card top-card">
|
||||
<img class="top-card-image" src="assets/images/card-image-shopping.png"
|
||||
alt="imagem do primeiro card do topo" />
|
||||
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Craseuismod enim non dui fringilla interdum.</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="card top-card">
|
||||
<img class="top-card-image" src="assets/images/card-image-bag.png"
|
||||
alt="imagem do segundo card do topo" />
|
||||
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Craseuismod enim non dui fringilla interdum.</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="card top-card" />
|
||||
<img class="top-card-image" src="assets/images/card-image-coin.png" alt="imagem do terceiro card do topo">
|
||||
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Craseuismod enim non dui fringilla interdum.</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<!-- middle images -->
|
||||
<div class="middle-images">
|
||||
<div class="middle-images-wrapper">
|
||||
<figure class="middle-image-container middle-image-1">
|
||||
<img class="middle-image" src="assets/images/middle-image-01.png"
|
||||
alt="primeira imagem de um computador">
|
||||
</figure>
|
||||
<figure class="middle-image-container middle-image-2">
|
||||
<img class="middle-image" src="assets/images/middle-image-02.png"
|
||||
alt="segunda imagem de um computador">
|
||||
</figure>
|
||||
<figure class="middle-image-container middle-image-3">
|
||||
<img class="middle-image" src="assets/images/middle-image-03.png"
|
||||
alt="terceira imagem de um computador">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom cards -->
|
||||
<div class="cards bottom-cards">
|
||||
<figure class="card bottom-card">
|
||||
<img class="bottom-card-image" src="assets/images/card-image-money.png"
|
||||
alt="imagem do primeiro card do bottomo" />
|
||||
<figcaption class="bottom-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 bottom-card">
|
||||
<img class="bottom-card-image" src="assets/images/card-image-coin.png"
|
||||
alt="imagem do segundo card do bottomo" />
|
||||
<figcaption class="bottom-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 bottom-card" />
|
||||
<img class="bottom-card-image" src="assets/images/card-image-laptop.png"
|
||||
alt="imagem do terceiro card do bottomo">
|
||||
<figcaption class="bottom-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 bottom-card" />
|
||||
<img class="bottom-card-image" src="assets/images/card-image-cellphone.png"
|
||||
alt="imagem do terceiro card do bottomo">
|
||||
<figcaption class="bottom-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>
|
||||
</div>
|
||||
|
||||
<!-- bottom infocard -->
|
||||
<article class="bottom-infocard">
|
||||
<div class="bottom-infocard-content">
|
||||
<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
|
||||
<p class="bottom-infocard-description">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.
|
||||
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
|
||||
</div>
|
||||
|
||||
<figure class="bottom-infocard-image-container">
|
||||
<img class="bottom-infocard-image" src="assets/images/bottom-infocard-image.png"
|
||||
alt="imagem do infocard de baixo">
|
||||
</figure>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer class="footer-page">
|
||||
<ul class="footer-icons">
|
||||
<li><a href="/"><img src="assets/svgs/instagram-logo.svg" alt="logo do instagram"></a></li>
|
||||
<li><a href="/"><img src="assets/svgs/facebook-logo.svg" alt="logo do facebook"></a></li>
|
||||
<li><a href="/"><img src="assets/svgs/youtube-logo.svg" alt="logo do youtube"></a></li>
|
||||
</ul>
|
||||
|
||||
<p class="footer-text">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
376
styles/main.css
376
styles/main.css
@ -1,17 +1,389 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.main-banner,
|
||||
.top-infocard-image,
|
||||
.bottom-infocard-image,
|
||||
.middle-image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-infocard,
|
||||
.card,
|
||||
.footer-page,
|
||||
.bottom-infocard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-infocard-subtitle,
|
||||
.top-infocard-title,
|
||||
.card,
|
||||
.bottom-card-description,
|
||||
.bottom-infocard-title,
|
||||
.bottom-infocard-description,
|
||||
.footer-text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.top-infocard-description,
|
||||
.top-card-description,
|
||||
.bottom-card-description,
|
||||
.bottom-infocard-description {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.middle-images-wrapper,
|
||||
.bottom-cards {
|
||||
width: 92.50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*Header*/
|
||||
.header-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.header-page-logo {
|
||||
display: block;
|
||||
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
/*Main Banner*/
|
||||
.main-banner-desktop {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-banner-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Top Infocard */
|
||||
.top-infocard {
|
||||
padding: 74px 0;
|
||||
}
|
||||
|
||||
.top-infocard-content {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.top-infocard-subtitle {
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
.top-infocard-title {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
font-size: 48px;
|
||||
line-height: 58px;
|
||||
padding-bottom: 28px;
|
||||
}
|
||||
|
||||
.top-infocard-description {
|
||||
padding-bottom: 73px;
|
||||
}
|
||||
|
||||
.top-infocard-image-container {
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
/*top cards*/
|
||||
.cards {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.top-cards {
|
||||
gap: 21px;
|
||||
width: 57%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.top-card {
|
||||
padding: 36px 26px 26px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.top-card-image {
|
||||
width: 34%;
|
||||
padding-bottom: 28px;
|
||||
}
|
||||
|
||||
/*grid area para o middle images*/
|
||||
.middle-image-1 {
|
||||
grid-area: image1;
|
||||
}
|
||||
|
||||
.middle-image-2 {
|
||||
grid-area: image2;
|
||||
}
|
||||
|
||||
.middle-image-3 {
|
||||
grid-area: image3;
|
||||
}
|
||||
|
||||
/*middle images*/
|
||||
.middle-images {
|
||||
background: #E0E0E0;
|
||||
margin-bottom: 190px;
|
||||
}
|
||||
|
||||
.middle-images-wrapper {
|
||||
position: relative;
|
||||
top: 62px;
|
||||
|
||||
display: grid;
|
||||
grid-template-areas: "image1 image2 image3";
|
||||
gap: 39px;
|
||||
}
|
||||
|
||||
/*bottom cards*/
|
||||
.bottom-cards {
|
||||
gap: 16px;
|
||||
padding-bottom: 108px;
|
||||
}
|
||||
|
||||
.bottom-card {
|
||||
padding: 35px 32px 45px;
|
||||
}
|
||||
|
||||
.bottom-card-image {
|
||||
width: 29%;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
/*bottom infocard*/
|
||||
.bottom-infocard {
|
||||
padding-bottom: 116px;
|
||||
}
|
||||
|
||||
.bottom-infocard-content {
|
||||
width: 29%;
|
||||
}
|
||||
|
||||
.bottom-infocard-title {
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
.bottom-infocard-description {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.bottom-infocard-image-container {
|
||||
width: 71%;
|
||||
}
|
||||
|
||||
.bottom-infocard-image {
|
||||
height: 276px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/*footer*/
|
||||
.footer-page {
|
||||
background: #000;
|
||||
padding: 38px 0;
|
||||
}
|
||||
|
||||
.footer-icons {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.footer-icons>li:last-child {
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
color: #BDBDBD;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/*mobile*/
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
.top-infocard-content,
|
||||
.cards,
|
||||
.middle-images-wrapper,
|
||||
.bottom-infocard-image-container,
|
||||
.bottom-infocard-image,
|
||||
.bottom-infocard-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*Banner*/
|
||||
.main-banner-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-banner-mobile {
|
||||
display: block;
|
||||
max-height: 598px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/*Top infocard*/
|
||||
.top-infocard {
|
||||
padding: 74px 30px 90px 30px;
|
||||
}
|
||||
|
||||
.top-infocard-subtitle {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.top-infocard-title {
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.top-infocard-description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.top-infocard-image-container {
|
||||
width: 58%;
|
||||
max-width: 239px;
|
||||
}
|
||||
|
||||
/*top cards*/
|
||||
.cards {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.top-cards {
|
||||
padding: 0 30px 80px;
|
||||
}
|
||||
|
||||
.top-card {
|
||||
min-width: initial;
|
||||
}
|
||||
|
||||
.top-card-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.top-card-image,
|
||||
.bottom-card-image {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
/*middle images*/
|
||||
.middle-images {
|
||||
padding: 0 23px;
|
||||
margin-bottom: 112px;
|
||||
}
|
||||
|
||||
.middle-images-wrapper {
|
||||
top: 32px;
|
||||
|
||||
grid-template-areas: "image2 image1" "image3 image3";
|
||||
column-gap: 14px;
|
||||
row-gap: 24px;
|
||||
}
|
||||
|
||||
/*bottom cards*/
|
||||
.bottom-cards {
|
||||
padding: 0 23px 89px;
|
||||
}
|
||||
|
||||
.bottom-infocard {
|
||||
flex-direction: column-reverse;
|
||||
padding-bottom: 88px;
|
||||
}
|
||||
|
||||
.bottom-infocard-image {
|
||||
height: auto;
|
||||
object-fit: initial;
|
||||
}
|
||||
|
||||
.bottom-infocard-content {
|
||||
padding: 50px 32px 0;
|
||||
}
|
||||
|
||||
.bottom-infocard-title {
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.bottom-infocard-description {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
width: 261px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*4K*/
|
||||
@media screen and (min-width: 2500px) {
|
||||
|
||||
/*infocard e cards*/
|
||||
.top-infocard-subtitle {
|
||||
font-size: 64px;
|
||||
line-height: 80px;
|
||||
}
|
||||
|
||||
.top-infocard-title {
|
||||
font-size: 98px;
|
||||
line-height: 116px;
|
||||
}
|
||||
|
||||
.top-infocard-description,
|
||||
.top-card-description,
|
||||
.bottom-card-description,
|
||||
.bottom-infocard-description {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.bottom-infocard-title {
|
||||
font-size: 64px;
|
||||
line-height: 78px;
|
||||
}
|
||||
|
||||
/*footer*/
|
||||
.footer-text {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
.top-infocard,
|
||||
.top-cards,
|
||||
.middle-images,
|
||||
.bottom-cards,
|
||||
.bottom-infocard-content {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user