Compare commits

...

20 Commits

Author SHA1 Message Date
b30ffddd19 Merge pull request 'feat(home): finalização do projeto' (#13) from feature/responsividade-final into main
Reviewed-on: #13
2022-10-13 03:06:12 +00:00
Thiago Bronisio
1720df680a feat(home): finalização do projeto 2022-10-13 00:05:26 -03:00
Thiago Bronisio
3854d21cad feat(main) finalizado a tela mobile 2022-10-12 19:54:19 -03:00
Thiago Bronisio
430e51cb8d feat(home): Finalizei a tela mobile 2022-10-12 19:37:55 -03:00
Thiago Bronisio
5dda1bad1e feat(home): finalizei a tela mobile 2022-10-12 19:00:28 -03:00
Thiago Bronisio
d7a9c217cc feat(main-section): Ajustei as sections e cards 2022-10-12 02:49:08 -03:00
ef19a84328 Merge pull request 'adicionei as imagens mobile' (#11) from feature/main-sections into main
Reviewed-on: #11
2022-10-11 02:48:29 +00:00
Thiago Bronisio
87fadb313f feature(home): Desktop finalizado 2022-10-10 22:58:55 -03:00
edbd6b64a4 Merge pull request 'feat(section-laptop): ajustei as imagens' (#10) from feature/main-sections into main
Reviewed-on: #10
2022-10-11 01:37:44 +00:00
d4feb2b383 Merge pull request 'feat(header): finalizei a responsividade d o footer versão mobile' (#9) from feature/style-header-mobile into main
Reviewed-on: #9
2022-10-10 15:40:31 +00:00
2a1f51884f feat(header): finalizei a responsividade d o footer versão mobile 2022-10-10 12:39:08 -03:00
ea0c2a8255 Merge pull request 'feat(footer): finalizei o footer versão desktop' (#8) from feature/style-footer into main
Reviewed-on: #8
2022-10-09 23:23:10 +00:00
Thiago Bronisio
8ef8409faa feat(footer): finalizei o footer versão desktop 2022-10-09 20:22:33 -03:00
d03f1e7ad3 Merge pull request 'feat(main): adicionei estilos nas sections para responsividade desktop' (#7) from feature/main-sections into main
Reviewed-on: #7
2022-10-09 22:18:00 +00:00
401c23eabd Merge pull request 'feat(main): adicionei responsividade deskot na primeira section do main' (#6) from feature/main-sections into main
Reviewed-on: #6
2022-10-09 04:28:46 +00:00
fe1155e82d Merge pull request 'feat(home): adicionei @media para inicio dos break points' (#5) from feature/style-header into main
Reviewed-on: #5
2022-10-09 02:27:36 +00:00
0874f23bba Merge pull request 'feat(home): adicionei estilo no header' (#4) from feature/style-header into main
Reviewed-on: #4
2022-10-08 22:55:52 +00:00
01438445fe Merge pull request 'feat(html): arquitetura html finalizada' (#3) from feature/finalização-arquitetura-html into main
Reviewed-on: #3
2022-10-08 20:03:20 +00:00
2a8e0b7d77 Merge pull request 'feat(html): adiciona arquitetura html e imagens' (#2) from feature/arquitetura-html into main
Reviewed-on: #2
2022-10-08 19:22:22 +00:00
da320c5376 Merge pull request 'feat(html-css): adiciona arquivos html, css e configurações iniciais' (#1) from feature/create-html-css into main
Reviewed-on: #1
2022-10-08 17:55:57 +00:00
5 changed files with 579 additions and 100 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 329 B

After

Width:  |  Height:  |  Size: 492 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 333 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 KiB

View File

@ -26,10 +26,13 @@
<main>
<figure>
<img class="banner" src="./assets/img/banner1.png" alt="banner" />
<img class="banner" src="./assets/img/banner1.png" alt="Banner de computador" />
</figure>
<figure>
<img class="banner-mobile" src="./assets/img/img-mobile/banner.png" alt="Banner de computador">
</figure>
<section>
<section class="container-dolor">
<div class="info-dolor">
<p class="info-title">Lorem IPSUM</p>
@ -40,8 +43,8 @@
Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.
</p>
<figure class="info-monitor">
<img src="./assets/img/img-3monitores.png" alt="" />
<figure>
<img class="info-monitor" src="./assets/img/img-3monitores.png" alt="Imagem de monitor" />
</figure>
</div>
@ -85,30 +88,27 @@
<div class="info-container">
<div class="div-laptop1">
<figure>
<img class="img-laptop1" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
</figure>
</div>
<figure class="grid-laptop1">
<img class="img-laptop" src="assets/img/img-notebook1.png" alt="Imagem de notebook" />
</figure>
<div class="div-laptop2">
<figure>
<img class="img-laptop2" src="assets/img/img-notebook2.png" alt="Imagem de notebook" />
</figure>
</div>
<div class="div-laptop3">
<figure>
<img class="img-laptop3" src="assets/img/img-notebook3.png" alt="Imagem de notebook" />
</figure>
</div>
<figure class="grid-laptop2">
<img class="img-laptop" src="assets/img/img-notebook2.png" alt="Imagem de notebook" />
</figure>
<figure class="grid-laptop3">
<img class="img-laptop" src="assets/img/img-notebook3.png" alt="Imagem de notebook" />
</figure>
</div>
</section>
<section>
<section class="container-card">
<div class="card-information">
@ -158,52 +158,64 @@
</div>
</section>
<article class="container-information">
<div class="information">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. Quisque a
tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis. Donec finibus turpis
vitae lectus interdum rutrum vitae sed augue.
</p>
<figure>
<img class="img-oculos" src="./assets/img/img-mobile/img-oculos.png" alt="Imagem de um óculos">
</figure>
<div class="information-text">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero
faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur
venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</p>
</div>
<figure>
<img class="img-information" src="./assets/img/img-embacada.png"
alt="Imagem de programação embaçada">
</figure>
</div>
<article class="img-information">
<figure>
<img src="./assets/img/img-embacada.png" alt="Imagem de programação embaçada">
</figure>
</article>
</section>
</article>
</main>
<footer>
<footer class="container-footer">
<a>
<figure>
<img src="./assets/img/img-instagram.png" alt="Instagram">
</figure>
</a>
<div class="info-footer">
<div class="img-footer">
<a>
<figure>
<img class="font-instagram" src="./assets/img/img-instagram.png" alt="Instagram">
</figure>
</a>
<a>
<figure>
<img src="./assets/img/img-facebook.png" alt="Facebook">
</figure>
</a>
<a class="img-facebook">
<figure>
<img class="font-facebook" src="./assets/img/img-facebook.png" alt="Facebook">
</figure>
</a>
<a>
<figure>
<img src="./assets/img/img-youtube.png" alt="Youtube">
</figure>
</a>
<a>
<figure>
<img class="font-youtube" src="./assets/img/img-youtube.png" alt="Youtube">
</figure>
</a>
</div>
<div>
<p>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</p>
</div>
</footer>
</body>

565
style.css
View File

@ -18,6 +18,7 @@
}
/* Banner */
.banner-mobile{display: none;}
.banner {
display: flex;
width: 100%;
@ -34,7 +35,7 @@
.info-title {
font-size: 32px;
line-height: 39px;
font-weight: 400px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
}
@ -47,16 +48,18 @@
text-align: center;
}
.info-monitor-mobile{display: none;}
.info-content {
margin: 28px 0px 84px 0px;
text-align: start;
line-height: 24px;
}
/* Imagem três monitores */
.info-monitor {
display: flex;
max-width: 16, 35%;
margin: 0 auto;
justify-content: center;
margin-bottom: 179px;
}
@ -79,7 +82,9 @@
margin-bottom: 27px;
margin-top: 35px;
}.info-shop figcaption {
font-size: 16px;
line-height: 24px;
font-weight: 400;
max-width: 299px;
margin-bottom: 27px;
}
@ -95,7 +100,9 @@
margin-bottom: 27px;
margin-top: 35px;
}.info-bag figcaption {
font-size: 16px;
line-height: 24px;
font-weight: 400;
max-width: 299px;
margin-bottom: 27px;
}
@ -110,7 +117,9 @@
margin-bottom: 27px;
margin-top: 35px;
}.info-coin figcaption {
font-size: 16px;
line-height: 24px;
font-weight: 400;
max-width: 299px;
margin-bottom: 27px;
}
@ -119,34 +128,31 @@
.info-laptop {
background-color: #E0E0E0;
max-height: 530px;
margin-bottom: 130px;
width: 100%;
display: flex;
justify-content: center;
}
.info-container {
display: flex;
justify-content: center;
margin: 0px 72px;
bottom: -62px;
display: grid;
grid-template-columns: auto auto auto;
gap: 39px;
position: relative;
bottom: -32px;
width: 92.5%;
}
.div-laptop2 {
margin-left: 39px;
margin-right: 39px;
.grid-laptop1,
.grid-laptop2,
.grid-laptop3{
display: flex;
flex-direction: column;
align-items: center;
}
.img-laptop1 {
max-width: 100%;
}
.img-laptop2 {
max-width: 100%;
}
.img-laptop3 {
max-width: 100%;
.img-laptop{
width: 100%;
}
/* Último card */
@ -166,6 +172,7 @@
}.card-dollar figcaption {
font-size: 16px;
line-height: 24px;
font-weight: 400;
margin: 0px 32px 65px 33px;
}
@ -178,6 +185,7 @@
}.card-moeda figcaption {
font-size: 16px;
line-height: 24px;
font-weight: 400;
margin: 0px 32px 65px 33px;
}
@ -190,6 +198,7 @@
}.card-laptop figcaption {
font-size: 16px;
line-height: 24px;
font-weight: 400;
margin: 0px 32px 65px 33px;
}
@ -201,32 +210,38 @@
}.card-smartphone figcaption {
font-size: 16px;
line-height: 24px;
font-weight: 400;
margin: 0px 32px 65px 33px;
}
/* Informação Final */
.container-information {
width: 100%;
}
.information {
max-width: 28.60%;
width: 70.85%;
margin: 0 auto;
margin-bottom: 50px;
}.information h1 {
text-align: center;
font-weight: 600;
font-size: 32px;
line-height: 39px;
text-align: center;
}.information p {
margin: 0 auto;
text-align: center;
font-size: 16px;
line-height: 24px;
text-align: center;
}
.img-information {
max-width: 70.85%;
margin: 0 auto;
}.img-information img {
font-weight: 400;
width: 40.80%;
}.img-information {
width: 100%;
margin-top: 50px;
}
@media screen and (min-width: 1025px) {
.img-oculos{
display: none;
}
}
/* Footer */
@ -260,6 +275,7 @@
}.info-footer p {
text-align: center;
color: #BDBDBD;
font-weight: 400;
}
.img-facebook {
@ -274,6 +290,7 @@
/* HEADER */
.container-header {
background-color: #000000;
width: 100%;
}
.logo-m3 {
@ -283,38 +300,228 @@
}
/* BANNER */
.banner {display: none;}
.banner-mobile{
width: 100%;
display: flex;
}
.banner {
display: flex;
width: 100%;
/* Info dolor */
.container-dolor{
padding: 73px 29px 0px 29px;
}
.img-embacada {
display: flex;
width: 100%;
}
.info-dolor{
margin: 0 auto;
width: 100%;
display: contents;
}.info-dolor h1 {
font-weight: 500;
font-size: 28px;
line-height: 34px;
text-align: center;
text-transform: uppercase;
}
.info-title{
font-weight: 400;
font-size: 20px;
line-height: 24px;
align-items: center;
text-align: center;
text-transform: uppercase;
}
.info-content{
text-align: center;
margin: 46px 0px 65px;
}
.img-laptop {
display: flex;
width: 100%;
}
.info-monitor{
max-width: 57.70%;
margin: 0px 88px;
margin: 0 auto;
}
.info-monitor {
width: 100%;
}
.info-card {
display: block;
flex-wrap: wrap;
margin-top: 90.62px;
}
.info-shop{
width: 100%;
margin: 0 auto;
margin-bottom: 24px;
}.info-shop img{
margin: 0 auto;
width: 25.10%;
margin: 36px 0px 27.05px;
}.info-shop figcaption {
text-align: center;
line-height: 24px;
margin: 0 auto;
padding: 0px 25.35px 27.50px 26px;
}
.info-bag{
width: 100%;
margin: 0 auto;
margin-bottom: 24.05px;
}.info-bag img{
width: 25.10%;
margin: 36px 0px 27.05px;
}.info-bag figcaption {
text-align: center;
line-height: 24px;
margin: 0 auto;
padding: 0px 25.35px 27.50px 26px;
}
.info-coin{
width: 100%;
margin: 0 auto;
}.info-coin img{
width: 25.10%;
margin: 36px 0px 27.05px ;
}.info-coin figcaption {
text-align: center;
line-height: 24px;
margin: 0 auto;
padding: 0px 25.35px 27.50px 26px;
}
.info-laptop{
width: 100%;
margin-bottom: 112px;
}
.grid-laptop1{
grid-area: laptop1;
}
.grid-laptop2{
grid-area: laptop2;
}
.grid-laptop3{
grid-area: laptop3;
}
.info-container{
display: grid;
grid-template-areas:
"laptop2 laptop1"
"laptop3 laptop3"
;
column-gap: 14px;
row-gap: 24px;
grid-template-columns: unset;
width: 88.90%;
}
.container-card{
padding: 0px 23px 0px 23px;
}
.card-information{
flex-wrap: wrap;
margin: 0 auto;
margin-top: 80px;
max-width: 88.85%;
max-width: 100%;
display: block;
}
.card-dollar{
width: 100%;
max-height: 34.05%;
margin-bottom: 16px;
}.card-dollar img{
margin: 0 auto;
margin: 35px 0px 15px;
width: 25.10%;
}
.card-dollar figcaption{
font-size: 14px;
line-height: 24px;
text-align: center;
margin: 0 auto;
padding: 0px 33px 65px 33px;
}
.card-moeda{
width: 100%;
max-height: 34.05%;
margin-bottom: 16px;
}.card-moeda img{
margin: 0 auto;
margin: 35px 0px 15px;
width: 25.10%;
}.card-moeda figcaption{
font-size: 14px;
line-height: 24px;
text-align: center;
margin: 0 auto;
padding: 0px 33px 65px 33px;
}
.card-laptop{
width: 100%;
max-height: 34.05%;
margin-bottom: 16px;
}.card-laptop img{
margin: 0 auto;
margin: 35px 0px 15px;
width: 25.10%;
}.card-laptop figcaption{
font-size: 14px;
line-height: 24px;
text-align: center;
margin: 0 auto;
padding: 0px 33px 65px 33px;
}
.card-smartphone{
width: 100%;
max-height: 34.05%;
margin-bottom: 98px;
}.card-smartphone img{
margin: 0 auto;
margin: 35px 0px 15px;
width: 20.70%;
}.card-smartphone figcaption{
font-size: 14px;
line-height: 24px;
text-align: center;
margin: 0 auto;
padding: 0px 33px 65px 33px;
}
.information{
width: 100%;
}.information h1 {
margin: 0px 50px 9px;
font-weight: 600;
font-size: 24px;
line-height: 29px;
}.information p {
width: 84.54%;
margin: 0px 32px 87px;
margin: 0 auto;
font-size: 16px;
line-height: 24px;
text-align: center;
}
.img-information{display: none;}
.img-oculos{
width: 100%;
margin-bottom: 50px;
}
.info-footer{
padding: 32px 77px 32px;
}
}
@media screen and (min-width: 2501px) {
/* Header */
.container-header {
background-color: #000000;
}
@ -323,15 +530,275 @@
display: flex;
padding: 29px 0px;
justify-content: center;
}.logo-m3 img{
width: 452px;
}
/* Banner */
.banner-mobile{display: none;}
.banner {
display: flex;
width: 100%;
margin-bottom: 76px;
}
.img-embacada {
/*Fisrt section */
.info-dolor {
max-width: 40.26%;
margin: 0 auto;
}
.info-title {
font-size: 62px;
line-height: 78px;
font-weight: 400px;
text-transform: uppercase;
text-align: center;
}
.info-dolor h1 {
font-size: 96px;
line-height: 116px;
font-weight: 500;
text-transform: uppercase;
text-align: center;
}
.info-monitor-mobile{display: none;}
.info-content {
margin: 28px 0px 84px 0px;
text-align: start;
font-size: 32px;
}
/* Imagem três monitores */
.info-monitor {
display: flex;
margin: 0 auto;
justify-content: center;
margin-bottom: 179px;
}
/* Card da primeira section */
.info-card {
display: flex;
justify-content: center;
margin-bottom: 80px;
}
/* Card shopping */
.info-shop {
width: 18.25%;
text-align: center;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}.info-shop img {
margin-bottom: 27px;
margin-top: 35px;
}.info-shop figcaption {
font-size: 32px;
line-height: 48px;
margin-bottom: 27px;
text-align: center;
}
/* Card bag */
.info-bag {
width: 18.25%;
text-align: center;
margin: 0px 21px;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}.info-bag img {
margin-bottom: 27px;
margin-top: 35px;
}.info-bag figcaption {
font-size: 32px;
line-height: 48px;
margin-bottom: 27px;
text-align: center;
}
/* Card coin */
.info-coin {
width: 18.25%;
text-align: center;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}.info-coin img {
margin-bottom: 27px;
margin-top: 35px;
}.info-coin figcaption {
font-size: 32px;
line-height: 48px;
margin-bottom: 27px;
text-align: center;
}
/* Imagens laptops */
.info-laptop {
background-color: #E0E0E0;
margin-bottom: 130px;
width: 100%;
display: flex;
justify-content: center;
}
.info-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 39px;
position: relative;
bottom: -32px;
width: 92.5%;
}
.grid-laptop1,
.grid-laptop2,
.grid-laptop3{
display: flex;
flex-direction: column;
align-items: center;
}
.img-laptop{
width: 100%;
}
/* Último card */
.card-information {
display: flex;
justify-content: center;
margin: 129px 72px 108px;
}
.card-dollar {
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
margin-right: 16px;
text-align: center;
}.card-dollar img {
margin: 35px 0px 15px;
}.card-dollar figcaption {
font-size: 32px;
line-height: 48px;
margin: 0px 32px 65px 33px;
}
.card-moeda {
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
margin-right: 16px;
text-align: center;
}.card-moeda img {
margin: 35px 0px 15px;
}.card-moeda figcaption {
font-size: 32px;
line-height: 48px;
margin: 0px 32px 65px 33px;
}
.card-laptop {
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
margin-right: 16px;
text-align: center;
}.card-laptop img {
margin: 35px 0px 15px;
}.card-laptop figcaption {
font-size: 32px;
line-height: 48px;
margin: 0px 32px 65px 33px;
}
.card-smartphone {
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
text-align: center;
}.card-smartphone img {
margin: 35px 0px 15px;
}.card-smartphone figcaption {
font-size: 32px;
line-height: 48px;
margin: 0px 32px 65px 33px;
}
/* Informação Final */
.container-information {
width: 100%;
}
.information {
width: 70.85%;
margin: 0 auto;
}.information h1 {
text-align: center;
font-weight: 600;
font-size: 62px;
line-height: 78px;
text-align: center;
}.information p {
margin: 0 auto;
font-size: 32px;
line-height: 48px;
font-weight: 400;
text-align: center;
width: 40.80%;
}.img-information {
width: 100%;
margin-top: 50px;
}
@media screen and (min-width: 1025px) {
.img-oculos{
display: none;
}
}
/* Footer */
.container-footer{
background-color: #000000;
margin-top: 116px;
}.container-footer p {
text-align: center;
color: #BDBDBD;
line-height: 12px;
font-size: 20px;
text-transform: uppercase;
}
.info-footer{
padding: 38px 0px;
}
.img-footer {
display: flex;
margin: 0 auto;
justify-content: center;
align-items: center;
margin-bottom: 17px;
width: 20.60%;
}
.info-footer a {
text-decoration: none;
color: #FFFFFF;
}.info-footer p {
text-align: center;
color: #BDBDBD;
font-size: 20px;
line-height: 24px;
font-weight: 400;
}
.img-facebook {
margin: 0px 42px;
}.font-facebook {
width: 26px;
}.font-youtube{
width: 39px;
}.font-instagram {
width: 39px;
}
}