Merge pull request #3 from vouv0/main

atualização da 2a branch

cadastro.html

@@ -117,8 +117,8 @@ <h5 class="modal-title" id="exampleModalLabel">Página web criada por:</h5>
       </div>
 
 
-    <footer class="bg-lightblue py-4">
-      <p class="text-center">© 2023 E-Commerce FMU</p>
+    <footer class="rodape">
+      <p>© 2023 E-Commerce FMU</p>
     </footer>
 
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

contatos.html

@@ -107,8 +107,8 @@ <h5 class="modal-title" id="exampleModalLabel">Página web criada por:</h5>
       </div>
 
 
-    <footer class="bg-lightblue py-4">
-        <p class="text-center">© 2023 E-Commerce FMU</p>
+    <footer class="rodape">
+        <p>© 2023 E-Commerce FMU</p>
     </footer>
 
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

css/styles.css

@@ -18,7 +18,7 @@ body {
 
 
 .cabecalho{
-
+    border-bottom: 0.2px solid white;
     display: flex;
     justify-content:space-between;
     align-items: center;
@@ -34,6 +34,7 @@ body {
 
 .barra-menu{
     background-color: linear-gradient(55.87deg, #1b1b1b 16.8%, #686870 95%);
+
 }
 
 .navbar-brand{
@@ -57,13 +58,6 @@ body {
     background-color: #535353;
 }
 
-.barra-lateral{
-    display: flex;
-    align-items:start;
-    flex-direction: row;
-
-}
-
 .btn{
     color: rgb(253, 253, 255);
     font-family: 'Martian Mono', monospace;
@@ -81,18 +75,50 @@ body {
 }
 
 .imagem-banner{
-    width: 40%;   
+    width: 30%;   
     display: flex;
     align-self: center;
 }
 
 .texto-banner{
+
     color: rgb(253, 253, 255);
     font-family: 'Martian Mono', monospace;
     font-size: small;
-
 }
 
+
+
+#logos{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-evenly;
+    gap:100px;
+    color: #ffffff;
+}
+
+.link-logo{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+}
+
+.link-logo a{
+    color: rgb(253, 253, 255);
+    font-family: 'Martian Mono', monospace;
+    font-size: small;
+}
+
+#logo_apple, #logo_samsung, #logo_xiaomi{
+    width: 100px;
+    background-color: #e6e5ed86;
+    padding:10px;
+    border-radius: 20%;
+}
+
+
 li, .cabecalho-menu-cliente, .navbar-brand {
     position: relative;
     display: block;
@@ -125,23 +151,105 @@ li:hover::after, .cabecalho-menu-cliente:hover::after, .navbar-brand:hover::afte
 }
 
 .rodape{
+    padding: 5%;
+    display: flex;
+    justify-content: center;
     color: rgb(253, 253, 255);
     font-family: 'Martian Mono', monospace;
     font-size: small;
 }
-
-
 /*FIM DA PAGINA PRINCIPAL*/
 
 
+
 /*COMEÇO DA PAGINA DE MODELOS*/
 
-#grade-modelos{
-    border-top: 0.4px solid #636363 ;
+#pag-modelos{
+    display: flex;
+    justify-items: center;
+    gap: 30%;
+
+
+}
+
+.modelos{
+    color: rgb(253, 253, 255);
+    font-family: 'Martian Mono', monospace;
+    font-size: small;
     display: flex;
+    flex-wrap: wrap;
+    flex-basis: 40%;
+    gap: 50px 50px;
+
+}
+
+.celulares{
+    background-color: #320e4d;
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
     justify-content: center;
-    padding: 100px;
+    align-items: center;
+    max-width: 200px;
+}
+
+.link-celular{
+    padding-top: 30px;
+    color: rgb(253, 253, 255);
+    font-family: 'Martian Mono', monospace;
+    font-size: small;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
 
+
+}
+
+.foto_celular{
+    width: 90px;
+}
+
+#filtro-produtos{
+    display: flex;
+    flex-direction: row;
+
+}
+
+.barra-lateral{
+    margin-left: 20px;
+    display: flex;
+    color: rgb(253, 253, 255);
+    font-family: 'Martian Mono', monospace;
+    font-size: small;
+
+}
+
+.itens-barra{
+    padding-top: 50px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+
+
+}
+
+
+dialog{
+    color: rgb(253, 253, 255);
+    font-family: 'Martian Mono', monospace;
+    font-size: small;
+    padding: 20px;
+    background-image: radial-gradient(circle, #759596, #5f7880, #4d5d67, #3d424d, #2b2a32);    width: 30%;
+    border-radius: 15px;
+    border: none;
+    text-align:justify;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
 }
 
 /*FIM DA PAGINA DE MODELOS*/

index.html

@@ -51,36 +51,47 @@
 
 
     <main>
-
-
-        <!--Colocar menu lateral de filtragem de produtos-->
-        <section>
-          <div>
-            <nav class="barra-lateral">
-              <ul>
-                <li>
-                  <span>Preço</span>
-                  <span>Preço</span>
-                  <span>Preço</span>
-                </li>
-              </ul>
-            </nav>
-          </div>
-        </section>
-
-
-
-
 
       <div class="banner">
         <img class="imagem-banner" src="fotos/banner.png" alt="smartphones">
         <h4 class="texto-banner">Destaques de smartphones com o melhor preço!</h4>
       </div>
+
+
 
+
+
+        <!--Logos das marcas-->
+        <section id="logos">
+          <section class="link-logo">
+            <a class="link-logo" href="/modelos.html">
+              <img id="logo_apple" src="fotos/logo_apple.svg" alt="logo_apple">
+              <p>Apple</p>
+            </a>
+          </section>
+          <section class="link-logo">
+            <a class="link-logo" href="/modelos.html">
+              <img id="logo_samsung" src="fotos/logo_samsung.svg" alt="logo_samsung">
+              <p>Samsung</p>
+            </a>
+          </section>
+          <section class="link-logo">
+            <a class="link-logo" href="/modelos.html">
+              <img id="logo_xiaomi" src="fotos/logo_xiaomi.svg" alt="logo_xiaomi">
+              <p>Xiaomi</p>
+            </a>
+          </section>
+        </section>
+
+
+      </div>
 
 
 
-<!--Colocar os produtos em containers de 3x3-->
+
+
+
+
 
     </main>
 
@@ -107,7 +118,7 @@ <h5 class="modal-title" id="exampleModalLabel">Página web criada por:</h5>
 
 
     <footer class="rodape">
-        <p class="text-center">© 2023 E-Commerce FMU</p>
+        <p>© 2023 E-Commerce FMU</p>
     </footer>