forked from M3-Academy/challenge-landing-page
fix: remoção de espaços desnecessários
This commit is contained in:
parent
d926480557
commit
caab75c00f
12
index.html
12
index.html
@ -80,8 +80,7 @@
|
||||
<img src="./assets/imgs/card-3.png" alt="imagem vista de perto e de lado de um macbook">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-cards">
|
||||
<div class="bottom-cards-container">
|
||||
@ -135,12 +134,11 @@
|
||||
</main>
|
||||
<footer>
|
||||
<div class="social-media">
|
||||
<a href="#"><img src="./assets/svg/instagram.svg" alt="ícone instagram"></a>
|
||||
<a href="#"><img src="./assets/svg/facebook.svg" alt="ícone facebook"></a>
|
||||
<a href="#"><img src="./assets/svg/youtube.svg" alt="ícone youtube"></a>
|
||||
<a href="/"><img src="./assets/svg/instagram.svg" alt="ícone instagram"></a>
|
||||
<a href="/"><img src="./assets/svg/facebook.svg" alt="ícone facebook"></a>
|
||||
<a href="/"><img src="./assets/svg/youtube.svg" alt="ícone youtube"></a>
|
||||
</div>
|
||||
<span>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
|
||||
</span>
|
||||
<span>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</span>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,4 +1,4 @@
|
||||
footer {
|
||||
footer{
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
bottom: 0;
|
||||
@ -10,7 +10,7 @@ footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
footer .social-media {
|
||||
footer .social-media{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -18,7 +18,7 @@ footer .social-media {
|
||||
width: 104px;
|
||||
}
|
||||
|
||||
footer span {
|
||||
footer span{
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
@ -26,28 +26,28 @@ footer span {
|
||||
color: #BDBDBD;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1025px) {
|
||||
footer span {
|
||||
@media screen and (max-width: 1025px){
|
||||
footer span{
|
||||
width: 261px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
footer {
|
||||
@media screen and (min-width: 2500px){
|
||||
footer{
|
||||
height: 256px;
|
||||
}
|
||||
|
||||
footer .social-media {
|
||||
footer .social-media{
|
||||
margin-bottom: 32px;
|
||||
width: 208px;
|
||||
}
|
||||
|
||||
footer .social-media a img {
|
||||
footer .social-media a img{
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
footer span {
|
||||
footer span{
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
header {
|
||||
header{
|
||||
width: 100%;
|
||||
height: 101px;
|
||||
left: 0;
|
||||
@ -7,21 +7,18 @@ header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
header a img {
|
||||
header a img{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
header {
|
||||
@media screen and (min-width: 2500px){
|
||||
header{
|
||||
height: 202px;
|
||||
}
|
||||
|
||||
header a img {
|
||||
header a img{
|
||||
width: 452px;
|
||||
}
|
||||
}
|
||||
159
styles/main.css
159
styles/main.css
@ -1,15 +1,14 @@
|
||||
/* primeiro background */
|
||||
.background-main figure img {
|
||||
.background-main figure img{
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
top: 0;
|
||||
max-height: 700px;
|
||||
object-fit: cover;
|
||||
|
||||
}
|
||||
|
||||
/* primeira seção com imagem e texto */
|
||||
.first-section {
|
||||
.first-section{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -18,7 +17,7 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.first-section h2 {
|
||||
.first-section h2{
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
@ -26,7 +25,7 @@
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.first-section h1 {
|
||||
.first-section h1{
|
||||
font-weight: 500;
|
||||
font-size: 48px;
|
||||
line-height: 58px;
|
||||
@ -35,13 +34,13 @@
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.first-section figure {
|
||||
.first-section figure{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.first-section figcaption {
|
||||
.first-section figcaption{
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
@ -52,13 +51,13 @@
|
||||
}
|
||||
|
||||
/* primeiros cards */
|
||||
.first-content-card {
|
||||
.first-content-card{
|
||||
margin-top: 179px;
|
||||
margin-bottom: 62px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-card-container {
|
||||
.content-card-container{
|
||||
max-width: 1092px;
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
@ -71,7 +70,7 @@
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.first-card figure, .second-card figure, .three-card figure {
|
||||
.first-card figure,.second-card figure,.three-card figure{
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 287.68px;
|
||||
@ -85,7 +84,7 @@
|
||||
padding: 27px;
|
||||
}
|
||||
|
||||
.first-card figcaption, .second-card figcaption, .three-card figcaption {
|
||||
.first-card figcaption,.second-card figcaption,.three-card figcaption{
|
||||
max-width: 299px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@ -98,13 +97,13 @@
|
||||
}
|
||||
|
||||
/* cards com imagem de macbook */
|
||||
.cards-macbook {
|
||||
.cards-macbook{
|
||||
width: 100%;
|
||||
height: 530px;
|
||||
background: #E0E0E0;
|
||||
}
|
||||
|
||||
.cards-macbook-container {
|
||||
.cards-macbook-container{
|
||||
max-width: 1776px;
|
||||
width: 100%;
|
||||
height: 530px;
|
||||
@ -119,19 +118,19 @@
|
||||
top: 62px;
|
||||
}
|
||||
|
||||
.first-card-macbook figure img, .second-card-macbook figure img, .third-card-macbook figure img {
|
||||
.first-card-macbook figure img,.second-card-macbook figure img,.third-card-macbook figure img{
|
||||
max-width: 566px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* área final com 4 cards */
|
||||
.bottom-cards {
|
||||
.bottom-cards{
|
||||
margin-top: 191px;
|
||||
margin-bottom: 108px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom-cards-container {
|
||||
.bottom-cards-container{
|
||||
max-width: 1776px;
|
||||
width: 100%;
|
||||
height: 332px;
|
||||
@ -144,7 +143,7 @@
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.first-bottom-card figure, .second-bottom-card figure, .three-bottom-card figure, .four-bottom-card figure {
|
||||
.first-bottom-card figure,.second-bottom-card figure,.three-bottom-card figure,.four-bottom-card figure{
|
||||
width: 100%;
|
||||
max-width: 432px;
|
||||
height: 332px;
|
||||
@ -158,7 +157,7 @@
|
||||
padding: 27px;
|
||||
}
|
||||
|
||||
.first-bottom-card figcaption, .second-bottom-card figcaption, .three-bottom-card figcaption, .four-bottom-card figcaption {
|
||||
.first-bottom-card figcaption,.second-bottom-card figcaption,.three-bottom-card figcaption,.four-bottom-card figcaption{
|
||||
max-width: 367px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@ -171,12 +170,12 @@
|
||||
}
|
||||
|
||||
/* seção final com título, texto e imagem */
|
||||
.banner-final {
|
||||
.banner-final{
|
||||
width: 100%;
|
||||
padding: 36px 7% 116px 7%;
|
||||
}
|
||||
|
||||
.banner-final figure {
|
||||
.banner-final figure{
|
||||
max-width: 1360px;
|
||||
height: 484px;
|
||||
display: flex;
|
||||
@ -187,14 +186,14 @@
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.banner-final figure img {
|
||||
.banner-final figure img{
|
||||
width: 100%;
|
||||
height: 276px;
|
||||
object-fit: cover;
|
||||
object-position: 25% 55%;
|
||||
}
|
||||
|
||||
.banner-final figure .banner-final-text h3 {
|
||||
.banner-final figure .banner-final-text h3{
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
@ -202,7 +201,7 @@
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.banner-final .banner-final-text figcaption {
|
||||
.banner-final .banner-final-text figcaption{
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
@ -214,38 +213,37 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1025px) {
|
||||
.background-main figure img {
|
||||
@media screen and (max-width: 1025px){
|
||||
.background-main figure img{
|
||||
height: 100%;
|
||||
min-height: 598px;
|
||||
}
|
||||
|
||||
.first-section {
|
||||
.first-section{
|
||||
padding: 0 28px;
|
||||
}
|
||||
|
||||
.first-section h2 {
|
||||
.first-section h2{
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.first-section h1 {
|
||||
.first-section h1{
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.first-section figure img {
|
||||
.first-section figure img{
|
||||
width: 100%;
|
||||
max-width: 239px;
|
||||
}
|
||||
|
||||
.first-section figcaption {
|
||||
.first-section figcaption{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.first-content-card {
|
||||
.first-content-card{
|
||||
margin-top: 91px;
|
||||
width: 100%;
|
||||
max-width: 1092px;
|
||||
@ -255,7 +253,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-card-container {
|
||||
.content-card-container{
|
||||
width: 100%;
|
||||
height: 894px;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
@ -264,7 +262,7 @@
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.cards-macbook {
|
||||
.cards-macbook{
|
||||
grid-gap: 10px;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
@ -274,7 +272,7 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cards-macbook-container {
|
||||
.cards-macbook-container{
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-template-areas:
|
||||
@ -289,13 +287,13 @@
|
||||
padding: 0 23px;
|
||||
}
|
||||
|
||||
.first-card-macbook {
|
||||
.first-card-macbook{
|
||||
grid-area: A;
|
||||
max-width: 177px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.first-card-macbook figure img {
|
||||
.first-card-macbook figure img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -305,21 +303,21 @@
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.second-card-macbook figure img {
|
||||
.second-card-macbook figure img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.third-card-macbook {
|
||||
.third-card-macbook{
|
||||
grid-area: C;
|
||||
max-width: 368px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.third-card-macbook figure img {
|
||||
.third-card-macbook figure img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bottom-cards {
|
||||
.bottom-cards{
|
||||
margin-top: 80px;
|
||||
width: 100%;
|
||||
max-height: 1376px;
|
||||
@ -328,7 +326,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bottom-cards-container {
|
||||
.bottom-cards-container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
@ -340,7 +338,7 @@
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.first-bottom-card figure img, .second-bottom-card figure img, .three-bottom-card figure img, .four-bottom-card figure img {
|
||||
.first-bottom-card figure img,.second-bottom-card figure img,.three-bottom-card figure img,.four-bottom-card figure img{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@ -349,7 +347,7 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.banner-final figure {
|
||||
.banner-final figure{
|
||||
max-width: 414px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@ -361,27 +359,27 @@
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.banner-final figure img {
|
||||
.banner-final figure img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.banner-final-text {
|
||||
.banner-final-text{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.banner-final figure .banner-final-text h3 {
|
||||
.banner-final figure .banner-final-text h3{
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.banner-final .banner-final-text figcaption {
|
||||
.banner-final .banner-final-text figcaption{
|
||||
margin-bottom: 87px;
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
@ -389,53 +387,53 @@
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 281px) {
|
||||
@media screen and (max-width: 281px){
|
||||
.cards-macbook {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.cards-macbook-container {
|
||||
.cards-macbook-container{
|
||||
height: auto;
|
||||
top: 32px;
|
||||
}
|
||||
|
||||
.first-bottom-card figure, .second-bottom-card figure, .three-bottom-card figure, .four-bottom-card figure {
|
||||
.first-bottom-card figure,.second-bottom-card figure,.three-bottom-card figure, .four-bottom-card figure{
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.bottom-cards {
|
||||
.bottom-cards{
|
||||
max-height: 1640px;
|
||||
}
|
||||
|
||||
.banner-final .banner-final-text figcaption {
|
||||
.banner-final .banner-final-text figcaption{
|
||||
margin-bottom: 87px;
|
||||
padding: 0 32px 0 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
@media screen and (min-width: 2500px){
|
||||
.background-main figure img {
|
||||
height: 70%;
|
||||
max-height: 700px;
|
||||
}
|
||||
|
||||
.first-section h2 {
|
||||
.first-section h2{
|
||||
font-size: 64px;
|
||||
line-height: 78px;
|
||||
}
|
||||
|
||||
.first-section h1 {
|
||||
.first-section h1{
|
||||
font-size: 96px;
|
||||
line-height: 116px;
|
||||
}
|
||||
|
||||
.first-section figcaption {
|
||||
.first-section figcaption{
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
max-width: 55%;
|
||||
}
|
||||
|
||||
.first-section figure img {
|
||||
.first-section figure img{
|
||||
width: 16%;
|
||||
}
|
||||
|
||||
@ -444,7 +442,7 @@
|
||||
margin-bottom: 124px;
|
||||
}
|
||||
|
||||
.content-card-container {
|
||||
.content-card-container{
|
||||
width: 100%;
|
||||
max-width: 60%;
|
||||
height: 574px;
|
||||
@ -453,29 +451,29 @@
|
||||
gap: 42px;
|
||||
}
|
||||
|
||||
.first-card figure, .second-card figure, .three-card figure {
|
||||
.first-card figure,.second-card figure,.three-card figure{
|
||||
width: 650px;
|
||||
height: 574px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.first-card figure img, .second-card figure img, .three-card figure img {
|
||||
.first-card figure img,.second-card figure img,.three-card figure img{
|
||||
width: 100%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.first-card figcaption, .second-card figcaption, .three-card figcaption {
|
||||
.first-card figcaption,.second-card figcaption,.three-card figcaption{
|
||||
max-width: 90%;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.cards-macbook {
|
||||
.cards-macbook{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cards-macbook-container {
|
||||
.cards-macbook-container{
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -483,14 +481,14 @@
|
||||
padding: 0 72px;
|
||||
}
|
||||
|
||||
.first-card-macbook figure img, .second-card-macbook figure img, .third-card-macbook figure img {
|
||||
.first-card-macbook figure img,.second-card-macbook figure img,.third-card-macbook figure img{
|
||||
max-width: 754px;
|
||||
height: 706px;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.bottom-cards {
|
||||
.bottom-cards{
|
||||
margin-top: 382px;
|
||||
margin-bottom: 216px;
|
||||
max-width: none;
|
||||
@ -499,7 +497,7 @@
|
||||
padding: 0 72px;
|
||||
}
|
||||
|
||||
.bottom-cards-container {
|
||||
.bottom-cards-container{
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
height: 664px;
|
||||
@ -510,52 +508,52 @@
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.first-bottom-card , .second-bottom-card , .three-bottom-card , .four-bottom-card {
|
||||
.first-bottom-card ,.second-bottom-card ,.three-bottom-card ,.four-bottom-card{
|
||||
width: 100%;
|
||||
max-width: 840px;
|
||||
height: 664px;
|
||||
|
||||
}
|
||||
|
||||
.first-bottom-card figure, .second-bottom-card figure, .three-bottom-card figure, .four-bottom-card figure {
|
||||
.first-bottom-card figure,.second-bottom-card figure,.three-bottom-card figure,.four-bottom-card figure{
|
||||
width: 100%;
|
||||
max-width: 840px;
|
||||
height: 664px;
|
||||
padding: 27px;
|
||||
}
|
||||
|
||||
.first-bottom-card figure img, .second-bottom-card figure img, .three-bottom-card figure img, .four-bottom-card figure img{
|
||||
.first-bottom-card figure img,.second-bottom-card figure img,.three-bottom-card figure img,.four-bottom-card figure img{
|
||||
width: 100%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.first-bottom-card figcaption, .second-bottom-card figcaption, .three-bottom-card figcaption, .four-bottom-card figcaption {
|
||||
.first-bottom-card figcaption,.second-bottom-card figcaption,.three-bottom-card figcaption,.four-bottom-card figcaption{
|
||||
max-width: 734px;
|
||||
width: 100%;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.banner-final {
|
||||
.banner-final{
|
||||
padding: 144px 14% 464px 14%;
|
||||
}
|
||||
|
||||
.banner-final figure {
|
||||
.banner-final figure{
|
||||
max-width: 2720px;
|
||||
height: 484px;
|
||||
}
|
||||
|
||||
.banner-final figure img {
|
||||
.banner-final figure img{
|
||||
width: 100%;
|
||||
height: 484px;
|
||||
}
|
||||
|
||||
.banner-final figure .banner-final-text h3 {
|
||||
.banner-final figure .banner-final-text h3{
|
||||
font-size: 64px;
|
||||
line-height: 78px;
|
||||
}
|
||||
|
||||
.banner-final .banner-final-text figcaption {
|
||||
.banner-final .banner-final-text figcaption{
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
margin-bottom: 100px;
|
||||
@ -563,17 +561,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 3500px) {
|
||||
.background-main figure img {
|
||||
@media screen and (min-width: 3500px){
|
||||
.background-main figure img{
|
||||
height: 100%;
|
||||
max-height: 1400px;
|
||||
}
|
||||
|
||||
.first-card-macbook figure img, .second-card-macbook figure img, .third-card-macbook figure img {
|
||||
.first-card-macbook figure img, .second-card-macbook figure img, .third-card-macbook figure img{
|
||||
max-width: 1132px;
|
||||
height: 1060px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user