Adiciona mais infocards em sequência

This commit is contained in:
Joseildo Lima da Silva 2022-10-09 08:50:37 -03:00
parent eeacfdde72
commit 2853ca8119
5 changed files with 128 additions and 47 deletions

BIN
assets/img/Group.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
assets/img/laptop 1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/img/money (1) 2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -43,53 +43,92 @@
<img class="info_image" src="./assets/img/fxemoji_threenetworkedcomputers.svg" alt="">
</picture>
</section>
<article class="container">
<div class="card">
<picture>
<img class="img_card" src="./assets/img/img_container_1.png" alt="card_decoration 1">
<p class="card_paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</picture>
</div>
<div class="card">
<picture>
<img src="./assets/img/img_container_2.png" alt="card decoration 2">
<p class="card_paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</picture>
</div>
<div class="card">
<picture>
<img src="./assets/img/img_container_3.png" alt="card decoration 3">
<p class="card_paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</picture>
</div>
</article>
<article class="second_container">
<picture>
<img class="preview_img" src="./assets/img/preview_1.png" alt="preview 1">
</picture>
<picture>
<img class="preview_img" src="./assets/img/preview_2.png" alt="preview 2">
</picture>
<picture>
<img class="preview_img preview_solo" src="./assets/img/preview_3.png" alt="preview 3">
</picture>
</article>
</main>
<article class="container">
<div class="card">
<picture>
<img class="img_card" src="./assets/img/img_container_1.png" alt="card_decoration 1">
<p class="card_paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</picture>
</div>
<div class="card">
<picture>
<img src="./assets/img/img_container_2.png" alt="card decoration 2">
<p class="card_paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</picture>
</div>
<div class="card">
<picture>
<img src="./assets/img/img_container_3.png" alt="card decoration 3">
<p class="card_paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</picture>
</div>
</article>
<article class="second_container">
<picture>
<img class="preview_img" src="./assets/img/preview_1.png" alt="preview 1">
</picture>
<picture>
<img class="preview_img" src="./assets/img/preview_2.png" alt="preview 2">
</picture>
<picture>
<img class="preview_img preview_solo" src="./assets/img/preview_3.png" alt="preview 3">
</picture>
</article>
<article class="container">
<div class="card">
<picture>
<img class="img_card" src="./assets/img/money (1) 2.png" alt="card_decoration 1">
<p class="card_paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</picture>
</div>
<div class="card">
<picture>
<img class="img_card" src="./assets/img/img_container_3.png" alt="card_decoration 1">
<p class="card_paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</picture>
</div>
<div class="card">
<picture>
<img src="./assets/img/laptop 1.png" alt="card decoration 2">
<p class="card_paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</picture>
</div>
<div class="card">
<picture>
<img src="./assets/img/Group.png" alt="card decoration 3">
<p class="card_paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
</p>
</picture>
</div>
</article>
</body>

View File

@ -86,11 +86,12 @@ body {
.second_container {
padding: 3rem;
max-height: 420px;
height: 420px;
background-color: #E0E0E0;
display: flex;
gap: 24px;
width: 100%;
justify-content: center;
}
.preview_img {
@ -98,6 +99,7 @@ body {
}
/*----------------------------------------------------------------------------*/
@media screen and (max-width: 413px) {
.primary_banner {
@ -118,6 +120,7 @@ body {
}
/*----------------------------------------------------------------------------*/
@media screen and (min-width:414px) {
.banner_mobile {
display: none;
@ -132,6 +135,7 @@ body {
}
/*----------------------------------------------------------------------------*/
@media screen and (max-width:1120px) {
.container {
display: flex;
@ -145,4 +149,42 @@ body {
width: 350px;
margin: 0 32px 24px;
}
}
/*----------------------------------------------------------------------------*/
@media screen and (min-width:2199px) {
.second_container {
display: flex;
justify-content: center;
height: 680px;
}
.preview_img {
width: 100%;
width: 720px;
}
.info_subtitle {
margin-top: 76px;
font-weight: 400;
font-size: 56px;
line-height: 39px;
text-transform: uppercase;
}
.info_title {
font-weight: 500;
font-size: 64px;
line-height: 58px;
text-transform: uppercase;
margin-top: 40px;
}
.info_description {
font-weight: 400;
font-size: 44px;
line-height: 56px;
margin-top: 76px;
margin-bottom: 76px;
}
}