@ussebastian/kitdigital
Version:
Kit Digital de la Universidad San Sebastián
129 lines (113 loc) • 4.53 kB
HTML
<html>
<head>
<title>Kit Digital - Universidad San Sebastían</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/css/theme.css" rel="stylesheet" type="text/css" />
<link href="/css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="container my-80">
<div class="mb-12">
<h1>Default</h1>
<div class="flex flex-wrap gap-24 mb-12">
<!-- los <span> de ejemplo deben estar en un <div>, cuando se usa el tag <img> no hace falta -->
<div><span class="example-bg example-height aspect-ratio-1-1">1:1</span></div>
<div><span class="example-bg example-height aspect-ratio-4-3">4:3</span></div>
<div><span class="example-bg example-height aspect-ratio-3-2">3:2</span></div>
<div><span class="example-bg example-height aspect-ratio-16-9">16:9</span></div>
<div><span class="example-bg example-height aspect-ratio-2-1">2:1</span></div>
<div><span class="example-bg example-height aspect-ratio-21-9">21:9</span></div>
<!-- los <span> de ejemplo deben estar en un <div>, cuando se usa el tag <img> no hace falta -->
<div><span class="example-bg example-width aspect-ratio-1-1">1:1</span></div>
<div><span class="example-bg example-width aspect-ratio-3-4">3:4</span></div>
<div><span class="example-bg example-width aspect-ratio-2-3">2:3</span></div>
<div><span class="example-bg example-width aspect-ratio-9-16">9:16</span></div>
<div><span class="example-bg example-width aspect-ratio-1-2">1:2</span></div>
<div><span class="example-bg example-width aspect-ratio-9-21">9:21</span></div>
</div>
</div>
<div>
<h1>Change on Mobile</h1>
<div class="flex flex-wrap gap-24 mb-12">
<img
src="https://dummyimage.com/480x720/"
alt="dummyimage"
class="img-cover example-height aspect-ratio-1-1"
/>
<img
src="https://dummyimage.com/480x720/"
alt="dummyimage"
class="img-cover example-height aspect-ratio-1-1 aspect-ratio-md-4-3"
/>
<img
src="https://dummyimage.com/480x720/"
alt="dummyimage"
class="img-cover example-height aspect-ratio-1-1 aspect-ratio-md-3-2"
/>
<img
src="https://dummyimage.com/480x720/"
alt="dummyimage"
class="img-cover example-height aspect-ratio-1-1 aspect-ratio-md-16-9"
/>
<img
src="https://dummyimage.com/480x720/"
alt="dummyimage"
class="img-cover example-height aspect-ratio-1-1 aspect-ratio-md-2-1"
/>
<img
src="https://dummyimage.com/480x720/"
alt="dummyimage"
class="img-cover example-height aspect-ratio-1-1 aspect-ratio-md-21-9"
/>
<img
src="https://dummyimage.com/480x720/"
alt="dummyimage"
class="img-cover example-width aspect-ratio-1-1 aspect-ratio-md-3-4"
/>
<img
src="https://dummyimage.com/480x720/"
alt="dummyimage"
class="img-cover example-width aspect-ratio-1-1 aspect-ratio-md-2-3"
/>
<img
src="https://dummyimage.com/480x720/"
alt="dummyimage"
class="img-cover example-width aspect-ratio-1-1 aspect-ratio-md-9-16"
/>
<img
src="https://dummyimage.com/480x720/"
alt="dummyimage"
class="img-cover example-width aspect-ratio-1-1 aspect-ratio-md-1-2"
/>
<img
src="https://dummyimage.com/480x720/"
alt="dummyimage"
class="img-cover example-width aspect-ratio-1-1 aspect-ratio-md-9-21"
/>
</div>
</div>
</section>
<style>
/* for example-bging puposes */
:root {
--size: 210px;
}
.example-height {
height: var(--size);
}
.example-width {
width: var(--size);
}
.example-bg {
background-color: var(--surface-default);
color: var(--text-default);
display: grid;
place-items: center;
font-size: calc(var(--size) / 2);
}
</style>
<script src="/js/main.js" type="module"></script>
</body>
</html>