Pure Html Css Circle Cards | OL circle cards | New Design







Pure Html Css Circle Cards | OL circle cards | New Design   


Welcome🎉 to Code With Random blog. In this blog, we learn how to create Circle Cards. We use HTML & CSS  for Circle Cards on hover. Hope you enjoy our blog so let’s start with a basic HTML structure for the Circle Cards on the hover. 

HTML code

 <h1>OL circle cards</h1>  
<ol>
<li >
<div class="icon"><i class="fa-solid fa-bicycle"></i></div>
<div class="title">Step 1</div>
<div class="descr">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
<li >
<div class="icon"><i class="fa-solid fa-car"></i></div>
<div class="title">Step 2</div>
<div class="descr">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
<li >
<div class="icon"><i class="fa-solid fa-helicopter"></i></div>
<div class="title">Step 3</div>
<div class="descr">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
<li >
<div class="icon"><i class="fa-solid fa-plane"></i></div>
<div class="title">Step 4</div>
<div class="descr">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
<li >
<div class="icon"><i class="fa-solid fa-rocket"></i></div>
<div class="title">Step 5</div>
<div class="descr">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
<li >
<div class="icon"><i class="fa-solid fa-bus"></i></div>
<div class="title">Step 6</div>
<div class="descr">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis, porro.</div>
</li>
</ol>

There is all HTML code for the Circle Cards on hover. Now, you can see output without CSS, then we write CSS for the Circle Cards.

Output

Pure Html Css Circle Cards | OL circle cards | New Design

CSS code

 @import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");  
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;500;700&display=swap");
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
--color: rgba(30, 30, 30);
--bgColor: rgba(245, 245, 245);
min-height: 100vh;
display: grid;
align-content: center;
gap: 2rem;
padding: 2rem;
font-family: "Exo 2", sans-serif;
color: var(--color);
background: var(--bgColor);
}
h1 { text-align: center }
ol {
width: min(60rem, 90%);
margin-inline: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
list-style: none;
counter-reset: stepnr;
}
li:nth-child(6n + 1) { --accent-color: #b8df4e }
li:nth-child(6n + 2) { --accent-color: #4cbccb }
li:nth-child(6n + 3) { --accent-color: #7197d3 }
li:nth-child(6n + 4) { --accent-color: #ae78cb }
li:nth-child(6n + 5) { --accent-color: #7dc7a4 }
li:nth-child(6n + 6) { --accent-color: #f078c2 }
ol li {
counter-increment: stepnr;
width: 18rem;
--borderS: 2rem;
aspect-ratio: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: calc(var(--borderS) + 2rem);
position: relative;
}
ol li::before,
ol li::after {
inset: 0;
position: absolute;
border-radius: 50%;
border: var(--borderS) solid var(--bgColor);
line-height: 1.1;
}
ol li::before {
content: counter(stepnr);
color: var(--accent-color);
padding-left: 10rem;
font-size: 12rem;
font-weight: 700;
overflow: hidden;
}
ol li::after {
content: "";
filter: drop-shadow(-0.25rem 0.25rem 0.0675rem rgba(0, 0, 0, 0.75)) blur(5px);
}
ol li > * { width: 7.5rem }
ol li .icon { font-size: 2rem; color: var(--accent-color); text-align: center }
ol li .title { font-size: 2rem; font-weight: 500 }
ol li .descr { font-size: 0.8rem; font-weight: 300 }
.credits { margin-top: 2rem; text-align: right }
.credits a { color: var(--color) }

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output

Pure Html Css Circle Cards | OL circle cards | New Design

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the  Circle Cards on hover, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create Circle Cards on hover using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Mark Boots

Check out more…..



Share on:

Leave a Comment