Skip to content

Instantly share code, notes, and snippets.

@AlexMikhalev

AlexMikhalev/course-design-cards-scss.markdown

Created December 18, 2024 22:53
Show Gist options
  • Save AlexMikhalev/4b84623390538a931f1c79971530218d to your computer and use it in GitHub Desktop.
Save AlexMikhalev/4b84623390538a931f1c79971530218d to your computer and use it in GitHub Desktop.
Download ZIP
Course design cards #scss
Raw
index.html
<section>
<div class="card green">
<div class="card-header">
<div class="date">
Feb 2, 2021
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0" clip-rule="evenodd" />
</svg>
</div>
<div class="card-body">
<h3>web designing</h3>
<p>Prototyping</p>
<div class="progress">
<span>Progress</span>
<div class="progress-bar"></div>
<span>90%</span>
</div>
</div>
<div class="card-footer">
<ul>
<li> <img src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt=""></li>
<li> <img src="https://images.pexels.com/photos/1043474/pexels-photo-1043474.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt=""></li>
<a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" />
</svg>
</a>
</ul>
<a href="#" class="btn-countdown">2 days left</a>
</div>
</div>
<div class="card orange">
<div class="card-header">
<div class="date">
Feb 05, 2021
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0" clip-rule="evenodd" />
</svg>
</div>
<div class="card-body">
<h3>mobile app</h3>
<p>Shopping</p>
<div class="progress">
<span>Progress</span>
<div class="progress-bar"></div>
<span>30%</span>
</div>
</div>
<div class="card-footer">
<ul>
<li> <img src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt=""></li>
<li> <img src="https://images.pexels.com/photos/874158/pexels-photo-874158.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt=""></li>
<a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" />
</svg>
</a>
</ul>
<a href="#" class="btn-countdown">3 weeks left</a>
</div>
</div>
<div class="card red">
<div class="card-header">
<div class="date">
March 03, 2021
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0" clip-rule="evenodd" />
</svg>
</div>
<div class="card-body">
<h3>dashboard</h3>
<p>Medical</p>
<div class="progress">
<span>Progress</span>
<div class="progress-bar"></div>
<span>50%</span>
</div>
</div>
<div class="card-footer">
<ul>
<li> <img src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt=""></li>
<li> <img src="https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt=""></li>
<a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" />
</svg>
</a>
</ul>
<a href="#" class="btn-countdown">3 weeks left</a>
</div>
</div>
<div class="card blue">
<div class="card-header">
<div class="date">
March 08, 2021
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0" clip-rule="evenodd" />
</svg>
</div>
<div class="card-body">
<h3>web designing</h3>
<p>Wireframing</p>
<div class="progress">
<span>Progress</span>
<div class="progress-bar"></div>
<span>20%</span>
</div>
</div>
<div class="card-footer">
<ul>
<li> <img src="https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Erik Longman"></li>
<li> <img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Jane Doe"></li>
<a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" />
</svg>
</a>
</ul>
<a href="#" class="btn-countdown">3 weeks left</a>
</div>
</div>
</section>
Raw
script.js
/*
inspiration from
https://dribbble.com/shots/14951981-Design-Courses-Darshboard-Design/attachments/6669266?mode=media
*/
Raw
style.scss
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap");
$clr-blue: #1890ff;
$clr-green: #01c3a8;
$clr-orange: #ffb741;
$clr-red: #a63d2a;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
min-height: 100svh;
background: #232228;
font-family: "Nunito", sans-serif;
position: relative;
overflow-x: hidden;
display: grid;
place-items: center;
}
a {
text-decoration: none;
display: inline-block;
}
section {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 50em;
margin-inline: auto;
gap: 3.25rem;
position: relative;
z-index: 10;
align-items: center;
padding: 5em 0;
.card {
position: relative;
z-index: 555;
max-width: 20rem;
min-height: 20rem;
width: 90%;
display: grid;
place-content: center;
place-items: center;
text-align: center;
position: relative;
box-shadow: 1px 12px 25px rgb(0 0 0 / 78%);
border-radius: 2.25rem;
&::before {
position: absolute;
content: "";
top: 0;
width: 100%;
height: 100%;
border-radius: 2.25rem;
z-index: -1;
border: 0.155rem solid transparent;
-webkit-mask: linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
&-header {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.8em 0.5em 0em 1.5em;
.date {
color: #ddd;
}
svg {
color: #fff;
width: 2.5rem;
cursor: pointer;
}
}
&-body {
position: absolute;
width: 100%;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 0.7em 1.25em 0.5em 1.5em;
h3 {
color: #fff;
font-size: 1.375rem;
margin-top: 0.625em;
margin-bottom: 0.188em;
text-transform: capitalize;
font-weight: 600;
}
p {
color: #ddd;
font-size: 1rem;
letter-spacing: 0.031rem;
}
.progress {
margin-top: 0.938rem;
.progress-bar {
position: relative;
width: 100%;
background: #363636;
height: 0.313rem;
display: block;
border-radius: 3.125rem;
&:after {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
display: block;
border-radius: 3.125rem;
}
}
span:first-of-type {
color: #fff;
text-align: left;
font-weight: 600;
width: 100%;
display: block;
margin-bottom: 0.313rem;
}
span {
margin-top: 0.313rem;
text-align: right;
display: block;
color: #fff;
}
}
}
&-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
border-top: 0.063rem solid #292929;
display: flex;
justify-content: space-between;
padding: 0.7em 1.25em 0.5em 1.5em;
background: #151419;
border-bottom-left-radius: 2.25rem;
border-bottom-right-radius: 2.25rem;
ul {
display: flex;
align-items: center;
li {
list-style-type: none;
display: flex;
margin-right: -0.625rem;
img {
border-radius: 50%;
width: 1.875rem;
height: 1.875rem;
object-fit: cover;
}
}
}
.btn-add {
width: 1.375rem;
height: 1.375rem;
border-radius: 50%;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
svg {
width: 1rem;
}
}
.btn-countdown {
background: #222127;
color: #fff;
border-radius: 2em;
padding: 0.625rem 1.5rem;
}
}
}
.green {
background: radial-gradient(
ellipse at right top,
#107667ed 0%,
#151419 47%,
#151419 100%
);
&:before {
background: linear-gradient(
45deg,
#232228,
#232228,
#232228,
#232228,
#01c3a8
)
border-box;
}
.btn-add {
background: $clr-green;
}
.progress-bar:after {
width: 90%;
background: $clr-green;
}
.btn-countdown {
&:hover {
background: $clr-green;
}
}
}
.blue {
background: radial-gradient(
ellipse at right top,
#00458f8f 0%,
#151419 45%,
#151419 100%
);
&:before {
background: linear-gradient(
45deg,
#232228,
#232228,
#232228,
#232228,
#1890ff
)
border-box;
}
.btn-add {
background: $clr-blue;
}
.progress-bar:after {
width: 20%;
background: $clr-blue;
}
.btn-countdown {
&:hover {
background: $clr-blue;
}
}
}
.orange {
background: radial-gradient(
ellipse at right top,
#ffb74194 0%,
#151419 47%,
#151419 100%
);
&:before {
background: linear-gradient(
45deg,
#232228,
#232228,
#232228,
#232228,
#ffb741
)
border-box;
}
.btn-add {
background: $clr-orange;
}
.progress-bar:after {
width: 30%;
background: $clr-orange;
}
.btn-countdown {
&:hover {
background: $clr-orange;
}
}
}
.red {
background: radial-gradient(
ellipse at right top,
#a63d2a82 0%,
#151419 47%,
#151419 100%
);
&:before {
background: linear-gradient(
45deg,
#232228,
#232228,
#232228,
#232228,
#a63d2a
)
border-box;
}
.btn-add {
background: $clr-red;
}
.progress-bar:after {
width: 50%;
background: $clr-red;
}
.btn-countdown {
&:hover {
background: $clr-red;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment