A Pen by Charlotte Payne on CodePen.
Created
December 10, 2019 00:27
-
-
Save CLTPayne/07a989ec504778824934e460783baf19 to your computer and use it in GitHub Desktop.
Generic Website Layout 3
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
| <div class="layout"> | |
| <figure class="map"> | |
| <img class="map__display" src="https://www.realmilkpaint.com/wp-content/uploads/Sweetheart_Edited_2018.jpg" alt="Pink"> | |
| <figurecaption class="map__info"> | |
| <div class="status"> | |
| <div class="status__heading"><span class="status__indicator"></span>Completed</div> | |
| <div class="status__missing">Missing maps: Bogor</div> | |
| <ul class="status__breakdown"> | |
| <li class="status__breakdown__item"> | |
| 2016 | |
| <div class="status__breakdown__descriptor">year started | |
| <div> | |
| </li> | |
| <li class="status__breakdown__item"> | |
| Completed | |
| <div class="status__breakdown__descriptor">status</div> | |
| </li> | |
| <li class="status__breakdown__item"> | |
| 553,600 | |
| <div class="status__breakdown__descriptor">edits</div> | |
| </li> | |
| </ul> | |
| <div class="status__more-info">See Tasking Manager for details</div> | |
| </div> | |
| </figurecaption> | |
| </figure> | |
| <aside class="contact"> | |
| <h2 class="contact__header header">Get Involved</h2> | |
| <div class="contact__summary"> | |
| <span class="info"> | |
| i | |
| <div class="info__tooltip"> | |
| <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita magnam autem in sed, sapiente perspiciatis libero quidem distinctio culpa, illo officiis et pariatur a sunt sequi non, ex ipsam at!</p> | |
| </div> | |
| </span> | |
| <div class="contact__description">Travelling to Indonesia or want to get in touch about a collaboration?</div> | |
| </div> | |
| <ul class="contact__info"> | |
| <li class="contact__info__address"> | |
| <div class="address__header header">Contact HOT</div> | |
| <div class="address__card"> | |
| <p class="name">Yantisa Akhadi</p> | |
| <p class="role">Country Manager</p> | |
| <a href="mailto: yantisa.akhadi@hotosm.org" class="">yantisa.akhadi@hotosm.org</a> | |
| </div> | |
| </li> | |
| <li class="contact__info__address"> | |
| <div class="address__header header">Visit</div> | |
| <div class="address__card"> | |
| <p class="name">HOT Indonesia Office</p> | |
| <p class="street-address">Jalan Tebet Timur</p> | |
| <p class="country">Jakarta 12820</p> | |
| <p class="telephone">+62 21 22901448</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </aside> | |
| </div |
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
| @import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap); | |
| $medium: 600px; | |
| $large: 768px; | |
| $size: 40px; | |
| $spacing: 8px; | |
| $border: 1px solid currentColor; | |
| $thickBorder: 2px solid currentColor; | |
| body { | |
| margin: 0; | |
| } | |
| .layout { | |
| display: grid; | |
| font-family: 'Noto Sans TC', sans-serif; | |
| @media(min-width: $large) { | |
| grid-template-columns: 1fr $size * 10; | |
| grid-template-rows: 1fr; | |
| } | |
| } | |
| .map { | |
| max-width: 1200px; | |
| margin: 0; | |
| @media(min-width: $medium) { | |
| display: grid; | |
| grid-template-columns: $size * 8 1fr; | |
| grid-template-rows: 1fr; | |
| } | |
| } | |
| .map__display { | |
| height: $size * 9; | |
| width: 100%; | |
| overflow: hidden; | |
| object-fit: cover; | |
| @media(min-width: $medium) { | |
| grid-column: span 2; | |
| } | |
| @media(min-width: $large) { | |
| height: 100vh; | |
| } | |
| } | |
| .map__info { | |
| display: inline-block; | |
| @media(min-width: $large) { | |
| position: absolute; | |
| } | |
| } | |
| .status { | |
| padding: 1rem; | |
| @media(min-width: $large) { | |
| margin: 1rem; | |
| background: white; | |
| } | |
| } | |
| .status__heading { | |
| margin-bottom: 1rem; | |
| text-transform: uppercase; | |
| } | |
| .status__indicator { | |
| display: inline; | |
| margin-right: $spacing; | |
| padding-left: $spacing; | |
| background: lightgray; | |
| } | |
| .status__breakdown { | |
| display: flex; | |
| padding: 1rem 0; | |
| list-style: none; | |
| text-align: center; | |
| & .status__breakdown__item:not(:last-of-type) { | |
| padding-right: 1rem; | |
| } | |
| } | |
| .status__breakdown__item + .status__breakdown__item { | |
| border-left: $border; | |
| padding-left: 1rem; | |
| } | |
| .status__breakdown__descriptor { | |
| font-size: 0.8rem; | |
| } | |
| .contact__header { | |
| padding: 1rem; | |
| text-align: center; | |
| background: lightgray; | |
| @media(min-width: $large) { | |
| margin-top: 0; | |
| } | |
| } | |
| .contact__summary { | |
| display: flex; | |
| margin: 1rem; | |
| align-items: center; | |
| @media(min-width: $medium) { | |
| justify-content: center; | |
| } | |
| } | |
| .info { | |
| display: inline-block; | |
| width: 1.4rem; | |
| margin-right: 1rem; | |
| border: $thickBorder; | |
| border-radius: 50%; | |
| text-align: center; | |
| cursor: pointer; | |
| &:hover .info__tooltip { | |
| visibility: visible; | |
| } | |
| } | |
| .info__tooltip { | |
| position: absolute; | |
| width: $size * 6; | |
| margin: $spacing; | |
| padding: $spacing; | |
| z-index: 1; | |
| visibility: hidden; | |
| text-align: center; | |
| color: white; | |
| background: palevioletred; | |
| } | |
| .header { | |
| margin-bottom: 1rem; | |
| font-weight: bold; | |
| } | |
| .contact__description { | |
| text-decoration: underline; | |
| } | |
| .contact__info { | |
| padding: 0; | |
| margin: 3rem; | |
| list-style: none; | |
| @media(min-width: $medium) { | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| @media(min-width: $large) { | |
| display: block; | |
| } | |
| } | |
| .address__header { | |
| font-size: 1.2rem; | |
| } | |
| .contact__info__address + .contact__info__address { | |
| margin-top: 2rem; | |
| padding-top: 1rem; | |
| border-top: $border; | |
| @media(min-width: $medium) { | |
| margin-top: 0; | |
| padding-top: 0; | |
| padding-left: 4rem; | |
| border-top: none; | |
| border-left: $border; | |
| } | |
| @media(min-width: $large) { | |
| margin-top: 2rem; | |
| padding-top: 1rem; | |
| padding-left: 0; | |
| border-top: $border; | |
| border-left: none; | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment