forked from M3-Academy/challenge-landing-page
feat(style): added blocks and responsiveness
This commit is contained in:
parent
93c48faa84
commit
fe0728fee9
@ -23,36 +23,45 @@
|
||||
</section>
|
||||
|
||||
<article>
|
||||
<h1 id="title1">Lorem ipsum</h1>
|
||||
<h2 id="title2">dolor sit amet</h2>
|
||||
<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 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>
|
||||
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>
|
||||
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>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
@ -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;
|
||||
@ -39,4 +119,40 @@ header {
|
||||
.main-banner-mobile {
|
||||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user