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

feat: adiciona top infocard image desktop e mobile

Browse Source
This commit is contained in:
Naian Felix dos Santos 2022-10-10 18:57:03 -03:00
parent 9c9db58df9
commit 9f23f8657a
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/styles/main.css
View File

@ -76,6 +76,7 @@ body {
padding: 24px 0 33px; padding: 24px 0 33px;
} }
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -92,6 +93,17 @@ body {
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
} }
.top-infocard-image img {
max-width: 240px;
width: 100%;
}
}
@media screen and (max-width: 290px) {
.top-infocard-title {
font-size: 26px;
}
} }

11
index.html
View File

@ -21,24 +21,25 @@
</header> </header>
<main> <main>
<div> <div>
<img class="main-banner" src="assets/image/main-banner-desktop.png" alt="Banner Principal"> <img class="main-banner" src="assets/image/main-banner-desktop.png" alt="Banner Principal">
</div> </div>
<section class="top-infocard"> <section class="top-infocard">
<div class="top-infocard-text"> <div class="top-infocard-text">
<h2 class="top-infocard-subtitle">Lorem ipsum</h2> <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
<h1 class="top-infocard-title">dolor sit amet</h1> <h1 class="top-infocard-title">dolor sit amet</h1>
<p class="top-infocard-description"> <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. 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> </p>
</div> </div>
<div class="top-infocard-image" >
<img src="assets/image/top-inforcard-image.png" alt="Banner do Infocard do Topo">
</div>
</section> </section>
</main> </main>
</body> </body>
</html> </html>