-
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
2 changed files
with
202 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,83 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link rel="stylesheet" href="awesome.css" /> | ||
| <title>awesome</title> | ||
| </head> | ||
| <body> | ||
| <div class = "container"> | ||
| <div class="header"> | ||
| <div class="nav-bar"> | ||
| <div class="left-side">Header Logo</div> | ||
|
|
||
| <div class="right-side"> | ||
| <div class="right-side-1">header link one</div> | ||
| <div class="right-side-2">header link two</div> | ||
| <div class="right-side-3">header link three</div> | ||
| </div> | ||
| </div> | ||
| <div class="main"> | ||
| <div class="left"> | ||
| <h1>This website is awesome</h1> | ||
| <p> | ||
| Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates | ||
| quae inventore | ||
| </p> | ||
| <button class="btn">Sign up</button> | ||
| </div> | ||
| <div class="right"> | ||
| <img src="./images/mask.jpg" /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="info"> | ||
| <div class = "info-heading"> | ||
|
|
||
| <h2>Some random information</h2> | ||
| </div> | ||
| <div class = "info-content"> | ||
|
|
||
| <div class="info-1"> | ||
| <div class="box"></div> | ||
| <p>Some content is there here which will be changed later</p> | ||
| </div> | ||
| <div class="info-1"> | ||
| <div class="box"></div> | ||
| <p>Some content is there here which will be changed later</p> | ||
| </div> | ||
|
|
||
| <div class="info-1"> | ||
| <div class="box"></div> | ||
| <p>Some content is there here which will be changed later</p> | ||
| </div> | ||
| <div class="info-1"> | ||
| <div class="box"></div> | ||
| <p>Some content is there here which will be changed later</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="quote"> | ||
| <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur, | ||
| assumenda explicabo quaerat eligendi eaque distinctio, repudiandae maiores | ||
| perspiciatis amet, illo fugiat. Delectus repudiandae ab voluptatem cumque | ||
| veniam itaque dignissimos deleniti.</p> | ||
| <h4 id = "author">-Thor, God of Thunder </h3> | ||
| </div> | ||
| <div class="sign-up"> | ||
| <div class="sign-up-banner"> | ||
| <div class = "banner-left"> | ||
|
|
||
| <h2>Call to acton! its time</h2> | ||
| <p>Sign up for our product by clicking that button right over there!</p> | ||
| </div> | ||
| <button class = "btn">Sign up</button> | ||
| </div> | ||
| </div> | ||
| <div class="footer"> | ||
| <p id = "end"> Copyright The Odin Project 2021</p> | ||
| </div> | ||
| </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,119 @@ | ||
| *{ | ||
| margin:0px; | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| } | ||
| body{ | ||
|
|
||
| } | ||
| .container{ | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| p{ | ||
| font-size: medium; | ||
| margin-top: 5px; | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| .header { | ||
| background-color:rgb(23, 28, 39); | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| color: #fff; | ||
| padding: 0 32px; | ||
| } | ||
|
|
||
| .nav-bar{ | ||
| display : flex; | ||
| padding: 20px 0; | ||
| max-width: 1000px; | ||
| width: 100%; | ||
| } | ||
| .left-side{ | ||
| width : 40%; | ||
| } | ||
| .right-side{ | ||
| font-size: small; | ||
| width: 60%; | ||
| display :flex; | ||
| justify-content: space-evenly; | ||
| } | ||
| .main{ | ||
| display: flex; | ||
| max-width: 1000px; | ||
| width: 100%; | ||
| height: 400px; | ||
| align-items: center; | ||
| gap: 32px; | ||
| } | ||
| .left{ | ||
| flex: 1; | ||
| } | ||
| .left h1 { | ||
| font-size: 40px; | ||
| } | ||
| .right { | ||
| flex: 1; | ||
| } | ||
| .right img { | ||
| width: 100%; | ||
| } | ||
| .info{ | ||
| padding : 30px 40px; | ||
| } | ||
| .info-heading{ | ||
| text-align: center; | ||
| } | ||
| .info-1{ | ||
| padding: 20px; | ||
| } | ||
| .info-content{ | ||
| display: flex; | ||
| justify-content: space-evenly; | ||
| } | ||
| .box{ | ||
| border : 2px solid black; | ||
| height : 100px; | ||
| width: 100px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .quote{ | ||
| background-color: bisque; | ||
| padding : 40px 90px; | ||
| } | ||
| .sign-up{ | ||
| height : auto; | ||
| } | ||
| .sign-up-banner{ | ||
| background-color: lightcoral; | ||
| margin: 50px 70px; | ||
| padding : 20px; | ||
| display: flex; | ||
| justify-content: space-evenly; | ||
| } | ||
| .banner-left{ | ||
| font-size: medium; | ||
| } | ||
| .footer{ | ||
| height : 60px; | ||
| background-color: lightblue; | ||
| } | ||
| .btn{ | ||
| margin-top: 10px; | ||
| border: none; | ||
| border-radius: 8px; | ||
| background-color: rgb(0, 97, 200); | ||
| padding: 12px 24px; | ||
| font-size: 16px; | ||
| color: #fff; | ||
| } | ||
| #end{ | ||
| text-align: center; | ||
| padding:20px; | ||
| } | ||
| #author{ | ||
| text-align: end; | ||
| padding-right: 27px; | ||
| } |