-
Notifications
You must be signed in to change notification settings - Fork 1
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
LBU
authored and
LBU
committed
Aug 24, 2020
1 parent
e51b2f7
commit f076134
Showing
2 changed files
with
192 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,139 @@ | ||
| html, body, div, span, applet, object, iframe, | ||
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
| a, abbr, acronym, address, big, cite, code, | ||
| del, dfn, em, img, ins, kbd, q, s, samp, | ||
| small, strike, strong, sub, sup, tt, var, | ||
| b, u, i, center, | ||
| dl, dt, dd, ol, ul, li, | ||
| fieldset, form, label, legend, | ||
| table, caption, tbody, tfoot, thead, tr, th, td, | ||
| article, aside, canvas, details, embed, | ||
| figure, figcaption, footer, header, hgroup, | ||
| menu, nav, output, ruby, section, summary, | ||
| time, mark, audio, video { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| font: inherit; | ||
| vertical-align: baseline; | ||
| } | ||
| /* Meyers Reset Above */ | ||
|
|
||
| html{ | ||
| font-size: 62.5%; | ||
| box-sizing: border-box; | ||
| font-family: 'Inconsolata', monospace; | ||
| } | ||
|
|
||
| nav{ | ||
| font-size: 2rem; | ||
| display: flex; | ||
| list-style-type: none; | ||
| margin: 3%; | ||
| text-align: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .nav-top{ | ||
| display: flex; | ||
| margin: 0.5%; | ||
| border-bottom: 1px solid gray; | ||
| margin-bottom: 1%; | ||
| } | ||
| .nav-left{ | ||
| justify-content: flex-start; | ||
| } | ||
|
|
||
| .nav{ | ||
| background-color: #DC143C; | ||
| border: 1px solid white; | ||
| color: white; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .nav-1{ | ||
| background-color: #E9967A; | ||
| } | ||
|
|
||
| .nav:hover{ | ||
| background-color: white; | ||
| color: #DC143C; | ||
| transition: 1s; | ||
| } | ||
|
|
||
| .nav-1:hover{ | ||
| background-color: white; | ||
| color: #E9967A; | ||
| transition: 1s; | ||
| } | ||
|
|
||
| h1{ | ||
| font-size: 5rem; | ||
| text-align: center; | ||
| margin: 4% 0; | ||
| } | ||
|
|
||
| .left{ | ||
| display: flex; | ||
| width: 30%; | ||
| margin: 1% | ||
| } | ||
|
|
||
| .img-1{ | ||
| width: 100%; | ||
| height: 50vh; | ||
| border-radius: 2%; | ||
| } | ||
|
|
||
| .right{ | ||
| display: flex; | ||
| font-size: 1.6rem; | ||
| margin: 1%; | ||
| width: 40%; | ||
| flex-flow: column; | ||
| } | ||
|
|
||
| h2{ | ||
| font-size: 4rem; | ||
| margin-bottom: 1%; | ||
| color: #E9967A; | ||
| } | ||
|
|
||
| .h2-container{ | ||
| margin: 1%; | ||
| padding: 30px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .container-1{ | ||
| display: flex; | ||
| margin: 5%; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .button-1{ | ||
| display: flex; | ||
| text-align: center; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .button-1 button{ | ||
| background-color: #DC143C; | ||
| color: white; | ||
| font-size: 20px; | ||
| border-radius: 5%; | ||
| padding: 15px; | ||
| border: none; | ||
| } | ||
|
|
||
| .button-1 button:hover{ | ||
| background-color: white; | ||
| color: #DC143C; | ||
| transition: 1s; | ||
| border: none; | ||
| } | ||
|
|
||
| @media (max-width: 500px){ | ||
|
|
||
| } |
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,53 @@ | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="demo.css"> | ||
| <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@500;700&display=swap" rel="stylesheet"> | ||
| <title>Document</title> | ||
| </head> | ||
| <body> | ||
|
|
||
| <section> | ||
| <div class="nav-top"> | ||
| <div class="nav-left"> | ||
| <nav> | ||
| <li class="nav nav-1">Home</li> | ||
| <li class="nav nav-2">Link</li> | ||
| <li class="nav nav-3">Link</li> | ||
| <li class="nav nav-4">Link</li> | ||
| </nav> | ||
| </div> | ||
| <div class="nav-right"> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </section> | ||
|
|
||
| <section> | ||
| <h1>AirBnb Optimal Price</h1> | ||
| </section> | ||
|
|
||
| <section> | ||
| <div class="container-1"> | ||
| <div class="left img-container"> | ||
| <img class="img-1" src="https://images.unsplash.com/photo-1553444862-65de13a9e728?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt=""> | ||
| </div> | ||
| <div class="right"> | ||
| <div class="h2-container"> | ||
| <h2>WE offer reasonable price!</h2> | ||
| </div> | ||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error non eveniet aliquid deleniti voluptas sint dolorem, amet minus delectus? Tempore quas sed accusantium atque iusto earum repudiandae officiis, quam molestiae!Lorem ipsum dolor sit amet consectetur adipisicing elit. Error non eveniet aliquid deleniti voluptas sint dolorem, amet minus delectus? Tempore quas sed accusantium atque iusto earum repudiandae officiis, quam molestiae!Lorem ipsum dolor sit amet consectetur adipisicing elit. Error non eveniet aliquid deleniti voluptas sint dolorem, amet minus delectus? Tempore quas sed accusantium atque iusto earum repudiandae officiis, quam molestiae! | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <div class="button-1"> | ||
| <button>Learn more</button> | ||
| </div> | ||
|
|
||
|
|
||
| </body> | ||
| </html> |