From 577f7cc0e1ff6902300e2f6c8da7dd01560102d0 Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 11 Oct 2022 16:21:24 -0300 Subject: [PATCH 01/11] Adiciona o main banner desktop e o main banner mobile --- index.html | 7 +++++++ styles/style.css | 4 ++++ 2 files changed, 11 insertions(+) diff --git a/index.html b/index.html index 1d4d0af..8db1db9 100644 --- a/index.html +++ b/index.html @@ -11,5 +11,12 @@
+
+ + + + laptop image banner + +
\ No newline at end of file diff --git a/styles/style.css b/styles/style.css index c51d38a..6f87412 100644 --- a/styles/style.css +++ b/styles/style.css @@ -13,4 +13,8 @@ .header-logo { padding: 29px 0px; display: block; +} + +.main-banner { + width: 100%; } \ No newline at end of file From 1bd9dbbfa2dce87759149de1127340242c19a6df Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 11 Oct 2022 16:36:52 -0300 Subject: [PATCH 02/11] Adiciona first-content e todos os seus aspectos --- index.html | 7 +++++++ styles/style.css | 37 +++++++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+) diff --git a/index.html b/index.html index 8db1db9..6fdd5ff 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,13 @@ laptop image banner +
+
+

Lorem Ipsum

+

Dolor Sit Amet

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.

+
+
\ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 6f87412..803a998 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,7 +1,11 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); + * { margin: 0; padding: 0; box-sizing: border-box; + font-family: 'Inter', sans-serif; + color: #000000; } .page-header { @@ -17,4 +21,37 @@ .main-banner { width: 100%; +} + +.first-content { + padding-top: 73px; + display: flex; + align-items: center; + justify-content: center; +} + +.first-content-text { + max-width: 766px; +} + +.first-content-h2 { + text-transform: uppercase; + font-weight: 400; + font-size: 32px; + line-height: 39px; + text-align: center; +} + +.first-content-h1 { + font-weight: 500; + font-size: 40px; + line-height: 58px; + text-transform: uppercase; + text-align: center; +} + +.first-content-p { + font-weight: 400; + font-size: 16px; + padding-top: 28px; } \ No newline at end of file From 84f19a4f7f51e399373bab43d5c2d75ca8830321 Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 11 Oct 2022 16:51:44 -0300 Subject: [PATCH 03/11] Adiciona block e seus aspectos --- index.html | 5 +++++ styles/style.css | 30 ++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/index.html b/index.html index 6fdd5ff..3ef2e8c 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,11 @@

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.

+
+ + computers image + +
\ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 803a998..89a158d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -54,4 +54,34 @@ font-weight: 400; font-size: 16px; padding-top: 28px; +} + +.block { + width: 50%; + max-width: 315px; + display: block; + margin: auto; + padding: 73px 0px; +} + +@media screen and (max-width: 414px) { + .first-content-text { + max-width: 367px; + padding: 0px 29px; + } + + .first-content-h2 { + font-size: 20px; + line-height: 24px; + } + + .first-content-h1 { + font-size: 28px; + line-height: 34px; + } + + .first-content-p { + text-align: center; + } + } \ No newline at end of file From d2423e5b8a3f9714a48ec502d102c97a40a66ccd Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 11 Oct 2022 17:48:25 -0300 Subject: [PATCH 04/11] adiciona first-card e seus aspectos desktop e mobile --- index.html | 11 +++++++++-- styles/style.css | 40 ++++++++++++++++++++++++++++++++++++++-- 2 files changed, 47 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 3ef2e8c..9286a62 100644 --- a/index.html +++ b/index.html @@ -13,8 +13,8 @@
- - + + laptop image banner
@@ -29,6 +29,13 @@ computers image
+
+
+
shop image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
bag shop image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
\ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 89a158d..428290c 100644 --- a/styles/style.css +++ b/styles/style.css @@ -61,10 +61,38 @@ max-width: 315px; display: block; margin: auto; - padding: 73px 0px; + padding: 73px 0px 179px 0px; } -@media screen and (max-width: 414px) { +.first-card { + width: auto; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 21px; + padding-bottom: 79px; +} + +.first-card-p { + width: 299px; + padding: 27px; + padding-top: 27px; + text-align: center; +} + +.first-card-image { + display: block; + margin: auto; + width: 103px; + padding: 35px 12px 0px 12px; +} + +.first-card-cards { + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + +@media screen and (max-width: 1024px) { .first-content-text { max-width: 367px; padding: 0px 29px; @@ -84,4 +112,12 @@ text-align: center; } + .block { + padding-bottom: 90px; + } + + .first-card { + display: flex; + flex-direction: column; + } } \ No newline at end of file From 7f54cbbb175cc5b4237b8c8e6f094cda2b403fd4 Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 11 Oct 2022 19:52:29 -0300 Subject: [PATCH 05/11] Adiciona Image row e seus aspectos desktop e mobile --- index.html | 12 +++++++++++ styles/style.css | 53 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 65 insertions(+) diff --git a/index.html b/index.html index 9286a62..48d4aff 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,18 @@
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+
laptop image
+
laptop image
+
laptop image
+
+
+ laptop image + laptop image +
+
laptop image
+
\ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 428290c..609ed57 100644 --- a/styles/style.css +++ b/styles/style.css @@ -92,6 +92,39 @@ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); } +.image-row-background { + background-color: #E0E0E0;; + height: 530px; +} + +.image-row-desktop { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 39px; + padding: 62px 72px 0px 72px; +} + +.row-image-desktop { + margin-top:62px; +} + +.image-row-mobile1 { + display: flex; + justify-content: center; + align-items: center; + gap: 14px; + padding: 0px 23px 0px 23px; +} + +.image-row-mobile2 { + display: flex; + justify-content: center; + align-items: center; + padding: 24px 23px; +} + @media screen and (max-width: 1024px) { .first-content-text { max-width: 367px; @@ -120,4 +153,24 @@ display: flex; flex-direction: column; } +} + +@media screen and (max-width: 1919px) { + .image-row-background { + height: 579px; + } + + .row-image-desktop { + display: none; + } +} + +@media screen and (min-width: 1920px){ + .image-row-mobile1 { + display: none; + } + + .image-row-mobile2 { + display: none; + } } \ No newline at end of file From 93b64257bc655b41dc36126a50af2835069d984b Mon Sep 17 00:00:00 2001 From: Samuel Date: Wed, 12 Oct 2022 10:18:49 -0300 Subject: [PATCH 06/11] Adiciona second-card e seus aspectos desktop e mobile --- assets/images/money (1) 2.svg | 14 +++++++++++ index.html | 8 ++++++ styles/style.css | 47 +++++++++++++++++++++++++++++++++-- 3 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 assets/images/money (1) 2.svg diff --git a/assets/images/money (1) 2.svg b/assets/images/money (1) 2.svg new file mode 100644 index 0000000..1090b7b --- /dev/null +++ b/assets/images/money (1) 2.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 48d4aff..d5aba2b 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,14 @@
laptop image
+
+
+
shop image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
bag shop image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
\ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 609ed57..56d9dd3 100644 --- a/styles/style.css +++ b/styles/style.css @@ -103,7 +103,6 @@ justify-content: center; align-items: center; gap: 39px; - padding: 62px 72px 0px 72px; } .row-image-desktop { @@ -115,7 +114,7 @@ justify-content: center; align-items: center; gap: 14px; - padding: 0px 23px 0px 23px; + padding-top: 32px; } .image-row-mobile2 { @@ -125,6 +124,36 @@ padding: 24px 23px; } +.second-card { + width: auto; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 21px; + padding-top: 191px; + padding-bottom: 79px; +} + +.second-card-p { + width: 299px; + padding: 27px; + padding-top: 27px; + text-align: center; +} + +.second-card-image { + display: block; + margin: auto; + width: 103px; + height: 103px; + padding: 35px 12px 0px 12px; +} + +.second-card-cards { + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + @media screen and (max-width: 1024px) { .first-content-text { max-width: 367px; @@ -153,6 +182,20 @@ display: flex; flex-direction: column; } + + .second-card { + display: flex; + flex-direction: column; + gap: 16px; + padding-top: 112px; + } +} + +@media screen and (max-width: 1270px) { + .second-card { + flex-direction: column; + + } } @media screen and (max-width: 1919px) { From 815aab0bb82e2df0d01aa850545ec3c799fa4c10 Mon Sep 17 00:00:00 2001 From: Samuel Date: Wed, 12 Oct 2022 18:27:34 -0300 Subject: [PATCH 07/11] Adiciona image-row e seus aspectos desktop e mobile --- index.html | 34 ++++++++++++++--------- styles/style.css | 71 +++++++++++++++++++++++++++++++++++------------- 2 files changed, 73 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index d5aba2b..56ab319 100644 --- a/index.html +++ b/index.html @@ -37,23 +37,31 @@
-
-
laptop image
-
laptop image
-
laptop image
+
+
+
laptop image
+
laptop image
+
laptop image
+
+
+ laptop image + laptop image +
+
laptop image
-
- laptop image - laptop image -
-
laptop image
+
-
shop image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
bag shop image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
shop image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
bag shop image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+
+
+

diff --git a/styles/style.css b/styles/style.css index 56d9dd3..7798f22 100644 --- a/styles/style.css +++ b/styles/style.css @@ -75,10 +75,10 @@ } .first-card-p { - width: 299px; padding: 27px; padding-top: 27px; text-align: center; + padding: 27px 25px; } .first-card-image { @@ -90,11 +90,18 @@ .first-card-cards { box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + max-width: 350px; } .image-row-background { - background-color: #E0E0E0;; - height: 530px; + background-color: #E0E0E0; + max-height: 530px; + padding: 62px 72px 0px 72px; +} + +.image-row-wrapper { + position: relative; + bottom: -25px; } .image-row-desktop { @@ -106,22 +113,34 @@ } .row-image-desktop { - margin-top:62px; + width: 100%; } .image-row-mobile1 { + margin: auto; display: flex; justify-content: center; align-items: center; gap: 14px; - padding-top: 32px; } .image-row-mobile2 { + margin: auto; + max-width: 368px; display: flex; justify-content: center; align-items: center; - padding: 24px 23px; + padding-top: 24px; +} + +.row-image-mobile { + width: 100%; + max-width: 177px; +} + +.row-image-mobile2 { + width: 100%; + max-width: 368px; } .second-card { @@ -130,28 +149,25 @@ flex-direction: row; justify-content: center; align-items: center; - gap: 21px; - padding-top: 191px; - padding-bottom: 79px; + gap: 16px; + padding: 191px 72px 79px 72px; } .second-card-p { - width: 299px; - padding: 27px; - padding-top: 27px; + padding: 15px 32px 65px 32px; text-align: center; } .second-card-image { display: block; margin: auto; - width: 103px; - height: 103px; + height: 104px; padding: 35px 12px 0px 12px; } .second-card-cards { box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + width: auto; } @media screen and (max-width: 1024px) { @@ -187,18 +203,25 @@ display: flex; flex-direction: column; gap: 16px; - padding-top: 112px; + padding: 150px 23px 0px 23px; } -} -@media screen and (max-width: 1270px) { .second-card { flex-direction: column; } + + .second-card-p { + font-size: 14px; + max-width: 302px; + } + } -@media screen and (max-width: 1919px) { +@media screen and (max-width: 1270px) { +} + +@media screen and (max-width: 1024px) { .image-row-background { height: 579px; } @@ -208,7 +231,7 @@ } } -@media screen and (min-width: 1920px){ +@media screen and (min-width: 1025px){ .image-row-mobile1 { display: none; } @@ -216,4 +239,14 @@ .image-row-mobile2 { display: none; } +} + +@media screen and (max-width: 369px) { + .image-row-mobile1 { + width: 50%; + } + + .image-row-mobile2 { + width: 100px; + } } \ No newline at end of file From 6eaeda5e08875354a9ab1d1c63117bbc5bd45eaa Mon Sep 17 00:00:00 2001 From: Samuel Date: Wed, 12 Oct 2022 18:57:41 -0300 Subject: [PATCH 08/11] Adiciona second-content e seus aspectos desktop e mobile --- index.html | 9 ++++++--- styles/style.css | 24 ++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 56ab319..bc141ec 100644 --- a/index.html +++ b/index.html @@ -59,9 +59,12 @@
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

-
-
-

+
+
+

Lorem ipsum dolor sit amet

+

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.

diff --git a/styles/style.css b/styles/style.css index 7798f22..239dbbc 100644 --- a/styles/style.css +++ b/styles/style.css @@ -170,6 +170,30 @@ width: auto; } +.second-content { + padding-top: 108px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.second-content-text { + max-width: 550px; +} + +.second-content-h1 { + font-weight: 600; + font-size: 32px; + line-height: 39px; + text-transform: uppercase; + text-align: center; +} + +.second-content-p { + text-align: center; +} + @media screen and (max-width: 1024px) { .first-content-text { max-width: 367px; From 5e60f3e267b128a7cad47fe1eafdef1386601d6a Mon Sep 17 00:00:00 2001 From: Samuel Date: Wed, 12 Oct 2022 20:22:28 -0300 Subject: [PATCH 09/11] Adiciona bottomm-banner e footer desktop e mobile --- index.html | 35 ++++++++++++++++++ styles/style.css | 93 +++++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 123 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index bc141ec..7ca3edf 100644 --- a/index.html +++ b/index.html @@ -59,6 +59,14 @@
coin image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+ computer image +
+
+ +
+

Lorem ipsum dolor sit amet

@@ -67,6 +75,33 @@ Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.

+
+
+ computer image +
+
+ +
+
+
+
+

Lorem ipsum dolor sit amet

+

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.

+
+
+
+
+
+
instagram logo
+
facebook logo
+
youtube logo
+
+

Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00 +

+
+
\ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 239dbbc..dbc9cba 100644 --- a/styles/style.css +++ b/styles/style.css @@ -126,11 +126,11 @@ .image-row-mobile2 { margin: auto; - max-width: 368px; display: flex; justify-content: center; align-items: center; padding-top: 24px; + max-width: 368px; } .row-image-mobile { @@ -170,6 +170,15 @@ width: auto; } +.bottom-banner2 { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + margin: auto; + padding-top: 50px; +} + .second-content { padding-top: 108px; display: flex; @@ -190,10 +199,60 @@ text-align: center; } -.second-content-p { +.first-content-p { text-align: center; } +.bottom-banner { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + margin: auto; + padding-top: 50px; +} + +.second-content2 { + padding-top: 108px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.bottom-banner-desktop { + display: block; + width: 100%; +} + +.bottom-banner-mobile { + width: 100%; +} + +.bottom-banner-img { + width: 100%; +} + +.end-footer { + background-color: #000000; + margin-top: 116px; +} + +.footer-images { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 16px; + padding: 38px 0px 16px 0px; +} + +.footer-p { + color: #BDBDBD; + text-align: center; + padding-bottom: 38px; +} + @media screen and (max-width: 1024px) { .first-content-text { max-width: 367px; @@ -240,9 +299,21 @@ max-width: 302px; } -} + .bottom-banner-desktop { + display: none; + } -@media screen and (max-width: 1270px) { + .second-content { + padding: 50px 32px; + } + + .bottom-banner { + display: none; + } + + .second-content2 { + display: none; + } } @media screen and (max-width: 1024px) { @@ -263,11 +334,23 @@ .image-row-mobile2 { display: none; } + + .bottom-banner-mobile { + display: none; + } + + .bottom-banner2 { + display: none; + } + + .second-content2 { + display: none; + } } @media screen and (max-width: 369px) { .image-row-mobile1 { - width: 50%; + width: 100%; } .image-row-mobile2 { From 34ef3c5663c4dd8cd3ff059264736d18215da15b Mon Sep 17 00:00:00 2001 From: Samuel Date: Wed, 12 Oct 2022 21:15:24 -0300 Subject: [PATCH 10/11] Modifica a responsividade do site --- styles/style.css | 55 ++++++++++++++++++++++++++++++------------------ 1 file changed, 35 insertions(+), 20 deletions(-) diff --git a/styles/style.css b/styles/style.css index dbc9cba..6ea720a 100644 --- a/styles/style.css +++ b/styles/style.css @@ -96,12 +96,12 @@ .image-row-background { background-color: #E0E0E0; max-height: 530px; - padding: 62px 72px 0px 72px; + padding: 0px 72px 0px 72px; } .image-row-wrapper { position: relative; - bottom: -25px; + bottom: -50px; } .image-row-desktop { @@ -282,6 +282,18 @@ flex-direction: column; } + .image-row-wrapper { + bottom: -20px; + } + + .image-row-background { + height: 579px; + } + + .row-image-desktop { + display: none; + } + .second-card { display: flex; flex-direction: column; @@ -291,7 +303,6 @@ .second-card { flex-direction: column; - } .second-card-p { @@ -302,7 +313,9 @@ .bottom-banner-desktop { display: none; } - + .bottom-banner-img { + width: 60%; + } .second-content { padding: 50px 32px; } @@ -316,16 +329,6 @@ } } -@media screen and (max-width: 1024px) { - .image-row-background { - height: 579px; - } - - .row-image-desktop { - display: none; - } -} - @media screen and (min-width: 1025px){ .image-row-mobile1 { display: none; @@ -348,12 +351,24 @@ } } -@media screen and (max-width: 369px) { - .image-row-mobile1 { +@media screen and (max-width: 500px) { + .row-image-mobile { + width: 70%; + } + + .image-row-background { + height: auto; + } + + .image-row-wrapper { + bottom: -30px; + } + + .row-image-mobile2 { + width: 150%; + } + + .bottom-banner-img { width: 100%; } - - .image-row-mobile2 { - width: 100px; - } } \ No newline at end of file From 3a833a95d8b8ddf172cd7802df6982bcb23cd408 Mon Sep 17 00:00:00 2001 From: Samuel Date: Wed, 12 Oct 2022 22:54:30 -0300 Subject: [PATCH 11/11] Adiciona mais responsividade ao site --- index.html | 4 +- styles/style.css | 132 +++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 130 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 7ca3edf..3867e4b 100644 --- a/index.html +++ b/index.html @@ -95,8 +95,8 @@
instagram logo
-
facebook logo
-
youtube logo
+
facebook logo
+
youtube logo

Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00

diff --git a/styles/style.css b/styles/style.css index 6ea720a..bbde2d9 100644 --- a/styles/style.css +++ b/styles/style.css @@ -150,7 +150,7 @@ justify-content: center; align-items: center; gap: 16px; - padding: 191px 72px 79px 72px; + padding: 191px 72px 0px 72px; } .second-card-p { @@ -230,7 +230,9 @@ } .bottom-banner-img { + max-width: 1360px; width: 100%; + padding: 0px 30px 0px 30px; } .end-footer { @@ -253,6 +255,97 @@ padding-bottom: 38px; } +@media screen and (min-width: 3500px){ + .header-logo { + width: 500px; + } + + .first-content-p { + font-size: xx-large; + } + + .first-content-h2 { + font-size: 70px; + } + + .first-content-p { + font-size: 30px; + } + + .block { + min-width: 500px; + min-height: 700px; + } + + .row-image-desktop { + width: 2000px; + } + + .bottom-banner-img { + min-width: 2000px; + } +} + +@media screen and (min-width: 2500px) { + .header-logo { + min-height: 130px; + } + + .first-content-h2 { + font-size: 50px; + } + + .first-content-h1 { + padding-top: 10px; + font-size: 60px; + } + + .first-content-p { + font-size: 26px; + } + + .first-card-image { + width: 200px; + } + + .first-card-p { + font-size: 30px; + } + + .image-row-background { + min-height: 650px; + } + + .row-image-desktop { + width: 700px; + } + + .second-card-image { + width: 500px; + height: 200px; + } + + .second-card-p { + font-size: 30px; + } + + .second-content-h2 { + font-size: 44px; + } + + .second-content-p { + font-size: 26px; + } + + .footer-img { + min-height: 35px; + } + + .footer-p { + font-size: 18px; + } +} + @media screen and (max-width: 1024px) { .first-content-text { max-width: 367px; @@ -313,17 +406,23 @@ .bottom-banner-desktop { display: none; } + .bottom-banner-img { width: 60%; } + .second-content { - padding: 50px 32px; + padding: 50px 32px 0px; } .bottom-banner { display: none; } + .bottom-banner-img { + padding: 0px; + } + .second-content2 { display: none; } @@ -352,8 +451,12 @@ } @media screen and (max-width: 500px) { + .block { + width: 200px; + } + .row-image-mobile { - width: 70%; + width: 75%; } .image-row-background { @@ -365,10 +468,31 @@ } .row-image-mobile2 { - width: 150%; + width: 160%; } .bottom-banner-img { width: 100%; } +} + +@media screen and (max-width: 330px) { + .row-image-mobile { + width: 80%; + } + + .row-image-mobile2 { + width: 170%; + } + +} + +@media screen and (max-width: 300px) { + .row-image-mobile { + width: 90%; + } + + .row-image-mobile2 { + width: 185%; + } } \ No newline at end of file