Mateus-Farias-Santos/challenge-landing-page-Mateus-Farias
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Atualizar 'style.css'

Browse Source
This commit is contained in:
Mateus Farias Santos 2022-10-12 17:39:18 +00:00
parent 2bb21810be
commit c01435bd7f
1 changed files with 307 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

614
style.css
View File

@ -1,308 +1,308 @@
* { * {
font-family: 'Inter'; font-family: 'Inter';
margin: 0px; margin: 0px;
} }
.menu { .menu {
display:flex; display:flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width:100%; width:100%;
height:101px; height:101px;
background:#000000; background:#000000;
} }
.img-logo{ .img-logo{
width:226; width:226;
height:43; height:43;
} }
.imgBackground { .imgBackground {
background-image: url("imagens/telaPc.png"); background-image: url("imagens/telaPc.png");
background-size:100% 100%; background-size:100% 100%;
width:100%; width:100%;
height:500px; height:500px;
} }
@media only screen and (max-width: 700px) { @media only screen and (max-width: 700px) {
.imgBackground{ .imgBackground{
background-image: url("imagens/telaPc.png"); background-image: url("imagens/telaPc.png");
background-size:100% 100%; background-size:100% 100%;
width:100%; width:100%;
height:300px; height:300px;
} }
} }
@media only screen and (min-width: 700px) { @media only screen and (min-width: 700px) {
.imgDesk2 { .imgDesk2 {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
} }
.container { .container {
width:100%; width:100%;
height:auto; height:auto;
display:block; display:block;
text-align: center; text-align: center;
} }
.text1 { .text1 {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
text-transform: uppercase; text-transform: uppercase;
color: #000000; color: #000000;
padding: 70px 0px 0px 0px; padding: 70px 0px 0px 0px;
} }
.text2 { .text2 {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 48px; font-size: 48px;
line-height: 58px; line-height: 58px;
text-transform: uppercase; text-transform: uppercase;
color: #000000; color: #000000;
padding: 0px 0px 30px 0px; padding: 0px 0px 30px 0px;
} }
.text3 { .text3 {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 19px; font-size: 19px;
line-height: 24px; line-height: 24px;
color: #000000; color: #000000;
} }
.text4 { .text4 {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 19px; font-size: 19px;
line-height: 24px; line-height: 24px;
color: #000000; color: #000000;
padding: 0px 100px 60px 0px; padding: 0px 100px 60px 0px;
} }
.cardCenter { .cardCenter {
width:100%; width:100%;
display:flex; display:flex;
justify-content:center; justify-content:center;
align-items: center; align-items: center;
padding: 50px 0px 0px 0px; padding: 50px 0px 0px 0px;
flex-wrap: wrap; flex-wrap: wrap;
margin: auto auto; margin: auto auto;
} }
.card1 { .card1 {
width: 300px; width: 300px;
height: 250px; height: 250px;
display:block; display:block;
text-align: center; text-align: center;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
padding: 50px 0px 0px 0px; padding: 50px 0px 0px 0px;
margin: 20px 20px 50px 0px; margin: 20px 20px 50px 0px;
} }
.imgDesk1 { .imgDesk1 {
display: flex; display: flex;
justify-content:center; justify-content:center;
flex-wrap: nowrap; flex-wrap: nowrap;
width:100%; width:100%;
height:400px; height:400px;
background: #E0E0E0; background: #E0E0E0;
} }
.imgDesk2 { .imgDesk2 {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content:center; justify-content:center;
gap:25px; gap:25px;
padding: 40px 0px 0px 0px; padding: 40px 0px 0px 0px;
} }
.imgDesk3 { .imgDesk3 {
width: 100%; width: 100%;
height:400px; height:400px;
display: flex; display: flex;
justify-content:center; justify-content:center;
margin:30px 0px -50px 0px; margin:30px 0px -50px 0px;
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
background: #E0E0E0; background: #E0E0E0;
} }
.backgroundCinza { .backgroundCinza {
background: #E0E0E0; background: #E0E0E0;
width: 100%; width: 100%;
} }
@media only screen and (max-width: 1200px) { @media only screen and (max-width: 1200px) {
.imgDesk1 { .imgDesk1 {
display:none; display:none;
} }
} }
@media only screen and (min-width: 1200px) { @media only screen and (min-width: 1200px) {
.imgDesk2 , .imgDesk3 , .backgroundCinza{ .imgDesk2 , .imgDesk3 , .backgroundCinza{
display:none; display:none;
} }
} }
.imgNote1 { .imgNote1 {
width:32%; width:32%;
padding-left: 40px; padding-left: 40px;
height:400px; height:400px;
} }
.imgNote2 { .imgNote2 {
width:45%; width:45%;
} }
.imgNote3 { .imgNote3 {
width:93%; width:93%;
height:400px; height:400px;
} }
.card2 { .card2 {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content:center; justify-content:center;
flex-wrap: nowrap; flex-wrap: nowrap;
margin: 50px 50px 0px 0px; margin: 50px 50px 0px 0px;
padding-left: 0px; padding-left: 0px;
font-size: 30px; font-size: 30px;
text-align: center; text-align: center;
} }
.card3 { .card3 {
width: 380px; width: 380px;
height: 280px; height: 280px;
display:block; display:block;
text-align: center; text-align: center;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
padding: 50px 0px 0px 0px; padding: 50px 0px 0px 0px;
margin: 60px 20px 0px 0px; margin: 60px 20px 0px 0px;
} }
.text5 { .text5 {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
color: #000000; color: #000000;
} }
.img-card { .img-card {
width:100px; width:100px;
height:80px; height:80px;
padding: 0px 0px 20px 0px; padding: 0px 0px 20px 0px;
} }
@media only screen and (min-width: 800px) { @media only screen and (min-width: 800px) {
.mobileBackground { .mobileBackground {
width: 400px; width: 400px;
display: none; display: none;
} }
} }
.textFinal { .textFinal {
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
text-align: center; text-align: center;
color: #000000; color: #000000;
margin: 60px 0px 0px 0px; margin: 60px 0px 0px 0px;
} }
.imgRectangle { .imgRectangle {
background: url("./imagens/Rectangle.png"); background: url("./imagens/Rectangle.png");
background-size: 100% 100%; background-size: 100% 100%;
width: 80%; width: 80%;
height: 276px; height: 276px;
margin: 40px auto; margin: 40px auto;
} }
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
.imgRectangle { .imgRectangle {
display:none; display:none;
margin: 40px 0px 0px 0px; margin: 40px 0px 0px 0px;
} }
} }
.oculosPng { .oculosPng {
width:95%; width:95%;
height:400px; height:400px;
} }
.rodape { .rodape {
text-align: center; text-align: center;
width: 100%; width: 100%;
height: 160px; height: 160px;
background: #000000; background: #000000;
margin: 80px 0px 0px 0px; margin: 80px 0px 0px 0px;
} }
.links ,ul ,li ,a { .links ,ul ,li ,a {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 10px 5px 6px 0px; padding: 10px 5px 6px 0px;
} }
.textFooter { .textFooter {
font-family: 'Inter'; font-family: 'Inter';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
text-transform: uppercase; text-transform: uppercase;
color: #BDBDBD; color: #BDBDBD;
} }
@media only screen and (max-width: 2500px) { @media only screen and (max-width: 2500px) {
.text1 { .text1 {
font-size: 30px; font-size: 30px;
} }
.text2 { .text2 {
font-size: 50px; font-size: 50px;
} }
.text3 { .text3 {
font-size: 20px; font-size: 20px;
} }
.text4 ,{ .text4 {
font-size: 20px; font-size: 20px;
} }
.text5 { .text5 {
font-size: 18px; font-size: 18px;
} }
.textFinal { .textFinal {
font-size: 30px; font-size: 30px;
} }
} }
@media only screen and (max-width: 760px) { @media only screen and (max-width: 760px) {
.text4 { .text4 {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 10px 0px 30px 0px; padding: 10px 0px 30px 0px;
} }
} }
@media only screen and (max-width: 400px) { @media only screen and (max-width: 400px) {
.text5 { .text5 {
font-size:13px; font-size:13px;
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.cardCenter { .cardCenter {
width:80%; width:80%;
display:flex; display:flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: auto; margin: auto;
} }
} }