Last active
June 9, 2020 08:11
-
-
Save jmnyarega/70e9e6638e7a14190bf65a393ce0f2a6 to your computer and use it in GitHub Desktop.
Challenge one: How to use cards with image. I have used object-fit cover for this
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Picture Cards</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;0,900;1,300&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --white: #fff; | |
| --height: 350px; | |
| --width: 300px; | |
| --footer-color: #4c4c4c; | |
| --space: 17px; | |
| } | |
| body { | |
| font-family: "Roboto", sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap-reverse; | |
| } | |
| .card { | |
| display: flex; | |
| justify-content: space-between; | |
| flex-direction: column; | |
| min-height: var(--height); | |
| width: var(--width); | |
| box-shadow: 0 0 5px 1px; | |
| margin: var(--space); | |
| border-bottom-right-radius: 0.5em; | |
| border-bottom-left-radius: 0.5em; | |
| } | |
| h3 { | |
| line-height: calc(var(--space) * 1.5); | |
| padding: var(--space); | |
| text-align: center; | |
| line-height: 1.5; | |
| font-size: 1.2rem; | |
| } | |
| .footer { | |
| display: flex; | |
| justify-content: space-between; | |
| color: var(--footer-color); | |
| padding: var(--space) | |
| } | |
| .image { | |
| background: url('https://i.picsum.photos/id/862/200/300.jpg') no-repeat; | |
| background-color: #2f2f2f; | |
| background-blend-mode: multiply; | |
| width: var(--width); | |
| height: calc(var(--height) * 0.5); | |
| background-size: cover; | |
| background-position: bottom left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="card"> | |
| <div class="image"></div> | |
| <h3>Manage dashboards more efficiently with more control with the JSON editor</h3> | |
| <div class="footer"> | |
| <span>May 12, 2020</span> | |
| <span>Roman Windischhofer</span> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="image"></div> | |
| <h3>Government: Why it's important, now more than ever to optimize digital user experience</h3> | |
| <div class="footer"> | |
| <span>May 11, 2020</span> | |
| <span>Martyn Beal</span> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Author
jmnyarega
commented
Jun 9, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment