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

feat(home): adicionando destaque na home desktop e mobile

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2022-10-11 14:11:05 -03:00
parent 7271058f88
commit 8cc5374bae
4 changed files with 102 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/computes.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

86
assets/styles/css/main.css
View File

@ -12,11 +12,62 @@
display: block;
}
.banner {
margin-bottom: 74px;
}
.banner__img {
width: 100%;
display: block;
}
.home-destaque {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.home-destaque__text {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: 766px;
}
.home-destaque__text__subtitle {
font-weight: 400;
font-size: 32px;
line-height: 39px;
text-transform: uppercase;
}
.home-destaque__text__title {
font-weight: 500;
font-size: 48px;
line-height: 58px;
margin-bottom: 28px;
text-transform: uppercase;
}
.home-destaque__text__description {
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
margin-bottom: 74px;
}
.home-destaque__img {
width: 16%;
margin-bottom: 180px;
}
@media screen and (min-width: 415px) {
.banner__img__mobile {
display: none;
@ -28,7 +79,42 @@
.header__logo {
width: 54%;
}
.banner__img__desktop {
display: none;
}
.home-destaque__text {
padding: 0 28px;
}
.home-destaque__text__subtitle {
font-size: 20px;
line-height: 24px;
}
.home-destaque__text__title{
font-size: 28px;
line-height: 34px;
}
.home-destaque__text__description {
text-align: center;
}
.home-destaque__img {
width: 58%;
}
}
@media screen and (max-width: 300px) {
.home-destaque__text__title{
font-size: 26px;
}
}
@media screen and (min-width:414px) and (max-width:768px ) {
.home-destaque__img {
width: 58%;
}
}

3
assets/styles/css/reset.css
View File

@ -15,7 +15,6 @@ time, mark, audio, video {
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
@ -25,6 +24,8 @@ footer, header, hgroup, menu, nav, section {
}
body {
line-height: 1;
font-family: 'Inter', sans-serif;
color: #000;
}
ol, ul {
list-style: none;

14
index.html
View File

@ -7,6 +7,10 @@
<link rel="stylesheet" href="./assets/styles/css/main.css">
<link rel="stylesheet" href="./assets/styles/css/reset.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https: //fonts.googleapis.com/css2? família= Inter:wght@400;500;600 & display=swap" rel="stylesheet">
<title>Desafio M3 Academy</title>
</head>
<body>
@ -21,6 +25,16 @@
<img class="banner__img banner__img__mobile" src="/assets/images/banner-principal-mobile.png" alt="Banner Principal do Site" />
</section>
<section class="home-destaque">
<div class="home-destaque__text">
<h2 class="home-destaque__text__subtitle">Lorem ipsum</h2>
<h1 class="home-destaque__text__title">dolor sit amet</h1>
<p class="home-destaque__text__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="home-destaque__img" src="./assets/images/computes.png" alt="Monitores" />
</section>
</main>
</body>