-
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
1 changed file
with
256 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,256 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charaset="utf-8"> | ||
| <style> | ||
| html, | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| h1, h2, h3 { | ||
| margin-top: 0; | ||
| text-align: center; | ||
| } | ||
| .subtitle { | ||
| text-align: center; | ||
| } | ||
| .menulist { | ||
| margin: 0; | ||
| list-style: none; | ||
| padding: 0; | ||
| } | ||
| .landing_cta { | ||
| margin-top: 1.5em; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .grid { | ||
| box-sizing: border-box; | ||
| display: grid; | ||
| grid-template-columns: minmax(2em, 1fr) repeat(6, minmax(auto, 10em)) minmax(2em, 1fr); | ||
| } | ||
| .grid_2-8 { | ||
| grid-column: 2 / 8; | ||
| } | ||
| .grid_3-7 { | ||
| grid-column: 3 / 7; | ||
| } | ||
| .grid_4-6 { | ||
| grid-column: 4 / 6; | ||
| } | ||
| .grid_cols-3max { | ||
| grid-template-columns: repeat(auto-fit, minmax(18em, 1fr)); | ||
| grid-gap: 3em; | ||
| } | ||
|
|
||
| .header { | ||
| background-color: #000; | ||
| color: #fff; | ||
| padding: 1em; | ||
| position: sticky; | ||
| text-align: center; | ||
| top: 0; | ||
| z-index: 10; | ||
| } | ||
| .header_menu { | ||
| column-gap: 1em; | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| .header_menu-link { | ||
| color: #a8d6f7; | ||
| } | ||
| .hero { | ||
| align-content: center; | ||
| background-color: #a8d6f7; | ||
| min-height: 50vh; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .options { | ||
| background-color: #4a7696; | ||
| color: #fff; | ||
| padding: 4em 0; | ||
| } | ||
| .options_item-img { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .info { | ||
| padding: 8em 0; | ||
| } | ||
| .feature { | ||
| grid-template-rows: 4em 1fr 4em; | ||
| min-height: 70vh; | ||
| } | ||
| .feature_img { | ||
| background-image: url('/images/shark.jpg'); | ||
| background-size: cover; | ||
| grid-column: 1 / 9; | ||
| grid-row: 1 / 4; | ||
| } | ||
| .feature_content { | ||
| background-color: #184a53; | ||
| color: #fff; | ||
| grid-row-start: 2; | ||
| padding: 2em 2em; | ||
| } | ||
| .feature_content-1 { | ||
| align-self: start; | ||
| grid-column: 2 / 6; | ||
| } | ||
| .feature_content-2 { | ||
| align-self: end; | ||
| grid-column: 5 / 8; | ||
| } | ||
| .footer { | ||
| background-color: #ddd; | ||
| justify-items: center; | ||
| padding: 4em 1em; | ||
| } | ||
| .footer_menu-first { | ||
| grid-column-start: 3; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <header class="header"> | ||
| <div class="header_content grid_2-8"> | ||
| I am a Header | ||
| </div> | ||
| <nav class="grid_3-7"> | ||
| <ul class="header_menu menulist"> | ||
| <li> | ||
| <a href="" class="header_menu-link"> | ||
| Header link | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href="" class="header_menu-link"> | ||
| Header link | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <section class="hero grid"> | ||
| <h1 class="hero_title grid_2-8"> | ||
| I am an Important Message | ||
| </h1> | ||
| <div class="hero_content grid_4-6"> | ||
| And I am a less important, but still a very important thing to consider. | ||
| <div class="landing_cta"> | ||
| <a href=""> | ||
| Click me! | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="options grid grid_2-8"> | ||
| <h2 class="options_title grid_2-8"> | ||
| Here are Some Choices | ||
| </h2> | ||
| <div class="options_content grid grid_2-8 grid_cols-3max"> | ||
| <div> | ||
| <img src="/images/small/slide1.jpg" class="options_item-img"> | ||
| <div class="options_item-title">Stuff</div> | ||
| <p> | ||
| In some high hand of lakes. Take almost any path you please, and ten to one it carries you down in a dale. | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <img src="/images/small/slide1.jpg" class="options_item-img"> | ||
| <div class="options_item-title">Stuff</div> | ||
| <p> | ||
| Leaves you there by a pool in the stream. There is magic in it. | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <img src="/images/small/slide1.jpg" class="options_item-img"> | ||
| <div class="options_item-title">Stuff</div> | ||
| <p> | ||
| Set his feet a-going, and he will infallibly lead you to water, if water there be in all that region. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="info grid"> | ||
| <h2 class="info_title grid_2-8"> | ||
| I am Some More Info | ||
| </h2> | ||
| <div class="subtitle grid_4-6"> | ||
| Say you are in the country. | ||
| </div> | ||
| <div class="info_content grid_3-7"> | ||
| <p> | ||
| In some high land of lakes. Take almost any path you please, and ten to one it carries you down in a dale, and leaves you there by a pool in the stream. There is magic in it. But here is an artist. He desires to paint you the dreamiest, shadiest, quietest, most enchanting bit of romantic landscape in all the valley of the Saco. | ||
| </p> | ||
| </div> | ||
| </section> | ||
|
|
||
| <section class="feature grid"> | ||
| <div class="feature_img"></div> | ||
| <div class="feature_content feature_content-1"> | ||
| Let the most absent-minded of men be plunged in his deepest reveries-stand that man on his legs, set his feet a-going, and he will infalllibly lead you to water, if water there be in all that region. | ||
| </div> | ||
| <div class="feature_content feature_content-2"> | ||
| Take almost any path you please, and ten to one it carries you down in a dale, and leaves you there by a pool in the stream. There is magic in it. | ||
| </div> | ||
| </section> | ||
|
|
||
| <footer class="footer grid"> | ||
| <h3 class="footer_title grid_2-8"> | ||
| I am a Footer | ||
| </h3> | ||
| <ul class="menulist footer_menu-first"> | ||
| <li> | ||
| Products | ||
| </li> | ||
| <li> | ||
| <a href="">Footer link</a> | ||
| </li> | ||
| <li> | ||
| <a href="">Footer link</a> | ||
| </li> | ||
| </ul> | ||
| <ul class="menulist"> | ||
| <li> | ||
| About | ||
| </li> | ||
| <li> | ||
| <a href="">Footer link</a> | ||
| </li | ||
| <li> | ||
| <a href="">Footer link</a> | ||
| </li> | ||
| </ul> | ||
| <ul class="menulist"> | ||
| <li> | ||
| Links | ||
| </li> | ||
| <li> | ||
| <a href="">Footer link</a> | ||
| </li | ||
| <li> | ||
| <a href="">Footer link</a> | ||
| </li> | ||
| </ul> | ||
| <ul class="menulist"> | ||
| <li> | ||
| Account | ||
| </li> | ||
| <li> | ||
| <a href="">Footer link</a> | ||
| </li | ||
| <li> | ||
| <a href="">Footer link</a> | ||
| </li> | ||
| </ul> | ||
| </footer> | ||
|
|
||
| </body> | ||
| </html> |