✨ add devices

padotec · Apr 16, 2024 · bbf8f5d · bbf8f5d
1 parent cbcde24
commit bbf8f5d
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 4 deletions.
diff --git a/assets/pado_home/Unire.jpg b/assets/pado_home/Unire.jpg
diff --git a/assets/pado_home/padohub+.png b/assets/pado_home/padohub+.png
diff --git a/pado-home.html b/pado-home.html
@@ -46,6 +46,18 @@ <h3>Segurança na palma da sua mão</h3>
       </div>
     </section>
 
+    <section class="pado-home">
+      <div class="pado-home-title">
+        <h2>Dispositivos compatíveis</h2>
+        <p> Confira os dispositivos compatíveis com o aplicativo Pado Home e comece a utilizar agora mesmo.</p>
+      </div>
+
+      <div class="products">
+        <img class="unire" src="assets/pado_home/Unire.jpg" alt="Pado Home">
+        <img class="expander" src="assets/pado_home/padohub+.png" alt="Pado Home">
+      </div>
+    </section>
+
     <section class="privacy-policy">
       <div class="content">
         <h2>Política e Termos de Privacidade</h2>

diff --git a/styles/pado-home.css b/styles/pado-home.css
@@ -2,6 +2,7 @@ body {
   overflow-x: hidden;
   margin: 0;
   font-family: 'Poppins', sans-serif;
+  max-width: 100vw;
 }
 
 header {
@@ -75,6 +76,25 @@ header img {
   margin: 10px;
 }
 
+.products {
+  display: flex;
+  width: 100%;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
+  padding: 30px 0px;
+}
+
+.products .unire {
+  width: 40%;
+  border-radius: 30px;
+}
+
+.products .expander {
+  width: 20.5%;
+  border-radius: 30px;
+}
+
 .privacy-policy {
   display: flex;
   width: 100%;
@@ -126,6 +146,22 @@ header img {
   .privacy-policy .content {
     text-align: center;
   }
+
+  .products {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .products .unire {
+    width: 70%;
+  }
+
+  .products .expander {
+    width: 70%;
+    object-fit: cover;
+    max-height: 180px;
+
+  }
 }
 
 @media screen and (max-width: 450px) {
@@ -145,11 +181,15 @@ header img {
   .pado-home-title h1 {
     font-size: 1.2rem;
   }
-
+
+  .pado-home-title h2 {
+    font-size: 1.2rem;
+  }
+
   .pado-home-title p {
     font-size: 0.9rem;
   }
-  
+
   .app_logo {
     width: 80px;
     height: 80px;
@@ -162,15 +202,15 @@ header img {
   .mockup {
     width: 90%;
   }
-  
+
   .pado-home-description .left {
     width: 100%;
   }
 
   .privacy-policy {
     width: 100%;
   }
-  
+
   .footer {
     margin-top: 10px;
     width: 90%;