diff --git a/assets/css/main.css b/assets/css/main.css index 8a0308d..6b3ae07 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,6 +1,6 @@ -/* body { - background-color: bisque; -} */ +body { + overflow: hidden; +} /* Sección de la portada */ #port { position: relative; @@ -237,85 +237,77 @@ section .section-h h2:after { justify-content: center; align-items: center; } -.stickers > .a3 { +.stickers .a3 { position: absolute; top: 0; left: 0; z-index: -10; - width: 150px; + width: 15%; transform: rotate(-30deg); } -.stickers > .aM { +.stickers .aM { position: absolute; top: 10; right: 0; z-index: -10; - width: 125px; + width: 12.5%; transform: rotate(30deg); } -.stickers > .a { +.stickers .a { position: absolute; top: 50%; left: 80%; z-index: -10; - width: 80px; + width: 8%; transform: rotate(45deg); } -.stickers > .entrada { +.stickers .entrada { position: absolute; bottom: 40%; left: 15%; z-index: -10; - width: 90px; + width: 9%; transform: rotate(-30deg); } -.stickers > .fuente { +.stickers .fuente { position: absolute; top: 30%; left: 65%; z-index: -10; - width: 70px; + width: 7%; transform: rotate(35deg); } -.stickers > .orgullo { +.stickers .orgullo { position: absolute; bottom: -10%; right: 10%; z-index: -10; - width: 200px; + width: 20%; } -.stickers > .piedra { +.stickers .piedra { position: absolute; bottom: 0; left: 5%; z-index: -10; - width: 200px; + width: 20%; transform: rotate(-25deg); } -.stickers > .sorjuana { +.stickers .sorjuana { position: absolute; top: 10%; left: 45%; z-index: -10; - width: 210px; + width: 21%; } .stickers .content-stickers .row { position: relative; } -.stickers .content-stickers a { - margin: 10px 10px; -} -.stickers .content-stickers a i { +.stickers .content-stickers i { font-size: 80px; color: #1e3c70; - transition: 0.5s; } -.stickers .content-stickers a i:hover { - transform: translate(10px, -10px); - box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4); - -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4); - -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4); - border-radius: 5px; +.stickers .content-stickers a { + margin: 10px 10px; } .stickers .content-stickers a img { border-radius: 50px; @@ -327,7 +319,12 @@ section .section-h h2:after { } .stickers .content-stickers p { color: #1e3c70; - /* filter: blur(-10px); */ + font-size: x-large; +} +.stickers .content-stickers .box { + box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.205); + border-radius: 5px; + overflow: hidden; } /* section logotipos */ .logotipos { diff --git a/assets/css/main.less b/assets/css/main.less index b484af4..526f482 100644 --- a/assets/css/main.less +++ b/assets/css/main.less @@ -1,6 +1,6 @@ -/* body { - background-color: bisque; -} */ +body { + overflow: hidden; +} /* Sección de la portada */ @@ -263,102 +263,99 @@ section { /* section para sticker */ .stickers { - position: relative; - min-height: 80vh; + position: relative; + min-height: 80vh; justify-content: center; align-items: center; - >.a3 { - position: absolute; - top: 0; - left: 0; + .a3 { + position: absolute; + top: 0; + left: 0; z-index: -10; - width: 150px; + width: 15%; transform: rotate(-30deg); } - >.aM { - position: absolute; - top: 10; - right: 0; + .aM { + position: absolute; + top: 10; + right: 0; z-index: -10; - width: 125px; + width: 12.5%; transform: rotate(30deg); } - >.a { - position: absolute; - top: 50%; - left: 80%; + .a { + position: absolute; + top: 50%; + left: 80%; z-index: -10; - width: 80px; + width: 8%; transform: rotate(45deg); } - >.entrada { - position: absolute; - bottom: 40%; - left: 15%; + .entrada { + position: absolute; + bottom: 40%; + left: 15%; z-index: -10; - width: 90px; + width: 9%; transform: rotate(-30deg); } - >.fuente { - position: absolute; - top: 30%; - left: 65%; + .fuente { + position: absolute; + top: 30%; + left: 65%; z-index: -10; - width: 70px; + width: 7%; transform: rotate(35deg); } - >.orgullo { - position: absolute; - bottom: -10%; - right: 10%; + .orgullo { + position: absolute; + bottom: -10%; + right: 10%; z-index: -10; - width: 200px; - } - >.piedra { - position: absolute; - bottom: 0; - left: 5%; + width: 20%; + } + .piedra { + position: absolute; + bottom: 0; + left: 5%; z-index: -10; - width: 200px; + width: 20%; transform: rotate(-25deg); - } - >.sorjuana { - position: absolute; - top: 10%; - left:45%; + } + .sorjuana { + position: absolute; + top: 10%; + left: 45%; z-index: -10; - width: 210px; - } + width: 21%; + } .content-stickers { .row { position: relative; } + i { + font-size: 80px; + color: #1e3c70; + } a { margin: 10px 10px; - i { - font-size: 80px; - color: #1e3c70; - transition: 0.5s; - &:hover { - transform: translate(10px, -10px); - box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4); - -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4); - -moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4); - border-radius: 5px; - } - } img { border-radius: 50px; margin: 10px 5px; transition: 0.5s; &:hover { - transform: translate(10px, -10px) + transform: translate(10px, -10px); } } - } + } p { - color: #1e3c70; - /* filter: blur(-10px); */ + color: #1e3c70; + font-size: x-large; + } + .box { + box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.205); + border-radius: 5px; + overflow: hidden; } } } diff --git a/stickers.html b/stickers.html index 1f9b1fd..eba4b6f 100644 --- a/stickers.html +++ b/stickers.html @@ -136,15 +136,9 @@
-
- - - - - - - - +

@@ -154,19 +148,50 @@

-
- - - -

Para abrir el paquete de stickers, necesitas esta aplicación.

+
+ + + + + + + + + + Descarga
-
+
+

+ Para abrir el paquete de stickers, necesitas esta aplicación. +

-
-