-
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
Showing
5 changed files
with
259 additions
and
1 deletion.
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 |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| # landingpage-project | ||
| # landingpage-project | ||
| Project using learned css skills in order to test current knowledge |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,70 @@ | ||
| <!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"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> | ||
|
|
||
| </head> | ||
| <body> | ||
| <div class="hero"> | ||
| <div class="first-part"> | ||
| <div class="header">Header Logo</div> | ||
| <ul> | ||
| <li><a href="#">header link one</a></li> | ||
| <li><a href="#">header link two</a></li> | ||
| <li><a href="#">header link three</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="second-part"> | ||
| <div class="leftdescrip"> | ||
| <div class="description">This website is awesome</div> | ||
| <div class="subtext">This website has some subtext that goes here under the main title. It's a smaller font and the color is lower contrast</div> | ||
| <button class="button">Sign up</button> | ||
| </div> | ||
| <div class="rightdescrip"> | ||
| <img src="./images/porci.png" alt="porci pe wow"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="random-info"> | ||
| <p>Random information.</p> | ||
| <div class="imgcontainer"> | ||
| <div class="imgitem"> | ||
| <img src="./images/soarec.png" alt="soarec" width="200" height="200"> | ||
| <div class="imgtext"> this is some subtext under an illustration or image</div> | ||
| </div> | ||
| <div class="imgitem"> | ||
| <img src="./images/soarec.png" alt="soarec" width="200" height="200"> | ||
| <div class="imgtext"> this is some subtext under an illustration or image</div> | ||
| </div> | ||
| <div class="imgitem"> | ||
| <img src="./images/soarec.png" alt="soarec" width="200" height="200"> | ||
| <div class="imgtext"> this is some subtext under an illustration or image</div> | ||
| </div> | ||
| <div class="imgitem"> | ||
| <img src="./images/soarec.png" alt="soarec" width="200" height="200"> | ||
| <div class="imgtext"> this is some subtext under an illustration or image</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="random-quote"> | ||
| <div class="quote">"My son, the day you were born, the very forests of Lordaeron whispered the name... Arthas. My child, I watched with pride as you grew into a weapon of righteousness. Remember, our line has always ruled with wisdom and strength, and I know you will show restraint when exercising your great power. But the truest victory, my son, is stirring the hearts of your people. I tell you this, for when my days have come to an end, you shall be King."</div> | ||
| <div class="quoteby">- Terenas Menethil</div> | ||
| </div> | ||
| <div class="adbutton"> | ||
| <div class="adbutton-container"> | ||
| <div class="button-panel"> | ||
| <div class="button-text">Call to action! It's time!</div> | ||
| <div class="button-subtext">Sign up for our product by clicking that button right over there!</div> | ||
| </div> | ||
| <button class="thebutton">Sign up</button> | ||
| </div> | ||
| </div> | ||
| <div class="footer">Copyright bleeh</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,187 @@ | ||
| body { | ||
| font-family: "Roboto", sans-serif; | ||
| font-weight: 400; | ||
| font-style: normal; | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin: 0; | ||
| } | ||
| .hero { | ||
| background-color: #1F2937; | ||
| display: flex; | ||
| flex: 1; | ||
| flex-direction: column; | ||
| padding: 16px; | ||
|
|
||
| } | ||
|
|
||
| .first-part { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-evenly; | ||
| } | ||
|
|
||
| .header { | ||
| font-size: 24px; | ||
| color: #F9FAF8; | ||
| font-weight: 800 ; | ||
| } | ||
|
|
||
| .first-part ul { | ||
| font-size: 18px; | ||
| display: flex; | ||
| margin: 0; | ||
| padding: 0; | ||
| gap: 20px; | ||
|
|
||
| } | ||
|
|
||
| .first-part a { | ||
| color: #E5E7EB; | ||
| } | ||
|
|
||
| .second-part { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| margin-top: 60px; | ||
| margin-bottom: 60px; | ||
| text-wrap: wrap; | ||
| gap: 16px; | ||
| } | ||
|
|
||
| .leftdescrip { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| .description { | ||
| font-size: 48px; | ||
| color: #F9FAF8; | ||
| font-weight: 800 ; | ||
| } | ||
|
|
||
| .button { | ||
| color: #F9FAF8; | ||
| background: #3882F6; | ||
| padding: 4px 18px; | ||
| border: none; | ||
| border-radius: 8px; | ||
| width: 110px; | ||
| height: 30px; | ||
| margin-top: 10px; | ||
| font-size: 15px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| img, | ||
| .leftdescrip { | ||
| max-width: 460px; | ||
| } | ||
|
|
||
| .subtext { | ||
| font-size: 18px; | ||
| color: #E5E7EB; | ||
| } | ||
|
|
||
| ul { | ||
| list-style: none; | ||
|
|
||
| } | ||
|
|
||
| a { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .random-info { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .random-info p { | ||
| font-size: 36px; | ||
| font-weight: 800; | ||
| color: #1F2937; | ||
| } | ||
|
|
||
| .imgcontainer { | ||
| display: flex; | ||
| justify-content: center; | ||
| gap: 62px; | ||
| margin-bottom: 62px; | ||
| } | ||
|
|
||
| .imgitem { | ||
| max-width: 200px; | ||
|
|
||
| } | ||
|
|
||
| .imgitem img { | ||
| border-radius: 26px; | ||
| } | ||
|
|
||
| .random-quote { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| background-color: #E5E7EB; | ||
| padding: 160px; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .quote { | ||
| font-size: 30px; | ||
| font-weight: 300; | ||
| font-style: italic; | ||
| color: #1F2937; | ||
|
|
||
| } | ||
|
|
||
| .quoteby { | ||
| color: #1F2937; | ||
| font-size: 30px; | ||
| text-align: right; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .adbutton { | ||
| padding: 150px; | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .adbutton-container{ | ||
| background-color: #3882F6; | ||
| padding: 60px; | ||
| border-radius: 8px; | ||
| display: flex; | ||
| justify-content: space-evenly; | ||
| gap: 200px; | ||
| } | ||
|
|
||
|
|
||
| .button-text{ | ||
| color: #F9FAF8; | ||
| font-size: 24px; | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| .button-subtext { | ||
| color: #E5E7EB; | ||
| } | ||
|
|
||
| .thebutton { | ||
| border: 2px solid white; | ||
| border-radius: 8px; | ||
| background-color: #3882F6; | ||
| color: #F9FAF8; | ||
| font-size: 20px; | ||
| width: 150px; | ||
| } | ||
|
|
||
| .footer { | ||
| background-color: #1F2937; | ||
| text-align: center; | ||
| font-size: 20px; | ||
| color: #F9FAF8; | ||
| padding: 42px; | ||
| } |