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

feat: adicionando imagem article mobile

Browse Source
This commit is contained in:
Mateus Antonio Rodrigues Lopes 2022-10-11 22:26:11 -03:00
parent 3d94831ad1
commit 56b332fcfb
3 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/article-image-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

2
index.html
View File

@ -128,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>

7
styles/style.css
View File

@ -71,8 +71,7 @@ main section.container-description .description-text h2.description-title span.d
} }
main section.container-description .description-text p.description{ main section.container-description .description-text p.description{
width: 100%; width: 40%;
max-width: 766px;
line-height: 24px; line-height: 24px;
font-weight: 400; font-weight: 400;
padding: 28px 0 73px; padding: 28px 0 73px;
@ -171,6 +170,10 @@ main article.container-article figure.article-image{
justify-content: center; justify-content: center;
} }
main article.container-article figure.article-image img.image-mobile{
display: none;
}
main article.container-article figure.article-image img{ main article.container-article figure.article-image img{
width: 100%; width: 100%;
} }