fix: remoção de espaços desnecessários

This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-10-10 12:19:07 -03:00
parent d926480557
commit caab75c00f
4 changed files with 98 additions and 106 deletions

View File

@ -81,7 +81,6 @@
</figure>
</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>

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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%;
}
}