Feat: Adiciona a responsividade de TV
This commit is contained in:
parent
d03519036b
commit
adc6f6f8aa
@ -24,6 +24,15 @@
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: #FFFFFF;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
width: 400px;
|
||||
height: 20px;
|
||||
margin-top: 24.5px;
|
||||
margin-bottom: 24.5px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px){
|
||||
order: 2;
|
||||
@ -35,14 +44,18 @@
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
@media (max-width: 1024px){
|
||||
width: 398px;
|
||||
width: 25%;
|
||||
height: 34px;
|
||||
}
|
||||
& img{
|
||||
width: 36px;
|
||||
height: 20.2px;
|
||||
@media (min-width: 2500px){
|
||||
width: 70px;
|
||||
height: 39.27px;
|
||||
}
|
||||
@media (max-width: 1024px){
|
||||
width: 36px;
|
||||
width: inherit;
|
||||
height: 20.2px;
|
||||
}
|
||||
}
|
||||
@ -51,12 +64,16 @@
|
||||
padding-left: 12px;
|
||||
border-left: 1px solid #C4C4C4;
|
||||
@media (max-width: 1024px){
|
||||
width: 54.61px;
|
||||
height: 34px;
|
||||
width: 45px;
|
||||
}
|
||||
& img{
|
||||
width: 54.61px;
|
||||
width: inherit;
|
||||
height: 34px;
|
||||
@media (min-width: 2500px){
|
||||
width: 106px;
|
||||
height: 66px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.Powered{
|
||||
@ -73,6 +90,17 @@
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: #FFFFFF;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
& img{
|
||||
@media (min-width: 2500px){
|
||||
width: 84.22px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px){
|
||||
justify-content: left;
|
||||
|
||||
@ -59,6 +59,11 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-left: 40px;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@media (max-width: 1024px){
|
||||
margin-left: 16px;
|
||||
}
|
||||
@ -104,6 +109,11 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-left: 40px;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@media (max-width: 1024px){
|
||||
margin-left: 16px;
|
||||
}
|
||||
@ -149,6 +159,11 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
margin-left: 40px;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@media (max-width: 1024px){
|
||||
margin-left: 16px;
|
||||
}
|
||||
@ -181,6 +196,11 @@
|
||||
text-transform: capitalize;
|
||||
text-decoration: none;
|
||||
color: #303030;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -195,6 +215,21 @@
|
||||
line-height: 14px !important;
|
||||
text-transform: capitalize !important;
|
||||
color: #303030;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 500 !important;
|
||||
font-size: 24px !important;
|
||||
line-height: 28px !important;
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
.ulP22{
|
||||
margin-top: 12px;
|
||||
margin-bottom: 0;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.iconsLinks{
|
||||
margin-right: 50px;
|
||||
@ -202,8 +237,20 @@
|
||||
.networkIcons{
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
@media (min-width: 2500px){
|
||||
& img{
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px){
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
.linkDiv{
|
||||
@media (max-width: 1024px){
|
||||
margin-left: 16px;
|
||||
}
|
||||
& a{
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
@ -212,7 +259,11 @@
|
||||
line-height: 16px;
|
||||
color: #303030;
|
||||
text-decoration: none;
|
||||
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.WppArrow{
|
||||
@ -220,6 +271,19 @@
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
margin-right: 16px;
|
||||
float: right;
|
||||
height: 0;
|
||||
position: fixed;
|
||||
top: 80%;
|
||||
right: 0;
|
||||
& img{
|
||||
width: 34px;
|
||||
height: 35px;
|
||||
@media (min-width: 2500px){
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.backTop{
|
||||
cursor: pointer;
|
||||
|
||||
@ -40,9 +40,9 @@ const FooterTop = () => {
|
||||
<label className='CheckLabel3' htmlFor="fale"><h3 className='h3Check3'></h3></label>
|
||||
<ul className='footerUl'>
|
||||
<p className='ulP2'>Atendimento Ao Consumidor</p>
|
||||
<p>(11) 4159-9504</p>
|
||||
<p className='ulP22'>(11) 4159-9504</p>
|
||||
<p className='ulP2'>Atendimento Online</p>
|
||||
<p>(11) 99433-8825</p>
|
||||
<p className='ulP22'>(11) 99433-8825</p>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -58,11 +58,11 @@ const FooterTop = () => {
|
||||
<a href="/">www.loremipsum.com</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='WppArrow'>
|
||||
<a href="/"><img src={Whatsapp} alt="Whatsapp and Arrow Icon"/></a>
|
||||
<img className='backTop' src={Arrow} alt="Back to the top icon" onClick={backtotop}/>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -14,9 +14,18 @@
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
.linkMenu{
|
||||
@media (min-width: 1025px){
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.academylogo{
|
||||
width: 136px;
|
||||
height: 25.86px;
|
||||
@media (min-width: 2500px){
|
||||
width: 265px;
|
||||
height: 50.5px;
|
||||
}
|
||||
}
|
||||
.SearchBar{
|
||||
border: 2px solid #F2F2F2;
|
||||
@ -28,11 +37,22 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 7px 16px;
|
||||
color: #C4C4C4;
|
||||
@media (max-width: 1024px){
|
||||
position: relative;
|
||||
width: 100%;
|
||||
order: 3;
|
||||
}
|
||||
@media (min-width: 2500px){
|
||||
width: 515.62px;
|
||||
height: 57px;
|
||||
}
|
||||
}
|
||||
.searchImg{
|
||||
@media (min-width: 2500px){
|
||||
width: 35.15px;
|
||||
height: 35.15px;
|
||||
}
|
||||
}
|
||||
.SearchInput{
|
||||
width: 100%;
|
||||
@ -50,6 +70,9 @@
|
||||
@media (max-width: 1024px){
|
||||
|
||||
}
|
||||
@media (min-width: 2500px){
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.LoginAndCart{
|
||||
display: flex;
|
||||
@ -68,7 +91,14 @@
|
||||
@media (max-width: 1024px){
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 2500px){
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.carticon{
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 2500px){
|
||||
width: 54.68px;
|
||||
height: 54.68px;
|
||||
}
|
||||
}
|
||||
@ -9,7 +9,7 @@ import './Header.modules.scss'
|
||||
const Header = () => {
|
||||
return (
|
||||
<section className="Header">
|
||||
<NavLink to="/Menu">
|
||||
<NavLink to="/Menu" className="linkMenu">
|
||||
<picture>
|
||||
<source srcSet={Menubars} media="(max-width: 1024px)"/>
|
||||
<img src="" alt="" />
|
||||
@ -25,7 +25,7 @@ const Header = () => {
|
||||
<div className="LoginAndCart">
|
||||
<Link to="/" className="loginlink">ENTRAR</Link>
|
||||
<span>
|
||||
<Link to="/"><img src={Cart} alt="CartIcon" /></Link>
|
||||
<Link to="/"><img src={Cart} alt="CartIcon" className="carticon"/></Link>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -25,4 +25,10 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
@media (min-width: 2500px){
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
@ -9,8 +9,8 @@
|
||||
margin-bottom: 50px;
|
||||
@media (max-width: 1024px) {
|
||||
justify-content: left;
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
width: inherit;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@ -31,6 +31,12 @@
|
||||
letter-spacing: 0.05em;
|
||||
font-variant: small-caps;
|
||||
color: #303030;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 500;
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
@ -75,6 +81,13 @@
|
||||
&::placeholder{
|
||||
color: #C4C4C4;
|
||||
}
|
||||
@media (min-width: 2500px){
|
||||
width: 668px;
|
||||
height: 59px;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
width: inherit;
|
||||
margin-bottom: 16px;
|
||||
@ -97,6 +110,14 @@
|
||||
letter-spacing: 0.05em;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
@media (min-width: 2500px){
|
||||
width: 246px;
|
||||
height: 59px;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
@ -6,6 +6,10 @@
|
||||
bottom: 20px;
|
||||
left: 30px;
|
||||
width: 748px;
|
||||
@media (min-width: 2500px){
|
||||
left: 13%;
|
||||
width: 1680px;
|
||||
}
|
||||
@media (max-width: 1185px){
|
||||
width: 50%;
|
||||
}
|
||||
@ -15,6 +19,11 @@
|
||||
bottom: 0;
|
||||
}
|
||||
& h1{
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 700;
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
text-align: center;
|
||||
}
|
||||
@ -26,6 +35,11 @@
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
color: #7D7D7D;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
line-height: 30px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
text-align: justify;
|
||||
margin-left: 16px;
|
||||
|
||||
@ -4,6 +4,10 @@
|
||||
position: relative;
|
||||
left: 30px;
|
||||
width: 748px;
|
||||
@media (min-width: 2500px){
|
||||
left: 13%;
|
||||
width: 1680px;
|
||||
}
|
||||
@media (max-width: 1400px){
|
||||
width: 55%;
|
||||
}
|
||||
@ -21,6 +25,11 @@
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
margin: 0;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 700;
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
text-align: center;
|
||||
}
|
||||
@ -35,6 +44,11 @@
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #100D0E;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: 31px;
|
||||
}
|
||||
@ -45,6 +59,12 @@
|
||||
border: 1px solid #100D0E;
|
||||
border-radius: 25px;
|
||||
padding-left: 20px;
|
||||
@media (min-width: 2500px){
|
||||
height: 63px;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
.checkbox{
|
||||
display: flex;
|
||||
@ -54,17 +74,34 @@
|
||||
margin-top: 13.58px;
|
||||
margin-bottom: 12.6px;
|
||||
gap: 4.28px;
|
||||
@media (min-width: 2500px){
|
||||
width: 1680px;
|
||||
}
|
||||
& p{
|
||||
color: #FF0000;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
& input{
|
||||
width: 18.64px;
|
||||
height: 18px;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 3px;
|
||||
@media (min-width: 2500px){
|
||||
width: 36.4px;
|
||||
height: 35.15px;
|
||||
}
|
||||
}
|
||||
& a{
|
||||
color: #100D0E;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
input.input-error,
|
||||
@ -83,6 +120,10 @@ select.input-error{
|
||||
width: 748px;
|
||||
height: 0px;
|
||||
top: 10px;
|
||||
@media (min-width: 2500px){
|
||||
top: 0;
|
||||
left: 120%;
|
||||
}
|
||||
@media (max-width: 1400px){
|
||||
width: 100%;
|
||||
}
|
||||
@ -94,6 +135,11 @@ select.input-error{
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: #FF0000;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.sentP{
|
||||
font-family: 'Roboto';
|
||||
@ -112,6 +158,10 @@ select.input-error{
|
||||
width: 748px;
|
||||
height: 52.44px;
|
||||
margin-bottom: 66.56px;
|
||||
@media (min-width: 2500px){
|
||||
width: 1680px;
|
||||
height: 71px;
|
||||
}
|
||||
@media (max-width: 1400px){
|
||||
width: 100%;
|
||||
}
|
||||
@ -130,4 +180,9 @@ select.input-error{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
@ -8,10 +8,18 @@
|
||||
.pathsHome{
|
||||
width: 15.99px;
|
||||
height: 16px;
|
||||
@media (min-width: 2500px){
|
||||
width: 31.22px;
|
||||
height: 31.25px;
|
||||
}
|
||||
}
|
||||
.pathsGt{
|
||||
width: 4.56px;
|
||||
height: 8px;
|
||||
@media (min-width: 2500px){
|
||||
width: 8.9px;
|
||||
height: 15.62px;
|
||||
}
|
||||
}
|
||||
.pathsP{
|
||||
font-family: 'Roboto';
|
||||
@ -20,6 +28,11 @@
|
||||
font-size: 12px;
|
||||
line-height: 28px;
|
||||
color: #C4C4C4;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.mainH1{
|
||||
display: flex;
|
||||
@ -34,6 +47,13 @@
|
||||
text-transform: uppercase;
|
||||
color: #292929;
|
||||
margin-bottom: 80px;
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
line-height: 56px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.instituWrapper{
|
||||
margin-left: 100px;
|
||||
@ -44,7 +64,6 @@
|
||||
margin-right: 16px;
|
||||
width: inherit;
|
||||
float: none;
|
||||
|
||||
}
|
||||
}
|
||||
.instituUl{
|
||||
@ -56,11 +75,15 @@
|
||||
border: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@media (min-width: 2500px){
|
||||
width: 590px;
|
||||
}
|
||||
}
|
||||
.instituLi{
|
||||
list-style: none;
|
||||
padding: 10px 16px;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
.instituLink{
|
||||
text-decoration: none;
|
||||
@ -69,7 +92,11 @@
|
||||
color: white;
|
||||
}
|
||||
width: 301px;
|
||||
|
||||
@media (min-width: 2500px){
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.active{
|
||||
|
||||
@ -1,14 +1,7 @@
|
||||
import './institucional.modules.scss'
|
||||
import Home from '../../src/assets/svgs/Home.svg'
|
||||
import Gt from '../../src/assets/svgs/greaterThan.svg'
|
||||
import {Link, NavLink} from "react-router-dom"
|
||||
|
||||
|
||||
const buttonStyle = {
|
||||
background: 'black',
|
||||
border: '1px solid #000000',
|
||||
color: 'white'
|
||||
}
|
||||
import { NavLink } from "react-router-dom"
|
||||
|
||||
const Main = () => {
|
||||
return (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user