Skip to content

Instantly share code, notes, and snippets.

@jmnyarega

jmnyarega/dark-cards.html

Last active June 9, 2020 07:31
Show Gist options
  • Save jmnyarega/df31061d49e8646dec6fa83d03591901 to your computer and use it in GitHub Desktop.
Save jmnyarega/df31061d49e8646dec6fa83d03591901 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dark-cards.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dark 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 {
--dark: #000;
--white: #fff;
--gradient: linear-gradient(to top left, #703091, #2b7be5);
--width: 800px;
--height: fit-content;
--border-radius: 0.5em;
}
* {
margin: 0;
padding: 0;
box-sizing:border-box;
font-family: 'Roboto', sans-serif;
}
.container {
margin: 10px auto;
width: var(--width);
height: var(--height);
padding: calc(var(--width) / 30);
background-color: var(--dark);
color: var(--white);
border-radius: var(--border-radius);
}
h3 {
text-align: center;
font-size: 24px;
}
h3::after {
content: "";
display: block;
width: 45%;
height: 2px;
margin: 10px auto;
border-radius: var(--border-radius);
text-align: center;
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;
padding: 2rem 0;
}
.cards {
margin-top: calc(var(--width) / 11);
display: flex;
justify-content: space-between;
}
.card {
border: 3px solid #5E6164;
background-color: #272B30;
max-width: calc( (var(--width) / 2) - 50px);
padding: 40px 5px;
border-radius: var(--border-radius);
}
button {
border: none;
padding: 10px 5px;
background-image: var(--gradient);
cursor: pointer;
color: var(--white);
width: 100%;
font-size: 20px;
border-radius: var(--border-radius);
}
</style>
</head>
<body>
<div class="container">
<h3>
Gartner recognizes Dynatrace as a 2020 Magic Quadrant Leader for APM
</h3>
<div class="cards">
<div class="card">
<h4>Gartner 2020 Quadrant for APM</h4>
<p>Dynatrace named a Leader and placed furthest for Completeness of vision</p>
<button>Download Magic Quadrant</button>
</div>
<div class="card">
<h4>Gartner 2020 Quadrant for APM</h4>
<p>Dynatrace named a Leader and placed furthest for Completeness of vision</p>
<button>Download Magic Quadrant</button>
</div>
</div>
</div>
</body>
</html>
@jmnyarega
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment