Merge pull request #5 from Maginobion/header

Header

resources/js/components/Atencion-cliente/index.vue

@@ -20,7 +20,7 @@
         </div>
         <div class="aviso">
             Nuestro horario de atención es de lunes a sábado de 10:00am a 5:00pm, <br/>
-            no contamos con atención los días domingo ni feriados
+            no contamos con atencióndffdfdfdfdfdfd los días domingo ni feriados
         </div>            
     </div>
 </template>

resources/js/components/ResponsivePage/Footer/index.vue

@@ -1,20 +1,132 @@
 <template>
-    <div class="todoAbajo">
-        <div>Este es el contenedor</div>
-        <router-link to="#">GaaaaA?</router-link>
-    </div>
+<footer>
+      <div class="contenedor-footer">
+          <div class="content-foo">
+          <p>
+          <a href="#"><img src="images/mancha.jpeg" style="height: 80px; width:300px"> </a>
+          </p>
+          <div class="content-foo">
+          <h4>Siguenos en redes sociales</h4>
+          <a href="#"><img src="images/facebook.png"> </a>
+          <a href="#"><img src="images/instagram.png"> </a>
+          <a href="#"><img src="images/twitter.png"> </a>
+          <a href="#"><img src="images/linkedin.png"> </a>
+          <a href="#"><img src="images/youtube.png"> </a>
+
+        </div>
+
+        </div>
+        <div class="content-foo">
+          <h4>Sobre Nosotros</h4>
+          <p>Quienes somos</p>
+          <div class="content-foo">
+          <h4>Política</h4>
+          <p>Políticas de privacidad</p>
+          <p>Políticas de cookies</p>
+          <p>Términos y condiciones</p>
+        </div>
+        </div>
+        <div class="content-foo">
+          <h4>Categorías</h4>
+          <p>Los mas vendidos</p>
+          <p>Novedades</p>
+          <p>Ficcion</p>
+          <p>No ficcion</p>
+          <p>Infantil</p>
+          <p>Juvenil</p>
+          <p>Smartplay</p>
+        </div>
+
+        <div class="content-foo">
+          <h4>Contáctanos</h4>
+          <p>Atención al cliente</p>
+          <p>947-391799</p>
+          <p>(llamadas y WhatsApp)</p>
+          <p>(Lun-Sab 9 a.m a 5 p.m)</p>
+          <p>atencion@crisol.com.pe</p>
+          <p>Comprobante electrónico</p>
+        </div>
+        <div class="content-foo">
+          <h4>Mi cuenta</h4>
+          <p>Mis pedidos</p>
+          <p>Mis deseos</p>
+          <div class="content-foo">
+          <h4>Medios de pago</h4>
+          <a href="#"><img src="images/visa_i.png"> </a>
+          <a href="#"><img src="images/america_i.png" style="margin-left:10px"> </a>
+          <a href="#"><img src="images/cmr.png" style="height: 35px; width:50px  ;margin-left:10px;padding-bottom: 6px;"> </a>
+          <div class="content-foo">
+          <a href="#"><img src="images/efectivo.png" style="height: 35px; width:50px"> </a>
+          <a href="#"><img src="images/master.png" style="height: 35px; width:50px ;margin-left:10px"> </a>
+          <a href="#"><img src="images/dinner.png" style="height: 35px; width:50px ;margin-left:10px"> </a>
+          </div>
+        </div>
+
+        </div>
+
+
+      </div>
+      <div class="titulo-final">
+        &copy;LA MANCHA | INGENIERIA DE SISTEMAS
+      </div>
+    </footer>
+
+
 </template>
 
-<style>
-    .todoAbajo{
-        background-color: black;
-        color: white;
-        width: 100%;
-    }
-</style>
-
-<script>
-export default {
-    
+
+<style scoped>
+footer{
+  display: block;
+  min-height: 60px;
+  background: #242323;
+  text-align: center;
+  padding-top: 15px;
+  border-top: 5px solid #4e96a8;
+  margin-top: 20px;
+ 
+}
+
+.contenedor-footer{
+  display: flex;
+  width: 100%;
+  justify-content: space-evenly;
+  margin: auto;
+  padding-bottom: 50px;
+  border-bottom: 2px solid #fff;
+}
+
+.content-foo{
+  text-align: left;
+}
+
+.content-foo h4{
+  color: #fff;
+  border-bottom: 1px outset #af20d3;
+  padding-bottom: 10px;
+  font-size: 20px;
+  text-shadow: 2px 2px 0 #000, 4px 4px 0 #000;
+}
+
+.content-foo p{
+  color: #fff;
+  font-size: 18px;
+  font-weight: 600;
+  text-shadow: 2px 2px 2px #1c6ea4;
+}
+
+/*.footer-social{
+  color: #fff;
+  font-size: 100%;
+  padding: 2%;
+}*/
+
+.titulo-final{
+  text-align: center;
+  font-size: 24px;
+  margin: 20px 0 0 0;
+  color: #fff;
+  padding: 5px;
+  text-shadow: 2px 2px 0 #000, 4px 4px 0 #000;
 }
-</script>
+</style>

resources/js/components/ResponsivePage/Header/index.vue

@@ -1,23 +1,176 @@
 <template>
-    <div class="headerFlex">
-        <router-link to="/">Home</router-link>
-        <router-link to="/prueba">Prueba</router-link>
-        <router-link to="/atencion-cliente">Atencion</router-link>
-        <router-link to="/pruebita">Pruebita</router-link>
-        <router-link to="/carrusel">Carrusel</router-link>
-
-    </div>
+    <header class="header">
+        <div class="header-top">
+            <div class="img">
+                <img src="../../../../../public/images/lamancha.jpg" alt="">
+            </div>
+            <div class="search-bar">
+                <form action="#">
+                    <div class="search">
+                        <input type="text" placeholder="Buscar en toda la tienda">
+                        <button><i class="fa-solid fa-magnifying-glass"></i></button>
+                    </div>
+                </form>
+            </div>
+            <div class="buttons">
+                <button class="login">
+                    <i class="fa-solid fa-user"></i>
+                    <span>Iniciar sesión</span>
+                </button>
+                <button class="shopping-cart">
+                    <i class="fa-solid fa-cart-plus"></i>
+                </button>
+            </div>
+        </div>
+        <div class="header-bottom">
+            <ul>
+                <router-link to="/">Home</router-link>
+                <router-link to="/prueba">Prueba</router-link>
+                <router-link to="/atencion-cliente">Atencion</router-link>
+                <router-link to="/pruebita">Pruebita</router-link>
+                <router-link to="/cabeza">cabeza</router-link>
+                <router-link to="/carrusel">Carrusel</router-link>
+            </ul>
+        </div>
+    </header>
 </template>
 
 <style scoped>
-    .headerFlex{
-        width: 1000px;
-        display: flex;
-        justify-content: space-between
-    }    
-    .headerFlex > a{
-        padding: 5px;
-        color: #475FA7;
-        text-decoration: none
-    }
-</style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        .header {
+            width: 100%;
+            padding: 1.25rem;
+        }
+
+        .header-top {
+            padding: 1rem 1rem 0 1rem;
+            display: flex;
+        }
+
+        .header-top .img {
+            width: 100%;
+            max-width: 20rem;
+        }
+
+        .header-top .img img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .search-bar {
+            flex-grow: 1;
+            width: 100%;
+            padding: 0 1.5rem;
+            display: flex;
+            flex-direction: column-reverse;
+        }
+
+        .search-bar form {
+            width: 100%;
+        }
+
+        .search-bar form .search {
+            display: flex;
+            border: 1px solid #002f84;
+            border-radius: .5rem;
+        }
+
+        .search-bar form .search input {
+            flex-grow: 1;
+            padding: .5rem 1rem;
+            font-size: 1.125rem;
+            border: none;
+            border-radius: .5rem;
+            outline: none;
+        }
+
+        .search-bar form .search button {
+            border: none;
+            outline: none;
+            background: #ffbe07;
+            padding: 0 1rem;
+            border-radius: 0 .5rem .5rem 0;
+            cursor: pointer;
+        }
+
+        .search-bar form .search button i {
+            font-size: 1.125rem;
+        }
+
+        .buttons {
+            padding: 0 1rem;
+            display: flex;
+            align-items: flex-end;
+        }
+
+        .buttons .login {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: 0 1rem;
+            align-items: center;
+            border: none;
+            outline: none;
+            cursor: pointer;
+            background: transparent;
+        }
+
+        .buttons .login i {
+            font-size: 1.125rem;
+            padding-bottom: .5rem;
+            color: #002f84;
+        }
+
+        .buttons .shopping-cart {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            padding: 0 1rem;
+            align-items: center;
+            border: none;
+            outline: none;
+            cursor: pointer;
+            background: transparent;
+        }
+
+        .buttons .shopping-cart i {
+            font-size: 2.25rem;
+            padding-bottom: .5rem;
+            color: #002f84;
+        }
+
+        .header-bottom {
+            margin: 1rem 0;
+        }
+
+        .header-bottom ul {
+            display: flex;
+            list-style: none;
+            justify-content: center;
+        }
+
+        .header-bottom ul a {
+            padding: .5rem 1.75rem;
+            text-transform: uppercase;
+            border-right: 1px solid #002f84;
+            color: #002f84;
+            letter-spacing: 0.125rem;
+            transition: .3s ease;
+            text-decoration: none;
+        }
+
+        .header-bottom ul li:last-child {
+            border-right: 0px solid #002f84;
+        }
+
+        .header-bottom ul a:hover {
+            background: #002f84;
+            color: #fff;
+        }
+    </style>

resources/views/welcome.blade.php

@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
     <head>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">