A Pen by Mark Boots on CodePen.
Created
May 1, 2024 01:39
-
-
Save mikepixeldev/4b9c952d8025b56410efceeb672861a9 to your computer and use it in GitHub Desktop.
OL-cards
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
<!-- inspired by https://adobe.ly/3SZ9MC5 --> | |
<h1>OL-Cards</h1> | |
<ol> | |
<li style="--accent-color: #FF6F00"> | |
<div class="icon"><i class="fa-light fa-lightbulb-exclamation-on"></i></div> | |
<div class="title">Analysis</div> | |
<div class="descr">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</div> | |
</li> | |
<li style="--accent-color: #008DC2"> | |
<div class="icon"><i class="fa-light fa-flower-daffodil"></i></div> | |
<div class="title">Investment</div> | |
<div class="descr">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</div> | |
</li> | |
<li style="--accent-color: #0B456A"> | |
<div class="icon"><i class="fa-light fa-chart-line-up"></i></div> | |
<div class="title">Growth</div> | |
<div class="descr">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</div> | |
</li> | |
<li style="--accent-color: #6A829A"> | |
<div class="icon"><i class="fa-light fa-chart-mixed"></i></div> | |
<div class="title">Benifits</div> | |
<div class="descr">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</div> | |
</li> | |
</ol> |
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=Merriweather:ital@1&family=Oswald:wght@500&display=swap'); | |
@import url('https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css'); | |
/* grid layout */ | |
ol, ol::before, ol::after, | |
ol *, ol *::before, ol *::after { margin: 0; padding: 0; box-sizing: border-box } | |
ol { | |
display: grid; | |
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); | |
gap: 1rem; | |
width: min(60rem, calc(100% - 2rem)); | |
margin-inline: auto; | |
padding-block: 1rem; | |
list-style: none; | |
counter-reset: count; | |
} | |
/* card layout/styling */ | |
ol > li { | |
--card-background-color: #f0f0f0; | |
--card-text-color: #0F0F0F; | |
--card-border-radius: 0.5rem; | |
--card-padding-block: 1.5rem; | |
--card-padding-inline: 1rem; | |
--outset-size: 0.75rem; | |
--outset-background-color: #e5e5e5; | |
--number-font-size: 3rem; | |
--number-overlap: 0.5rem; | |
--number-font-family: 'Oswald', sans-serif; | |
--number-font-weight: 500; | |
margin: var(--outset-size); | |
margin-top: calc(var(--number-font-size) - var(--number-overlap)); | |
border-radius: var(--card-border-radius); | |
padding-block: var(--card-padding-block); | |
padding-inline: var(--card-padding-inline); | |
color: var(--card-text-color); | |
background-color: var(--card-background-color); | |
box-shadow: | |
inset 1px 1px 0px rgb(255 255 255 / .5), | |
inset -1px -1px 0px rgb(0 0 0 / .25), | |
calc(var(--outset-size) * .25) calc(var(--outset-size) * .25) calc(var(--outset-size) * .5) rgb(0 0 0 / .25); | |
position: relative; | |
counter-increment: count; | |
} | |
ol > li::after{ | |
content: counter(count, decimal-leading-zero); | |
position: absolute; | |
bottom: calc(100% - var(--number-overlap)); | |
left: 50%; | |
transform: translateX(-50%); | |
color: var(--accent-color); | |
font-family: var(--number-font-family); | |
font-weight: var(--number-font-weight); | |
font-size: var(--number-font-size); | |
line-height: 1; | |
z-index: -1; | |
} | |
ol > li::before{ | |
content: ""; | |
position: absolute; | |
width: calc(100% + (var(--outset-size) * 2)); | |
height: 100%; | |
bottom: calc(var(--outset-size) * -1); | |
left: calc(var(--outset-size) * -1); | |
z-index: -1; | |
border-bottom-left-radius: calc(var(--card-border-radius) + var(--outset-size)); | |
border-bottom-right-radius: calc(var(--card-border-radius) + var(--outset-size)); | |
background-color: var(--outset-background-color); | |
background-image: | |
linear-gradient(to left, var(--outset-background-color) calc(var(--outset-size) * 2), transparent 0), | |
linear-gradient(135deg, var(--accent-color) 80%, var(--outset-background-color) 0); | |
} | |
/* card content */ | |
h1 { | |
font-size: 2.5rem; | |
font-family: 'Oswald', sans-serif; | |
text-align: center; | |
font-weight: normal | |
} | |
.icon{ | |
font-size: 2rem; | |
text-align: center; | |
margin-bottom: calc(var(--card-padding-block) * .5); | |
} | |
.title { | |
text-transform: uppercase; | |
font-family: 'Oswald', sans-serif; | |
text-align: center; | |
color: var(--accent-color) | |
} | |
.descr { | |
color: var(--text-color); | |
font-size: 0.75rem; | |
font-family: 'Merriweather', serif; | |
text-align: center; | |
} | |
/* */ | |
body { | |
background-color: #f5f5f5; | |
min-height: 100vh; | |
margin: 0; | |
padding: 0; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment