forked from M3-Academy/desafio-react-e-typescript
fix: ajustes responsivos acima de 2500px #9
@ -10,7 +10,7 @@ const Main = () => {
|
||||
<div className={styles['main__route']}>
|
||||
<img className={styles['main__home']} src={Home} alt='home'></img>
|
||||
<img className={styles['main__arrow']} src={Arrow} alt='arrow'></img>
|
||||
<p>Institucional</p>
|
||||
<p className={styles['container__main-title']}>Institucional</p>
|
||||
</div>
|
||||
<Institucional/>
|
||||
</div>
|
||||
|
@ -24,9 +24,6 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
|
@ -121,3 +121,4 @@ button:active {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -38,3 +38,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
.devolucao__title{
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
.devolucao__description{
|
||||
font-size: 26px;
|
||||
line-height: 30px
|
||||
}
|
||||
}
|
||||
|
@ -38,3 +38,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
.entrega__title{
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
.entrega__description{
|
||||
font-size: 26px;
|
||||
line-height: 30px
|
||||
}
|
||||
}
|
||||
|
@ -131,6 +131,7 @@ footer {
|
||||
|
||||
.footer__container-bandeiras{
|
||||
display: flex;
|
||||
padding: 15px 0px;
|
||||
width: 40%;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -156,7 +157,7 @@ footer {
|
||||
}
|
||||
|
||||
img {
|
||||
width: 10%;
|
||||
width: 15%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -209,3 +210,52 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
footer {
|
||||
.footer__newsletter{
|
||||
.footer__newsletter-form{
|
||||
label {
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
|
||||
}
|
||||
.footer__newsletter-input{
|
||||
button{
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer__top {
|
||||
.footer__infos{
|
||||
.footer__info-title{
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
.footer__info{
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.footer__redes p{
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer__bottom {
|
||||
.footer__text-bottom {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
.footer__certificate p{
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
@ -19,7 +19,6 @@ header {
|
||||
|
||||
.header__logo{
|
||||
width: 10.63%;
|
||||
height: 25.86px;
|
||||
}
|
||||
|
||||
.header__container-input{
|
||||
@ -39,7 +38,7 @@ header {
|
||||
padding-left: 16px;
|
||||
}
|
||||
.header__search-icon{
|
||||
height: 18px;
|
||||
|
||||
position: absolute;
|
||||
color: #303030;
|
||||
margin-right: 7px;
|
||||
@ -59,9 +58,7 @@ header {
|
||||
text-transform: uppercase;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
.header__cart{
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@ -126,3 +123,23 @@ header {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
header {
|
||||
.header__top{
|
||||
.header__my-account-cart{
|
||||
.header__account{
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header__botton {
|
||||
.header__botton-nav-text{
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
@ -75,3 +75,17 @@
|
||||
margin-top: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
.inst__container li {
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
}
|
||||
|
@ -7,7 +7,11 @@
|
||||
|
||||
.main__home {
|
||||
width: 15.69%;
|
||||
height: 16px;
|
||||
|
||||
}
|
||||
|
||||
.main__arrow{
|
||||
width: 7%;
|
||||
}
|
||||
|
||||
|
||||
@ -27,3 +31,13 @@
|
||||
padding: 29px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
.main__route{
|
||||
.container__main-title {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
@ -38,3 +38,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
.pagamento__title{
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
.pagamento__description{
|
||||
font-size: 26px;
|
||||
line-height: 30px
|
||||
}
|
||||
}
|
||||
|
@ -39,3 +39,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
.seguranca__title{
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
.seguranca__description{
|
||||
font-size: 26px;
|
||||
line-height: 30px
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -39,3 +39,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
.sobre__title{
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
|
||||
.sobre__description{
|
||||
font-size: 26px;
|
||||
line-height: 30px
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user