Last active
June 9, 2020 07:28
-
-
Save jmnyarega/675416b07fbb5b4d87ed3bf27806c5a1 to your computer and use it in GitHub Desktop.
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"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <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"> | |
| <title>dark cards</title> | |
| <style> | |
| :root { | |
| --dark: #000; | |
| --white: #fff; | |
| --gradient: linear-gradient(to top left, #703091, #2b7be5); | |
| --width: 800px; | |
| --height: fit-content; | |
| } | |
| * { | |
| font-family: "Roboto", sans-serif; | |
| padding: 0; | |
| margin: 0 | |
| } | |
| .container { | |
| margin: 10px auto; | |
| width: var(--width); | |
| height: var(--height); | |
| padding: calc(var(--width) / 50); | |
| background-color: var(--dark); | |
| color: var(--white); | |
| box-sizing: border-box; | |
| border-radius: 0.5em; | |
| } | |
| h3 { | |
| padding: 10px 10px; | |
| text-align: center; | |
| font-size: 24px; | |
| } | |
| h3::after { | |
| content: ""; | |
| display: block; | |
| height: 2px; | |
| width: 30%; | |
| margin: 10px auto; | |
| background-image: var(--gradient); | |
| } | |
| h4 { | |
| font-size: x-large; | |
| text-align: center; | |
| padding: 0 10px; | |
| } | |
| p { | |
| text-align: center; | |
| line-height: 1.5; | |
| font-size: 20px; | |
| } | |
| .cards { | |
| display: flex; | |
| justify-content: space-between; | |
| text-align: center; | |
| flex-wrap: wrap | |
| } | |
| .card { | |
| width: calc(var(--width) / 5 - 50px ); | |
| margin: calc(var(--width) / 30) 5px; | |
| border: 2px solid #5E6164; | |
| border-radius: .5em; | |
| background-color: #272B30; | |
| max-width: calc( (var(--width) / 2) - 50px); | |
| padding: 40px 5px; | |
| } | |
| .button-container { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| button { | |
| border: none; | |
| border-radius: .5em; | |
| padding: 10px 15px; | |
| margin-top: 10px; | |
| background-image: var(--gradient); | |
| cursor: pointer; | |
| color: var(--white); | |
| font-size: 15px; | |
| } | |
| .card p { | |
| font-size: 14px; | |
| margin: 5px; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h3> | |
| See what makes us unique | |
| </h3> | |
| <div class="cards"> | |
| <div class="card"> | |
| <i class="fa fa-check"> </i> | |
| <p>Advanced observability</p> | |
| </div> | |
| <div class="card"> | |
| <i class="fa fa-check"> </i> | |
| <p>Continuous automation</p> | |
| </div> | |
| <div class="card"> | |
| <i class="fa fa-check"> </i> | |
| <p>AI-assistance</p> | |
| </div> | |
| <div class="card"> | |
| <i class="fa fa-check"> </i> | |
| <p>User experience & business analytics</p> | |
| </div> | |
| <div class="card"> | |
| <i class="fa fa-check"> </i> | |
| <p>Cross-team collaboration</p> | |
| </div> | |
| </div> | |
| <div class="button-container"> | |
| <button>Explore Our Platform</button> | |
| </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