A Pen by Matthew Daniel Brown on CodePen.
Created
June 5, 2019 09:17
-
-
Save matt-daniel-brown/25cda8e14c1d15d60974919624041e7c to your computer and use it in GitHub Desktop.
qr.mdb.codes/scan-me -- landing page concept
This file contains hidden or 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
| <main> | |
| <section id="main-section-1"> | |
| <button id="main-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>barcode-qr</title><g fill="#ffffff"><path fill="#ffffff" d="M11,11H0V0h11V11z M2,9h7V2H2V9z"></path> <path fill="#ffffff" d="M24,11H13V0h11V11z M15,9h7V2h-7V9z"></path> <path fill="#ffffff" d="M11,24H0V13h11V24z M2,22h7v-7H2V22z"></path> <polygon fill="#ffffff" points="24,20 22,20 22,15 20,15 20,18 14,18 14,13 16,13 16,16 18,16 18,13 24,13 "></polygon> <polygon fill="#ffffff" points="24,24 14,24 14,20 16,20 16,22 24,22 "></polygon> <rect data-color="color-2" x="4" y="4" width="3" height="3"></rect> <rect data-color="color-2" x="17" y="4" width="3" height="3"></rect> <rect data-color="color-2" x="4" y="17" width="3" height="3"></rect></g></svg></button> | |
| <a href=""><h1><span class="lighter">https://</span>qr.mdb.codes<span class="lighter">/scan-me</span></h1></a> | |
| </section> | |
| <br> | |
| <section id="main-section-2"> | |
| <button role="button" id="next-button"> | |
| <!-- <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><title>circle-simple-right</title><g fill="#ffffff"><path fill="#ffffff" d="M24,1C11.3,1,1,11.3,1,24s10.3,23,23,23s23-10.3,23-23S36.7,1,24,1z M34.9,24.4c-0.1,0.1-0.1,0.2-0.2,0.3 l-8,8C26.5,32.9,26.3,33,26,33s-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l6.3-6.3H12c-0.6,0-1-0.4-1-1s0.4-1,1-1h19.6l-6.3-6.3 c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l8,8c0.1,0.1,0.2,0.2,0.2,0.3C35,23.9,35,24.1,34.9,24.4z"></path></g></svg> --> | |
| <span>Continue</span> | |
| <span class="icon-wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><title>arrow-right</title><g fill="#84ff86"><path fill="#84ff86" d="M30.707,15.293L21,5.586L19.586,7l8,8H1v2h26.586l-8,8L21,26.414l9.707-9.707 C31.098,16.316,31.098,15.684,30.707,15.293z"></path></g></svg></span> | |
| </button> | |
| </section> | |
| <!-- <section id="info-and-help-section"> | |
| <ul id="secondary-actions"> | |
| <li><a href="info"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><title>c-info</title><g fill="#ffffff"><path fill="#ffffff" d="M16,0C7.178,0,0,7.178,0,16s7.178,16,16,16s16-7.178,16-16S24.822,0,16,0z M18,7c1.105,0,2,0.895,2,2 s-0.895,2-2,2s-2-0.895-2-2S16.895,7,18,7z M19.763,24.046C17.944,24.762,17.413,25,16.245,25c-0.954,0-1.696-0.233-2.225-0.698 c-1.045-0.92-0.869-2.248-0.542-3.608l0.984-3.483c0.19-0.717,0.575-2.182,0.036-2.696c-0.539-0.514-1.794-0.189-2.524,0.083 l0.263-1.073c1.054-0.429,2.386-0.954,3.523-0.954c1.71,0,2.961,0.855,2.961,2.469c0,0.151-0.018,0.417-0.053,0.799 c-0.066,0.701-0.086,0.655-1.178,4.521c-0.122,0.425-0.311,1.328-0.311,1.765c0,1.683,1.957,1.267,2.847,0.847L19.763,24.046z"></path></g></svg></a></li> | |
| <li><a href="help"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><title>c-question</title><g fill="#ffffff"><path fill="#ffffff" d="M16,0C7.178,0,0,7.178,0,16s7.178,16,16,16s16-7.178,16-16S24.822,0,16,0z M16,26c-1.105,0-2-0.895-2-2 s0.895-2,2-2s2,0.895,2,2S17.105,26,16,26z M20.926,14.355c-0.958,1.142-2.715,2.138-3.374,3.144 c-0.385,0.586-0.382,1.267-0.382,1.908H14.79c0-0.736-0.051-1.814,0.486-2.794c0.323-0.591,0.89-1.202,1.699-1.833 c1.605-1.267,2.282-1.926,2.282-3.277c0-1.504-1.123-2.112-2.634-2.112c-0.996,0-2.099,0.152-4.054,1.117l-1.02-2.136 C13.192,7.457,14.952,7,16.829,7c1.586,0,2.844,0.388,3.775,1.165S22,10.014,22,11.382C22,12.531,21.688,13.448,20.926,14.355z"></path></g></svg></a></li> | |
| </ul> | |
| </section> --> | |
| <section id="other-links-section"> | |
| <a href="info" id="info-link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>c-info</title><g fill="#ffffff"><path fill="#ffffff" d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M14.658,18.284 c-0.661,0.26-2.952,1.354-4.272,0.191c-0.394-0.346-0.59-0.785-0.59-1.318c0-0.998,0.328-1.868,0.919-3.957 c0.104-0.395,0.231-0.907,0.231-1.313c0-0.701-0.266-0.887-0.987-0.887c-0.352,0-0.742,0.125-1.095,0.257l0.195-0.799 c0.787-0.32,1.775-0.71,2.621-0.71c1.269,0,2.203,0.633,2.203,1.837c0,0.347-0.06,0.955-0.186,1.375l-0.73,2.582 c-0.151,0.522-0.424,1.673-0.001,2.014c0.416,0.337,1.401,0.158,1.887-0.071L14.658,18.284z M13.452,8c-0.828,0-1.5-0.672-1.5-1.5 s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S14.28,8,13.452,8z"></path></g></svg></a> | |
| <small><strong>Other Links</strong></small> | |
| <small> | |
| <ul class="linklist"> | |
| <li>Homepage: <a href="qr.mdb.codes/index">qr.mdb.codes</a></li> | |
| <li>FAQs: <a href="faq">qr.mdb.codes/faq</a></li> | |
| <li>More Info: <a href="qr.mdb.codes/more-info">qr.mdb.codes/more-info</a></li> | |
| <li>Source Code : <a href="github.com/matt-d-brown/qr.mdb.codes">GitHub Repo</a></li> | |
| </ul> | |
| </small> | |
| </section> | |
| </main> | |
| <footer> | |
| <p id="copyright">Copyright 2019. All Rights Reserved.</p> | |
| <p id="brand">mdb</p> | |
| </footer> |
This file contains hidden or 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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
This file contains hidden or 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 "modularscale@3.*"; | |
| @import "bourbon@5.*"; | |
| @import "neat@2.*"; | |
| @import "breakpoint"; | |
| *, | |
| *::before, | |
| *::after { | |
| text-rendering: optimizeLegibility !important; | |
| -webkit-font-smoothing: antialiased !important; | |
| -moz-osx-font-smoothing: grayscale !important; | |
| } | |
| :root, | |
| html, | |
| body, | |
| main { | |
| flex-basis: auto; | |
| flex-grow: 1; | |
| flex-shrink: 1; | |
| max-width: 100vw; | |
| max-height: 100vh !important; | |
| width: 100vw; | |
| height: 100vh !important; | |
| margin: 0; | |
| padding: 0; | |
| text-align: center; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| align-content: center; | |
| justify-content: center; | |
| background: #000012; | |
| } | |
| #main-button { | |
| appearance: none !important; | |
| background: none !important; | |
| border: none !important; | |
| // background: #222666 !important; | |
| // border: #222666 solid 1px !important; | |
| border: #555 solid 0.5px !important; | |
| padding: 1em; | |
| border-radius: 16px; | |
| line-height: 0; | |
| transform: scale(2); | |
| } | |
| .linklist { | |
| color: gray; | |
| font-family: "IBM Plex Sans", IBM Plex Mono, monospace; | |
| text-align: center; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin: 0.25em auto; | |
| padding: 0; | |
| li { | |
| text-align-last: left; | |
| padding: 0 !important; | |
| margin: 0 !important; | |
| line-height: 1.5 !important; | |
| } | |
| a { | |
| line-height: 1.5 !important; | |
| margin: 0 auto !important; | |
| display: inline-block; | |
| font-family: "IBM Plex Mono", IBM Plex Mono, monospace; | |
| color: lightgray; | |
| text-align: right; | |
| float: right; | |
| } | |
| } | |
| small { | |
| color: gray; | |
| line-height: 1; | |
| margin: auto; | |
| margin-bottom: 0.25em !important; | |
| font-family: "IBM Plex Sans", IBM Plex Mono, monospace; | |
| strong { | |
| text-align: left !important; | |
| display: block !important; | |
| } | |
| } | |
| h1 { | |
| color: white; | |
| line-height: 2; | |
| margin: 1em auto; | |
| font-family: "IBM Plex Mono", IBM Plex Mono, monospace; | |
| letter-spacing: 2px; | |
| font-weight: bolder !important; | |
| color: lightsteelblue; | |
| font-size: 21px; | |
| } | |
| .lighter { | |
| opacity: 0.33 !important; | |
| font-weight: lighter; | |
| } | |
| a { | |
| text-decoration: none; | |
| line-height: 3; | |
| margin-top: 4em !important; | |
| display: block; | |
| } | |
| #next-button { | |
| background: none !important; | |
| appearance: none !important; | |
| // border: none !important; | |
| border: limegreen solid 1px; | |
| border-radius: 3px; | |
| padding: 0.5em 1em; | |
| width: 100%; | |
| display: block; | |
| line-height: 2 !important; | |
| vertical-align: middle; | |
| cursor: pointer; | |
| transition: all 400ms; | |
| &:hover { | |
| opacity: 0.7; | |
| } | |
| &:active { | |
| opacity: 0.3; | |
| transform: scale(1) translatex(4px); | |
| } | |
| &:focus { | |
| outline: none !important; | |
| } | |
| display: flex; | |
| // flex-direction: column; | |
| align-items: center; | |
| align-content: center; | |
| justify-content: space-between; | |
| color: lightgreen; | |
| &:hover { | |
| background: rgba(lightgreen, 0.25) !important; | |
| box-shadow: 0 0 86px 0 rgba(limegreen, 0.75); | |
| } | |
| &:active { | |
| transition-duration: 100ms !important; | |
| background: rgba(lightgreen, 0.75) !important; | |
| color: white !important; | |
| opacity: 1 !important; | |
| } | |
| * { | |
| vertical-align: middle; | |
| line-height: 0 !important; | |
| } | |
| span { | |
| margin: 0 0.5em; | |
| } | |
| } | |
| #secondary-actions { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| align-content: center; | |
| width: 100%; | |
| justify-content: space-evenly; | |
| padding: 0 !important; | |
| text-align: center; | |
| li { | |
| display: block !important; | |
| padding: 0 2em; | |
| a { | |
| display: block !important; | |
| } | |
| } | |
| } | |
| #info-link { | |
| opacity: 0.8; | |
| transition: all 120ms; | |
| &:hover { | |
| opacity: 0.5; | |
| } | |
| &:active { | |
| opacity: 0.25; | |
| } | |
| } | |
| #info-and-help-section { | |
| // padding-top: 4em; | |
| position: relative; | |
| top: 2em; | |
| } | |
| #other-links-section { | |
| flex-shrink: 1; | |
| // padding: 1em 0; | |
| width: 100%; | |
| max-width: 360px; | |
| margin: 0.125em auto; | |
| position: relative; | |
| top: 4em; | |
| transition: all 320ms; | |
| opacity: 0.2; | |
| &:hover { | |
| opacity: 0.8; | |
| } | |
| a { | |
| transition: all 250ms; | |
| &:hover { | |
| color: mintcream !important; | |
| opacity: 1 !important; | |
| } | |
| } | |
| } | |
| #main-section-1, | |
| #main-section-2 { | |
| flex-basis: auto; | |
| // flex-grow: 1; | |
| // flex-shrink: 1; | |
| } | |
| @keyframes fadeInAnimation { | |
| 0% { | |
| opacity: 0; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| main { | |
| // display: none; | |
| // transition: all 400ms ease-in-out; | |
| animation: fadeInAnimation 5s; | |
| animation-delay: 4s; | |
| } |
This file contains hidden or 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
| <link href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/0.5.0/modern-normalize.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/IBM-type/0.5.4/css/ibm-type.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment