Version final_2

vvaldesc · Nov 25, 2023 · 9534dfd · 9534dfd
1 parent aeb62f9
commit 9534dfd
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 34 deletions.
diff --git a/css/animations.css b/css/animations.css
@@ -1,24 +1,18 @@
 @keyframes titulo {
     0%{
-        transform: translateY(0px);
-    }
-    50%{
-        transform: translateY(90px);
+        transform: translateX(0px);
     }
     100%{
-        transform: translateY(0px);
+        transform: translateX(285px);
     }
 }
 
 @keyframes titulo--h3 {
     0%{
-        transform: translate(0px, 0px);
-    }
-    50%{
-        transform: translate(60px, 90px);
+        transform: translateX(300px);
     }
     100%{
-        transform: translate(0px, 0px);
+        transform: translateX(-270px);
     }
 }
 

diff --git a/css/responsive.css b/css/responsive.css
@@ -18,6 +18,8 @@ main{
 
 .container__footer{
     grid-area: footer;
+    display: flex;
+    justify-content: space-around;
 }
 
 /* Oculto elementos en mobile first */
@@ -39,7 +41,14 @@ main{
     display: none;
 }
 
-/*  */
+/* Footer */
+.footer_div--info{
+    display: none;
+}
+
+.footer_div--rss{
+    display: none;
+}
 
 @media screen and (min-width: 600px) {
     .div_i--menuIcono{
@@ -81,6 +90,15 @@ main{
 
 @media screen and (min-width: 825px) {
 
+    .footer_div--info{
+        display: block;
+    }
+
+    .footer_div--rss{
+        display: block;
+    }
+
+
     .container--MQ{
 
         grid-template:

diff --git a/css/style.css b/css/style.css
@@ -115,7 +115,7 @@ body {
     /* Ajusta para centrar completamente */
     display: flex;
     justify-content: center;
-    z-index: 0;
+    z-index: 2000;
 }
 
 
@@ -326,6 +326,7 @@ body {
 .container_main,.container_main--index {
     top: 0;
     width: 100%;
+
 }
 
 .container_main--index {
@@ -458,7 +459,7 @@ body {
     padding: 20px;
     overflow: hidden;
     position: relative;
-    z-index: 0;
+    z-index: 1000;
     transition: 500ms;
 }
 
@@ -527,7 +528,7 @@ body {
     width: 1100px;
     margin: auto;
     position: relative;
-    top: -150px;
+    z-index: 10;
 }
 
 .main_container--1{
@@ -657,6 +658,8 @@ body {
 }
 
 .main_article--4--detalles{
+    display: flex;
+    justify-content: end;
     width: 300px;
     height: 450px;
     background-position-y: 0px;
@@ -812,6 +815,8 @@ body {
 
 /* FOOTER */
 
+
+
 .item_a--footer{
     text-decoration: none;
     color: #1f1f1f;
@@ -873,11 +878,11 @@ input[type="radio"]{
 .main_h2--Título {
     display: block;
     position: absolute;
-    left: 58%;
-    top: 300px;
+    left: -280px;
+    top: -70px;
     font-size: 6em;
-    animation: titulo 100s forwards;
-    animation-iteration-count: infinite;
+    animation: titulo 10s forwards;
+    animation-timing-function: linear;
     z-index: 20;
 }
 
@@ -888,10 +893,18 @@ input[type="radio"]{
     top: 470px;
     font-size: 1em;
     animation: titulo--h3 100s forwards;
-    animation-iteration-count: infinite;
     z-index: 20;
 }
 
+.main_h3--Título{
+    top: -30px;
+    font-size: 5em;
+    animation-duration: 23s;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+
+}
+
 .main_h4--Título{
     top: 720px;
     left: calc(58% + 140px);
@@ -919,4 +932,30 @@ input[type="radio"]{
 .main_p--subtitle{
     color: #1f1f1f;
     text-align: center;
+}
+
+/* MISCELACNEO */
+
+.main_div--animacionIndex{
+    width: 1200px;
+    height: 1000px;
+    position: absolute;
+    z-index: 700;
+    top: 0;
+}
+
+.main_div--overflowIndexChimenea,.main_div--overflowIndexChimenea--2{
+    position: absolute;
+    top: 163px;
+    left: 807px;
+    height: 138px;
+    width: 250px;
+    overflow: hidden;
+}
+
+.main_div--overflowIndexChimenea--2{
+    top: 350px;
+    left:  2px;
+    height: 400px;
+    width: 637px;
 }
diff --git a/index.html b/index.html
@@ -37,18 +37,34 @@
                 </div>
             </header>
 
-            <h2 class="main_h2--Título">Luxor</h2>
-            <h2 class="main_h3--Título">Seguridad, elegancia</h2>
-            <h2 class="main_h4--Título">Luxor, tu sitio de confianza.<br>Desde luxor nos esforzamos para crear<br>las mejores piezas para tu mejor estancia</h2>
+
+
 
 
 
             <main class="container_main--index">
+
+
+
+                <h2 class="main_h4--Título">Luxor, tu sitio de confianza.<br>Desde luxor nos esforzamos para crear<br>las mejores piezas para tu mejor estancia</h2>
                 <img class="main_img"
                     src="assets/img/iStock-1323313187_edit_expand_3 - copia.jpg"
                     alt srcset>
 
                 <!-- bajo de la portada -->
+
+                <div class="main_div--animacionIndex">
+                    <div class="main_div--overflowIndexChimenea">
+                        <h2 class="main_h2--Título">Luxor</h2>
+                    </div>
+                    <div class="main_div--overflowIndexChimenea--2">
+                        <h2 class="main_h3--Título">Seguridad, elegancia</h2>
+                    </div>
+                </div>
+
+
+
+
                 <div class="main_hr"></div>
 
                 <!-- Targetas -->

diff --git a/pages/articulo.html b/pages/articulo.html
@@ -28,7 +28,7 @@
 
         <section id="desplegable" class="section_desplegable">
             <ul class="header_list--desplegable">
-                <li class="list_item--desplegable"><a class="header_a--desplegable" href="#">Inicio</a></li>
+                <li class="list_item--desplegable"><a class="header_a--desplegable" href="../index.html">Inicio</a></li>
                 <li class="list_item--desplegable"><a class="header_a--desplegable"
                         href="pages/catalogo.html">Catálogo</a></li>
                 <li class="list_item--desplegable"><a class="header_a--desplegable"
@@ -53,7 +53,7 @@
                     <i id="toggleMenu" class="fas fa-bars div_i--menuIcono"></i>
                     <p class="header_a--rounded">LH</p>
                     <ul class="header_list">
-                        <li class="list_item"><a class="header_a" href="#">Inicio</a></li>
+                        <li class="list_item"><a class="header_a" href="../index.html">Inicio</a></li>
                         <li class="list_item"><a class="header_a"
                                 href="pages/catalogo.html">Catálogo</a></li>
                         <li class="list_item"><a class="header_a"
@@ -67,15 +67,20 @@
 
             <section class="container_carrusel">
                 <article class="main_article--4--detalles" >
-                    <div class="header_div--article">
-                        <p class="header_a--article">Colores disponibles</p>
-                    </div>
-                    <div class="header_div--articleColor--Blue">
-                    </div>
-                    <div class="header_div--articleColor--Black">
+
+                    <div class="article_div--complementosArticulo">
+                        <div class="header_div--article">
+                            <p class="header_a--article">Colores disponibles</p>
+                        </div>
+                        <div class="header_div--articleColor--Blue">
+                        </div>
+                        <div class="header_div--articleColor--Black">
+                        </div>
+                        <div class="header_div--articleColor--Beige">
+                        </div>  
                     </div>
-                    <div class="header_div--articleColor--Beige">
-                    </div>                    
+
+
                 </article>
             </section>
 
@@ -130,7 +135,7 @@
 
             <footer class="container__footer">
 
-                  <div>
+                  <div class="footer_div--info">
                     <p class="main_p--subtitle"><i>Envíos internacionales no disponibles</i></p>
                     <p class="main_p--subtitle"><i>Ubicación: Talavera de la Reina</i></p>
                     <p class="main_p--subtitle"><i>Contacto: <a href="mailto:luxor.mgmt@info.es" class="item_a--footer">luxor.mgmt@info.es</a></i></p>
@@ -145,7 +150,7 @@
                       </ul>
                   </div>
 
-                  <div>
+                  <div class="footer_div--rss">
                     <p class="main_p--subtitle"><i>Síguenos en redes sociales:</i></p>
                     <ul>
                       <li><a href="#" target="_blank" class="item_a--footer"><i class="fab fa-facebook"></i></a></li>