Skip to content

Commit

Permalink
fix: ajustes na resposividade e troca de unidade px para rem
Browse files Browse the repository at this point in the history
  • Loading branch information
@RenanS80
RenanS80 committed Dec 26, 2023
1 parent e09d3be commit fd2d935
Showing 1 changed file with 75 additions and 89 deletions.
164 changes: 75 additions & 89 deletions assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@

--font-archivo: 'Archivo', sans-serif;
--font-space-grotesk: 'Space Grotesk', sans-serif;

font-size: 62.5%;
}

* {
Expand All @@ -16,43 +18,49 @@
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: var(--font-archivo);
background: var(--white);
color: var(--black);
font-size: 1.6rem;
}

h2 {
font-size: 32px;
font-size: 3.2rem;
font-weight: 600;
line-height: 62.78px;
line-height: 6.278rem;
}

h3 {
font-size: 24px;
font-size: 2.4rem;
font-weight: 600;
}

h4 {
font-size: 18px;
font-size: 1.8rem;
font-weight: 500;
line-height: 130%;
}

.container {
width: 1240px;
max-width: 124rem;
margin: 0 auto;
padding: 0 1.5rem;
}


/* -- HEADER -- */
header {
width: 100%;
padding: 20px 0;
padding: 2rem 0;
}

.header-brand {
background: var(--white);
background-color: var(--white);
}

.header-brand h3 {
Expand All @@ -63,37 +71,36 @@ header {
/* -- HERO -- */
.hero {
width: 100%;
height: 550px;
height: 55rem;
display: flex;
background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/background.jpg');
background-repeat: no-repeat;
background-size: cover;
/*background-attachment: fixed;*/
background-position: top;
display: flex;
}

.hero .container {
width: 100%;
display: flex;
align-items: center;
}

.text-hero {
width: 460px;
width: 46rem;
color: var(--white);
font-family: var(--font-archivo);
}

.text-hero > div {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 50px;
gap: 1rem;
margin-bottom: 5rem;
}

.text-hero p {
font-size: 18px;
line-height: 35.31px;
font-style: normal;
font-size: 1.8rem;
line-height: 3.531rem;
}


Expand All @@ -103,50 +110,49 @@ header {
align-items: center;
flex-direction: column;
justify-content: center;
margin-top: 60px;
margin-top: 6rem;
}

.main-title > div {
max-width: 593px;
max-width: 59.3rem;
display: flex;
align-items: center;
justify-content: center;

}

.main-title p {
margin-top: 20px;
font-size: 22px;
margin-top: 2rem;
font-size: 2.2rem;
line-height: 140%;
text-align: center;
}

.main-cards {
display: grid;
grid-template-columns: repeat(auto-fill, 385px);
grid-template-columns: repeat(auto-fill, 38.5rem);
justify-content: space-between;
margin-top: 60px;
margin-top: 6rem;
}

.card {
display: flex;
flex-direction: column;
margin-bottom: 40px;
width: 385px;
margin-bottom: 4rem;
width: 38.5rem;
cursor: pointer;
}

.card-image-container {
background-color: var(--blue-light);
width: 100%;
height: 200px;
height: 20rem;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--blue-light);
}

.card img {
width: 250px;
width: 25rem;
transition: all .4s ease;
}

Expand All @@ -155,139 +161,119 @@ header {
}

.card-info {
margin-top: 25px;
margin-top: 2.5rem;
}

.card-category {
color: var(--blue);
font-size: 16px;
font-size: 1.6rem;
font-weight: 500;
margin: 12px 0 24px 0;
margin: 1.2rem 0 2.4rem 0;
}

.card-price {
font-size: 20px;
font-size: 2rem;
font-weight: 500;
font-family: var(--font-space-grotesk);
}


/* -- MEDIA QUERIES -- */
/* Extra Large devices*/
@media (max-width: 1200px) {
@media (max-width: 1240px) {
.container {
max-width: 1140px;
max-width: 114rem;
}

.main-cards {
padding: 0px 20px;
justify-content: space-around;
}
}

/* Large devices*/
@media (max-width: 976px) {
.hero {
background-size: auto;

@media (max-width: 976px) {
h2 {
font-size: 2.4rem;
line-height: 4.7rem;
}

h3 {
font-size: 1.8rem;
}

.text-hero {
margin-left: 60px;
h4 {
font-size: 1.7rem;
}

.container {
max-width: 927px;
max-width: 92.7rem;
}

.main-cards {
padding: 0px 8px;
justify-content: space-around;
padding: 0 0.8rem;
}
}

/* Medium devices*/
@media (max-width: 620px) {
.text-hero {
margin-left: 20px;
}

.text-hero h2 {
font-size: 28px;
line-height: 34.13px;
}

.text-hero p {
font-size: 16px;
line-height: 28.6px;
@media (max-width: 620px) {
.hero {
background-position: top 45% right 65%;
}

.container {
max-width: 589px;
max-width: 58.9rem;
}

.main-title {
padding: 0px 10px;
}

.main-title h2 {
font-size: 28px;
line-height: 54.93px;
padding: 0 1rem;
}

.main-title p {
font-size: 16px;
line-height: 28.8px;
font-size: 1.6rem;
line-height: 2.88rem;
}

.main-cards {
grid-template-columns: repeat(auto-fill, 374px);
grid-template-columns: repeat(auto-fill, 37.4rem);
justify-content: center;
padding: 0px 0px;
padding: 0 0;
}

.card {
width: 374px;
height: 302px;
width: 37.4rem;
height: 30.2rem;
}

footer {
margin-top: 30px;
.card-price {
font-size: 1.7rem;
}
}

/* Small devices*/
@media (max-width: 414px) {
.hero {
background-position: left top;
}

.text-hero {
margin-left: 10px;
}

@media (max-width: 414px) {
.text-hero h2,
.text-hero p {
padding: 0px 10px;
padding: 0 1rem;
}

.container {
max-width: auto;
}

.main-cards {
grid-template-columns: repeat(auto-fill, 280px);
justify-content: center;
padding: 0px 0px;
grid-template-columns: repeat(auto-fill, 28rem);
}

.card {
width: 280px;
width: 28rem;
}

.animation {
font-size: 1.5rem;
}
}

@media (max-width: 360px) {
.main-title h2,
.main-title p {
padding: 0px 8px;
padding: 0 0.8rem;
}
}

0 comments on commit fd2d935

Please sign in to comment.