diff --git a/assets/css/style.css b/assets/css/style.css index 9feca72..6ff854e 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,9 +1,10 @@ -*{ - margin:0; - padding:0; +* { + margin: 0; + padding: 0; box-sizing: border-box; } -.page-header{ + +.page-header { display: flex; width: 100%; height: 101px; @@ -13,84 +14,135 @@ align-items: center; background: #000000; } -.header-logo{ + +.header-logo { width: 100%; height: 43px; } -.main-banner{ + +.main-banner { width: 100%; height: auto; } -@media screen and (max-width: 414px){ - .desktop-hidden{ + +@media screen and (max-width: 414px) { + .desktop-hidden { display: none; } - .div-image-pc{ + + .div-image-pc { margin: 15% 0; } - .image-pc{ - width: 50%; -} - .infoboxes-sub-wrapper{ - width: 100%; - flex-direction: column; - } - .div-infobox{ - - width: 96%; - height: 70%; - } - .imagem-note-wrapper{ - width: 100%; - flex-direction: column; - } - .image-note-mobile{ + + .image-pc { width: 50%; + } + + .infoboxes-sub-wrapper { + width: 100%; + flex-direction: column; + } + + .div-infobox { + gap: 6%; + width: 100%; + height: 80%; + } + + .imagem-note-wrapper { + width: 100%; + flex-direction: column; + } + + .image-note-mobile { + width: 50%; + gap: 2%; + margin: 0.3% 0; flex-direction: row; display: flex; } - .imagem-note{ + + .imagem-note { width: 96%; height: 70%; } + + .footer-image { + margin: 5%; + } + + .text-footer { + margin: 5%; + display: flex; + justify-content: center; + align-items: center; + margin-top: -20px; + text-transform: uppercase; + line-height: 12px; + font-size: 10px; + color: #bdbdbd; + } } + @media screen and (min-width: 415px) { - .mobile-hidden{ + .mobile-hidden { display: none; } - .div-image-pc{ + + .div-image-pc { margin: 5% 0; } - .image-pc{ + + .image-pc { width: 15%; } - .infoboxes-sub-wrapper{ + + .infoboxes-sub-wrapper { width: 70%; + height: 10%; flex-direction: row; margin: 5% 0; } - .div-infobox{ - width: 40%; + + .div-infobox { + width: 100%; margin: 5% 0; } - .image-note-desktop{ + + .image-note-desktop { width: 100%; flex-direction: row; display: flex; + gap: 2%; } - .imagem-note{ + + .imagem-note { display: flex; flex-direction: row; width: 100%; } + + .text-footer { + margin: 3% 0; + display: flex; + justify-content: center; + align-items: center; + margin-top: -20px; + text-transform: uppercase; + line-height: 12px; + font-size: 10px; + color: #bdbdbd; + } } -.div-title{ - margin: 5% 0; + +.div-title { + margin: 15% 0; display: flex; flex-direction: column; align-items: center; } -.title-one{ + +.title-one { width: 100%; font-family: 'Inter'; font-style: normal; @@ -101,7 +153,8 @@ text-align: center; color: #000000; } -.title-two{ + +.title-two { width: 100%; font-family: 'Inter'; font-style: normal; @@ -112,7 +165,8 @@ text-align: center; color: #000000; } -.title-three{ + +.title-three { width: 80%; font-family: 'Inter'; font-style: normal; @@ -123,26 +177,30 @@ color: #000000; } -.div-image-pc{ + +.div-image-pc { width: 100%; display: flex; align-items: center; justify-content: center; } -.infoboxes-wrapper{ + +.infoboxes-wrapper { margin: 5% 0; display: flex; width: 100%; justify-content: space-around; gap: 2%; } -.infoboxes-sub-wrapper{ + +.infoboxes-sub-wrapper { display: flex; justify-content: center; align-items: center; gap: 2%; } -.div-infobox{ + +.div-infobox { flex-direction: column; display: flex; align-items: center; @@ -154,26 +212,32 @@ line-height: 24px; text-align: center; color: #000000; - box-shadow: 0 0 8px #E0E0E0;; + box-shadow: 0 0 8px #E0E0E0; + ; } -.infobox-image{ + +.infobox-image { display: flex; - width: 35%; + width: 35%; } -.imagem-note-wrapper{ - gap: 10%; + +.imagem-note-wrapper { margin: 5% 0; display: flex; width: 100%; justify-content: space-around; - background-color: #E0E0E0;; + background-color: #E0E0E0; + ; } -.imagem-note{ + +.imagem-note { width: 100%; margin: 5% 0; } -.page-footer{ + +.page-footer { + margin: 5% 0; list-style: none; flex-direction: row; display: flex; @@ -191,43 +255,44 @@ background: #000000; } -.page-footer{ +.page-footer { flex-direction: column; display: flex; align-items: center; justify-content: center; color: #000000; } -.text-footer{ - text-transform: uppercase; - line-height: 12px; - font-size: 10px; - color: #bdbdbd ; -} -.icones-footer{ + +.icones-footer { display: flex; list-style: none; margin-bottom: 16px; } -.footer-li{ + +.footer-li { margin: 0 8px } @media screen and (min-width: 415px) { - .footer-image{ - margin-left: 10%; - display:flex; - justify-content: center; - align-items: center; - width: 80%; - } -} -@media screen and (max-width: 414px){ - .footer-image{ + .footer-image { margin-left: 10%; - display:flex; + display: flex; justify-content: center; align-items: center; width: 80%; - } + } +} + +@media screen and (max-width: 414px) { + .footer-image { + margin-left: 10%; + display: flex; + justify-content: center; + align-items: center; + width: 80%; + } +} + +.icones-footer { + margin: 2% 0; } \ No newline at end of file diff --git a/assets/images/Group.png b/assets/images/Group.png new file mode 100644 index 0000000..2edf5fb Binary files /dev/null and b/assets/images/Group.png differ diff --git a/assets/images/laptop.png b/assets/images/laptop.png new file mode 100644 index 0000000..6dff7a4 Binary files /dev/null and b/assets/images/laptop.png differ diff --git a/assets/images/money.png b/assets/images/money.png new file mode 100644 index 0000000..7cd0f0f Binary files /dev/null and b/assets/images/money.png differ diff --git a/index.html b/index.html index a1ee5a3..6d2d6ee 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,8 @@
Banner Principal Desktop - Banner Principal Mobile + Banner Principal Mobile
@@ -52,7 +53,7 @@ interdum.
- Logo da compra + Logo da compra Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@@ -92,26 +93,26 @@
- Logo da loja online + Logo da loja online 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.
- Logo da compra segura + Logo da compra segura 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.
- Logo da compra + Logo da compra 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.
- Logo da compra + Logo da compra 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. @@ -133,8 +134,9 @@
- Banner Principal Desktop - + Banner Principal Desktop +