diff --git a/assets/founts/UnscreenMK.ttf b/assets/founts/UnscreenMK.ttf new file mode 100644 index 0000000..08ec150 Binary files /dev/null and b/assets/founts/UnscreenMK.ttf differ diff --git a/css/animations.css b/css/animations.css index d55a16d..1513887 100644 --- a/css/animations.css +++ b/css/animations.css @@ -10,6 +10,36 @@ } } +@keyframes titulo--h3 { + 0%{ + transform: translate(0px, 0px); + } + 50%{ + transform: translate(60px, 90px); + } + 100%{ + transform: translate(0px, 0px); + } +} + +@keyframes titulo--h4 { + 0%{ + transform: translateX(0px); + } + 50%{ + transform: translateX(-200px); + } +} + +@keyframes blackFriday--banner { + 0%{ + transform: translateX(-300px); + } + 50%{ + transform: translateX(-2000px); + } +} + @keyframes slideContainer { 0%{ transform: translateY(0px); diff --git a/css/style.css b/css/style.css index 3edce06..4066c79 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,8 @@ +@font-face { + font-family: UnscreenMK; + src: url('../assets/founts/UnscreenMK.ttf'); +} + * { box-sizing: border-box; } @@ -54,6 +59,12 @@ body { background-color: rgb(236, 236, 236); } +.container--index{ + width: 1200px; + margin: auto; +} + + .container--noMQ{ margin: auto; max-width: 1200px; @@ -304,16 +315,30 @@ body { text-decoration: none; } + + + /* INTENTO ANIMAR CON EL BOTON INICAR SESION */ /* MAIN */ -.container_main { +.container_main,.container_main--index { top: 0; width: 100%; } +.container_main--index { + margin: auto; + border-radius: 10px; + margin-top: 5px; +} + +.main_img{ + border-radius: 10px; + +} + .container_main--1{ background-image: url(svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyYWRpYWxHcmFkaWVudCBpZD0iZyI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWYxZjFmIi8+PHN0b3Agb2Zmc2V0PSIwLjg4IiBzdG9wLWNvbG9yPSIjNDc0NzQ3Ii8+PC9yYWRpYWxHcmFkaWVudD48cmVjdCB4PSIwJSIgeT0iMCUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM0NzQ3NDciIC8+PHJlY3QgeD0iLTEwMCUiIHk9Ii0xNDcuODQ0OCUiIHdpZHRoPSIyMDAlIiBoZWlnaHQ9IjI5NS42ODk3JSIgZmlsbD0idXJsKCNnKSIgLz48L3N2Zz4=); @@ -533,10 +558,15 @@ body { .main_article--1, .main_article--2, .main_article--3, .main_article--4, .main_article--5, .main_article--6, .main_article--4--detalles{ display: flex; align-items: end; - padding-bottom: 10px; - padding-left: 10px; + display: flex; + flex-direction: column; + align-items: start; + justify-content: space-between; + padding: 10px; } +/* CADA ARTÍCULO */ + .main_article--1{ background-image: url(../assets/img/lampara-de-pie-en-ceramica-warwick.webp); } @@ -544,6 +574,21 @@ body { animation: articlesUrl--1 infinite 5s; } +.main_article--1:hover::before { + opacity: 0; +} + +.main_article--1::before{ + content: "PVP: 29,99€ \A LÁMPARA DE PIE WARWICK"; + white-space: pre; + color: black; + font-size: 15px; + font-weight: 500; + text-shadow: 0 0 5px#1f1f1f1a; + opacity: 1; + transition: 1s all; +} + .main_article--2{ background-image: url(../assets/img/sillon-en-chenilla-nicxon\ \(1\).webp); } @@ -551,6 +596,22 @@ body { animation: articlesUrl--2 infinite 5s; } +.main_article--2:hover::before { + opacity: 0; +} + +.main_article--2::before{ + content: "PVP: 79,99€ \A SILLA CÓMODA CON TEXTURA SEDA"; + white-space: pre; + color: black; + font-size: 15px; + font-weight: 500; + text-shadow: 0 0 5px#1f1f1f1a; + opacity: 1; + transition: 1s all; +} + + .main_article--3{ background-image: url(../assets/img/sillon-colgante-en-ratan-taveira.webp); } @@ -558,6 +619,21 @@ body { animation: articlesUrl--3 infinite 5s; } +.main_article--3:hover::before { + opacity: 0; +} + +.main_article--3::before{ + content: "PVP: 56,99€ \A SILLÍN COLGANTE"; + white-space: pre; + color: black; + font-size: 15px; + font-weight: 500; + text-shadow: 0 0 5px#1f1f1f1a; + opacity: 1; + transition: 1s all; +} + .main_article--4, .main_article--4--detalles{ background-image: url(../assets/img/cojin-para-sofa-modular-en-algodon-dhel.webp); } @@ -565,6 +641,21 @@ body { animation: articlesUrl--4 infinite 5s; } +.main_article--4:hover::before { + opacity: 0; +} + +.main_article--4::before{ + content: "PVP: 78,99€ \A COJÍN PARA SOFÁ HECHO DE SEDA A MANO"; + white-space: pre; + color: black; + font-size: 15px; + font-weight: 500; + text-shadow: 0 0 5px#1f1f1f1a; + opacity: 1; + transition: 1s all; +} + .main_article--4--detalles{ width: 300px; height: 450px; @@ -582,6 +673,21 @@ body { animation: articlesUrl--5 infinite 5s; } +.main_article--5:hover::before { + opacity: 0; +} + +.main_article--5::before{ + content: "PVP: 14,99€ \A DECORACIÓN SUREÑA COLGABLE"; + white-space: pre; + color: black; + font-size: 15px; + font-weight: 500; + text-shadow: 0 0 5px#1f1f1f1a; + opacity: 1; + transition: 1s all; +} + .main_article--6{ background-image: url(../assets/img/figura-decorativa-en-mdf-adara.webp); } @@ -589,7 +695,24 @@ body { animation: articlesUrl--6 infinite 5s; } +.main_article--6:hover::before { + opacity: 0; +} +.main_article--6::before{ + content: "PVP: 9,99€ \A DECORACIÓN PARA SOBREMESA"; + white-space: pre; + color: black; + font-size: 15px; + font-weight: 500; + text-shadow: 0 0 5px#1f1f1f1a; + opacity: 1; + transition: 1s all; +} + +.article_div--complementosArticulo{ + display: flex; +} .article_img{ width: 100%; @@ -706,9 +829,7 @@ body { border-radius: 10px; box-shadow: 0 0 6px #18181852; } - - -/* TEXTO */ +/* FORM */ form{ display: flex; @@ -716,6 +837,24 @@ form{ align-items: center; } +/* TEXTO */ +.section_p--banner{ + font-family: 'UnscreenMK', sans-serif; + color: yellow; + font-size: 35px; + position: relative; + left: 1200px; + z-index: 50; + animation: blackFriday--banner; + animation-duration: 70s; + animation-delay: -5s; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-direction: normal; + padding-bottom: 5px; + text-shadow: 0 0 40px rgb(255, 255, 0); +} + input[type="radio"]{ border: none !important; /* NO FUNCIONA */ } @@ -732,27 +871,35 @@ input[type="radio"]{ } .main_h2--Título { - display: none; + display: block; position: absolute; left: 58%; top: 300px; font-size: 6em; - animation: titulo 70s forwards; + animation: titulo 100s forwards; animation-iteration-count: infinite; z-index: 20; } -.main_h3--Título { - display: none; +.main_h3--Título, .main_h4--Título{ + display: block; position: absolute; - left: 58%; - top: 300px; + left: calc(58% + 7px); + top: 470px; font-size: 1em; - /*animation: titulo 70s forwards; - animation-iteration-count: infinite;*/ + animation: titulo--h3 100s forwards; + animation-iteration-count: infinite; z-index: 20; } +.main_h4--Título{ + top: 720px; + left: calc(58% + 140px); + animation: titulo--h4 60s forwards; + animation-delay: 30s; + animation-iteration-count: infinite; +} + .div_p--presentación, .div_p--presentaciónBoton{ color: rgb(65, 65, 65); font-size: 2em; diff --git a/index.html b/index.html index 22eccfb..67451db 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@
-
+

LH

@@ -37,7 +37,13 @@
-
+

Luxor

+

Seguridad, elegancia

+

Luxor, tu sitio de confianza.
Desde luxor nos esforzamos para crear
las mejores piezas para tu mejor estancia

+ + + +
@@ -60,9 +66,35 @@
-
diff --git a/pages/articulo.html b/pages/articulo.html index ad2c576..a42a0fc 100644 --- a/pages/articulo.html +++ b/pages/articulo.html @@ -46,12 +46,8 @@
- -
- -
@@ -134,7 +130,6 @@
diff --git a/pages/login.html b/pages/login.html index d8d8a14..8f71ca6 100644 --- a/pages/login.html +++ b/pages/login.html @@ -77,7 +77,34 @@
-
+ +
+

Envíos internacionales no disponibles

+

Ubicación: Talavera de la Reina

+

Contacto: luxor.mgmt@info.es

+
+ +
+ +
+ +
+

Síguenos en redes sociales:

+
    +
    • +
    • +
    • +
+
+ + + +