A Pen by Bianca O. Uche on CodePen.
Created
February 13, 2022 09:56
-
-
Save Erudite885/bf8fe00541c6156eab9c13bb90945738 to your computer and use it in GitHub Desktop.
QR Code Component
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
| <body> | |
| <main> | |
| <div class="card"> | |
| <div class="image" src="" alt="QR code image"></div> | |
| <header class="title"> Improve your front-end skills by building projects </header> | |
| <p class="text"> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p> | |
| </div> | |
| </main> | |
| <footer class="attribution"> | |
| Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. | |
| Coded by <a href="#">Bianca Uche</a>. | |
| </footer> | |
| </body> | |
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/css2?family=Outfit:wght@300;400;600&family=PT+Sans&display=swap"); | |
| :root{ | |
| --color-darkBlue: hsl(218, 44%, 22%); | |
| --color-grayBlue: hsl(220, 15%, 55%); | |
| --color-lightGray: hsl(212, 45%, 89%); // (main BG) | |
| --white: hsl(0, 0%, 100%); | |
| } | |
| *{ | |
| margin:0; | |
| padding:0; | |
| box-sizing:border-box; | |
| } | |
| body { | |
| background: var(--color-lightGray); | |
| font-family: "Outfit", sans-serif; | |
| } | |
| .card { | |
| max-width:300px; | |
| margin:10% auto; | |
| padding:20px; | |
| background: white; | |
| box-shadow: 0px -5px 50px 0 rgba(0, 0, 0, 0.198); | |
| border-radius:20px; | |
| display: flex; | |
| flex-direction:column; | |
| text-align:center; | |
| } | |
| .image { | |
| background-image: url(https://github.com/adnanebouali/Images/blob/master/image-qr-code.png?raw=true); | |
| background-size: cover; | |
| background-position: top; | |
| background-repeat: no-repeat; | |
| width:100%; | |
| height:250px; | |
| border-radius: 10px; | |
| margin-bottom: 1rem; | |
| } | |
| .title { | |
| font-weight:600; | |
| margin: 10px 12px; | |
| font-size: 18px; | |
| } | |
| .text { | |
| font-size: 16px; | |
| color: hsl(220, 15%, 55%); | |
| margin: 10px 0.1rem; | |
| } | |
| .attribution { | |
| font-size: 11px; | |
| text-align: center; | |
| } | |
| .attribution a { | |
| color: hsl(228, 45%, 44%); | |
| text-decoration:none; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment