Files
wedding-website/illustrations/index.html
2024-01-02 10:37:51 -06:00

123 lines
6.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Favicons and other styls -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicons/favicon-16x16.png">
<link rel="manifest" href="assets/favicons/site.webmanifest">
<link rel="mask-icon" href="assets/favicons/safari-pinned-tab.svg" color="#6e9fa9">
<link rel="shortcut icon" href="assets/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#fdfdfd">
<meta name="msapplication-config" content="assets/favicons/browserconfig.xml">
<meta name="theme-color" content="#fdfdfd">
<script src="https://gumroad.com/js/gumroad.js"></script>
<!-- Styles -->
<link href="assets/css/main.min.css" rel="stylesheet">
<!-- Site Title -->
<title>Wedding Template</title>
</head>
<body>
<section class="intro">
<div class="intro-letters">
<img class="intro-letter" loading="lazy" src="assets/images/letters/R.png">
<img class="intro-letter" loading="lazy" src="assets/images/letters/H.png">
</figure>
</section>
<main>
<div class="text">
<p data-size="large" data-font="serif">Illustrations</p>
<p data-size="small">In this page you'll find all the illustrations included in the template. Each illustration can be set in 3 different sizes and 4 variations.</p>
<p data-size="small"><a data-style="cta" href="https://gum.co/621-wedding" target="_blank" data-gumroad-single-product="true">Buy the template</a></p>
</div>
<div class="text">
<p data-size="large" data-font="serif">Sizes</p>
<p data-size="small">Each illustration can be set in three different sizes: small, medium and large.</p>
</div>
<div class="divider" data-style="1a" data-size="small"></div>
<div class="divider" data-style="1a" data-size="medium"></div>
<div class="divider" data-style="1a" data-size="large"></div>
<div class="text">
<p data-size="large" data-font="serif">Variations</p>
<p data-size="small">In additions to the 3 sizes, each illustration also has 4 possible variations. Regular, rotated 180°, flipped, rotated and flipped.</p>
</div>
<div class="divider" data-style="1a" data-size="small"></div>
<div class="divider" data-style="1b" data-size="small"></div>
<div class="divider" data-style="1c" data-size="small"></div>
<div class="divider" data-style="1d" data-size="small"></div>
<div class="text">
<p data-size="large" data-font="serif">Illustrations</p>
<p data-size="small">Finally these are all the 18 included illustrations that you can use as dividers on the site. All 18 are set at small size and default variation.</p>
</div>
<div class="divider" data-style="1" data-size="small"></div>
<div class="divider" data-style="2" data-size="small"></div>
<div class="divider" data-style="3" data-size="small"></div>
<div class="divider" data-style="4" data-size="small"></div>
<div class="divider" data-style="5" data-size="small"></div>
<div class="divider" data-style="6" data-size="small"></div>
<div class="divider" data-style="7" data-size="small"></div>
<div class="divider" data-style="8" data-size="small"></div>
<div class="divider" data-style="9" data-size="small"></div>
<div class="divider" data-style="10" data-size="small"></div>
<div class="divider" data-style="11" data-size="small"></div>
<div class="divider" data-style="12" data-size="small"></div>
<div class="divider" data-style="13" data-size="small"></div>
<div class="divider" data-style="14" data-size="small"></div>
<div class="divider" data-style="15" data-size="small"></div>
<div class="divider" data-style="16" data-size="small"></div>
<div class="divider" data-style="17" data-size="small"></div>
<div class="divider" data-style="18" data-size="small"></div>
<div class="text">
<p data-size="large" data-font="serif">Initials</p>
<p data-size="small">In addition to the 18 illustrations there's also one illustration for each letter fo the alphabet used for both the intro and the footer of the template.</p>
</div>
<footer class="initials" style="flex-wrap:wrap">
<img class="initial" src="assets/images/letters/A.png">
<img class="initial" src="assets/images/letters/B.png">
<img class="initial" src="assets/images/letters/C.png">
<img class="initial" src="assets/images/letters/D.png">
<img class="initial" src="assets/images/letters/E.png">
<img class="initial" src="assets/images/letters/F.png">
<img class="initial" src="assets/images/letters/G.png">
<img class="initial" src="assets/images/letters/H.png">
<img class="initial" src="assets/images/letters/I.png">
<img class="initial" src="assets/images/letters/J.png">
<img class="initial" src="assets/images/letters/K.png">
<img class="initial" src="assets/images/letters/L.png">
<img class="initial" src="assets/images/letters/M.png">
<img class="initial" src="assets/images/letters/N.png">
<img class="initial" src="assets/images/letters/O.png">
<img class="initial" src="assets/images/letters/P.png">
<img class="initial" src="assets/images/letters/Q.png">
<img class="initial" src="assets/images/letters/R.png">
<img class="initial" src="assets/images/letters/S.png">
<img class="initial" src="assets/images/letters/T.png">
<img class="initial" src="assets/images/letters/U.png">
<img class="initial" src="assets/images/letters/V.png">
<img class="initial" src="assets/images/letters/W.png">
<img class="initial" src="assets/images/letters/X.png">
<img class="initial" src="assets/images/letters/Y.png">
<img class="initial" src="assets/images/letters/Z.png">
</footer>
</main>
</body>
</html>