emilia
/
personal-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Landing page for base

This commit is contained in:
Emilia Allison 2022-09-29 21:17:06 -04:00
parent 9aa86dd896
commit e6a7310e04
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
3 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/cool-stuff/css-purgatory/base/index.css
View File

@ -94,6 +94,14 @@ input, button, textarea, select {
/* Utility Classes */ /* Utility Classes */
/* --------------- */ /* --------------- */
/* Layouts */
.container {
padding-inline: clamp(0.5rem, 4rem, 5rem);
margin-inline: auto;
max-width: 80rem;
}
.flex { .flex {
display: flex; display: flex;
gap: 2rem; gap: 2rem;
@ -124,12 +132,13 @@ input, button, textarea, select {
justify-content: space-evenly; justify-content: space-evenly;
} }
.container { .lock-bottom {
padding-inline: clamp(0.5rem, 4rem, 5rem); position: absolute;
margin-inline: auto; bottom: 0%;
max-width: 80rem;
} }
/* Other */
.hr::after { /* Add fake hr after header */ .hr::after { /* Add fake hr after header */
content: ''; content: '';

2
src/cool-stuff/css-purgatory/base/index.html
View File

@ -95,7 +95,7 @@
<h2>Sample Pages</h2> <h2>Sample Pages</h2>
<ul class="container two-columns"> <ul class="container two-columns">
<li><a href="samplepage">First Sample Page</a></li> <li><a href="samplepage">First Sample Page</a></li>
<li><a>Second Sample Page</a></li> <li><a href="landingpage">Second Sample Page</a></li>
<li><a>Third Sample Page</a></li> <li><a>Third Sample Page</a></li>
</ul> </ul>
</section> </section>

28
src/cool-stuff/css-purgatory/base/landingpage.html Normal file
View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Base - Landing Page</title>
<link rel="stylesheet" href="index.css">
<style>
body {
overflow: hidden;
}
</style>
<!-- Base v1.1 -->
</head>
<body>
<main>
<header>
<div class="container flex column">
<h1 class="text-dark">Base Landing Page</h1>
<p>One might want a flashy landing page</p>
</div>
</header>
</main>
<footer class="lock-bottom">
<a href="./">Return to Base</a>
</footer>
</body>
</html>