Subir archivos a "/"
This commit is contained in:
+184
@@ -0,0 +1,184 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: Poppins, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #f2f5fb;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
height: 150px;
|
||||||
|
background: linear-gradient(135deg, #0047FF, #4C7DFF);
|
||||||
|
color: white;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 0 0 35px 35px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
header p {
|
||||||
|
opacity: .9;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
padding-bottom: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 22px;
|
||||||
|
padding: 18px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticket {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticket button {
|
||||||
|
background: #005CFF;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attractions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ride {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wait {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.green {
|
||||||
|
background: #2ecc71;
|
||||||
|
}
|
||||||
|
|
||||||
|
.orange {
|
||||||
|
background: #f39c12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
background: #e74c3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
height: 170px;
|
||||||
|
border-radius: 18px;
|
||||||
|
background: linear-gradient(45deg, #6BCB77, #4D96FF);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.restaurants {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.food {
|
||||||
|
background: #f8f8f8;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 18px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shows {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show {
|
||||||
|
background: #eef5ff;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 72px;
|
||||||
|
background: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 -5px 15px rgba(0, 0, 0, .12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom div {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom span {
|
||||||
|
font-size: 26px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(prefers-color-scheme:dark) {
|
||||||
|
body {
|
||||||
|
background: #151515;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.food {
|
||||||
|
background: #2d2d2d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.show {
|
||||||
|
background: #30364d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
background: #222;
|
||||||
|
}
|
||||||
|
}
|
||||||
+87
@@ -0,0 +1,87 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Sketaria World</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link href="/park/_style.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Sketaria World</h1>
|
||||||
|
<p>¡Bienvenido! Disfruta de la magia.</p>
|
||||||
|
</header>
|
||||||
|
<div class="container">
|
||||||
|
<div class="card ticket">
|
||||||
|
<div>
|
||||||
|
<h3>Entrada Digital</h3>
|
||||||
|
<p>3 Adultos</p>
|
||||||
|
</div>
|
||||||
|
<button>Mostrar</button>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="section-title">🎢 Atracciones</div>
|
||||||
|
<div class="attractions">
|
||||||
|
<div class="ride">
|
||||||
|
<div>
|
||||||
|
<strong>Space Adventure</strong>
|
||||||
|
<br>
|
||||||
|
<small>Montaña rusa</small>
|
||||||
|
</div>
|
||||||
|
<div class="wait green"> 10 min </div>
|
||||||
|
</div>
|
||||||
|
<div class="ride">
|
||||||
|
<div>
|
||||||
|
<strong>Piratas</strong>
|
||||||
|
<br>
|
||||||
|
<small>Paseo en barco</small>
|
||||||
|
</div>
|
||||||
|
<div class="wait orange"> 35 min </div>
|
||||||
|
</div>
|
||||||
|
<div class="ride">
|
||||||
|
<div>
|
||||||
|
<strong>Big Thunder</strong>
|
||||||
|
<br>
|
||||||
|
<small>Montaña minera</small>
|
||||||
|
</div>
|
||||||
|
<div class="wait red"> 70 min </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="section-title">🍔 Restaurantes</div>
|
||||||
|
<div class="restaurants">
|
||||||
|
<div class="food"> 🍕 <br> Pizza </div>
|
||||||
|
<div class="food"> 🍔 <br> Burger </div>
|
||||||
|
<div class="food"> 🥗 <br> Healthy </div>
|
||||||
|
<div class="food"> 🍦 <br> Ice Cream </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="section-title">🎆 Espectáculos</div>
|
||||||
|
<div class="shows">
|
||||||
|
<div class="show"> ✨ Desfile <br> 15:30 </div>
|
||||||
|
<div class="show"> 🎇 Show Nocturno <br> 22:00 </div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div>
|
||||||
|
<span>🏠</span> Inicio
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>🗺</span> Mapa
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>🎢</span> Atracciones
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>🎟</span> Entradas
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>👤</span> Perfil
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user