From c08eb2aad547137c63265fa25bd2e8daf54d11ad Mon Sep 17 00:00:00 2001 From: Della Maret Date: Fri, 14 Jun 2024 12:38:17 -0400 Subject: [PATCH] Finished landing page --- index.html | 54 ++++++++++++++++++++---------- styles.css | 96 ++++++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 108 insertions(+), 42 deletions(-) diff --git a/index.html b/index.html index abbbc3b..805bc08 100644 --- a/index.html +++ b/index.html @@ -8,17 +8,19 @@
- -
-
- -
    -
  • header link one
    • -
  • header link two
    • -
  • header link three
    • -
-
+ +
+ +
    +
  • header link one
    • +
  • header link two
    • +
  • header link three
    • +
+
+ + +
This website is awesome
@@ -33,35 +35,51 @@
- +

Some random information.

-

Some text here

+

this is some subtext under an illustration or image

-

Some text here

+

this is some subtext under an illustration or image

-

Some text here

+

this is some subtext under an illustration or image

-

Some text here

+

this is some subtext under an illustration or image

- +

- “Happiness is not something ready made. It comes from your own actions.” + This is an inspiring quote, or a testimonial from a customer. + Maybe it's just filling up space, or maybe people will actually read it. + Who knows? All I know is that it looks nice.

-

Dalai Lama XIV

+

-Thor, God of Thunder

+
+ + +
+
+

Call to action! It's time!

+

Sign up for our product by clicking that button right over there!

+
+
Sign up
+
+ + +
+

Copyright © The Odin Project 2021

diff --git a/styles.css b/styles.css index 4aefcaf..365c204 100644 --- a/styles.css +++ b/styles.css @@ -1,26 +1,19 @@ .container{ display: flex; flex-direction: column; + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } -#section-one{ - background-color:#1F2937; - color:#F9FAF8; - font-family: 'roboto'; - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: stretch; -} - -.header-top{ +.header{ display: flex; flex-direction: row; justify-content: space-between; + color: white; + background-color:#1F2937; align-items: center; - margin-top: 20px; - margin-left: 200px; - margin-right: 200px; + padding-top: 20px; + padding-left: 200px; + padding-right: 200px; } .logo{ @@ -36,6 +29,16 @@ color: #E5E7EB; } +.section-one{ + background-color:#1F2937; + color:#F9FAF8; + font-family: 'roboto'; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: stretch; +} + .header-bottom{ font-weight: 800; display: flex; @@ -91,21 +94,22 @@ figcaption{ display: flex; flex-direction: row; font-size: 20px; - margin-left: 200px; - margin-right: 200px; - justify-content: center; + margin: 0 300px 70px 300px; } .box-container{ + display: flex; flex-direction: column; - margin: 40px; + align-items: center; + text-align: center; + padding: 30px; } .box{ border-style: solid; border-color: #3882f6; - width: 100px; - height: 100px; + width: 150px; + height: 150px; border-radius: 10px; } @@ -113,18 +117,62 @@ figcaption{ display: flex; flex-direction: column; background-color: silver; - padding: 80px; - justify-content: center; + align-items: center; } #quote{ font-style: italic; font-size: 36px; - text-align: center; + font-weight: 100; + text-align: left; + padding: 50px 300px 0 300px; + margin-right: 70px; } #author{ font-size: 20px; + font-weight: bold; text-align: right; - padding-right: 150px; + padding-left: 500px; + padding-bottom: 100px; +} + +.section-four{ + display: flex; + flex-direction: row; + justify-content: space-between; + background-color: #3882f6; + margin: 80px 150px; +} + +.section-four-text{ + flex-direction: column; + color:white; + padding: 30px 150px; +} + +#big-text{ + font-size: 30px; + font-weight: 800; +} + +#little-text{ + font-size: 20px; +} + +#bottom-button{ + margin: 100px 200px 100px 20px; + border-style: solid; + padding: 10px 15px; + border-color: white; + border-radius: 10px; + color: white; +} + +.footer{ + background-color: #1F2937; + color:white; + font-size: 20px; + padding: 20px; + text-align: center; } \ No newline at end of file