forked from M3-Academy/practice-time-landing-page
patricksouza #1
BIN
assents/imagens/Logo M3 [branco] (4) 1.png
Normal file
BIN
assents/imagens/Logo M3 [branco] (4) 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
assents/imagens/Rectangle 15 (1).png
Normal file
BIN
assents/imagens/Rectangle 15 (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
BIN
assents/imagens/banner-desktop.png
Normal file
BIN
assents/imagens/banner-desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
assents/imagens/banner-mobile.png
Normal file
BIN
assents/imagens/banner-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 333 KiB |
BIN
assents/imagens/bottom-card-01.png
Normal file
BIN
assents/imagens/bottom-card-01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
assents/imagens/bottom-card-02.png
Normal file
BIN
assents/imagens/bottom-card-02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assents/imagens/bottom-card-03.png
Normal file
BIN
assents/imagens/bottom-card-03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
assents/imagens/bottom-card-04.png
Normal file
BIN
assents/imagens/bottom-card-04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
assents/imagens/bottom-img01.png
Normal file
BIN
assents/imagens/bottom-img01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 446 KiB |
BIN
assents/imagens/img-center-desktop.png
Normal file
BIN
assents/imagens/img-center-desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 947 KiB |
BIN
assents/imagens/img-center-mobile.png
Normal file
BIN
assents/imagens/img-center-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
assents/imagens/orked-computers.png
Normal file
BIN
assents/imagens/orked-computers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
assents/imagens/top-card-01.png
Normal file
BIN
assents/imagens/top-card-01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
assents/imagens/top-card-02.png
Normal file
BIN
assents/imagens/top-card-02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
assents/imagens/top-card-03.png
Normal file
BIN
assents/imagens/top-card-03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
183
index.html
Normal file
183
index.html
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<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">
|
||||||
|
<link rel="stylesheet" href="/main.styles/style.css">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<title>M3 Landing Page</title>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header class="page-header">
|
||||||
|
<a href="/">
|
||||||
|
<img class="header-logo" src="/assents/imagens/Logo M3 [branco] (4) 1.png" alt="logo da M3 Branco" />
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<img class="main-banner main-banner-desktop" src="assents/imagens/banner-desktop.png" alt="Banner Principal">
|
||||||
|
<img class="main-banner main-banner-mobile" src="assents/imagens/banner-mobile.png" alt="Banner Principal">
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="top-infocard">
|
||||||
|
<div class="top-infocard-text">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<img class="top-infocard-image" src="assents/imagens/orked-computers.png" alt="banner do infocard do topo" />
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="top-cards">
|
||||||
|
<div class="top-card">
|
||||||
|
<img class="top-card-image" src="assents/imagens/top-card-01.png" alt="imagem do primeiro card topo" />
|
||||||
|
|
||||||
|
<p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non
|
||||||
|
dui fringilla interdum. </p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="top-card">
|
||||||
|
<img class="top-card-image" src="assents/imagens/top-card-02.png" alt="imagem do primeiro card topo">
|
||||||
|
|
||||||
|
<p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non
|
||||||
|
dui fringilla interdum. </p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="top-card">
|
||||||
|
<img class="top-card-image" src="assents/imagens/top-card-03.png" alt="imagem do primeiro card topo">
|
||||||
|
|
||||||
|
<p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non
|
||||||
|
dui fringilla interdum. </p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<img class="middle-banner middle-banner-desktop" src="assents/imagens/img-center-desktop.png"
|
||||||
|
alt="Banner center Principal">
|
||||||
|
|
||||||
|
<img class="middle-banner middle-banner-mobile" src="assents/imagens/img-center-mobile.png"
|
||||||
|
alt="Banner center Principal">
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="bottom-cards">
|
||||||
|
|
||||||
|
<div class="bottom-card-wrapper">
|
||||||
|
<div class="bottom-card">
|
||||||
|
<img class="bottom-card-image" src="assents/imagens/bottom-card-01.png" alt="imagem do segundo card topo" />
|
||||||
|
<p 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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bottom-card">
|
||||||
|
<img class="bottom-card-image" src="assents/imagens/bottom-card-02.png" alt="imagem do segundo card topo" />
|
||||||
|
<p 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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bottom-card">
|
||||||
|
<img class="bottom-card-image" src="assents/imagens/bottom-card-03.png" alt="imagem do segundo card topo" />
|
||||||
|
<p 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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bottom-card">
|
||||||
|
<img class="bottom-card-image" src="assents/imagens/bottom-card-04.png" alt="imagem do segundo card topo" />
|
||||||
|
<p 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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="bottom-infocard">
|
||||||
|
|
||||||
|
<img class="bottom-infocard-image" src="assents/imagens/bottom-img01.png"
|
||||||
|
alt="imagem de oculos sobre o computador">
|
||||||
|
<img src="" alt="">
|
||||||
|
|
||||||
|
<div class="bottom-inforcard-text" >
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer-infocard">
|
||||||
|
<div class="footer-infocards">
|
||||||
|
<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.58993 6.05847 5.81577 8.94822 5.81577 12.5003C5.81577 16.0522 8.58993 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.76421 16.7236 7.94515 14.829 7.94515 12.5002C7.94515 10.1711 9.76407 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>
|
||||||
|
<svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M12.9993 0.0049936L9.88701 0C6.39049 0 4.13088 2.31828 4.13088 5.90643V8.62969H1.00164C0.731238 8.62969 0.512268 8.84891 0.512268 9.11932V13.065C0.512268 13.3354 0.731487 13.5544 1.00164 13.5544H4.13088V23.5106C4.13088 23.781 4.34985 24 4.62026 24H8.70303C8.97343 24 9.1924 23.7808 9.1924 23.5106V13.5544H12.8512C13.1216 13.5544 13.3406 13.3354 13.3406 13.065L13.3421 9.11932C13.3421 8.98948 13.2904 8.86514 13.1988 8.77326C13.1071 8.68138 12.9823 8.62969 12.8525 8.62969H9.1924V6.32115C9.1924 5.21157 9.45681 4.64829 10.9022 4.64829L12.9988 4.64755C13.2689 4.64755 13.4879 4.42833 13.4879 4.15817V0.494367C13.4879 0.224462 13.2692 0.00549296 12.9993 0.0049936Z"
|
||||||
|
fill="white" />
|
||||||
|
</svg>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<p class="footer-description">
|
||||||
|
|
||||||
|
Copyright © 2020 - Loja Comércio Eletrônico | CNPJ: 000.000.000/0001-00
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
302
main.styles/style.css
Normal file
302
main.styles/style.css
Normal file
@ -0,0 +1,302 @@
|
|||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
/*///////////// HEADER /////////////////// */
|
||||||
|
.page-header {
|
||||||
|
background: #000000;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 28px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-logo {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*///////////// SECTION 01 e 02 com banner /////////////////// */
|
||||||
|
|
||||||
|
.main-banner,
|
||||||
|
.middle-banner {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-banner-mobile,
|
||||||
|
.middle-banner-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/*///////////// SECTION 02 INFO CARD TOP ///////////////////*/
|
||||||
|
.top-infocard {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 80px 30px 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-infocard-text {
|
||||||
|
max-width: 766px;
|
||||||
|
margin-right: 124px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-infocard-subtitle {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32px;
|
||||||
|
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-infocard-title {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 48px;
|
||||||
|
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-infocard-description {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*///////////////////AREA DO TOP CARDS PEQUENOS///////////////*/
|
||||||
|
|
||||||
|
.top-cards {
|
||||||
|
background: #f0f0f0;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, max-content);
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
padding: 74px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 26px 26px 34px;
|
||||||
|
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-card-image {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-card-description {
|
||||||
|
max-width: 300px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*/////////// Bottom Area com imagens e background//////////////*/
|
||||||
|
|
||||||
|
.bottom-cards {
|
||||||
|
margin-top: 140px;
|
||||||
|
background: linear-gradient(180deg, #00c8ff 0%, #15acd6 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-card-wrapper {
|
||||||
|
position: relative;
|
||||||
|
top: -60px;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, max-content);
|
||||||
|
|
||||||
|
justify-content: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 36px 32px 66px;
|
||||||
|
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-card-image {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-card-description {
|
||||||
|
max-width: 368px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*///////////////// BOTTOM AREA COM IMAGEM + TEXTO /////////////////*/
|
||||||
|
|
||||||
|
.bottom-infocard {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*////////////////section bottom 03///////////////////*/
|
||||||
|
.bottom-infocard {
|
||||||
|
padding: 142px 12px 179px 12px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 40px;
|
||||||
|
background: #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-infocard-image {
|
||||||
|
display: block;
|
||||||
|
max-width: 596px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-inforcard-text {
|
||||||
|
margin-top: 51px;
|
||||||
|
padding: 0 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-infocard-title {
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 36px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-infocard-description {
|
||||||
|
max-width: 550px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*///////////////// FOOTER /////////////////*/
|
||||||
|
|
||||||
|
.footer-infocard {
|
||||||
|
padding: 38px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
background: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-infocards {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 28px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-description {
|
||||||
|
color: #bdbdbd;
|
||||||
|
font-size: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*///////////////// ABAIXO DE 992PX /////////////////*/
|
||||||
|
@media screen and (max-width: 992px) {
|
||||||
|
.top-infocard {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 84px 26px 158px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-infocard-text {
|
||||||
|
margin: 0 0 68px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-infocard-subtitle {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-infocard-title {
|
||||||
|
font-size: 28px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-infocard-description {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-infocard-image {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 240px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*///////////////// ABAIXO DE 768PX /////////////////*/
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.main-banner,
|
||||||
|
.middle-banner {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-banner-mobile,
|
||||||
|
.middle-banner-mobile {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-cards {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
padding: 36px 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-cards {
|
||||||
|
padding: 0 16px;
|
||||||
|
margin-top: 114px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-card-wrapper {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-card-description {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-infocard {
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 80px 0 135px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-infocard-title {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-infocard {
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-description {
|
||||||
|
max-width: 261px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*//////////////////MEDIA DE UM TAMANHO ATE O OUTR////////////////*/
|
||||||
|
|
||||||
|
@media screen and (min-width: 769px) and (max-width: 992px) {
|
||||||
|
.bottom-card-description {
|
||||||
|
max-width: 280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 769px) and (max-width: 1200px) {
|
||||||
|
.top-cards {
|
||||||
|
grid-template-columns: repeat(2, max-content);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-card-wrapper {
|
||||||
|
grid-template-columns: repeat(2, max-content);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user