From 4cbee5db170b46888150b7d6720ac4f1f0f094de Mon Sep 17 00:00:00 2001
From: matheusjardimgarcia <matheusjardimgarcia@gmail.com>
Date: Wed, 12 Oct 2022 22:04:48 -0300
Subject: [PATCH] alinhando as imagens do note

---
 assets/css/style.css        |  24 ++++++++-----
 assets/images/facebook.png  | Bin 0 -> 261 bytes
 assets/images/instagram.png | Bin 0 -> 281 bytes
 assets/images/youtube.png   | Bin 0 -> 345 bytes
 index.html                  |  69 ++++++++++++++++++++++++++++++++----
 5 files changed, 78 insertions(+), 15 deletions(-)
 create mode 100644 assets/images/facebook.png
 create mode 100644 assets/images/instagram.png
 create mode 100644 assets/images/youtube.png

diff --git a/assets/css/style.css b/assets/css/style.css
index e7167e7..002d3ae 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -70,15 +70,19 @@
     .div-infobox{
         width: 40%;
     }
-    .imagem-note-wrapper{
-        width: 70%;
+    .image-note-desktop{
+        width: 100%;
         flex-direction: row;
+        display: flex;
     }
     .imagem-note{
+        display: flex;
+        flex-direction: row;
         width: 100%;
     }
 }
 .div-title{
+    margin: 5% 0;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -106,7 +110,7 @@
     color: #000000;
 }
 .title-three{
-    width: 100%;
+    width: 40%;
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
@@ -151,7 +155,6 @@
 .infobox-image{
     display: flex;
     width: 35%;    
-    margin: 15% 0;
 }
 .imagem-note-wrapper{
     margin: 5% 0;
@@ -162,9 +165,12 @@
     background-color: #E0E0E0;;
 }
 .imagem-note{
-    margin: 15% 0;
-    flex-direction: column;
+    width: 100%;
+    margin: 5% 0;
+}
+.page-header-footer{
+    width: 100%;
     display: flex;
-    align-items: center;
-    justify-content: center;
-}
\ No newline at end of file
+    flex-direction: row;
+    background: #000000;
+}
diff --git a/assets/images/facebook.png b/assets/images/facebook.png
new file mode 100644
index 0000000000000000000000000000000000000000..c401fb7054d0c93a10c556fa126ff4bd8936ff7d
GIT binary patch
literal 261
zcmeAS@N?(olHy`uVBq!ia0vp^d_XM0!3HEx9X}Heq&N#aB8wRqxP?KOkzv*x37{Zj
zage(c!@6@aFM%AEbVpxD28NCO+<y{Tf&5vXE{-7;jBkT3@;W&1<Q`#gOJJ5ZXyWZT
zz~;80iPxY};vh>;LUYxT<43<**d1w~zQ-i@SJm6of|3W$*hMrczdjMutl{#);k?21
z;w94sUI|}hb6;_Efxq~KFyGc&JZ4^Y8M17~N}D3Ca`m^qdzZB4ii)}L7gn!(Ys^J!
z<X`?aw=-wY;omx^q*<#V=u_P6FL(JraNid?m(s|(cE-%}6(L(s16|4B>FVdQ&MBb@
E0IWh>jQ{`u

literal 0
HcmV?d00001

diff --git a/assets/images/instagram.png b/assets/images/instagram.png
new file mode 100644
index 0000000000000000000000000000000000000000..4fd1cdb743bf2f392ebd30ede92840a0d240fdb5
GIT binary patch
literal 281
zcmeAS@N?(olHy`uVBq!ia0vp^d>}Rl8<3oNC%zs?aTa()7Bet#3xhBt!>l<HKtaah
zAa^H*b?0PW0y!+{j=qiz3>*8o|0J>k`RhDg978G?rv`EJwixid4KQFg=d{>aT=1Mh
z#)nC0LXpq}1I~t~OKP$&_i_5h8O7b+9v;@9Bk<AvhcHv(^v~i^j-Ku}HpuEc$?A0!
z)ot0H5Ng96eb>ahX>G6Q#lRw&ePy?=NFH@RJ#oXSuD2$yc3pS46Pwdx8P!{vcOrCQ
z@#0@L%933NPam_K8R+r<!Fs<=ULW~-)f$%WN6u%v4wrC#N=Rg%8~JG6JEbGflfv~a
XK81V;F6EjEbUA~ktDnm{r-UW|Mx0~;

literal 0
HcmV?d00001

diff --git a/assets/images/youtube.png b/assets/images/youtube.png
new file mode 100644
index 0000000000000000000000000000000000000000..2227a63260e2abe31ebd59662e8ad4de78558c1a
GIT binary patch
literal 345
zcmeAS@N?(olHy`uVBq!ia0vp^5<o1(!3HE9-^k4aQk(@Ik;M!Q+`=Ht$S`XTNCjhY
zkh>GZx^prwfgF}}M_)$<hK>E)e-c@N{CA!%jv*C{TSMORHW>))mHHoT-oRVZoVP%_
zLE55A+JY+w$Pzxl_S`ym@-dekNwp^z>+bB2yZ4pHHQ||()v;>cV-Cq@Jmed*3m(+G
zIN+5eUH`i8lk+N#@E<ZS>^CH+a?UxlV|i-9qy;lJH)W_!yWHereW^owjjR5LQ&l`_
zd<KDyo#*!%N?qEr>6w)9zODHu*GF8;-!QLI`+z>XnO3}?@XaRiYsmu3^Uj@Ow=e!>
zv2*Ri>g6-@8WxuHEH3$?RJ7WlWDC#QJ<KneB+I6Ka%#K#Z>#g9#ctg!9bxYaWtV@s
mnsZ=neDH;KUb%nDZ{{y;EaukVGSLd?a|TaWKbLh*2~7Zz5Qn({

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 6ebb370..f44fc3b 100644
--- a/index.html
+++ b/index.html
@@ -58,30 +58,87 @@
             </div>
         </section>
 
-        <section>
+        <section class="mobile-hidden">
             <div class="imagem-note-wrapper">
                 <div class="image-note-mobile">
                     <img class="imagem-note"src="./assets/images/image-note-1.png" alt="Imagem 1 do notebook">
                      <img class="imagem-note" src="./assets/images/image-note-2.png" alt="Imagem 2 do notebook">
                 </div>
                 <div>
-                    <img class="imagem-note-full-widget" src="./assets/images/image-note-3.png" alt="Imagem 3 do notebook">
+                    <img class="imagem-note" src="./assets/images/image-note-3.png" alt="Imagem 3 do notebook">
                 </div>
             </div>
         </section>
-        <section>
+
+        <section class="desktop-hidden">
             <div class="imagem-note-wrapper">
                 <div class="image-note-desktop">
-                    <img class="imagem-note"src="./assets/images/image-note-1.png" alt="Imagem 1 do notebook">
-                     <img class="imagem-note" src="./assets/images/image-note-2.png" alt="Imagem 2 do notebook">
+                    <div>
+                    <img class="imagem-note" src="./assets/images/image-note-1.png" alt="Imagem 1 do notebook">
                 </div>
                 <div>
-                    <img class="imagem-note-full-widget" src="./assets/images/image-note-3.png" alt="Imagem 3 do notebook">
+                     <img class="imagem-note" src="./assets/images/image-note-2.png" alt="Imagem 2 do notebook">
+                    </div>
+                    <div>
+                     <img class="imagem-note" src="./assets/images/image-note-3.png" alt="Imagem 3 do notebook">
+                    </div>
                 </div>
             </div>
         </section>
+
+        <section>
+            <div class="infoboxes-wrapper">
+                <div class="infoboxes-sub-wrapper">
+                    <div class="div-infobox">
+                        <img class ="infobox-image"src="./assets/images/loja-online.png" alt="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. 
+
+                    </div>
+                    <div class="div-infobox">
+                        <img class ="infobox-image"src="./assets/images/loja-online.png" alt="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.  
+                    </div>
+                    <div class="div-infobox">
+                        <img class ="infobox-image"src="./assets/images/gorjeta.png" alt="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.  
+                    </div>
+                    <div class="div-infobox">
+                        <img class ="infobox-image"src="./assets/images/gorjeta.png" alt="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. 
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section>
+            <div class="div-title">
+                <h2 class="title-two">Lorem ipsum dolor sit amet</h2>
+                <h3 class="title-three">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. </h3>
+            </div>
+        </section>
     </main>
 
+    <footer class="page-header-footer">
+        <a href="/">
+            <img class="header-logo-footer" src="./assets/images/instagram.png" alt="Logo M3">
+        </a>
+        <a href="/">
+            <img class="header-logo-footer" src="./assets/images/facebook.png" alt="Logo M3">
+        </a>
+        <a href="/">     
+            <img class="header-logo-footer" src="./assets/images/youtube.png" alt="Logo M3">
+            </a>
+     
+    </footer>
+
 </body>
 
 </html>
\ No newline at end of file