Se realizo la pagina desafio extra ver producto y se asocio el boton …

…a la pagina correspondiente
BodganMarwin · Oct 27, 2022 · a451ff3 · a451ff3
1 parent 82c20d1
commit a451ff3
Show file tree

Hide file tree

Showing 8 changed files with 225 additions and 6 deletions.
diff --git a/css/clasificados.css b/css/clasificados.css
@@ -25,7 +25,7 @@
 }
 .clasificados__box{
     padding-bottom: 1rem;
-    width: 43.3%;
+    width: 47.5%;
 }
 .clasificados__box__imagen{
     box-shadow: 0 0 5px 0 var(--color-sombra-plomo-oscuro);

diff --git a/css/seleccionado.css b/css/seleccionado.css
@@ -0,0 +1,75 @@
+main{
+    background: var(--background-color-preto);
+}
+.seleccionado{
+
+    display: flex;
+    flex-direction: column;
+    font-family: var(--fuente-releway);
+}
+.seleccionado__caja-imagen{
+    background: url("../assets/tasa.png") no-repeat center / cover;
+    width: 100%;
+    height: 192px;
+}
+/*.seleccionado__imagen{*/
+/*    !*background: no-repeat center / cover;*!*/
+/*    height: 25vh;*/
+/*    width: auto;*/
+/*}*/
+.seleccionado__inf{
+    padding: 1rem;
+}
+.seleccionado__inf__titulo{
+    color: var(--color-fuente-preto);
+    font-size: 1.375rem;
+}
+.seleccionado_inf__precio{
+    color: var(--color-fuente-preto);
+    font-size: 1rem;
+    font-weight: 700;
+    padding-bottom: .5rem;
+    padding-top: .5rem;
+}
+.seleccionado__inf__descripcion{
+    color: var(--color-fuente-preto);
+    font-size: .875rem;
+    line-height: 1rem;
+}
+
+@media screen and (min-width: 768px){
+    .seleccionado{
+        height: 157px;
+        align-content: center;
+        flex-direction: row;
+        justify-content: space-between;
+        padding: 2rem;
+    }
+    .seleccionado__caja-imagen{
+        width: 36%;
+        height: 100%;
+    }
+    .seleccionado__inf{
+        align-self: flex-end;
+        padding: 0;
+        width: 61%;
+    }
+}
+@media screen and (min-width: 1024px){
+    .seleccionado{
+        padding: 4rem 9.5rem 0 9.5rem;
+        height: 403px;
+    }
+    .seleccionado__caja-imagen{
+        height: 100%;
+        width: 48.5%;
+    }
+    .seleccionado__inf{
+        align-self: center;
+        vertical-align: center;
+        width: 48.5%;
+    }
+    .seleccionado__inf__titulo{
+        font-size: 3.25rem;
+    }
+}
diff --git a/index.html b/index.html
@@ -34,7 +34,9 @@
                 </div>
             </form>
         </section>
-        <button class="cabecera__login">Login</button>
+        <a href="login.html">
+            <button class="cabecera__login">Login</button>
+        </a>
         <img class="cabacera__logo-search" src="assets/Search.svg" alt="Logo de Busqueda">
     </div>
 </header>

diff --git a/login.html b/login.html
@@ -39,7 +39,7 @@
     <section class="formlogin">
 
         <h2 class="contacto__titulo">Iniciar Sesión</h2>
-        <form class="contacto__form" action="">
+        <form class="contacto__form" action="productos.html">
             <div class="contacto__form__box">
                 <input type="email" class="contacto__form__input" placeholder="Escriba su correo electrónico" required>
                 <label class="contacto__form__label">Email</label>

diff --git a/producto.html b/producto.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Referencia de la hoja de estilo de Css -->
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/cabecera.css">
+    <link rel="stylesheet" href="css/formulario.css">
+    <link rel="stylesheet" href="css/clasificados.css">
+    <link rel="stylesheet" href="css/seleccionado.css">
+
+    <link rel="stylesheet" href="css/contacto.css">
+    <link rel="stylesheet" href="css/footer.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- Fonte del Proyecto Raleway -->
+    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
+    <title>Producto</title>
+</head>
+<body>
+<header class="cabecera">
+    <div class="cabecera__menu">
+        <section class="cabecera__busqueda">
+            <img class="cabecera__logo" src="assets/Logo.svg" alt="Logo e-commerse AluraGeek">
+            <form class="cabecera__formbuscar">
+                <div class="cabecera__formbuscar__box">
+                    <input class="cabacera__search" type="search" placeholder="¿Qué deseas buscar? ">
+                    <button class="cabecera__formbuscar__box-boton">&#128269;</button>
+                </div>
+            </form>
+        </section>
+        <img class="cabacera__logo-search" src="assets/Search.svg" alt="Logo de Busqueda">
+    </div>
+</header>
+<main>
+    <section class="seleccionado">
+        <div class="seleccionado__caja-imagen">
+<!--            <img class="seleccionado__imagen" src="assets/tasa.png" alt="">-->
+        </div>
+        <div class="seleccionado__inf">
+            <h2 class="seleccionado__inf__titulo">Producto XYZ</h2>
+            <p class="seleccionado_inf__precio">Bs 60,00</p>
+            <p class="seleccionado__inf__descripcion">Voluptas voluptatum quibusdam similique, class debitis alias maecenas eveniet ridiculus, facilis fusce! Ullam conubia? Sociis, minima malesuada habitasse distinctio sequi aliqua malesuada. Quisque deleniti proin expedita, aliquid litora. Iste recusandae? Commodo, quia ridiculus doloribus vero dictum? Penatibus donec placeat faucibus, dolorum do. Animi porta anim magnam</p>
+        </div>
+    </section>
+    <section class="clasificados">
+        <div class="clasificados__cabecera">
+            <h2 class="clasificados__cabecera_titulo">Productos similares</h2>
+<!--            <a class="clasificados__cabecera__ver" href="">Ver todo</a>-->
+        </div>
+        <div class="clasificados__productos">
+            <div class="clasificados__box">
+                <img class="clasificados__box__imagen" src="assets/controlxyz.png">
+                <p class="clasificados__box__titulo">Producto</p>
+                <p class="clasificados__box__precio">Bs 60,00</p>
+                <a class="clasificados__box__ver" href="">Ver producto</a>
+            </div>
+            <div class="clasificados__box">
+                <img class="clasificados__box__imagen" src="assets/cabezaDark.png">
+                <p class="clasificados__box__titulo">Producto</p>
+                <p class="clasificados__box__precio">Bs 60,00</p>
+                <a class="clasificados__box__ver" href="">Ver producto</a>
+            </div>
+            <div class="clasificados__box">
+                <img class="clasificados__box__imagen" src="assets/yoda.png">
+                <p class="clasificados__box__titulo">Producto</p>
+                <p class="clasificados__box__precio">Bs 60,00</p>
+                <a class="clasificados__box__ver" href="">Ver producto</a>
+            </div>
+            <div class="clasificados__box">
+                <img class="clasificados__box__imagen" src="assets/clon.png">
+                <p class="clasificados__box__titulo">Producto</p>
+                <p class="clasificados__box__precio">Bs 60,00</p>
+                <a class="clasificados__box__ver" href="">Ver producto</a>
+            </div>
+            <div class="clasificados__box">
+                <img class="clasificados__box__imagen" src="assets/yodabebe.png">
+                <p class="clasificados__box__titulo">Producto</p>
+                <p class="clasificados__box__precio">Bs 60,00</p>
+                <a class="clasificados__box__ver" href="">Ver producto</a>
+            </div>
+            <div class="clasificados__box">
+                <img class="clasificados__box__imagen" src="assets/dark.png">
+                <p class="clasificados__box__titulo">Producto</p>
+                <p class="clasificados__box__precio">Bs 60,00</p>
+                <a class="clasificados__box__ver" href="">Ver producto</a>
+            </div>
+        </div>
+    </section>
+</main>
+<footer>
+    <section class="contacto">
+        <div class="contacto__quienes-somos">
+            <div class="contacto__caja-logo">
+                <img class="contacto__logo" src="assets/Logo.svg">
+            </div>
+            <div class="contacto__caja-link">
+                <a class="contacto__link" href="">Quienes Somos</a>
+                <a class="contacto__link" href="">Politica de Privacidad</a>
+                <a class="contacto__link" href="">Programa de Fidelidad</a>
+                <a class="contacto__link" href="">Nuestras Tiendas</a>
+                <a class="contacto__link" href="">Quiero ser Franquiciado</a>
+                <a class="contacto__link" href="">Anuncie aquí</a>
+            </div>
+        </div>
+        <div class="contacto__caja-form">
+            <h2 class="contacto__titulo">Hable con nosotros</h2>
+            <form class="contacto__form" action="">
+                <div class="contacto__form__box">
+                    <input type="text" class="contacto__form__input" placeholder="Nombre" required>
+                    <label class="contacto__form__label">Nombre</label>
+                    <span class="contacto__form__error">Esto campo no puede estar vacio</span>
+                </div>
+                <div class="contacto__form__box">
+                    <input type="email" class="contacto__form__input" placeholder="Email" required>
+                    <label class="contacto__form__label">Email</label>
+                    <span class="contacto__form__error">Esto campo no puede estar vacio</span>
+                </div>
+                <div class="contacto__form__box">
+                    <textarea class="contacto__form__input" placeholder="Escribe tu mensaje" required></textarea>
+                    <label class="contacto__form__label">Nombre</label>
+                    <span class="contacto__form__error">Esto campo no puede estar vacio</span>
+                </div>
+                <button class="contacto__form__boton">Enviar Mensaje</button>
+            </form>
+        </div>
+    </section>
+    <section class="footer">
+        <p class="footer__titulo">Desarrollado por Marwin Flores</p>
+        <p class="footer__anio">2022</p>
+    </section>
+</footer>
+</body>
+</html>
diff --git a/productos.html b/productos.html
@@ -40,7 +40,9 @@
     <section class="productos">
         <div class="productos__cabecera">
             <h2 class="productos__cabecera_titulo">Todos los productos</h2>
-            <button class="productos__cabecera__agregar">Agregar Producto</button>
+            <a href="registrarProducto.html">
+                <button class="productos__cabecera__agregar">Agregar Producto</button>
+            </a>
         </div>
         <div class="productos__caja">
             <div class="productos__box">

diff --git a/registrarProducto.html b/registrarProducto.html
@@ -17,7 +17,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <!-- Fonte del Proyecto Raleway -->
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap" rel="stylesheet">
-    <title>Nuestros Productos</title>
+    <title>Registrar Producto</title>
 </head>
 <body>
 <header class="cabecera">
@@ -31,7 +31,9 @@
                 </div>
             </form>
         </section>
-        <button class="cabecera__menu-admin">Menú Administrador</button>
+        <a href="productos.html">
+            <button class="cabecera__menu-admin">Menú Administrador</button>
+        </a>
         <!--        <button class="cabecera__login">Login</button>-->
         <img class="cabacera__logo-search" src="assets/Search.svg" alt="Logo de Busqueda">
     </div>

diff --git a/style.css b/style.css
@@ -4,6 +4,7 @@
     --background-color-azul-claro: #EAF2FD;
     --background-color-preto: #F5F5F5;
     --background-color-preto-claro: #C5C5C5;
+    --background-color-preto-oscuro: #E5E5E5;
 
 
     /*Colores de Fuente*/