agregar cosas
This commit is contained in:
parent
8e177e4426
commit
0a3ceb421b
2 changed files with 157 additions and 5 deletions
160
src/index.html
160
src/index.html
|
|
@ -10,17 +10,167 @@
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="w-100 sticky top-0 bg-blanco px-16 py-8">asdf</nav>
|
<nav class="sticky top-0 w-full bg-blanco px-16 py-4">asdf</nav>
|
||||||
<section class="h-screen">
|
<section class="h-screen">
|
||||||
<div class="flex h-full">
|
<div class="flex h-full">
|
||||||
<div class="h-full flex-1 bg-naranja">asdf</div>
|
<div class="h-full flex-1 bg-naranja">asdf</div>
|
||||||
<div class="h-full flex-1 bg-celeste">asd</div>
|
<div class="h-full flex-1 bg-celeste">asd</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="bg-blanco p-8">
|
<section class="min-h-screen bg-blanco p-32">
|
||||||
<h2 class="text-center text-5xl font-bold">Nuevos saberes</h2>
|
<div class="mb-4 flex justify-center gap-4">
|
||||||
<div class="flex">
|
<img class="aspect-[1.3] w-1/3" src="tmp_imagen_roja.png" />
|
||||||
<div class="border-l-black flex-1 border-l"></div>
|
<img class="aspect-[1.3] w-1/3" src="tmp_imagen_violeta.png" />
|
||||||
|
</div>
|
||||||
|
<img
|
||||||
|
class="mx-auto aspect-[1.94] w-5/12 object-contain"
|
||||||
|
src="tmp_imagen_azul.png"
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
<section class="min-h-screen bg-blanco p-8">
|
||||||
|
<h2 class="pb-8 text-center text-5xl font-bold">Nuevos saberes</h2>
|
||||||
|
<div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<div class="border-current flex-1 border-l px-6 py-6">
|
||||||
|
<h3 class="pb-4 font-mono text-2xl italic">01_</h3>
|
||||||
|
<h3 class="pb-4 text-2xl font-bold">Alfabetizaciones fusionadas</h3>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, eos
|
||||||
|
ducimus. Expedita, illo labore veniam fugit laborum obcaecati magnam
|
||||||
|
sapiente corporis delectus excepturi aspernatur reiciendis est
|
||||||
|
eveniet atque aut dignissimos?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-current flex-1 border-l px-6 py-6">
|
||||||
|
<h3 class="pb-4 font-mono text-2xl italic">02_</h3>
|
||||||
|
<h3 class="pb-4 text-2xl font-bold">Aprendizajes híbridos</h3>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ad
|
||||||
|
optio mollitia, odit eum blanditiis vitae ab explicabo nobis
|
||||||
|
deserunt sunt, assumenda, repellat nostrum culpa delectus excepturi
|
||||||
|
ratione voluptatibus molestiae.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-current flex-1 border-l px-6 py-6">
|
||||||
|
<h3 class="pb-4 font-mono text-2xl italic">03_</h3>
|
||||||
|
<h3 class="pb-4 text-2xl font-bold">Orientaciones computacionales</h3>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis
|
||||||
|
modi consectetur repellendus a sed explicabo, voluptates alias
|
||||||
|
maiores tenetur non atque et sequi! Velit obcaecati sapiente earum
|
||||||
|
fugiat ipsa sint.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="border-current flex-1 border-l px-6 py-6">
|
||||||
|
<h3 class="pb-4 font-mono text-2xl italic">04_</h3>
|
||||||
|
<h3 class="pb-4 text-2xl font-bold">Tecnopedagogía</h3>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
|
||||||
|
iste modi iusto temporibus fugit aliquid alias eos, ullam officia
|
||||||
|
optio voluptatem praesentium sed omnis, et quia. Saepe voluptatibus
|
||||||
|
qui repudiandae.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="flex min-h-screen place-content-center bg-blanco">
|
||||||
|
<div class="grid grid-cols-1 place-content-center xl:grid-cols-2">
|
||||||
|
<div class="grid lg:grid-cols-2">
|
||||||
|
<div
|
||||||
|
class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll bg-celeste"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll p-8"
|
||||||
|
>
|
||||||
|
<h2 class="mb-4 text-4xl">Datos</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||||
|
Temporibus, molestiae provident eum nam labore quam, magnam illo
|
||||||
|
ex doloribus amet nisi praesentium aperiam aliquid. Atque nostrum
|
||||||
|
iste iusto tempore quae.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid lg:grid-cols-2">
|
||||||
|
<div
|
||||||
|
class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll bg-amarillo lg:order-last xl:order-none"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll p-8"
|
||||||
|
>
|
||||||
|
<h2 class="mb-4 text-4xl">Datos</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||||
|
Temporibus, molestiae provident eum nam labore quam, magnam illo
|
||||||
|
ex doloribus amet nisi praesentium aperiam aliquid. Atque nostrum
|
||||||
|
iste iusto tempore quae.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid lg:grid-cols-2">
|
||||||
|
<div
|
||||||
|
class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll bg-naranja xl:order-last"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll p-8"
|
||||||
|
>
|
||||||
|
<h2 class="mb-4 text-4xl">Datos</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||||
|
Temporibus, molestiae provident eum nam labore quam, magnam illo
|
||||||
|
ex doloribus amet nisi praesentium aperiam aliquid. Atque nostrum
|
||||||
|
iste iusto tempore quae.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid lg:grid-cols-2">
|
||||||
|
<div
|
||||||
|
class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll bg-violeta lg:order-last"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll p-8"
|
||||||
|
>
|
||||||
|
<h2 class="mb-4 text-4xl">Datos</h2>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||||
|
Temporibus, molestiae provident eum nam labore quam, magnam illo
|
||||||
|
ex doloribus amet nisi praesentium aperiam aliquid. Atque nostrum
|
||||||
|
iste iusto tempore quae.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section
|
||||||
|
class="grid min-h-screen grid-rows-1 items-end bg-[black] text-[white] lg:grid-cols-4"
|
||||||
|
>
|
||||||
|
<div class="col-span-3 flex h-full flex-col justify-end p-4">
|
||||||
|
<h2 class="mb-4 mt-16 font-mono text-3xl">
|
||||||
|
<strong>Caso:</strong><br />
|
||||||
|
Nuestra Señora del Rosario
|
||||||
|
</h2>
|
||||||
|
<iframe
|
||||||
|
class="aspect-video w-full"
|
||||||
|
src="https://www.youtube-nocookie.com/embed/NsT30qGayP4"
|
||||||
|
title="YouTube video player"
|
||||||
|
frameborder="0"
|
||||||
|
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
|
allowfullscreen
|
||||||
|
></iframe>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-start gap-4 p-4">
|
||||||
|
<p class="text-xl">
|
||||||
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
|
||||||
|
labore repellat delectus aliquam soluta dolore officia consectetur ab
|
||||||
|
quos quaerat, maiores earum molestiae assumenda, praesentium nemo
|
||||||
|
commodi repellendus iusto dolorum!
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
class="border border-[white] bg-[black] p-3 font-mono text-xl font-bold uppercase"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
href="https://www.youtube.com/watch?v=NsT30qGayP4"
|
||||||
|
>VER +</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,8 @@ module.exports = {
|
||||||
blanco: "#fff5e8",
|
blanco: "#fff5e8",
|
||||||
naranja: "#ff4e1f",
|
naranja: "#ff4e1f",
|
||||||
celeste: "#b9d7ea",
|
celeste: "#b9d7ea",
|
||||||
|
amarillo: "#f9af39",
|
||||||
|
violeta: "#dda7dd",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
|
|
|
||||||
Reference in a new issue