Update

Yojxmbo · Aug 8, 2024 · d737084 · d737084
commit d737084
Show file tree

Hide file tree

Showing 2 changed files with 297 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Landing Page</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+
+
+
+
+
+
+
+
+
+
+    <header class="header">
+        <img src="" alt="Header Logo" class="logo">
+        <nav class="navigation">
+            <a href="#" class="links">header link one</a>
+            <a href="#" class="links">header link two</a>
+            <a href="#" class="links">header link three</a>
+        </nav>
+    </header>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <div class="blockOne">
+
+        <div class="blockOne--One">
+            <h1 class="title--One">This website is awesome</h1>
+            <p>This website has some subtext that goes here under the main title. It's a smaller font and the color is lower contrast.</p>
+            <button class="buttonOne">Sign Up</button>
+        </div>
+
+        <div class="blockOne--Two">    
+            <img src="" alt="this is a placeholder for an image" class="imageOne">
+        </div>
+
+    </div> 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <div class="blockTwo">
+
+        <div class="title--Two">
+            <h1>Some random information.</h1>
+        </div>
+
+        <div class="blockTwo--images">
+            <figure>
+                <img src="" alt="This is some subtext under an illustration or image" class="images">
+                <figcaption>This is some subtext under an illustration or image</figcaption>
+            </figure>
+
+            <figure>
+                <img src="" alt="This is some subtext under an illustration or image" class="images">
+                <figcaption>This is some subtext under an illustration or image</figcaption>
+            </figure>
+
+            <figure>
+                <img src="" alt="This is some subtext under an illustration or image" class="images">
+                <figcaption>This is some subtext under an illustration or image</figcaption>
+            </figure>
+
+            <figure>
+                <img src="" alt="This is some subtext under an illustration or image" class="images">
+                <figcaption>This is some subtext under an illustration or image</figcaption>
+            </figure>
+        </div>
+
+
+    </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <div class="blockThree">
+        <p>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.</p>
+        <p class="thor">- Thor, God of Thunder</p>
+    </div>
+
+
+
+
+
+
+
+
+
+
+    <div class="blockFour">
+
+        <div class="bluebanner">
+            <div class="blockFour--One">
+                <h1>Call to action! It's time!</h1>
+                <p>Sign up for our product by clicking that button right over there!</p>
+            </div>
+
+            <div class="blockFour--Two">
+                <button class="buttonTwo">Sign up</button>
+            </div>
+        </div>
+
+    </div>
+
+
+
+
+
+
+
+
+
+    <footer class="footer">
+        <p>Copyright © The Odin Project 2024</p>
+    </footer>
+
+
+
+
+
+</body>
+</html> 
diff --git a/style.css b/style.css
@@ -0,0 +1,136 @@
+* {
+
+}
+
+body {
+    display: flex;
+    background-color: black;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+    margin: 2rem;
+    flex-direction: column;
+}
+
+.header {
+    background-color: #1F2937;
+    color: #E5E7EB;
+    padding: 1rem;
+    width: 100%;
+}
+
+.logo {
+    font-size: 24px;
+    color: #F9FAF8;
+}
+
+.navigation {
+
+}
+
+.links {
+    text-decoration: none;
+    font-size: 18px;
+    color: #E5E7EB
+}
+
+.blockOne {
+    display: flex;
+    background-color: #1F2937;
+    font-size: 18px;
+    color: #E5E7EB;
+    width: 100%;
+    padding: 1rem;
+}
+
+.title--One {
+    font-size: 48px;
+    font-weight: 800; /* 800 is typically the weight for "extra-bold" */
+    color: #F9FAF8;
+}
+
+.buttonOne {
+    background-color: #3882F6;
+}
+
+.imageOne {
+
+}
+
+
+.blockTwo {
+    display: flex;
+    background-color: white;
+    position: relative;
+    width: 100%;
+    padding: 1rem;
+
+}
+
+.title--Two {
+    top: 0;
+    left: 0;
+    font-size: 26px;
+    font-weight: 800; /* 800 is typically the weight for "extra-bold" */
+    color: #1F2937;
+}
+
+.blockTwo--images {
+    display: flex;
+    top: 0;
+    left: 0;
+}
+
+.image1 {
+
+}
+
+.blockThree {
+    display: flex;
+    background-color: #E5E7EB;
+    font-size: 36px;
+    font-weight: 300; /* 300 is typically the weight for "light" */
+    font-style: italic;
+    color: #1F2937;
+    width: 100%;
+    padding: 1rem;
+}
+
+.thor {
+    font-weight: 800;
+}
+
+.blockFour {
+    display: flex;
+    background-color: white;
+    width: 100%;
+    padding: 1rem;
+
+}
+
+.bluebanner {
+    display: flex;
+    background-color: #3882F6;
+    margin: 50px;
+    border: 50px;
+}
+
+.blockFour--One {
+
+}
+
+.blockFour--Two {
+
+}
+
+.buttonTwo {
+    background-color: #3882F6;
+}
+
+.footer {
+    background-color: #1F2937;
+    color: #E5E7EB;
+    text-align: center;
+    padding: 1rem;
+    width: 100%;
+}