From 2e186832ec973278756afa2356c74809c1896867 Mon Sep 17 00:00:00 2001 From: Ashelyn Rose Date: Sun, 26 Mar 2023 16:31:59 -0600 Subject: [PATCH] layout --- index.html | 30 +++++++++++++++++++ style.css | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 114 insertions(+) diff --git a/index.html b/index.html index e69de29..f06caf9 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,30 @@ + + + + Rose's Landing Page + + + +
+

rose.tempest.dev

+
+

+ this is a sample page, demonstrating how simple it can be to + write your own stylesheets. +

+

+ because this is important to me, and because i'm admittedly + a cocky asshole sometimes. +

+
+

+ To find us elsewhere, go to tempest.dev +

+
+ + + diff --git a/style.css b/style.css index e69de29..fc2fe6a 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,84 @@ +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Quicksand:wght@300&display=swap'); + +:root { + --html-background: #370314; + --card-background: #553b3b; + --footer-background: #591229; + --card-width: 500px; + --card-height: 350px; + color: white; +} + +html, body { + margin: 0; + padding: 0; + min-height: 100vh; + font-family: 'Quicksand', sans-serif; + font-weight: 300; + background: var(--html-background); +} + +h1 { + font-family: 'Montserrat', sans-serif; + font-weight: 100; + position: relative; + margin-top: 0; +} + +h1::before { + position: absolute; + bottom: -2px; + display: block; + content: ' '; + width: 100%; + height: 1px; + background: currentcolor; + opacity: .5; +} + +h1::after { + display: block; + content: ' '; + width: 100%; + height: 1px; + background: currentcolor; +} + +a { + color: pink; +} + +body { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; +} + +main { + display: flex; + flex-direction: column; + width: var(--card-width); + height: var(--card-height); + background: var(--card-background); + margin-top: calc(50vh - var(--card-height) / 2); + box-sizing: border-box; + padding: 32px; +} + +main > div { + flex: 1; +} + +footer { + display: block; + padding: 16px; + background: var(--footer-background); + width: calc(100% - 32px); + display:flex; + flex-direction: row; +} + +footer > a { + margin-left: 32px; +}