Arreglo de stickers en columns
This commit is contained in:
duncan
+28
-31
@@ -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 {
|
||||
|
||||
+61
-64
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+42
-17
@@ -136,15 +136,9 @@
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<section class="stickers d-flex justify-content-center align-items-center">
|
||||
<img src="assets/img/stickers/A3.png" alt="" class="a3">
|
||||
<img src="assets/img/stickers/acatlan-M.png" alt="" class="aM">
|
||||
<img src="assets/img/stickers/acatlan.png" alt="" class="a">
|
||||
<img src="assets/img/stickers/entrada.png" alt="" class="entrada">
|
||||
<img src="assets/img/stickers/fuente.png" alt="" class="fuente">
|
||||
<img src="assets/img/stickers/orgullo.png" alt="" class="orgullo">
|
||||
<img src="assets/img/stickers/piedra.png" alt="" class="piedra">
|
||||
<img src="assets/img/stickers/sorjuana.png" alt="" class="sorjuana">
|
||||
<section
|
||||
class="stickers d-flex justify-content-center align-items-center"
|
||||
>
|
||||
<div class="container cont-prin">
|
||||
<div class="section-h">
|
||||
<h2>
|
||||
@@ -154,19 +148,50 @@
|
||||
</div>
|
||||
<div class="content-stickers">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<a href="">
|
||||
<i class="bx bxs-folder-open"></i>
|
||||
</a>
|
||||
<p>Para abrir el paquete de stickers, necesitas esta aplicación.</p>
|
||||
<div class="col-12 col-md-6 position-relative d-flex flex-column justify-content-center align-items-center box">
|
||||
<img src="assets/img/stickers/A3.png" alt="" class="a3" />
|
||||
<img
|
||||
src="assets/img/stickers/acatlan-M.png"
|
||||
alt=""
|
||||
class="aM"
|
||||
/>
|
||||
<img src="assets/img/stickers/acatlan.png" alt="" class="a" />
|
||||
<img
|
||||
src="assets/img/stickers/entrada.png"
|
||||
alt=""
|
||||
class="entrada"
|
||||
/>
|
||||
<img
|
||||
src="assets/img/stickers/fuente.png"
|
||||
alt=""
|
||||
class="fuente"
|
||||
/>
|
||||
<img
|
||||
src="assets/img/stickers/orgullo.png"
|
||||
alt=""
|
||||
class="orgullo"
|
||||
/>
|
||||
<img
|
||||
src="assets/img/stickers/piedra.png"
|
||||
alt=""
|
||||
class="piedra"
|
||||
/>
|
||||
<img
|
||||
src="assets/img/stickers/sorjuana.png"
|
||||
alt=""
|
||||
class="sorjuana"
|
||||
/>
|
||||
<a href="https://www.acatlan.unam.mx/files/stickers/FES Acatlán.wastickers.zip"><i class="bx bxs-folder-open"></i></a>
|
||||
<a href="https://www.acatlan.unam.mx/files/stickers/FES Acatlán.wastickers.zip">Descarga</a>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<div class="col-12 col-md-6 d-flex flex-column">
|
||||
<p>
|
||||
Para abrir el paquete de stickers, necesitas esta aplicación.
|
||||
</p>
|
||||
<a
|
||||
href="https://itunes.apple.com/mx/app/sticker-maker-studio/id1443326857?mt=8"
|
||||
><img src="assets/img/stickers/image.jpeg" alt=""
|
||||
/></a>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<a
|
||||
href="https://play.google.com/store/apps/details?id=com.marsvard.stickermakerforwhatsapp"
|
||||
><img src="assets/img/stickers/imagePlaystore.jpeg" alt=""
|
||||
|
||||
Reference in New Issue
Block a user