Skip to content

Instantly share code, notes, and snippets.

@TangoPJ
Last active August 24, 2022 04:19
Show Gist options
  • Save TangoPJ/137c863eee639c8e3980948ddf39eb38 to your computer and use it in GitHub Desktop.
Save TangoPJ/137c863eee639c8e3980948ddf39eb38 to your computer and use it in GitHub Desktop.
.wrapper {
background-color: #2f3660;
text-align: center;
padding-top: 48px;
padding-bottom: 48px;
}
.title {
color: #ebebeb;
letter-spacing: 2px;
font-size: 3rem;
line-height: 3.125rem;
font-weight: 300;
margin: 0;
padding: 0;
margin-bottom: 38px;
}
@media screen and (max-width: 960px) {
.title {
font-size: 2.125rem;
line-height: 2.5rem;
margin-bottom: 28px;
}
}
.cards {
padding: 12px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin-right: -12px;
margin-left: -12px;
grid-auto-rows: minmax(300px, 1fr);
grid-gap: 24px;
}
.card {
border-radius: 4px;
background-color: #ffffff;
color: #2c3e50;
width: 100%;
text-align: left;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-title {
font-size: 1.25rem;
padding: 16px;
padding-bottom: 13px;
color: #2c3e50;
margin: 0;
}
.card-subtitle {
padding: 16px;
padding-top: 0;
padding-bottom: 36px;
display: flex;
align-items: center;
color: rgba(0,0,0, .6);
}
.card-icon:nth-child(3) {
margin-left: 8px;
}
.card-description {
padding: 16px;
padding-top: 0;
line-height: 1.375rem;
color: rgba(0,0,0,.6);
}
.card-line {
margin-bottom: 8px;
width: 90%;
height: 0;
border: solid;
border-width: thin 0 0;
max-height: 0;
border-color: rgba(0,0,0, .12);
}
.card-footer {
padding: 16px;
text-align: right;
color: #2c3e50;
caret-color: #2c3e50;
font-weight: 700;
padding-bottom: 24px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment