-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9e503e5
commit 4e1b9d4
Showing
2 changed files
with
302 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <div class="upper"> | ||
| <div class="header"> | ||
| <ul class="top"> | ||
| <li><a href="#" class="logon">Header Logo</a></li> | ||
| <div class="cat"><li class="logo"><a href="#">header link one</a></li> | ||
| <li class="logo"><a href="#">header link two</a></li> | ||
| <li class="logo"><a href="#">header link three</a></li></div> | ||
| </ul> | ||
| </div> | ||
| <div class="hero"> | ||
| <ul > | ||
| <li class="awesome">This website is awesome</li> | ||
| <li class="para">This website has some subtext that goes here under the main title. It's smaller font and the color is lower contrast.</li> | ||
| <li class="button"><button>Signup</button></li> | ||
| </ul> | ||
| <div class="place"> | ||
| <p class="image">This is the place holder for an image</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="random"> | ||
| <p>Some random Information.</p> | ||
| <ul class="blank"> | ||
| <li class="sat"> </li> | ||
| <li class="sat"> </li> | ||
| <li class="sat"> </li> | ||
| <li class="sat"> </li> | ||
| </ul> | ||
| <ul class="text"> | ||
| <li>This is some subtext under an illustration or image.</li> | ||
| <li>This is some subtext under an illustration or image.</li> | ||
| <li>This is some subtext under an illustration or image.</li> | ||
| <li>This is some subtext under an illustration or image.</li> | ||
| </ul> | ||
|
|
||
| </div> | ||
| <div class="quote"> | ||
| <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 know? All i know is that it looks nice.</p> | ||
| <p class="small">-Thor, God of Thunder</p> | ||
| </div> | ||
| <div class="sign"> | ||
| <ul class="pat"> | ||
| <li class="action">Call to action it's time!</li> | ||
| <li class="time">Sign up for our product by clicking that button right over there!</li> | ||
| </ul> | ||
| <button class="up">Sign up</button> | ||
| </div> | ||
| <div class="footer"> | ||
| <ul > | ||
| <li>Copyright © The Odin Project 2021</li> | ||
| </ul> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,239 @@ | ||
| * { | ||
| margin: 0; | ||
|
|
||
| } | ||
| html, body { | ||
| height: 100%; | ||
| } | ||
|
|
||
| body{ | ||
| font-family: sans-serif ; | ||
|
|
||
|
|
||
|
|
||
|
|
||
| } | ||
| ul{ | ||
| list-style: none | ||
| } | ||
| .upper{ | ||
| background-color: #1F2937; | ||
| padding: 20px; | ||
| flex: 1; | ||
| padding-bottom: 100px; | ||
| font-family:sans-serif; | ||
| padding-bottom: 150px; | ||
| flex-wrap: wrap; | ||
|
|
||
| } | ||
| .header{ | ||
| display: flex; | ||
| padding: 20px; | ||
|
|
||
| } | ||
| .top{ | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| gap: 16px; | ||
| padding: 0px; | ||
|
|
||
|
|
||
| } | ||
| .logon{ | ||
| font-size: 24px; | ||
| color: #f9faf8; | ||
| font-weight: bold; | ||
| } | ||
| .cat{display: flex; | ||
| margin-right: 0; | ||
| justify-content: end; | ||
| margin-left: 800px; | ||
| align-items: end; | ||
| gap: 16px; | ||
| } | ||
| .logo{ | ||
| color: #E5E7EB; | ||
| } | ||
| a{ | ||
| font-size: 18px; | ||
| color: #E5E7EB; | ||
| text-decoration: none; | ||
| } | ||
| .hero{ | ||
| display: flex; | ||
| justify-content: space-between; | ||
| margin-top: 70px; | ||
| flex: 1; | ||
| margin-left: 90px; | ||
| margin-right: 90px; | ||
| } | ||
| .hero li{ | ||
| display: flex; | ||
| } | ||
| .awesome{ | ||
| font-size: 48px; | ||
| font-weight: bold; | ||
| color: #f9faf8; | ||
|
|
||
| } | ||
| .awesome{ | ||
| width: 500px; | ||
| } | ||
| .para{ | ||
| font-size: 18px; | ||
| color: #E5E7EB; | ||
| width: 500px; | ||
|
|
||
|
|
||
| } | ||
| button{ | ||
| background-color: #3882F6; | ||
| color: #f9faf8; | ||
| border: #3882F6; | ||
| border-radius: 6px 4px; | ||
| padding: 8px 18px; | ||
| margin-top: 12px; | ||
| font-weight: bold; | ||
| font-size: 18px; | ||
| width: 140px; | ||
| height: 40px; | ||
| } | ||
| .place{ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: 1px; | ||
| padding: 0px; | ||
| width: 520px; | ||
| height: 250px; | ||
| background-color: grey; | ||
| margin-right: 190px; | ||
| } | ||
|
|
||
| .image{ | ||
| color: #E5E7EB; | ||
| } | ||
| .random{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin-top: 50px; | ||
|
|
||
| } | ||
| .random p{ | ||
|
|
||
| font-size: 36px; | ||
| color: #1F2937; | ||
| font-weight: bold; | ||
| display: flex; | ||
| justify-content: center; | ||
|
|
||
| } | ||
| .blank{ | ||
|
|
||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: center; | ||
| padding: 20px; | ||
|
|
||
|
|
||
| } | ||
| .sat{ | ||
| margin: 20px; | ||
| padding: 20px; | ||
| border: 4px solid #3882F6; | ||
| border-radius: 10%; | ||
| width: 150px; | ||
| height: 140px; | ||
| } | ||
| .text{ | ||
| color:rgb(53, 52, 52); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding: 20px; | ||
| padding-top: 0px; | ||
|
|
||
|
|
||
|
|
||
|
|
||
| } | ||
| .text li{ | ||
| margin: 20px; | ||
| margin-top: -29px; | ||
| padding: 20px; | ||
| padding-top: 0px; | ||
| width: 160px; | ||
| text-align: center; | ||
| } | ||
| .quote{ | ||
| background-color: #E5E7EB; | ||
| font-size: 36px; | ||
| font-style: italic; | ||
| color: #1F2937; | ||
| font-weight: 100; | ||
| padding: 100px; | ||
| text-align: justify; | ||
|
|
||
|
|
||
|
|
||
| } | ||
| .quote p{ | ||
| margin: 80px; | ||
| margin-top: 0px; | ||
| margin-bottom: -10px; | ||
| } | ||
| .small{ | ||
| font-style: normal; | ||
| font-size: 25px; | ||
| display: flex; | ||
| justify-content: end; | ||
| margin-top: -70px; | ||
| flex-wrap: wrap; | ||
| padding: 20px; | ||
| font-weight: bold; | ||
|
|
||
| } | ||
| .sign{ | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| background-color: #3882F6; | ||
| margin-left: 150px; | ||
| margin-right: 150px; | ||
| padding: 20px; | ||
| margin-top: 100px; | ||
| margin-bottom: 100px; | ||
| border-radius: 8px 6px ; | ||
| } | ||
| .action{ | ||
| color: #E5E7EB; | ||
| font-size: 26px; | ||
| font-weight: bold; | ||
|
|
||
| } | ||
| .pat{ | ||
| color: #E5E7EB; | ||
| } | ||
| .sign{ | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-direction: row; | ||
| gap: 100px; | ||
| } | ||
| .up{ | ||
| border: 3px solid #E5E7EB; | ||
| border-radius: 6px 8px; | ||
| width: 120px; | ||
| color: #E5E7EB; | ||
| font-size: 17px; | ||
| font-weight: bold; | ||
| } | ||
| .footer{ | ||
| background-color: #1F2937; | ||
| color: #E5E7EB; | ||
| padding: 30px; | ||
| display: flex; | ||
| justify-content: center; | ||
| } |