-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (116 loc) · 6.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Courtyard</title>
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
main {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}
.__landing-combo {
border: 1px solid #eaeaea;
border-radius: 6px;
margin: 30px 0;
}
.__landing-combo > *:first-child {
margin: 0;
padding: 0 30px 20px 30px;
}
.__landing-combo > *:nth-child(2) {
margin: 0;
padding: 30px;
background-color: #eaeaea;
font-size: 15px;
color: rgb(65, 81, 112);
}
</style>
</head>
<body>
<main class="courtyard">
<h1>Courtyard</h1>
<p>Courtyard esta pensado como herramientas para el equipo académico para poder cargar contenido en playground con estilo y diseño.</p>
<div class="__landing-combo">
<div class="__seccion-titulo-parrafo">
<div class="__h2">Un título de prueba</div>
<p>He ocultado el DeLorean en la mina abandonada llamada “Delgado”, que está adyacente al cementerio, como lo muestra el mapa. Espero que pueda permanecer intacto hasta que tú lo descubras en 1955. Dentro, encontrarás instrucciones de reparación. Mi colega de 1955 –o sea, yo- no creo que tenga problemas al repararlo para que puedas volver al futuro. Cuando hayas regresado a 1985, destruye la máquina del tiempo.</p>
</div>
<div>
<pre style="white-space: pre-line; margin: 0">
<div class="__h2">Un título de prueba</div>
<p>He ocultado el DeLorean en la mina abandonada llamada “Delgado”, que está adyacente al cementerio, como lo muestra el mapa. Espero que pueda permanecer intacto hasta que tú lo descubras en 1955. Dentro, encontrarás instrucciones de reparación. Mi colega de 1955 –o sea, yo- no creo que tenga problemas al repararlo para que puedas volver al futuro. Cuando hayas regresado a 1985, destruye la máquina del tiempo.</p>
</pre>
</div>
</div>
<!-- MODULO DE CÓDIGO -->
<div class="__seccion-codigo">
<div class="__h2">Sección código</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione accusantium in, perferendis doloribus vero dolor illo architecto atque beatae eum?</p>
<div class="__wrapper-codigo"></div>
</div>
<div class="__seccion-tarjetas">
<div class="__h2">Sección tarjetas</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure temporibus architecto dignissimos eius aliquam, ad nisi animi accusamus debitis accusantium!</p>
<div class="__wrapper-tarjeta">
<img src="https://i.gyazo.com/6b7fcad86668fa7beb0c117333086743.png" alt="">
<div class="__combo-texto">
<div class="__h3">Marty Mcfly</div>
<small>marty@digitalhouse.com</small>
</div>
</div>
</div>
<div class="__seccion-check">
<div class="__h2">Seccion Checks</div>
<ul>
<li>Cómo maquetar una web</li>
<li>Cómo conquistar el mundo</li>
<li>Debbugear</li>
<li>Hacer panqueques</li>
<li>Hacer panqueques con helado</li>
</ul>
</div>
<div class="__seccion-dos-columnas">
<div class="__h2">Sección dos columnas</div>
<div class="__columna">
<div class="__h3">Título 1</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate adipisci, nesciunt non aperiam atque commodi.</p>
</div>
<div class="__columna">
<div class="__h3">Título 2</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet magnam repellat, corrupti voluptatibus dolor consequuntur!</p>
</div>
<div class="__columna">
<div class="__h3">Título 3</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet magnam repellat, corrupti voluptatibus dolor consequuntur!</p>
</div>
<div class="__columna">
<div class="__h3">Título 4</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet magnam repellat, corrupti voluptatibus dolor consequuntur!</p>
</div>
<div class="__columna">
<div class="__h3">Título 5</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet magnam repellat, corrupti voluptatibus dolor consequuntur!</p>
</div>
</div>
<div class="__h2 __emoji __fire">Lorem ipsum</div>
<div class="__h2 __emoji __movie-camera">Lorem ipsum</div>
<div class="__h2 __emoji __rocket">Lorem ipsum</div>
<div class="__quote __alerta">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat corrupti placeat dolorum impedit iste voluptatum cum officia. Iure, ullam perspiciatis.</p>
</div>
<div class="__quote __ok">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat corrupti placeat dolorum impedit iste voluptatum cum officia. Iure, ullam perspiciatis.</p>
</div>
<div class="__quote __cita">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat corrupti placeat dolorum impedit iste voluptatum cum officia. Iure, ullam perspiciatis.</p>
</div>
<div class="__quote __info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat corrupti placeat dolorum impedit iste voluptatum cum officia. Iure, ullam perspiciatis.</p>
</div>
</main>
</body>
</html>