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

feat(style): added blocks and responsiveness

Browse Source
This commit is contained in:
Matheus Brollo Dauter 2022-10-12 13:55:36 -03:00
parent 93c48faa84
commit fe0728fee9
2 changed files with 153 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/index.html
View File

@ -23,36 +23,45 @@
</section>
<article>
<h1 id="title1">Lorem ipsum</h1>
<h2 id="title2">dolor sit amet</h2>
<div class="cicle-text">
<h2 id="title1">Lorem ipsum</h2>
<h1 id="title2">dolor sit amet</h1>
<p>
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>
<picture>
<img src="assets/fxemoji_threenetworkedcomputers.png" alt="ciclo de 3 computadores.">
</picture>
<section>
<img class="cicle-img" src="assets/fxemoji_threenetworkedcomputers.png" alt="ciclo de 3 computadores.">
</section>
<section class="block">
<img src="assets/shop 1.png" alt="Icone de uma loja.">
<p>
<section class="blocks">
<div class="block">
<img class="block-img" src="assets/shop 1.png" alt="Icone de uma loja.">
<p class="block-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</section>
<section class="block">
<img src="assets/shopping-bag (1) 1.png" alt="Icone de uma sacola de compras.">
<p>
</div>
<div class="block">
<img class="block-img" src="assets/shopping-bag (1) 1.png" alt="Icone de uma sacola de compras.">
<p class="block-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</section>
<section class="block">
<img src="assets/coin 1.png" alt="Icone de dinheiro.">
<p>
</div>
<div class="block">
<img class="block-img" src="assets/coin 1.png" alt="Icone de dinheiro.">
<p class="block-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
</section>
</article>
<!--
<div class="img-square">
<img src="assets/img/Rectangle 13.png" alt="Imagem de um laptop">
</div>
@ -99,6 +108,9 @@
<img src="assets/img/Rectangle 15.png" alt="">
</picture>
</article>
-->
</main>
<footer>

116
src/styles/style.css
View File

@ -2,9 +2,17 @@
/* Começar Css por Header e img1 */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500&display=swap');
* {
margin: 0px;
padding: 0px;
font-weight: 400;
}
body {
font-family: 'Bebas Neue', cursive;
font-family: 'Inter', sans-serif;
}
header {
@ -29,6 +37,78 @@ header {
width: 100%;
}
article {
text-align: center;
}
.cicle-text {
max-width: 766px;
margin: auto;
padding: 20px;
}
.cicle-text h1 {
font-size: 48px;
text-transform: uppercase;
font-weight: 500;
padding-bottom: 28px;
}
.cicle-text h2 {
font-size: 32px;
text-transform: uppercase;
padding-top: 73px;
font-weight: 400;
}
.cicle-text p {
text-align: center;
line-height: 24px;
}
.cicle-img {
width: 350px;
height: 350px;
margin: auto;
padding-top: 73px;
padding-bottom: 179px;
}
.blocks {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 20px;
justify-content: center;
background-color: white;
}
.block {
display: flex;
flex-direction: column;
align-items: center;
padding: 26px 26px 34px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.block-img {
display: block;
margin-bottom: 26px;
}
.block-text {
max-width: 300px;
font-size: 16px;
line-height: 24px;
}
@media screen and (max-width: 414px) {
.main-banner-desktop {
display: none;
@ -40,3 +120,39 @@ header {
display: none;
}
}
@media screen and (max-width: 768px) {
.cicle-text h2 {
font-size: 20px;
}
.cicle-text h1 {
font-size: 28px;
padding-bottom: 10px;
}
.cicle-text p {
width: 357px;
margin: auto;
}
.cicle-img {
width: 239px;
height: 239px;
padding-top: 65px;
padding-bottom: 90px;
margin: auto;
}
.blocks {
grid-template-columns: 1fr;
padding: 36px 26px;
}
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
.blocks {
grid-template-columns: repeat(2, max-content);
padding: 36px 26px;
}
}