Joseildo/challenge-landing-page-joseildo
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

joseildols #1

Merged
Joseildo merged 12 commits from joseildols into main 2022-10-14 00:39:05 +00:00
Conversation 0 Commits 12 Files Changed 20 +128 -47
5 changed files with 128 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2853ca8119 - Show all commits

BIN
assets/img/Group.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
assets/img/laptop 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

43
index.html
View File

@ -43,7 +43,7 @@
<img class="info_image" src="./assets/img/fxemoji_threenetworkedcomputers.svg" alt=""> <img class="info_image" src="./assets/img/fxemoji_threenetworkedcomputers.svg" alt="">
</picture> </picture>
</section> </section>
</main>
<article class="container"> <article class="container">
<div class="card"> <div class="card">
<picture> <picture>
@ -89,7 +89,46 @@
</article> </article>
</main>
<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> </body>

44
style.css
View File

@ -86,11 +86,12 @@ body {
.second_container { .second_container {
padding: 3rem; padding: 3rem;
max-height: 420px; height: 420px;
background-color: #E0E0E0; background-color: #E0E0E0;
display: flex; display: flex;
gap: 24px; gap: 24px;
width: 100%; width: 100%;
justify-content: center;
} }
.preview_img { .preview_img {
@ -98,6 +99,7 @@ body {
} }
/*----------------------------------------------------------------------------*/
@media screen and (max-width: 413px) { @media screen and (max-width: 413px) {
.primary_banner { .primary_banner {
@ -118,6 +120,7 @@ body {
} }
/*----------------------------------------------------------------------------*/
@media screen and (min-width:414px) { @media screen and (min-width:414px) {
.banner_mobile { .banner_mobile {
display: none; display: none;
@ -132,6 +135,7 @@ body {
} }
/*----------------------------------------------------------------------------*/
@media screen and (max-width:1120px) { @media screen and (max-width:1120px) {
.container { .container {
display: flex; display: flex;
@ -146,3 +150,41 @@ body {
margin: 0 32px 24px; 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;
}
}