Samuel/desafio-react-e-typescript-samuelcondack
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat: Adiciona a responsividade de TV

Browse Source
This commit is contained in:
SamuelCondack 2023-01-17 13:14:45 -03:00
parent d03519036b
commit adc6f6f8aa
11 changed files with 261 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
my-app/src/components/Footer/Footer.modules.scss
View File

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

66
my-app/src/components/FooterTop/FooterTop.modules.scss
View File

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

6
my-app/src/components/FooterTop/FooterTop.tsx
View File

@ -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>
</>
)

32
my-app/src/components/Header/Header.modules.scss
View File

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

4
my-app/src/components/Header/Header.tsx
View File

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

6
my-app/src/components/HeaderBottom/HeaderBottom.modules.scss
View File

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

25
my-app/src/components/NewsLetter/NewsLetter.modules.scss
View File

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

14
my-app/src/pages/About.modules.scss
View File

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

55
my-app/src/pages/Contact.modules.scss
View File

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

31
my-app/src/pages/institucional.modules.scss
View File

@ -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{

9
my-app/src/pages/institucional.tsx
View File

@ -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 (