tachyons/index.html

439 lines
22 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
</title>
2023-07-12 21:13:05 +00:00
<meta name="author" content="mrmrs">
<meta name="description" content="Tachyons stuff">
<meta name="viewport" content="width=device-width, initial-scale=1">
2023-07-12 21:13:05 +00:00
<link rel="stylesheet" href="./css/tachyons.min.css">
</head>
2023-07-12 21:13:05 +00:00
<body>
<header class='bb flex justify-between items-center'>
<a href="#0" class='link br p3 flex gray-0 fw9'>Tachyons</a>
<nav class='flex mr3'>
</nav>
</header>
<main>
<article class='p3 tc'>
<header class='p6'>
<article class='f3 dif justify-center g3 items-center gray-3 py2 px3 br9 shadow-border-solid'><p class='my0'>An inline notification that can be centered or not</p><a href="#0" class='link indigo-4 fw7'>Learn more</a></article>
<h2 class='tc f8 lh-solid my3 fw9 measure'>The fastest and lightest way to style the web</h2>
<p class='measure lh-copy f5 gray-4 center'>
Start building with Tachyons today. Use one of many off the shelf themes or bring your own variables to the party.
</p>
<footer class='flex items-center justify-center g4 mt4'>
<a class='f3 fw7 link bg-indigo-5 indigo-11 px3 py3 lh-copy br2' href='#0'>Get started</a>
<a class='f3 fw7 link indigo-4' href='#0'>Learn more &rarr;</a>
</footer>
</header>
</article>
<article class='grid g3 p3 cols-3'>
<a href="#0" class='db link gray-0 overflow-hidden br4 shadow shadow-hover'>
<img src='https://mrmrs.github.io/photos/u/049.jpg' />
<section class='p4'>
<h4 class='f6 fw9 my2'>Card title example</h4>
<p class='gray-5 lh-copy'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</section>
</a>
<a href="#0" class='db link gray-0 br4 overflow-hidden shadow shadow-hover'>
<img src='https://mrmrs.github.io/photos/v/044.jpg' />
<section class='p4'>
<h4 class='f6 fw9 my2'>Card title example</h4>
<p class='gray-5 lh-copy'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</section>
</a>
<a href="#0" class='db link gray-0 br4 overflow-hidden shadow shadow-hover'>
2023-07-12 21:13:05 +00:00
<img src='https://mrmrs.github.io/photos/u/053.jpg' />
<section class='p4'>
<h4 class='f6 fw9 my2'>Card title example</h4>
<p class='gray-5 lh-copy'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</section>
</a>
</article>
<article class='flex g5 m4'>
<dl class='flex flex-column-reverse'>
<dt class='gray-4'>A definition term</dt>
<dd class='m0 f7 fw7'>Description</dd>
</dl>
<dl class='flex flex-column-reverse'>
<dt class='gray-4'>GitHub Stars</dt>
<dd class='m0 f7 fw7'>11.4k+</dd>
</dl>
<dl class='flex flex-column-reverse'>
<dt class='gray-4'>File Size</dt>
<dd class='m0 f7 fw7'>24kb</dd>
</dl>
<dl class='flex flex-column-reverse'>
<dt class='gray-4'>Amazing Colors</dt>
<dd class='m0 f7 fw7'>144</dd>
</dl>
<dl class='flex flex-column-reverse'>
<dt class='gray-4'>Configurability</dt>
<dd class='m0 f7 fw7'>100%</dd>
</dl>
<dl class='flex flex-column-reverse'>
<dt class='gray-4'>Possible designs</dt>
<dd class='m0 f7 fw7'>Inifinite</dd>
</dl>
</article>
<article class='p3'>
<article class='f2 flex items-center indigo-4 bg-indigo-11 py3 px3 br9 shadow-border-solid'><p class='mx2 my0'>An alert banner for a new feature or notification</p><a href="#0" class='link indigo-4 fw7'>Learn more</a></article>
</article>
<article class='grid cols-3 g3 p3'>
<article class='shadow bg-blue-4 blue-11 p4 br4 flex g5 items-center justify-between'>
<div>
<h3 class='f6 fw9 my2'>This is a banner title</h3>
<p class='f3 lh-copy measure indigo-9'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</div>
2023-07-12 21:13:05 +00:00
<a href="#0" class='f2 link indigo-11 px4 py3 ba br3 nowrap'>Click here</a>
</article>
<article class='shadow gradient-1 violet-11 p4 br4 flex g5 items-center justify-between' style='--gradient-color-1: var(--blue-0); --gradient-color-2: var(--violet-4)'>
<div>
<h3 class='f6 fw9 my2'>This is a banner title</h3>
<p class='f3 lh-copy measure violet-9'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</div>
2023-07-12 21:13:05 +00:00
<a href="#0" class='f2 link indigo-11 px4 py3 ba br3 nowrap'>Click here</a>
</article>
2023-07-12 21:13:05 +00:00
<article style='--gradient-color-1: var(--blue-10); --gradient-color-2: var(--magenta-11)' class='shadow gradient-1 indigo-3 p4 br4 flex g5 items-center justify-between'>
<div>
<h3 class='f6 fw9 my2'>This is a banner title</h3>
<p class='f3 lh-copy measure indigo-4'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</div>
2023-07-12 21:13:05 +00:00
<a href="#0" class='f2 link indigo-3 px4 py3 ba br3 nowrap'>Click here</a>
</article>
</article>
<article class='p3'>
<article style='--gradient-degree: 180deg; --gradient-color-1: var(--blue-0); --gradient-color-2: var(--violet-4);' class='shadow gradient-1 indigo-11 py6 br5 items-center justify-between'>
<h3 class='f7 fw9 my2 tc'>CSS Variables are the future</h3>
<p class='fw4 f5 lh-copy measure-narrow tc center'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
</p>
<div class='tc mt4'>
<a href="#0" class='f3 fw7 link lh-copy bg-indigo-11 px3 py2 ba br3 nowrap'>Click here</a>
<a href="#0" class='f3 fw7 link lh-copy indigo-11 px3 py2 br3 nowrap'>Learn more &rarr;</a>
</div>
2023-07-12 21:13:05 +00:00
</article>
</article>
<article class='p3'>
<article class='grid cols-2'>
<div style='background: url(https://mrmrs.github.io/photos/u/035.jpg);' class='br4 aspect-ratio-16x9'>
</div>
<div class='bg-white pl5 flex flex-column justify-center'>
<h3 class='f7 fw9 mt0 mb3'>A large section panel title</h3>
<p class='measure lh-copy'>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div class='mt4'>
<a href="#0" class='f3 fw7 link lh-copy indigo-0 px3 py2 ba br3 nowrap'>Click here</a>
<a href="#0" class='f3 fw7 link lh-copy indigo-0 px3 py2 br3 nowrap'>Learn more &rarr;</a>
</div>
</div>
</article>
2023-07-12 21:13:05 +00:00
</article>
</main>
<section>
<article class='flex items-center g3 p3'>
<img src='https://dc28c2r6oodom.cloudfront.net/avatars/11.jpg' class='br10 db aspect--1x1 w4' />
<img src='https://dc28c2r6oodom.cloudfront.net/avatars/11.jpg' class='br10 db aspect--1x1 w3' />
<img src='https://dc28c2r6oodom.cloudfront.net/avatars/11.jpg' class='br10 db aspect--1x1 w2' />
</article>
<article class='grid g3 p3'>
<label>
<span class='db'>Label</span>
<input type='text' />
</label>
<label>
<span class='db'>Password</span>
<input type='password' />
</label>
</article>
</section>
<section class='grid cols-6 g4 m4' style='display: none;'>
<h4 class='m0 col-6'>Box Shadows</h4>
<div class='br4 p6 shadow-6'></div>
<div class='br4 p6 shadow-2'></div>
<div class='br4 p6 shadow-3'></div>
<div class='br4 p6 shadow-4'></div>
<div class='br4 p6 shadow-5'></div>
<div class='br4 p6 shadow-6'></div>
<div class='br4 p6 shadow-7'></div>
<div class='br4 p6 shadow-8'></div>
<div class='br4 p6 shadow-9'></div>
<div class='br4 p6 shadow-60'></div>
<div class='br4 p6 shadow-61'></div>
<div class='br4 p6 shadow-62'></div>
</section>
<section class='grid cols-6 g4 m4' style='display: none;'>
<h4 class='m0 col-6'>Gradients</h4>
<div class='br4 p6 gradient-1'></div>
<div class='br4 p6 gradient-2'></div>
<div style='--gradient-degree: 0' class='br4 p6 gradient-3'></div>
<div class='br4 p6 gradient-4'></div>
<div class='br4 p6 gradient-5'></div>
<div class='br4 p6 gradient-6'></div>
<div class='br4 p6 gradient-7'></div>
<div class='br4 p6 gradient-8'></div>
<div class='br4 p6 gradient-9'></div>
<div class='br4 p6 gradient-10'></div>
<div class='br4 p6 gradient-11'></div>
<div class='br4 p6 gradient-12'></div>
<div class='br4 p6 gradient-13'></div>
<div class='br4 p6 gradient-14'></div>
<div class='br4 p6 gradient-15'></div>
<div class='br4 p6 gradient-16'></div>
</section>
<section class='flex flex-wrap g3 px3 py4'>
<article class='flex g1'>
<div class='bg-green-0 h1 w1 p2 br10'></div>
<div class='bg-green-1 h1 w1 p2 br10'></div>
<div class='bg-green-2 h1 w1 p2 br10'></div>
<div class='bg-green-3 h1 w1 p2 br10'></div>
<div class='bg-green-4 h1 w1 p2 br10'></div>
<div class='bg-green-5 h1 w1 p2 br10'></div>
<div class='bg-green-6 h1 w1 p2 br10'></div>
<div class='bg-green-7 h1 w1 p2 br10'></div>
<div class='bg-green-8 h1 w1 p2 br10'></div>
<div class='bg-green-9 h1 w1 p2 br10'></div>
<div class='bg-green-10 h1 w1 p2 br10'></div>
<div class='bg-green-11 h1 w1 p2 br10'></div>
</article><article class='flex g1'>
<div class='bg-teal-0 h1 w1 p2 br10'></div>
<div class='bg-teal-1 h1 w1 p2 br10'></div>
<div class='bg-teal-2 h1 w1 p2 br10'></div>
<div class='bg-teal-3 h1 w1 p2 br10'></div>
<div class='bg-teal-4 h1 w1 p2 br10'></div>
<div class='bg-teal-5 h1 w1 p2 br10'></div>
<div class='bg-teal-6 h1 w1 p2 br10'></div>
<div class='bg-teal-7 h1 w1 p2 br10'></div>
<div class='bg-teal-8 h1 w1 p2 br10'></div>
<div class='bg-teal-9 h1 w1 p2 br10'></div>
<div class='bg-teal-10 h1 w1 p2 br10'></div>
<div class='bg-teal-11 h1 w1 p2 br10'></div>
</article>
<article class='flex g1'>
<div class='bg-cyan-0 h1 w1 p2 br10'></div>
<div class='bg-cyan-1 h1 w1 p2 br10'></div>
<div class='bg-cyan-2 h1 w1 p2 br10'></div>
<div class='bg-cyan-3 h1 w1 p2 br10'></div>
<div class='bg-cyan-4 h1 w1 p2 br10'></div>
<div class='bg-cyan-5 h1 w1 p2 br10'></div>
<div class='bg-cyan-6 h1 w1 p2 br10'></div>
<div class='bg-cyan-7 h1 w1 p2 br10'></div>
<div class='bg-cyan-8 h1 w1 p2 br10'></div>
<div class='bg-cyan-9 h1 w1 p2 br10'></div>
<div class='bg-cyan-10 h1 w1 p2 br10'></div>
<div class='bg-cyan-11 h1 w1 p2 br10'></div>
</article>
2023-07-12 21:13:05 +00:00
<article class='flex g1'>
<div class='bg-blue-0 h1 w1 p2 br10'></div>
<div class='bg-blue-1 h1 w1 p2 br10'></div>
<div class='bg-blue-2 h1 w1 p2 br10'></div>
<div class='bg-blue-3 h1 w1 p2 br10'></div>
<div class='bg-blue-4 h1 w1 p2 br10'></div>
<div class='bg-blue-5 h1 w1 p2 br10'></div>
<div class='bg-blue-6 h1 w1 p2 br10'></div>
<div class='bg-blue-7 h1 w1 p2 br10'></div>
<div class='bg-blue-8 h1 w1 p2 br10'></div>
<div class='bg-blue-9 h1 w1 p2 br10'></div>
<div class='bg-blue-10 h1 w1 p2 br10'></div>
<div class='bg-blue-11 h1 w1 p2 br10'></div>
</article>
<article class='flex g1'>
<div class='bg-indigo-0 h1 w1 p2 br10'></div>
<div class='bg-indigo-1 h1 w1 p2 br10'></div>
<div class='bg-indigo-2 h1 w1 p2 br10'></div>
<div class='bg-indigo-3 h1 w1 p2 br10'></div>
<div class='bg-indigo-4 h1 w1 p2 br10'></div>
<div class='bg-indigo-5 h1 w1 p2 br10'></div>
<div class='bg-indigo-6 h1 w1 p2 br10'></div>
<div class='bg-indigo-7 h1 w1 p2 br10'></div>
<div class='bg-indigo-8 h1 w1 p2 br10'></div>
<div class='bg-indigo-9 h1 w1 p2 br10'></div>
<div class='bg-indigo-10 h1 w1 p2 br10'></div>
<div class='bg-indigo-11 h1 w1 p2 br10'></div>
</article>
<article class='flex g1'>
<div class='bg-violet-0 h1 w1 p2 br10'></div>
<div class='bg-violet-1 h1 w1 p2 br10'></div>
<div class='bg-violet-2 h1 w1 p2 br10'></div>
<div class='bg-violet-3 h1 w1 p2 br10'></div>
<div class='bg-violet-4 h1 w1 p2 br10'></div>
<div class='bg-violet-5 h1 w1 p2 br10'></div>
<div class='bg-violet-6 h1 w1 p2 br10'></div>
<div class='bg-violet-7 h1 w1 p2 br10'></div>
<div class='bg-violet-8 h1 w1 p2 br10'></div>
<div class='bg-violet-9 h1 w1 p2 br10'></div>
<div class='bg-violet-10 h1 w1 p2 br10'></div>
<div class='bg-violet-11 h1 w1 p2 br10'></div>
</article><article class='flex g1'>
<div class='bg-magenta-0 h1 w1 p2 br10'></div>
<div class='bg-magenta-1 h1 w1 p2 br10'></div>
<div class='bg-magenta-2 h1 w1 p2 br10'></div>
<div class='bg-magenta-3 h1 w1 p2 br10'></div>
<div class='bg-magenta-4 h1 w1 p2 br10'></div>
<div class='bg-magenta-5 h1 w1 p2 br10'></div>
<div class='bg-magenta-6 h1 w1 p2 br10'></div>
<div class='bg-magenta-7 h1 w1 p2 br10'></div>
<div class='bg-magenta-8 h1 w1 p2 br10'></div>
<div class='bg-magenta-9 h1 w1 p2 br10'></div>
<div class='bg-magenta-10 h1 w1 p2 br10'></div>
<div class='bg-magenta-11 h1 w1 p2 br10'></div>
</article><article class='flex g1'>
<div class='bg-red-0 h1 w1 p2 br10'></div>
<div class='bg-red-1 h1 w1 p2 br10'></div>
<div class='bg-red-2 h1 w1 p2 br10'></div>
<div class='bg-red-3 h1 w1 p2 br10'></div>
<div class='bg-red-4 h1 w1 p2 br10'></div>
<div class='bg-red-5 h1 w1 p2 br10'></div>
<div class='bg-red-6 h1 w1 p2 br10'></div>
<div class='bg-red-7 h1 w1 p2 br10'></div>
<div class='bg-red-8 h1 w1 p2 br10'></div>
<div class='bg-red-9 h1 w1 p2 br10'></div>
<div class='bg-red-10 h1 w1 p2 br10'></div>
<div class='bg-red-11 h1 w1 p2 br10'></div>
</article><article class='flex g1'>
<div class='bg-red-orange-0 h1 w1 p2 br10'></div>
<div class='bg-red-orange-1 h1 w1 p2 br10'></div>
<div class='bg-red-orange-2 h1 w1 p2 br10'></div>
<div class='bg-red-orange-3 h1 w1 p2 br10'></div>
<div class='bg-red-orange-4 h1 w1 p2 br10'></div>
<div class='bg-red-orange-5 h1 w1 p2 br10'></div>
<div class='bg-red-orange-6 h1 w1 p2 br10'></div>
<div class='bg-red-orange-7 h1 w1 p2 br10'></div>
<div class='bg-red-orange-8 h1 w1 p2 br10'></div>
<div class='bg-red-orange-9 h1 w1 p2 br10'></div>
<div class='bg-red-orange-10 h1 w1 p2 br10'></div>
<div class='bg-red-orange-11 h1 w1 p2 br10'></div>
</article><article class='flex g1'>
<div class='bg-orange-0 h1 w1 p2 br10'></div>
<div class='bg-orange-1 h1 w1 p2 br10'></div>
<div class='bg-orange-2 h1 w1 p2 br10'></div>
<div class='bg-orange-3 h1 w1 p2 br10'></div>
<div class='bg-orange-4 h1 w1 p2 br10'></div>
<div class='bg-orange-5 h1 w1 p2 br10'></div>
<div class='bg-orange-6 h1 w1 p2 br10'></div>
<div class='bg-orange-7 h1 w1 p2 br10'></div>
<div class='bg-orange-8 h1 w1 p2 br10'></div>
<div class='bg-orange-9 h1 w1 p2 br10'></div>
<div class='bg-orange-10 h1 w1 p2 br10'></div>
<div class='bg-orange-11 h1 w1 p2 br10'></div>
</article><article class='flex g1'>
<div class='bg-gold-0 h1 w1 p2 br10'></div>
<div class='bg-gold-1 h1 w1 p2 br10'></div>
<div class='bg-gold-2 h1 w1 p2 br10'></div>
<div class='bg-gold-3 h1 w1 p2 br10'></div>
<div class='bg-gold-4 h1 w1 p2 br10'></div>
<div class='bg-gold-5 h1 w1 p2 br10'></div>
<div class='bg-gold-6 h1 w1 p2 br10'></div>
<div class='bg-gold-7 h1 w1 p2 br10'></div>
<div class='bg-gold-8 h1 w1 p2 br10'></div>
<div class='bg-gold-9 h1 w1 p2 br10'></div>
<div class='bg-gold-10 h1 w1 p2 br10'></div>
<div class='bg-gold-11 h1 w1 p2 br10'></div>
</article><article class='flex g1'>
<div class='bg-yellow-0 h1 w1 p2 br10'></div>
<div class='bg-yellow-1 h1 w1 p2 br10'></div>
<div class='bg-yellow-2 h1 w1 p2 br10'></div>
<div class='bg-yellow-3 h1 w1 p2 br10'></div>
<div class='bg-yellow-4 h1 w1 p2 br10'></div>
<div class='bg-yellow-5 h1 w1 p2 br10'></div>
<div class='bg-yellow-6 h1 w1 p2 br10'></div>
<div class='bg-yellow-7 h1 w1 p2 br10'></div>
<div class='bg-yellow-8 h1 w1 p2 br10'></div>
<div class='bg-yellow-9 h1 w1 p2 br10'></div>
<div class='bg-yellow-10 h1 w1 p2 br10'></div>
<div class='bg-yellow-11 h1 w1 p2 br10'></div>
</article>
<article class='flex g1'>
<div class='bg-slate-gray-0 h1 w1 p2 br10'></div>
<div class='bg-slate-gray-1 h1 w1 p2 br10'></div>
<div class='bg-slate-gray-2 h1 w1 p2 br10'></div>
<div class='bg-slate-gray-3 h1 w1 p2 br10'></div>
<div class='bg-slate-gray-4 h1 w1 p2 br10'></div>
<div class='bg-slate-gray-5 h1 w1 p2 br10'></div>
<div class='bg-slate-gray-6 h1 w1 p2 br10'></div>
<div class='bg-slate-gray-7 h1 w1 p2 br10'></div>
<div class='bg-slate-gray-8 h1 w1 p2 br10'></div>
<div class='bg-slate-gray-9 h1 w1 p2 br10'></div>
<div class='bg-slate-gray-10 h1 w1 p2 br10'></div>
<div class='bg-slate-gray-11 h1 w1 p2 br10'></div>
</article>
<article class='flex g1'>
<div class='bg-gray-0 h1 w1 p2 br10'></div>
<div class='bg-gray-1 h1 w1 p2 br10'></div>
<div class='bg-gray-2 h1 w1 p2 br10'></div>
<div class='bg-gray-3 h1 w1 p2 br10'></div>
<div class='bg-gray-4 h1 w1 p2 br10'></div>
<div class='bg-gray-5 h1 w1 p2 br10'></div>
<div class='bg-gray-6 h1 w1 p2 br10'></div>
<div class='bg-gray-7 h1 w1 p2 br10'></div>
<div class='bg-gray-8 h1 w1 p2 br10'></div>
<div class='bg-gray-9 h1 w1 p2 br10'></div>
<div class='bg-gray-10 h1 w1 p2 br10'></div>
<div class='bg-gray-11 h1 w1 p2 br10'></div>
</article>
<article class='flex g1'>
<div class='bg-overlay-tint-0 h1 w1 p2 br10'></div>
<div class='bg-overlay-tint-1 h1 w1 p2 br10'></div>
<div class='bg-overlay-tint-2 h1 w1 p2 br10'></div>
<div class='bg-overlay-tint-3 h1 w1 p2 br10'></div>
<div class='bg-overlay-tint-4 h1 w1 p2 br10'></div>
<div class='bg-overlay-tint-5 h1 w1 p2 br10'></div>
<div class='bg-overlay-tint-6 h1 w1 p2 br10'></div>
<div class='bg-overlay-tint-7 h1 w1 p2 br10'></div>
<div class='bg-overlay-tint-8 h1 w1 p2 br10'></div>
<div class='bg-overlay-tint-9 h1 w1 p2 br10'></div>
<div class='bg-overlay-tint-10 h1 w1 p2 br10'></div>
<div class='bg-overlay-tint-11 h1 w1 p2 br10'></div>
</article>
<article class='flex g1'>
<div class='bg-overlay-shadow-0 h1 w1 p2 br10'></div>
<div class='bg-overlay-shadow-6 h1 w1 p2 br10'></div>
<div class='bg-overlay-shadow-2 h1 w1 p2 br10'></div>
<div class='bg-overlay-shadow-3 h1 w1 p2 br10'></div>
<div class='bg-overlay-shadow-4 h1 w1 p2 br10'></div>
<div class='bg-overlay-shadow-5 h1 w1 p2 br10'></div>
<div class='bg-overlay-shadow-6 h1 w1 p2 br10'></div>
<div class='bg-overlay-shadow-7 h1 w1 p2 br10'></div>
<div class='bg-overlay-shadow-8 h1 w1 p2 br10'></div>
<div class='bg-overlay-shadow-9 h1 w1 p2 br10'></div>
<div class='bg-overlay-shadow-60 h1 w1 p2 br10'></div>
<div class='bg-overlay-shadow-61 h1 w1 p2 br10'></div>
</article>
</section>
<section class='p3 dif items-baseline g4'>
<p class='dib lh-solid m0 f11 fw9'>Aa</p>
<p class='dib lh-solid m0 f10 fw9'>Aa</p>
<p class='dib lh-solid m0 f9 fw9'>Aa</p>
<p class='dib lh-solid m0 f8 fw9'>Aa</p>
<p class='dib lh-solid m0 f7 fw9'>Aa</p>
<p class='dib lh-solid m0 f6 fw9'>Aa</p>
<p class='dib lh-solid m0 f5 fw9'>Aa</p>
<p class='dib lh-solid m0 f4 fw9'>Aa</p>
<p class='dib lh-solid m0 f3 fw9'>Aa</p>
<p class='dib lh-solid m0 f2 fw9'>Aa</p>
<p class='dib lh-solid m0 f1 fw9'>Aa</p>
</section>
</body>
</html>