From b552aa43120ee75ca9715fa3be2283be253f6191 Mon Sep 17 00:00:00 2001 From: yequari Date: Sat, 30 Sep 2023 17:06:22 -0700 Subject: [PATCH] layout changes, apply fonts --- css/noscript.css | 7 +++++++ css/style.css | 22 +++++++++++++++++++--- index.html | 19 +++++++++++++------ 3 files changed, 39 insertions(+), 9 deletions(-) create mode 100644 css/noscript.css diff --git a/css/noscript.css b/css/noscript.css new file mode 100644 index 0000000..bcac065 --- /dev/null +++ b/css/noscript.css @@ -0,0 +1,7 @@ +toy-shelf ul { + position: relative; +} + +toy-shelf li { + display: block; +} diff --git a/css/style.css b/css/style.css index 3893912..286d057 100644 --- a/css/style.css +++ b/css/style.css @@ -4,6 +4,7 @@ display: inline-block; background-color: chartreuse; } */ +@import url(https://fonts.bunny.net/css?family=georama:400|bangers:400); body { background: url(../images/d7YslGq.gif); @@ -11,19 +12,23 @@ body { font-size: 16px; margin: 0; padding: 0; + font-family: 'Georama', sans-serif; } header { + text-align: center; + color: white; + font-family: 'Bangers', display; } h1,h2,h3 { line-height: 1.2; + font-family: 'Bangers', display; } .container { - background-color: white; width: 85%; - height: 100vh; + min-height: 100vh; padding: 20px 50px; margin: 0 auto; } @@ -31,17 +36,23 @@ h1,h2,h3 { .content { display: flex; flex-flow: row wrap-reverse; + align-items: center; + background-color: white; + padding: 20px 50px; } .sidebar { flex: 3 1 20%; border: 1px solid black; - padding: 20px 40px; + padding: 20px 30px; + margin-left: 10px; } .storefront { flex: 1 3 fit-content; margin: 0 auto; + min-height: 720px; + padding: 30px; } .shelf-group { @@ -78,3 +89,8 @@ toy-shelf li { left: 2px; text-align: center; } + +footer { + text-align: center; + color: white; +} diff --git a/index.html b/index.html index e3fc12f..25a07a1 100644 --- a/index.html +++ b/index.html @@ -4,24 +4,26 @@ + yeet

yequari's emporium of excellent toys

-

Odd that we only have Transformers though

-
+

Featured

    -
  • Armada Megatron
    • -
  • Leo Prime
    • -
  • Coronation Starscream
    • +
  • Armada Megatron
    • +
  • Leo Prime
    • +
  • Coronation Starscream
 @@ -74,7 +76,12 @@ Don't see what you're looking for at the front desk? We might have it in the back.

-
+
+