UI Cards - WebDevTales

51 CSS Cards

Modern, responsive CSS UI Cards for sleek UI design

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">

<div class="profile-card">
<div class="profile-header">
    <h2 id='areeb-anwar'  id="boomdevs_4" id='areeb-anwar'  id="boomdevs_4"  >Areeb Anwar</h2>
    <p>Web Developer</p>
</div>
<div class="profile-picture">
    <img decoding="async" src="https://images.nightcafe.studio/jobs/A43uYGgS5Ouu1VcOnQ9X/A43uYGgS5Ouu1VcOnQ9X--0--gxm0v.jpg?tr=w-1600,c-at_max" alt="Profile Picture">
</div>
<div class="social-links">
    <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
    <a href="#" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
    <a href="#" title="GitHub"><i class="fab fa-github"></i></a>
    <a href="#" title="Instagram"><i class="fab fa-instagram"></i></a>
</div>
<div class="profile-footer">
    <button>Contact</button>
</div>
</div>

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f4f8;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.profile-card {
    background: #ffffff;
    width: 16rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s;
}

.profile-card:hover {
    transform: translateY(-5px);
}

.profile-header {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
    padding: 1.3rem;
}

.profile-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.profile-header p {
    margin: 5px;
    font-weight: 300;
    margin-bottom: 1.25rem;
}

.profile-picture {
    margin-top: -2rem;
    border-radius: 50%;
    border: 5px solid white;
    overflow: hidden;
    width: 6rem;
    height: 6rem;
    display: inline-block;
}

.profile-picture img {
    width: 100%;
    height: auto;
}

.social-links {
    margin: 1.25rem 0;
}

.social-links a {
    margin: 0 0.75rem;
    color: #6a11cb;
    text-decoration: none;
    font-size: 1.25rem;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #2575fc;
}

.profile-footer {
    padding: 1rem;
    background: #f9f9f9;
    border-top: 1px solid #eaeaea;
}

.profile-footer button {
    background: #6a11cb;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.profile-footer button:hover {
    background: #2575fc;
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
<div class="neuromorphic-card">
    <div class="icon">
        <i class="fas fa-user-circle"></i> <!-- Icon in place of image -->
    </div>
    <div class="name">Areeb Anwar</div>
    <div class="title">UI/UX Designer</div>
    <div class="description">
        Areeb Anwar is a talented UI/UX designer.
    </div>
    <div class="social-icons">
        <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
        <a href="#" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
        <a href="#" title="GitHub"><i class="fab fa-github"></i></a>
        <a href="#" title="Instagram"><i class="fab fa-instagram"></i></a>
    </div>
    <button class="contact-button"><i class="fa-solid fa-phone"></i> Contact</button>
</div>

body {
    font-family: 'Arial', sans-serif;
    background-color: #e0e5ec;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.neuromorphic-card {
    background: #e0e5ec;
    border-radius: 20px;
    box-shadow: 8px 8px 15px rgba(255, 255, 255, 0.7),
        -8px -8px 15px rgba(255, 255, 255, 0.7),
        inset 8px 8px 15px rgba(255, 255, 255, 0.5),
        inset -8px -8px 15px rgba(255, 255, 255, 0.5);
    padding: 30px;
    /* Increased padding for more height */
    width: 170px;
    /* Increased height */
    text-align: center;
    transition: transform 0.3s;
}

.neuromorphic-card:hover {
    transform: translateY(-5px);
}

.description {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.icon {
    font-size: 60px;
    /* Size of the icon */
    color: #6a11cb;
    /* Icon color */
    margin-bottom: 15px;
}

.name {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
}

.title {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.social-icons a {
    margin: 0 10px;
    color: #6a11cb;
    font-size: 20px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #2575fc;
}

.contact-button {
    background: #6a11cb;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
    box-shadow: 4px 4px 8px rgba(255, 255, 255, 0.5),
        -4px -4px 8px rgba(255, 255, 255, 0.5);
}

.contact-button:hover {
    background: #2575fc;
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="rotating-platforms">
  <div class="platform top-platform"></div>
  <div class="platform bottom-platform"></div>
  <div class="hex-card">
    <div class="hexagon">
      <div class="hex-layer layer1"></div>
      <div class="hex-layer layer2"></div>
      <div class="hex-content">
        <h2 id='hover-me'  id="boomdevs_9" >Hover Me!</h2>
      </div>
    </div>
  </div>
</div>


body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle, #1a1b1a, #000000);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

.rotating-platforms {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 30rem;
  cursor: pointer;
  perspective: 1000px; /* Adds depth for 3D rotation */
}

.platform {
  position: absolute;
  width: 15rem;
  height: 0.5rem;
  background: linear-gradient(90deg, #4ae29e, #ff6ee0);
  box-shadow: 0 20px 65px rgba(0, 255, 128, 0.5);
  border-radius: 5px;
  z-index: 2;
}

.top-platform {
  top: 0;
  transform: translateY(4rem);
}

.bottom-platform {
  bottom: 0;
  transform: translateY(-4rem);
  box-shadow: 0 -20px 65px rgba(255, 110, 199, 01.6);
}

.hex-card {
  position: relative;
  width: 15rem;
  height: 17rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hexagon {
  position: relative;
  width: 15rem;
  height: 17rem;
  background: linear-gradient(135deg, #1a1a1d, #282828);
  transform-style: preserve-3d;
  animation: rotateHex 10s infinite linear;
}

.hexagon:hover{
    cursor: pointer;
    animation: stopped;
    border-left: 3px solid #4ae29e;
    border-right: 6px solid #e24aa3;
    border-bottom: 6px solid #e24abe;
    border-top: 3px solid #4ae29e;
}

.hex-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inherit;
  border: 4px solid rgba(255, 255, 255, 0.1); /* Visible border */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.layer1 {
  background: linear-gradient(135deg, rgba(255, 110, 199, 0.3), rgba(74, 144, 226, 0.3));
  transform: translateZ(-10px);
}

.layer2 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  transform: translateZ(-20px);
}

.hex-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inherit;
  background: linear-gradient(135deg, #151515, #1f1f1f);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 5;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.hex-content h2 {
  font-size: 1.8rem;
  margin: 0;
  background: linear-gradient(90deg, #4ae287, #ff6ec7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeInGlow 2s ease;
}



.hexagon:hover .layer1 {
  transform: translateZ(-15px) rotateZ(10deg);
  opacity: 0.8;
  box-shadow: 0 20px 165px rgba(255, 110, 199, 1);
}

.hexagon:hover .layer2 {
  transform: translateZ(-25px) rotateZ(5deg);
  opacity: 0.7;
}

.hexagon:hover .hex-content {
  transform: translateZ(20px);
  box-shadow: 0 10px 30px rgba(255, 110, 199, 0.6);
}

@keyframes rotateHex {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes fadeInGlow {
  0% {
    opacity: 0;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 20px rgba(255, 110, 199, 0.8);
  }
}

<!-- No JS is required for this card -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />

<div class="profile-card">
    <div class="profile-picture">
        <i class="fas fa-user-circle"></i>
    </div>
    <p class="profile-name">
        Areeb Anwar
        <span>Founder of WebDevTales</span>
        <span>Software Engineer</span>
    </p>
    <div class="social-links">
        <a href="#" class="social-link">
            <i class="fab fa-twitter"></i>
            <span class="tooltip">Twitter</span>
        </a>
        <a href="#" class="social-link">
            <i class="fab fa-facebook-f"></i>
            <span class="tooltip">Facebook</span>
        </a>
        <a href="#" class="social-link">
            <i class="fab fa-linkedin-in"></i>
            <span class="tooltip">LinkedIn</span>
        </a>
        <a href="#" class="social-link">
            <i class="fab fa-instagram"></i>
            <span class="tooltip">Instagram</span>
        </a>
    </div>
</div>

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-card {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    width: 13rem;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    font-family: "Arial", sans-serif;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Profile Picture */
.profile-picture {
    font-size: 5rem;
    color: #fff;
    margin-bottom: 15px;
}

/* Profile Name */
.profile-name {
    margin: 0;
    font-weight: bold;
    font-size: 18px;
}

.profile-name span {
    display: block;
    font-weight: normal;
    font-size: 14px;
    opacity: 0.8;
    margin-top: 5px;
}

/* Social Links */
.social-links {
    margin-top: 65px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-link {
    text-decoration: none;
    color: #fff;
    position: relative;
    font-size: 1.2rem;
    display: inline-block;
    transition: color 0.3s ease;
}

.social-link:hover {
    color: #000;
}

/* Tooltip */
.tooltip {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 4px 8px;
    font-size: 0.8rem;
    border-radius: 4px;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tooltip:before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
}

.social-link:hover .tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="animated-card">
    <span class="ripple"></span>
    <span class="ripple"></span>
    <span class="ripple"></span>
    <div class="text">HELLO</div>
</div>

body {
    display: flex;
    justify-content: center;
    align-items: center;

}

/* Card Base */
.animated-card {
    position: relative;
    width: 220px;
    height: 320px;
    background: linear-gradient(135deg, #efbb55, #2ad7f2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    border-radius: 15px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect - Scale and Shadow */
.animated-card:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
}

/* Expanding Overlay */
.animated-card::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.animated-card:hover::before {
    width: 300%;
    height: 300%;
}

/* Text Reveal */
.text {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.animated-card:hover .text {
    opacity: 1;
    transform: scale(1);
}

/* Ripple Effect */
.ripple {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: ripple-animation 1.5s infinite ease-in-out;
}

/* Ripple Animation */
@keyframes ripple-animation {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(50);
        opacity: 0;
    }
}

/* Multiple Ripples */
.ripple:nth-child(1) {
    animation-delay: 0s;
}

.ripple:nth-child(2) {
    animation-delay: 0.5s;
}

.ripple:nth-child(3) {
    animation-delay: 1s;
}

/* Fixing Hover State for Ripple */
.animated-card:hover .ripple {
    animation-play-state: running;
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
<div class="card">
    <div class="card-header">
        <div class="card-title">Minimalist Card</div>
        <i class="fas fa-star card-icon"></i>
    </div>
    <div class="card-content">
        This is a simple and elegant card design that focuses on clean lines and typography.
        Hover over the card to see the lift effect.
    </div>
    <div class="card-footer">
        <button class="card-button">Learn More</button>
    </div>
</div>

body {
    font-family: 'Arial', sans-serif;
    background-color: #e9ecef;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.card {
    position: relative;
    width: 12rem;
    /* Width in rem */
    height: 20rem;
    /* Height in rem */
    border-radius: 1rem;
    /* Rounded corners */
    overflow: hidden;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.2);
    background: white;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    /* Padding in rem */
}

.card:hover {
    transform: translateY(-0.5rem);
    /* Lift effect */
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.3);
    /* Enhanced shadow on hover */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 1.5rem;
    /* Title size */
    color: #333;
}

.card-icon {
    font-size: 1.5rem;
    /* Icon size */
    color: #6a11cb;
    /* Icon color */
}

.card-content {
    margin: 1rem 0;
    /* Margin for content */
    font-size: 1rem;
    /* Content size */
    color: #666;
}

.card-footer {
    display: flex;
    justify-content: center;
}

.card-button {
    background: #6a11cb;
    /* Button background */
    color: white;
    /* Button text color */
    border: none;
    padding: 0.5rem 1rem;
    /* Button padding */
    border-radius: 0.5rem;
    /* Button rounded corners */
    cursor: pointer;
    transition: background 0.3s;
}

.card-button:hover {
    background: #2575fc;
    /* Button hover color */
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="card">
    <h1 id='i'  id="boomdevs_18" id='i' id="boomdevs_16" >I</h1>
    <i class="fas fa-heart icon"></i>
    <h2 id='you'  id="boomdevs_19" id='you' id="boomdevs_17" >YOU</h2>
</div>

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #ffacfc, #68a3f8);
    background-size: 400% 400%;
    animation: gradientAnimation 10s ease infinite;
}

/* Card Styles */
.card {
    width: 13rem;
    height: 20rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Hover Effect */
.card:hover {
    transform: scale(1.05) rotate(10deg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Text Styling */
h1,
h2 {
    color: #fff;
    text-align: center;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7),
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 15px rgba(255, 255, 255, 0.3);
    margin: 0;
}

h1 {
    font-size: 3rem;
    animation: glowText 1.5s ease-in-out infinite alternate;
}

h2 {
    font-size: 1.5rem;
    margin-top: 10px;
    animation: glowText 1.5s ease-in-out infinite alternate;
    animation-delay: 0.5s;
}

/* Icon Styling */
.icon {
    font-size: 4rem;
    color: #ff758c;
    transition: transform 0.4s ease;
    animation: bounceIcon 2s ease-in-out infinite;
}

.card:hover .icon {
    transform: scale(1.2);
}

/* Text Glowing Animation */
@keyframes glowText {
    0% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.7),
            0 0 10px rgba(255, 255, 255, 0.5),
            0 0 15px rgba(255, 255, 255, 0.3);
    }

    100% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 1),
            0 0 30px rgba(255, 255, 255, 0.8),
            0 0 50px rgba(255, 255, 255, 0.6);
    }
}

/* Icon Bounce Animation */
@keyframes bounceIcon {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Gradient Animation */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="card-container">
    <div class="card">
        <p>Hover Me</p>
        <!-- Profile Image -->
        <div class="profile-image"></div>

        <!-- Social Icons -->
        <div class="social-icons">
            <a href="#" class="fab fa-facebook"></a>
            <a href="#" class="fab fa-twitter"></a>
            <a href="#" class="fab fa-instagram"></a>
        </div>
    </div>
</div>

body {
    font-family: Arial, sans-serif;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
}

.card-container {
    perspective: 1500px;
}

.card {
    width: 300px;
    height: 400px;
    background: linear-gradient(45deg, #5c4b8b, #d12f6f);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transform-style: preserve-3d;
    transition: all 0.3s ease;
}

.card:hover {
    transform: rotateY(15deg) rotateX(15deg);
}

.card p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 44px;
    font-weight: bold;
    text-align: center;
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.8),
        0 0 10px rgba(255, 255, 255, 0.6),
        0 0 15px rgba(255, 255, 255, 0.4),
        0 0 20px rgba(255, 255, 255, 0.2),
        0 0 30px rgba(255, 255, 255, 0.1);
    animation: shine 1.5s infinite linear;
}

/* Shining Effect Animation */
@keyframes shine {
    0% {
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.8),
            0 0 10px rgba(255, 255, 255, 0.6),
            0 0 15px rgba(255, 255, 255, 0.4),
            0 0 20px rgba(255, 255, 255, 0.2),
            0 0 30px rgba(255, 255, 255, 0.1);
    }

    50% {
        text-shadow:
            0 0 10px rgba(255, 255, 255, 1),
            0 0 20px rgba(255, 255, 255, 0.9),
            0 0 30px rgba(255, 255, 255, 0.8),
            0 0 40px rgba(255, 255, 255, 0.6),
            0 0 50px rgba(255, 255, 255, 0.4);
    }

    100% {
        text-shadow:
            0 0 5px rgba(255, 255, 255, 0.8),
            0 0 10px rgba(255, 255, 255, 0.6),
            0 0 15px rgba(255, 255, 255, 0.4),
            0 0 20px rgba(255, 255, 255, 0.2),
            0 0 30px rgba(255, 255, 255, 0.1);
    }
}

/* Explosion Effect */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://images.nightcafe.studio/jobs/sVv2oR9uCGpuMxjUhr1I/sVv2oR9uCGpuMxjUhr1I--1--6gycc.jpg?tr=w-1600,c-at_max');
    background-size: 20px 20px;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover::before {
    opacity: 1;
    animation: explode 1s forwards;
}

@keyframes explode {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(3);
    }

    100% {
        transform: scale(5);
        opacity: 0;
    }
}

/* Profile Image */
.profile-image {
    width: 100%;
    height: 100%;
    background: url('https://images.nightcafe.studio/jobs/sVv2oR9uCGpuMxjUhr1I/sVv2oR9uCGpuMxjUhr1I--1--6gycc.jpg?tr=w-1600,c-at_max') center/cover;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.card:hover .profile-image {
    opacity: 1;
    transform: scale(1);
}

/* Social Icons */
.social-icons {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 15;
}

.social-icons a {
    color: white;
    font-size: 24px;
    text-decoration: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.card:hover .social-icons a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.social-icons a:nth-child(2) {
    transition-delay: 0.2s;
}

.social-icons a:nth-child(3) {
    transition-delay: 0.3s;
}

/* Social Icon Hover Effects */
.social-icons a:hover {
    color: #ff758c;
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    <div class="title">Expand Me!</div>
    <div class="description">Hover to see the effect</div>
</div>

body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.card {
    width: 15rem;
    height: 19rem;
    background: #6a00f4;
    color: white;
    border-radius: 1rem;
    display: flex;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    background-image: url('https://www.transparenttextures.com/patterns/diagmonds-light.png');
    background-size: cover;
    transition: all 0.3s ease-in-out;
}

.card:hover {
    width: 18rem;
    height: 22rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
}

.title {
    font-size: 1.5rem;
    margin: 0.5rem;
}

.description {
    font-size: 1rem;
    opacity: 0.8;
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
    <div class="content">
        <i class="fa-brands fa-fly"></i>
        <h1 id='hover-to-reveal-more'  id="boomdevs_26" id='hover-to-reveal-more' id="boomdevs_26" >Hover to reveal more</h1>
    </div>
    <div class="hidden-content">
        <h2 id='hellow-world'  id="boomdevs_27" id='hellow-world' id="boomdevs_27" >Hellow World</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, mauris vel tincidunt malesuada, velit turpis tincidunt velit, ut tincidunt enim velit vel velit. Nullam euismod, mauris vel tincidunt malesuada, velit turpis tincidunt velit, ut tincidunt enim velit vel velit.</p>
    </div>
</div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #1e1e1e, #3a3a3a);
    margin: 0;
}

.card {
    width: 18rem;
    height: 200px;
    background: #444;
    color: white;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.content {
    padding: 20px;
    font-size: 1.2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

h1 {
    font-size: 1.5rem;
    /* Size of the heading */
    margin: 10px 0;
    /* Space above and below the heading */
    color: #ffffff;
    /* Heading color */
}

.content i {
    font-size: 6rem;
    /* Size of the icon */
    color: #ffcc00;
    /* Icon color */
    margin-top: -1rem;
    /* Space above the icon */
    transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
    /* Smooth transition for hover effect */
    filter: drop-shadow(0 0 15px rgba(255, 204, 0, 0.8));
    /* Adds a glowing effect */
    animation: fadeInScale 1.5s ease-out forwards;
    /* Apply animation */
}

/* Keyframe animation */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-360deg);
        /* Starts off invisible and rotated */
    }

    50% {
        opacity: 0.5;
        transform: scale(1.1) rotate(0deg);
        /* Scales up and rotates to normal */
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        /* Final size and no rotation */
    }
}

.content i:hover {
    transform: scale(1.2) rotate(15deg);
    /* Slightly enlarges and rotates the icon on hover */
    color: #ff5733;
    /* Changes icon color on hover */
    filter: drop-shadow(0 0 25px rgba(255, 204, 0, 1));
    /* Enhanced glowing effect on hover */
}




.hidden-content {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #666;
    color: white;
    text-align: center;
    transition: bottom 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    border-radius: 15px;
    /* Match the card's border radius */
}

.card:hover .hidden-content {
    bottom: 0;
    opacity: 1;
}

.card:hover .content {
    opacity: 0;
}

h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: bold;

}

p {
    margin-bottom: 10px;
    font-size: 0.9rem;
    margin-left: 10px;
    text-align: left;
    margin-right: 5px;
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 24" stroke-width="2" stroke="currentColor" class="icon">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8c0-2.21-1.79-4-4-4s-4 1.79-4 4 1.79 4 4 4 4-1.79 4-4zm0 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8-4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z" />
    </svg>
    <h1 id='project-title'  id="boomdevs_30" id='project-title' id="boomdevs_29" >Project Title</h1>
    <p class="description">This is a brief description of the project. It highlights the main features and technologies used.</p>
    <button class="button">View Project</button>
</div>

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f4f8;
    margin: 0;
}

.card {
    width: 15rem;
    /* Adjusted width for better layout */
    background: white;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    /* Center text and icon */
    overflow: hidden;
    /* Prevent overflow */
}

.card:hover {
    transform: translateY(-5px);
    /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    /* Enhanced shadow on hover */
}

.icon {
    width: 100px;
    /* Icon size */
    height: 100px;
    /* Icon size */
    margin-top: 20px;
    /* Space above the icon */
    color: #ffcc00;
    /* Icon color */
    font-size: 5rem;
    /* Icon font size */
    transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease;
    /* Smooth transition for hover effect */
    animation: bounceIn 1s ease-out;
    /* Bounce animation on load */

}

/* Hover effect */
.icon:hover {
    transform: scale(1.1) rotate(15deg);
    /* Scale up and rotate slightly */
    color: #ff5733;
    /* Change color on hover */
    filter: drop-shadow(0 0 25px rgba(255, 204, 0, 1));
    /* Glowing effect */
}

/* Keyframe animation: bounce effect when the icon loads */
@keyframes bounceIn {
    0% {
        transform: scale(0) rotate(-180deg);
        /* Start small and rotated */
        opacity: 0;
    }

    50% {
        transform: scale(1.1) rotate(45deg);
        /* Slightly bigger and rotated */
        opacity: 0.5;
    }

    100% {
        transform: scale(1) rotate(0deg);
        /* Final size and no rotation */
        opacity: 1;
    }
}

h1 {
    font-size: 1.5rem;
    /* Size of the heading */
    margin: 10px 0;
    /* Space above and below the heading */
    color: #333;
    /* Heading color */
}

.description {
    padding: 0 20px;
    /* Padding for description */
    font-size: 1rem;
    /* Font size for description */
    color: #666;
    /* Description color */
    margin: 10px 0;
    /* Space above and below the description */
}

.button {
    background: #ffcc00;
    /* Button background color */
    color: #444;
    /* Button text color */
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    /* Padding for button */
    font-size: 1rem;
    /* Font size for button */
    cursor: pointer;
    /* Pointer cursor on hover */
    transition: background 0.3s ease;
    /* Transition for button */
    margin-bottom: 20px;
    /* Space below the button */
}

.button:hover {
    background: #e6b800;
    /* Darker shade on hover */
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
    <i class="fas fa-heart icon"></i>
    <div>Gradient Borders!</div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(120deg, #ece8ec, #f0e9ea);
    margin: 0;
}

.card {
    width: 17rem;
    height: 12rem;
    position: relative;
    background: white;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    /* Change to column to stack icons and text */
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.card::before,
.card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    background: linear-gradient(120deg, #f093fb, #f5576c, #4facfe, #00f2fe);
    z-index: -1;
    transition: transform 0.5s ease;
}

.card::before {
    filter: blur(0.5rem);
}

.card::after {
    filter: brightness(1.2);
    transform: scale(0.95);
}

.card:hover::after {
    transform: scale(1.1);
}

.card:hover {
    color: #f093fb;
}

.icon {
    font-size: 3rem;
    /* Size of the icons */
    color: #f5576c;
    /* Color of the icons */
    margin-bottom: 0.5rem;
    /* Space between icons and text */
    transition: color 0.3s ease;
    /* Transition for hover effect */
}

.card:hover .icon {
    color: #f093fb;
    /* Change color on hover */
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    Neon Glow Card
  </div>

body {
    font-family: 'Arial', sans-serif;
    background: radial-gradient(circle at center, #0d1b2a, #1b263b, #0d1b2a); /* Subtle light gradient for the background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }

  .card {
    width: 20rem;
    height: 16rem;
    background: #1c1c28; /* Neutral dark background for the card */
    border-radius: 1rem;
    color: #ffffff;
    font-size: 1.6rem; /* Slightly larger font for better readability */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 150, 255, 0.6), 0 0 40px rgba(0, 255, 200, 0.4); /* Enhanced neon effect */
    transition: box-shadow 0.5s ease, transform 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  /* Hover interaction for a richer glow */
  .card:hover {
    box-shadow: 0 0 30px rgba(0, 150, 255, 0.8), 0 0 60px rgba(0, 255, 200, 0.6);
    transform: scale(1.05); /* Slight scale on hover */
  }

  /* Glowing gradient background */
  .card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.6), rgba(0, 255, 200, 0.6));
    z-index: -1;
    animation: glowEffect 6s infinite alternate ease-in-out;
    filter: blur(25px); /* Soft glow effect */
  }

  /* Glowing gradient animation */
  @keyframes glowEffect {
    0% {
      opacity: 0.8;
      transform: scale(1);
    }
    100% {
      opacity: 0.6;
      transform: scale(1.1); /* Slight expansion of glow */
    }
  }

  /* Subtle text style */
  .card span {
    font-size: 1.4rem;
    font-weight: 400;
    opacity: 0.8;
    color: #a3b9cc; /* Soft light blue for subtle elegance */
  }

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
  <h1 id='elegant-card'  id="boomdevs_37" id='elegant-card' id="boomdevs_40" id='elegant-card' id="boomdevs_37" >Elegant Card</h1>
  <p>Minimal yet stunning ✨</p>
</div>

body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #1e1e1e, #3a3a3a);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.card {
  width: 22rem;
  height: 14rem;
  background: rgba(255, 255, 255, 0.1);
  /* Frosted glass effect */
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  backdrop-filter: blur(15px);
  /* Creates the frosted glass effect */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  color: white;
  text-align: center;
}

.card:hover {
  transform: scale(1.03) translateY(-10px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
  animation: subtle-shift 3s infinite ease-in-out;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15));
  z-index: -1;
  opacity: 0.8;
}

h1 {
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.5rem;
}

/* Subtle gradient animation */
@keyframes subtle-shift {

  0%,
  100% {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15));
  }

  50% {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.4));
  }
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    <div class="card-inner">Front Side</div>
    <div class="card-back">Back Side</div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #121212;
    /* Dark background for neon effect */
    margin: 0;
    color: #fff;
}

.card {
    width: 18rem;
    height: 12rem;
    border-radius: 1rem;
    background: linear-gradient(45deg, #ff00ff, #00ffcc);
    /* Neon gradient */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
    position: relative;
    overflow: hidden;
    /* Ensures the back side is hidden until needed */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.card-inner,
.card-back {
    position: absolute;
    backface-visibility: hidden;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: bold;
    text-align: center;
    padding: 1rem;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.6s ease, background-color 0.6s ease;
}

/* Front side with glowing neon effect */
.card-inner {
    background: linear-gradient(45deg, #00ffcc, #ff00ff);
    color: #fff;
}

/* Back side - initially hidden */
.card-back {
    transform: translateX(100%);
    /* Off-screen to the right */
    background: linear-gradient(45deg, #ff007f, #7f00ff);
    /* Neon purple background */
    color: #fff;
}

/* Slide effect to reveal the back */
.card:hover .card-back {
    transform: translateX(0);
    /* Slide in from the right */
}

/* On hover, change the background of both sides */
.card-inner:hover,
.card-back:hover {
    background: linear-gradient(45deg, #ffcc00, #ff00ff);
    color: #ffeb3b;
    /* Neon yellow text on hover */
}

/* Optional: Add glowing effect on hover */
.card-inner:hover,
.card-back:hover {
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Text effect */
.card-inner:hover span,
.card-back:hover span {
    font-size: 1.7rem;
    transition: font-size 0.3s ease;
}

.card-inner span,
.card-back span {
    text-shadow: 0 0 5px #ff00ff, 0 0 10px #ff00ff, 0 0 20px #ff00ff;
    /* Neon text glow */
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    <div class="text">Animated Text</div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(120deg, #c6ffdd, #fbd786, #f7797d);
    margin: 0;
}

.card {
    width: 19rem;
    height: 12rem;
    background: white;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
}

.text {
    font-size: 2.3rem;
    font-weight: bold;
    background: linear-gradient(90deg, #ff6a00, #ee0979, #4facfe, #00f2fe);
    background-size: 300% 100%;
    /* Set a larger background size for the animation */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move 4s infinite linear;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    Sliding Border Card
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f4f8;
    margin: 0;
}

.card {
    width: 19rem;
    height: 12rem;
    background: white;
    border-radius: 1rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.card::before,
.card::after {
    content: '';
    position: absolute;
    height: 1.3rem;
    background: linear-gradient(90deg, #00f260, #0575e6);
    width: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.card::before {
    top: 0;
}

.card::after {
    bottom: 0;
}

.card:hover::before,
.card:hover::after {
    transform: translateX(0);
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    <div class="card-inner front">
        <h2 id='ultra-pro-plan'  id="boomdevs_46" id='ultra-pro-plan' id="boomdevs_46" >Ultra Pro Plan</h2>
        <p>$49.99/month</p>
        <button style="padding: 0.5rem 1rem; border: none; border-radius: 0.5rem; background: #fff; color: #4caf50; font-weight: bold; cursor: pointer; transition: background 0.3s;">
            Get Started
        </button>
    </div>
    <div class="card-inner back">
        <h3 id='features'  id="boomdevs_47" id='features' id="boomdevs_47" >Features:</h3>
        <ul>
            <li>Unlimited Projects</li>
            <li>100 GB Storage</li>
            <li>24/7 Premium Support</li>
            <li>Advanced Analytics</li>
        </ul>
        <button>
            Sign Up
        </button>
    </div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
}

.card {
    width: 19rem;
    height: 15rem;
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
    perspective: 1000px;
    position: relative;
    transition: transform 0.6s ease, box-shadow 0.3s ease;
    overflow: hidden;
    animation: fadeIn 1s ease forwards;
}

.card-inner {
    position: absolute;
    inset: 0;
    border-radius: 1.5rem;
    backface-visibility: hidden;
    /* Hide the back face when not facing the viewer */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1rem;
    transition: transform 0.6s ease;
    /* Smooth transition for the inner card */
}

.card:hover .card-inner.front {
    transform: rotateY(180deg);
    /* Rotate the front face */
}

.card:hover .card-inner.back {
    transform: rotateY(0deg);
    /* Show the back face */
}

.front {
    background: linear-gradient(135deg, #4caf50, #81c784);
    color: white;
}

.back {
    transform: rotateY(180deg);
    /* Rotate the back face */
    background: linear-gradient(135deg, #ff9800, #ffc107);
    color: #333;
}

h2 {
    margin: 0.5rem 0;
    font-size: 2rem;
}

p {
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li {
    margin: 0.5rem 0;
    font-size: 1.1rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background: #fff;
    color: #ff9800;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background: #4caf50;
    color: #fff;
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
    <h2 id='areeb-anwar-1'  id="boomdevs_50" id='areeb-anwar-1' id="boomdevs_49" >Areeb Anwar</h2>
    <p>Web Developer</p>
    <div class="icons">
        <a href="#"><i class="fab fa-github icon"></i></a>
        <a href="#"><i class="fab fa-linkedin-in icon"></i></a>
        <a href="#"><i class="fab fa-twitter icon"></i></a>
        <a href="#"><i class="fab fa-instagram icon"></i></a>
    </div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background: #f4f4f4;
}

.card {
    width: 19rem;
    height: 10rem;
    background: linear-gradient(135deg, #ff4e50, #f9d423);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border 0.4s ease;
}

.card:hover {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
    border: 3px solid white;
}

.card h2 {
    margin: 0.5rem;
}

.icons i {
    font-size: 1.5rem;
    margin: 0.3rem;
    color: white;
    transition: color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.icons i:hover {
    position: relative;
    transform: translate(-50%, -50%);
    /* Center the icon */
    border-radius: 50%;
}

.fa-github:hover {
    color: #333;
    /* GitHub brand color */
}

.fa-linkedin-in:hover {
    color: #0077b5;
    /* LinkedIn brand color */
}

.fa-twitter:hover {
    color: #1da1f2;
    /* Twitter brand color */
}

.fa-instagram:hover {
    color: #e1306c;
    /* Instagram brand color */
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="animated-border-card">
    <div class="card-content">
        <h2 id='pro-card'  id="boomdevs_53" id='pro-card' id="boomdevs_53" >Pro Card</h2>
        <p>This card features subtle moving borders and a sleek design.</p>
        <div class="icons">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
        </div>
    </div>
</div>

:root {
    --card-width: 19rem;
    --card-height: 12rem;
    --border-thickness: 0.3rem;
    --border-speed: 3s;
    --border-color: white;
    --card-bg: #94092b;
    --text-color: #fff;
}

/* Body Styling (Centering the Card) */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: #d8d8dc;
    font-family: 'Arial', sans-serif;
}

/* Card Container */
.animated-border-card {
    position: relative;
    width: var(--card-width);
    height: var(--card-height);
    background: black;
    color: var(--text-color);
    overflow: hidden;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease-in-out;
}

.animated-border-card:hover {
    transform: scale(1.05);
}

/* Moving Border Effect */
.animated-border-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: var(--border-thickness) solid var(--border-color);
    border-radius: 1rem;
    box-sizing: border-box;
    animation: moveBorders var(--border-speed) linear infinite;
}

/* Content inside the card */
.animated-border-card .card-content {
    position: relative;
    z-index: 1;
    padding: 1rem;
}

.animated-border-card h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.animated-border-card p {
    font-size: 1rem;
    opacity: 0.8;
    line-height: 1.5;
}

.card-content .icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}



.card-content .icons i:hover {
    color: #00e7f7;
    transform: scale(1.2);
}

/* Keyframe for the Border Movement */
@keyframes moveBorders {
    0% {
        clip-path: inset(0 0 90% 0);
    }

    25% {
        clip-path: inset(0 90% 0 0);
    }

    50% {
        clip-path: inset(90% 0 0 0);
    }

    75% {
        clip-path: inset(0 0 0 90%);
    }

    100% {
        clip-path: inset(0 0 90% 0);
    }
}

     <!-- No js -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
    <h1 id='hover-me-1'  id="boomdevs_56" id='hover-me' id="boomdevs_55" >Hover Me</h1>
    <div class="title">
        <h2 id='sliding-title'  id="boomdevs_57" id='sliding-title' id="boomdevs_56" >Sliding Title</h2>
        <div class="icons">
            <i class="fas fa-angle-left"></i>
            <i class="fas fa-angle-right"></i>
            <i class="fas fa-times"></i>
            <i class="fas fa-trash-alt"></i>
            <i class="fas fa-pencil-alt"></i>
        </div>
    </div>
</div>

body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #ececec;
}

.card {
    width: 19rem;
    height: 12rem;
    background: linear-gradient(135deg, #8e44ad, #3498db);
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    color: white;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
}

.title {
    position: absolute;
    top: 50%;
    left: -100%;
    transform: translateY(-50%);
    width: 100%;
    transition: left 0.4s ease;
}

.card:hover .title {
    left: 0;
}

.card h1 {
    color: white;
}

.card:hover h1 {
    transform: translateY(-50%) translateX(100%);
    display: none;
}

.icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    /* Space between icons */
    margin-top: 1rem;
    /* Space above the icons */
}

.icons i {
    font-size: 1.5rem;
    /* Increase icon size */
    transition: transform 0.3s ease, color 0.3s ease;
    /* Smooth transition for hover effects */
    cursor: pointer;
    /* Change cursor to pointer on hover */
}

.icons i:hover {
    transform: scale(1.2);
    /* Scale up the icon on hover */
    color: #f39c12;
    /* Change color on hover */
}

/* Optional: Add a background and border radius for the icons */
.icons i {
    padding: 0.5rem;
    /* Add padding around icons */
    border-radius: 0.5rem;
    /* Rounded corners */
    background: rgba(255, 255, 255, 0.1);
    /* Slightly transparent background */
}

.icons i:hover {
    background: rgba(255, 255, 255, 0.2);
    /* Change background on hover */
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
    <img decoding="async" src="https://images.nightcafe.studio/jobs/TUSj3kxsxGifvmvqxp3J/TUSj3kxsxGifvmvqxp3J--0--2hzmy.jpg?tr=w-1600,c-at_max" alt="Profile Picture" class="profile-pic">
    <div class="name">John Doe</div>
    <div class="description">Web Developer | Tech Enthusiast | Blogger</div>
    <div class="social-icons">
        <div class="icon-container">
            <div class="icon" onclick="createRipple(event)">
                <i class="fab fa-facebook-f"></i>
                <span class="tooltip">Facebook</span>
            </div>
        </div>
        <div class="icon-container">
            <div class="icon" onclick="createRipple(event)">
                <i class="fab fa-twitter"></i>
                <span class="tooltip">Twitter</span>
            </div>
        </div>
        <div class="icon-container">
            <div class="icon" onclick="createRipple(event)">
                <i class="fab fa-linkedin-in"></i>
                <span class="tooltip">LinkedIn</span>
            </div>
        </div>
        <div class="icon-container">
            <div class="icon" onclick="createRipple(event)">
                <i class="fab fa-github"></i>
                <span class="tooltip">GitHub</span>
            </div>
        </div>
    </div>
    <p style="color: #d5d3d3;">Click Icons</p>
</div>

body {
  font-family: 'Arial', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #d6d9da;
}

.card {
  width: 15rem;
  background: linear-gradient(135deg, #ff6a00, #ee0979, #ff512f);
  border-radius: 1rem;
  position: relative;
  overflow: hidden;
  color: white;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Add transition for hover effects */
}

.card:hover {
  transform: scale(1.05);
  /* Scale up the card on hover */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
  /* Increase shadow on hover */
}

.profile-pic {
  width: 100px;
  height: 100px;
  border-radius: 10%;
  margin: 0 auto;
  border: 4px solid white;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Add transition for hover effects */
}

.profile-pic:hover {
  transform: scale(1.1);
  /* Scale up the profile picture on hover */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  /* Add a glowing effect on hover */
}

.name {
  font-size: 1.5rem;
  margin: 10px 0;
}

.description {
  font-size: 1rem;
  margin-bottom: 20px;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.icon {
  font-size: 1.5rem;
  position: relative;
  cursor: pointer;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
      transform: scale(4);
      opacity: 0;
  }
}

/* Ultra professional CSS for icons and tooltips */
.icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  /* Space between icons */
  margin-top: 1rem;
  /* Space above the icons */
}

.icon-container {
  position: relative;
  /* Positioning for tooltip */
}

.icons i {
  font-size: 2rem;
  /* Increase icon size */
  transition: transform 0.3s ease, color 0.3s ease;
  /* Smooth transition for hover effects */
  cursor: pointer;
  /* Change cursor to pointer on hover */
}

.icons i:hover {
  transform: scale(1.2);
  /* Scale up the icon on hover */
}

/* Tooltip styles */
.tooltip {
  visibility: hidden;
  /* Hidden by default */
  background-color: transparent;
  /* Background will be set in each tooltip */
  color: #fff;
  /* Text color */
  text-align: center;
  /* Center the text */
  border-radius: 5px;
  /* Rounded corners */
  padding: 5px;
  /* Padding around text */
  font-size: 1rem !important;
  position: absolute;
  /* Positioning */
  z-index: 1;
  /* Ensure it appears above other elements */
  bottom: 125%;
  /* Position above the icon */
  left: 50%;
  /* Center horizontally */
  margin-left: -50%;
  /* Adjust for centering */
  opacity: 0;
  /* Hidden by default */
  transition: opacity 0.3s ease;
  /* Smooth transition for opacity */
}

/* Show tooltip on hover */
.icon-container:hover .tooltip {
  visibility: visible;
  /* Show tooltip */
  opacity: 1;
  /* Fade in */
}

/* Tooltip colors for each icon */
.icon-container:nth-child(1) .tooltip {
  background-color: #3b5998;
  /* Facebook blue */
}

.icon-container:nth-child(2) .tooltip {
  background-color: #1da1f2;
  /* Twitter blue */
}

.icon-container:nth-child(3) .tooltip {
  background-color: #0077b5;
  /* LinkedIn blue */
}

.icon-container:nth-child(4) .tooltip {
  background-color: #333;
  /* GitHub black */
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="floating-orb-container">
  <div class="platform top-platform"></div>
  <div class="orb-wrapper">
    <div class="orb">
      <div class="inner-glow"></div>
    </div>
  </div>
  <div class="platform bottom-platform"></div>
</div>


body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle at center, #0d0d0d, #000000 80%);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

.floating-orb-container {
  position: relative;
  width: 15rem;
  height: 25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  perspective: 1000px;
    margin-top: 4rem;
  animation: pulseEffect 6s infinite ease-in-out;
}

/* Platforms */
.platform {
  position: absolute;
  width: 12rem;
  height: 0.6rem;
  background: linear-gradient(90deg, #4ae29e, #ff6ec7);
  box-shadow: 0 10px 25px rgba(74, 226, 158, 0.6), 0 -10px 25px rgba(255, 110, 199, 0.4);
  border-radius: 3px;
}

.top-platform {
  top: 5%;
  transform: translateY(-3rem) rotateX(30deg);
  animation: rotatePlatform 5s linear infinite;
}

.bottom-platform {
  bottom: 5%;
  transform: translateY(3rem) rotateX(-30deg);
  animation: rotatePlatform 5s linear infinite reverse;
}

/* Orb */
.orb-wrapper {
  position: relative;
  width: 10rem;
  margin-top: 5rem;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: floatOrb 3s ease-in-out infinite;
}

.orb {
  position: relative;
  width: 10rem;
  height: 10rem;
  background: radial-gradient(circle, #ff6ec7, #4ae29e, #000000);
  border-radius: 10%;
  box-shadow: 0 0 40px rgba(255, 110, 199, 0.6), 0 0 60px rgba(74, 226, 158, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  animation: spinOrb 10s infinite linear;
}

.floating-orb-container:hover .orb{
    box-shadow: 0 0 40px rgb(110, 192, 255), 0 0 60px rgb(79, 74, 226);
    cursor: pointer;
    transition: box-shadow 0.5s ease-in-out,height 0.5s ease-in,background 0.5s ease-in;
    height: 15rem;
    background: linear-gradient(135deg, #000000 ,#684ae2,#101010);
}

.inner-glow {
  position: absolute;
  width: 5rem;
  height: 5rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
  animation: pulsateGlow 3s ease-in-out infinite;
}

/* Animations */
@keyframes rotatePlatform {
  0% {
    transform: rotateX(30deg) translateY(-3rem);
  }
  50% {
    transform: rotateX(60deg) translateY(-3.5rem);
  }
  100% {
    transform: rotateX(30deg) translateY(-3rem);
  }
}

@keyframes spinOrb {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes floatOrb {
  0%, 100% {
    transform: translateY(-1rem);
  }
  50% {
    transform: translateY(1rem);
  }
}

@keyframes pulsateGlow {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

@keyframes pulseEffect {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

<!-- No JS is required for this card -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="price-card">
  <div class="card-content">
      <h2 id='premium-plan'  id="boomdevs_64" id='premium-plan' id="boomdevs_63" >Premium Plan</h2>
      <p>Unlock the best features for your business</p>
      <div class="price">$49.99/month</div>
  </div>
</div>

:root {
  --card-width: 20rem;
  --card-height: 14rem;
  --border-speed: 4s;
  --border-color: #00b3b3;
  --background-color: #3f4146;
  --price-color: #f1c40f;
  --text-color: #ffffff;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f2f2f2;
  margin: 0;
  font-family: 'Arial', sans-serif;
}

.price-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  background: var(--background-color);
  color: var(--text-color);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.price-card:hover {
  transform: scale(1.05);
}

.price-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.6rem solid var(--border-color);
  border-radius: 1rem;
  box-sizing: border-box;
  animation: change-border 12s infinite alternate;
}

.card-content {
  position: relative;
  z-index: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card-content h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
  text-transform: uppercase;
}

.card-content p {
  font-size: 1.1rem;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.price {
  font-size: 2.2rem;
  color: var(--price-color);
  font-weight: bold;
  margin-top: 0.5rem;
}

/* Border animation for changing styles */
@keyframes change-border {
  0% {
      border-style: solid;
      border-color: #37ffff;
  }

  15% {
      border-style: dotted;
      border-color: #ffad2a;
  }

  30% {
      border-style: dashed;
      border-color: #ff5946;
  }

  45% {
      border-style: inset;
      border-color: #b700ff;
  }

  60% {
      border-style: ridge;
      border-color: #0099ff;
  }

  75% {
      border-style: outset;
      border-color: #00ff6a;
  }

  90% {
      border-style: groove;
      border-color: #ffcc00;
  }

  100% {
      border-style: solid;
      border-color: #00ffff;
  }
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="zigzag-card">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path d="M0,0 L100,10 L00,100 L0,100 Z" fill="none" stroke="var(--svg-color)" stroke-width="150" stroke-dasharray="5 5" stroke-linejoin="round">
          <animate attributeName="stroke-dashoffset" from="0" to="10" dur="2s" repeatCount="indefinite" />
      </path>
  </svg>
  <div class="card-content">
      <h2 id='welcome-to-webdevtales'  id="boomdevs_67" id='welcome-to-webdevtales' id="boomdevs_65" >Welcome to WebDevTales</h2>
      <button>Learn More</button>
  </div>
</div>

:root {
  --card-width: 19rem;
  --card-height: 12rem;
  --svg-color: #74eddb;
  --background: linear-gradient(to bottom, #f7d392, #f7c77f, #f7b96b, #f7aa56, #f79a40, #f7892a, #f77714, #f76400, #f75000, #f73c00, #f72800, #f71400, #f70000);
  ;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #dedee0;
  font-family: 'Arial', sans-serif;
}

.zigzag-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  background: var(--background);
  color: white;
  overflow: hidden;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

/* Zigzag Border using SVG */
.zigzag-card svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card-content {
  position: relative;
  z-index: 1;
  padding: 1rem;
}

.card-content h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.card-content p {
  font-size: 1rem;
  opacity: 0.8;
  line-height: 1.5;
}

button {
  background: transparent;
  /* Gradient background */
  color: white;
  /* Text color */
  border: none;
  /* No border */
  border: 2px solid white;
  /* White border */
  border-radius: 50px;
  /* Rounded corners */
  padding: 12px 20px;
  /* Padding for the button */
  font-size: 0.9rem;
  /* Font size */
  font-weight: bold;
  /* Bold text */
  text-transform: uppercase;
  /* Uppercase text */
  cursor: pointer;
  /* Pointer cursor on hover */
  transition: all 0.3s ease;
  /* Smooth transition for hover effects */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  /* Shadow effect */
  outline: none;
  /* Remove outline */
}

button:hover {
  background: linear-gradient(135deg, #ee0979, #ff6a00);
  /* Reverse gradient on hover */
  transform: translateY(-3px);
  /* Slightly lift the button */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  /* Increase shadow on hover */
}

button:active {
  transform: translateY(1px);
  /* Press down effect */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  /* Reset shadow */
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="double-border-card">
    <div class="card-content">
        <div class="icons">
            <i class="fa fa-code"></i>
            <i class="fa fa-paint-brush"></i>
            <i class="fa-brands fa-square-js"></i>
            <i class="fa fa-database"></i>
        </div>
    </div>
</div>

:root {
  --card-width: 19rem;
  --card-height: 12rem;
  --outer-border-color: #f39c12;
  /* Vibrant Yellow-Orange */
  --inner-border-color: #3498db;
  /* Cool Blue */
  --border-speed: 4s;
  --background-color: #000000;
  /* Deep Blue-Grey */
  --text-color: #ecf0f1;
  /* Light White-Grey */
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: linear-gradient(135deg, #c6c7c8, #dbe2e9);
  /* Professional Gradient Background */
  font-family: 'Arial', sans-serif;
}

.double-border-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  background: var(--background-color);
  color: var(--text-color);
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

/* Outer Border Animation */
.double-border-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  border: 0.3rem solid var(--outer-border-color);
  animation: moveOuterBorder var(--border-speed) linear infinite;
  box-sizing: border-box;
}

/* Inner Border Animation */
.double-border-card::after {
  content: '';
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  width: calc(100% - 1.6rem);
  height: calc(100% - 1.6rem);
  border-radius: 1rem;
  border: 0.3rem solid var(--inner-border-color);
  animation: moveInnerBorder var(--border-speed) linear infinite;
  box-sizing: border-box;
}

/* Outer Border Animation */
@keyframes moveOuterBorder {
  0% {
      transform: translate(0, 0);
  }

  50% {
      transform: translate(0.5rem, 0.5rem);
  }

  100% {
      transform: translate(0, 0);
  }
}

/* Inner Border Animation */
@keyframes moveInnerBorder {
  0% {
      transform: translate(0, 0);
  }

  50% {
      transform: translate(-0.5rem, -0.5rem);
  }

  100% {
      transform: translate(0, 0);
  }
}

.card-content {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
}

.icons {
  display: flex;
  /* Use flexbox for alignment */
  justify-content: center;
  /* Center the icons */
  gap: 30px
      /* Space between icons */
}

.icons i {
  font-size: 1.5rem;
  /* Increase icon size */
  color: #09d5f5;
  /* Default icon color */
  transition: transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  /* Smooth transition for hover effects */
  cursor: pointer;
  /* Pointer cursor on hover */
  padding: 20px;
  /* Padding around icons */
  border-radius: 50%;
  /* Circular background */
  background: rgba(52, 73, 94, 0.1);
  /* Light background for icons */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  /* Shadow effect */
  position: relative;
  /* Position for pseudo-elements */
}

.icons i::before {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  /* Circular background */
  background: rgba(52, 73, 94, 0.2);
  /* Light background */
}

.icons i:hover {
  transform: scale(1.2);
  /* Scale up the icon on hover */
  color: #e74c3c;
  /* Change color on hover */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  /* Increase shadow on hover */
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="svg-pattern-card">
    <div class="card-body">
        <div class="card-content">
            <i class="fas fa-bolt"></i>
            <h2 id='svg-pattern-card'  id="boomdevs_72" id='svg-pattern-card' id="boomdevs_68" >SVG Pattern Card</h2>
            <p>A card with a dynamic SVG background and gradient moving border. Perfect for modern UI designs.</p>
        </div>
    </div>
</div>

:root {
  --card-width: 22rem;
  --card-height: 15rem;
  --border-speed: 6s;
  --gradient-1: #ff6f61;
  /* Soft Red */
  --gradient-2: #36d1dc;
  /* Aqua Blue */
  --gradient-3: #f7ff00;
  /* Bright Yellow */
  --text-color: #2c3e50;
  /* Dark Blue */
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #808182;
  /* Dark Grey Background */
  font-family: 'Arial', sans-serif;
}

.svg-pattern-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  color: var(--text-color);
  cursor: pointer;
}

/* Moving Gradient Border */
.svg-pattern-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  padding: 0.3rem;
  background: linear-gradient(120deg,
          var(--gradient-1),
          var(--gradient-2),
          var(--gradient-3));
  background-size: 200% 200%;
  animation: borderGradientMove var(--border-speed) linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
}

@keyframes borderGradientMove {
  0% {
      background-position: 0% 50%;
  }

  50% {
      background-position: 100% 50%;
  }

  100% {
      background-position: 0% 50%;
  }
}

/* Moving SVG Background */
.card-body {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  padding: 1rem;
  background: url('data:image/svg+xml;utf8, \
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> \
      <circle cx="50" cy="50" r="40" fill="%23ff6f61" /> \
      <rect x="100" y="100" width="50" height="50" fill="%2336d1dc" /> \
      <polygon points="150,10 190,80 110,80" fill="%23f7ff00" /> \
    </svg>');

  background-size: 150%;
  background-repeat: no-repeat;
  animation: patternMove 10s infinite linear;
}

@keyframes patternMove {
  0% {
      background-position: 0% 0%;
  }

  50% {
      background-position: 50% 50%;
  }

  100% {
      background-position: 0% 0%;
  }
}

.card-content {
  position: relative;
  z-index: 3;
  padding: 1rem;
}

.card-content h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.card-content p {
  font-size: 1rem;
  opacity: 0.9;
  line-height: 1.6;
}

.card-content i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--gradient-2);
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" />

<div class="svg-pattern-card">
    <div class="card-body">
        <div class="card-content">
            <i class="fas fa-cogs"></i>
            <h2 id='svg-pattern-card-1'  id="boomdevs_75" id='svg-pattern-card-1' id="boomdevs_70" >SVG Pattern Card</h2>
            <p>Explore creative patterns with dynamic borders and animations.</p>
        </div>
    </div>
</div>

:root {
  --card-width: 20.2rem;
  --card-height: 15rem;
  --border-speed: 6s;
  --gradient-1: #8e44ad;
  /* Purple */
  --gradient-2: #3498db;
  /* Blue */
  --gradient-3: #f39c12;
  /* Yellow */
  --text-color: #fff;
  /* Text Color */
  --svg-pattern-bg: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="50" cy="50" r="40" fill="%238e44ad"/><rect x="100" y="100" width="50" height="50" fill="%233498db"/><polygon points="150,10 190,80 110,80" fill="%23f39c12"/></svg>';
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #dcdde1;
  /* Light Gray Background */
  font-family: 'Arial', sans-serif;
}

.svg-pattern-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* Moving Gradient Border */
.svg-pattern-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  padding: 0.3rem;
  background: linear-gradient(120deg, var(--gradient-1), var(--gradient-2), var(--gradient-3));
  background-size: 200% 200%;
  animation: borderGradientMove var(--border-speed) linear infinite;
  z-index: 1;
}

.svg-pattern-card:hover {
  box-shadow: 0 1rem 2rem rgba(24, 246, 205, 0.5);
  transform: scale(1.05) rotate(10deg) translateY(-0.5rem);
}

@keyframes borderGradientMove {
  0% {
      background-position: 0% 50%;
  }

  50% {
      background-position: 100% 50%;
  }

  100% {
      background-position: 0% 50%;
  }
}

.card-body {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  padding: 1rem;
  background: var(--svg-pattern-bg);
  background-size: 150%;
  background-repeat: no-repeat;
  animation: patternMove 8s infinite linear;
}

@keyframes patternMove {
  0% {
      background-position: 0% 0%;
  }

  50% {
      background-position: 50% 50%;
  }

  100% {
      background-position: 0% 0%;
  }
}

.card-content {
  position: relative;
  z-index: 3;
  padding: 1rem;
}

.card-content h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.card-content p {
  font-size: 1rem;
  opacity: 0.9;
  line-height: 1.6;
}

.card-content i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--gradient-2);
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="animated-border-card">
    <div class="card-content">
        <h2 id='modern-card'  id="boomdevs_78" id='modern-card' id="boomdevs_72" >Modern Card</h2>
        <p>Subtle animations, vibrant colors, and engaging icons.</p>
        <div class="icons">
            <i class="fas fa-heart"></i>
            <i class="fas fa-music"></i>
            <i class="fas fa-camera"></i>
            <i class="fas fa-leaf"></i>
        </div>
    </div>
</div>

:root {
  --card-width: 20rem;
  --card-height: 13rem;
  --border-thickness: 0.4rem;
  --border-speed: 4s;
  --border-color: #fffa65;
  --card-bg: linear-gradient(135deg, #2b2e4a, #5c5470);
  --text-color: #fff;
  --icon-hover-color: #ffa502;
  --icon-base-color: #fffa65;
  --icon-hover-scale: 1.3;
  --icon-spacing: 0.7rem;
}

/* Body Styling */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(120deg, #1e3c72, #2a5298);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

/* Card Container */
.animated-border-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  background: var(--card-bg);
  color: var(--text-color);
  overflow: hidden;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, height 0.3s ease-in-out;
}

.animated-border-card:hover {
  transform: scale(1.05);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5);
  height: 23rem;
}

/* Moving Border Effect */
.animated-border-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: var(--border-thickness) solid var(--border-color);
  border-radius: 1rem;
  box-sizing: border-box;
  animation: moveBorders var(--border-speed) ease infinite;
}

/* Content Styling */
.animated-border-card .card-content {
  position: relative;
  z-index: 1;
  padding: 1rem;
}

.animated-border-card h2 {
  font-size: 1.8rem;
  margin-bottom: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #e6e6fa;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.animated-border-card p {
  font-size: 1rem;
  opacity: 0.85;
  line-height: 1.5;
  color: #dcdde1;
  margin-bottom: 1rem;
}

/* Icon Styling */
.card-content .icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--icon-spacing);
  margin-top: 1rem;
}

.card-content .icons i {
  font-size: 1.8rem;
  color: var(--icon-base-color);
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s ease;
}

.card-content .icons i:hover {
  color: var(--icon-hover-color);
  transform: scale(var(--icon-hover-scale));
}

/* Keyframe for Smooth Border Movement */
@keyframes moveBorders {
  0% {
      clip-path: inset(0 0 90% 0);
      /* Top border moving */
  }

  12.5% {
      clip-path: inset(0 90% 90% 0);
      /* Corner smoothing */
  }

  25% {
      clip-path: inset(0 90% 0 0);
      /* Right border moving */
  }

  37.5% {
      clip-path: inset(90% 90% 0 0);
      /* Corner smoothing */
  }

  50% {
      clip-path: inset(90% 0 0 0);
      /* Bottom border moving */
  }

  62.5% {
      clip-path: inset(90% 0 0 90%);
      /* Corner smoothing */
  }

  75% {
      clip-path: inset(0 0 0 90%);
      /* Left border moving */
  }

  87.5% {
      clip-path: inset(0 0 90% 90%);
      /* Corner smoothing */
  }

  100% {
      clip-path: inset(0 0 90% 0);
      /* Back to Top border moving */
  }
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="wave-pattern-card">
    <div class="card-body">
        <div class="card-content">
            <i class="fas fa-water"></i>
            <h2 id='wave-pattern-card'  id="boomdevs_81" id='wave-pattern-card' id="boomdevs_74" >Wave Pattern Card</h2>
            <p>This card features a dynamic SVG wave background and a gradient diagonal border for a sleek, modern look.</p>
        </div>
    </div>
</div>

:root {
  --card-width: 19rem;
  --card-height: 12rem;
  --border-speed: 8s;
  --gradient-1: #ff4e50;
  /* Fiery Red */
  --gradient-2: #1a2980;
  /* Deep Blue */
  --gradient-3: #26d0ce;
  /* Aqua Turquoise */
  --text-color: #1b1b1b;
  /* Charcoal Black */
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: linear-gradient(120deg, #000428, #004e92);
  /* Elegant Background */
  font-family: 'Arial', sans-serif;
}

.wave-pattern-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.5);
  color: var(--text-color);
}

/* Diagonal Moving Gradient Border */
.wave-pattern-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  padding: 0.4rem;
  /* Border Thickness */
  background: linear-gradient(45deg,
          var(--gradient-1),
          var(--gradient-2),
          var(--gradient-3));
  background-size: 300% 300%;
  animation: diagonalBorderMove var(--border-speed) infinite linear;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
}

@keyframes diagonalBorderMove {
  0% {
      background-position: 0% 0%;
  }

  50% {
      background-position: 100% 100%;
  }

  100% {
      background-position: 0% 0%;
  }
}

.card-content {
  position: relative;
  z-index: 3;
  padding: 1rem;
  background: rgba(233, 243, 239, 0);
  /* Semi-transparent overlay */
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

.card-content h2 {
  font-size: 1.5rem;
  color: white;
  margin-bottom: 0.5rem;
}

.card-content p {
  font-size: 0.7rem;
  opacity: 0.9;
  color: rgb(226, 222, 222);
  line-height: 1.6;
}

.card-content i {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--gradient-3);
}

/* SVG Wave Pattern Background */
.card-body {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  background: url('data:image/svg+xml;utf8, \
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"> \
      <path fill="%23ff4e50" fill-opacity="01" d="M0,288L48,272C96,256,192,224,288,224C384,224,480,256,576,256C672,256,768,224,864,186.7C960,149,1056,107,1152,117.3C1248,128,1344,192,1392,224L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path> \
    </svg>');
  background-size: cover;
  animation: waveMove 10s infinite linear alternate;
}

@keyframes waveMove {
  0% {
      background-position: 0% 0%;
  }

  100% {
      background-position: 100% 0%;
  }
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="zigzag-card">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="var(--svg-color)" stroke-width="200" stroke-dasharray="5 5" stroke-linejoin="round">
          <animate attributeName="stroke-dashoffset" values="0;10;0" dur="4s" keyTimes="0;0.5;1" repeatCount="indefinite" />
      </path>
  </svg>
  <div class="card-content">
      <h2 id='welcome'  id="boomdevs_84" >Welcome</h2> 
      <button>Learn More</button>
  </div>
</div>

:root {
  --card-width: 20rem;
  --card-height: 14rem;
  --svg-color: #74eddb;
  --background: rgba(255, 255, 255, 0.1);
  --glass-blur: 10px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: black;
  font-family: 'Roboto', sans-serif;
}

.zigzag-card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  background: var(--background);
  border-radius: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Snake Pattern SVG */
.zigzag-card svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.zigzag-card svg path {
  fill: none;
  stroke: var(--svg-color);
  stroke-width: 8;
  stroke-dasharray: 20 15;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.card-content {
  position: relative;
  z-index: 1;
  padding: 2rem;
}

.card-content h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: white;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

.card-content p {
  font-size: 1.1rem;
  opacity: 0.9;
  line-height: 1.7;
  color: #f0f0f0;
}

button {
  background: linear-gradient(135deg, black, #ffffff, black);
  color: black;
  border: none;
  border-radius: 50px;
  padding: 15px 25px;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  outline: none;
}

button:hover {
  background: linear-gradient(35deg, black, #ffffff, black);
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

button:active {
  transform: translateY(2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card" onclick="rushBike()">
  <i class="fas fa-bicycle icon"></i> <!-- Font Awesome bike icon -->
  <h2 id='bike-rush'  id="boomdevs_87" >Bike Rush</h2>
  <p>Click to Win the Race</p>
  <i class="fas fa-bicycle bike" id="bikeIcon"></i> <!-- Bike icon for animation -->
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(145deg, #000000, #dad8d8, #000000); /* Neonic gradient background */
  font-family: 'Arial', sans-serif;
  overflow: hidden; /* Prevent scrollbars when the bike rushes out */
}
.card {
  width: 18rem;
  height: 12rem;
  background: linear-gradient(45deg, #090c9d, #6de9f0); /* Neon gradient background for the card */
  color: white;
  text-align: center;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 50px rgba(78, 246, 255, 0.5); /* Glowing neon effect */
  position: relative;
  overflow: hidden;
  transition: border 0.3s ease, box-shadow 0.5s ease;
  cursor: pointer; /* Change cursor to pointer on hover */
  backdrop-filter: blur(10px); /* Add slight blur effect behind the card */
}
.card h2 {
  margin: 0;
  font-size: 2.5rem;
  color: #fff;
  text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff; /* Neon text effect */
  transition: transform 0.3s ease;
}
.card:hover h2 {
  transform: scale(1.3);
  text-shadow: 0 0 20px #2ecc71, 0 0 40px #2ecc71; /* Glowing text effect on hover */
}
.card:hover {
  border: 5px groove #ffffff; /* Groove border effect on hover */
  box-shadow: 0 0 50px rgba(45, 248, 177, 0.7), 0 0 100px rgba(45, 248, 177, 0.9); /* Intense glowing shadow on hover */
}
.icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
  text-shadow: 0 0 10px #fff, 0 0 20px #fff; /* Neon glowing icon */
}
.card:hover .icon {
  transform: scale(1.2); /* Slightly enlarge icon on hover */
  text-shadow: 0 0 20px #2ecc71, 0 0 40px #2ecc71; /* Glowing effect on hover */
}
.bike {
  position: absolute;
  bottom: 10px; /* Position the bike icon at the bottom of the card */
  left: 50%;
  transform: translateX(-50%);
  font-size: 4rem; /* Size of the bike icon */
  color: #2ecc71; /* Neon green color for the bike */
  transition: transform 0.5s ease, color 0.5s ease;
}
.bike-rush {
  transform: translateX(100vw); /* Move the bike out of the screen */
  color: rgb(45, 248, 177); /* Neon glowing color */
}

function rushBike() {
  const bikeIcon = document.getElementById('bikeIcon');
  bikeIcon.classList.add('bike-rush'); // Add class to animate bike out of screen

  // Optional: Reset the animation after it completes
  setTimeout(() => {
      bikeIcon.classList.remove('bike-rush'); // Remove class to reset position
  }, 500); // Match this duration with the CSS transition duration
}

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div class="card">
  <i class="fas fa-rocket icon"></i> <!-- New rocket icon -->
  <h2 id='explore-the-cosmos'  id="boomdevs_90" >Explore the Cosmos</h2>
  <p>Venture into space and discover new horizons.</p>
  <button>Start Journey</button>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #1c1c1c;
  font-family: 'Arial', sans-serif;
}

.card {
  width: 16rem;
  height: 13rem;
  background: #333;
  color: white;
  text-align: center;
  padding: 3rem;
  border-radius: 1.5rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, background-color 0.5s ease;
  cursor: pointer;
}

.card:hover {
  transform: translateY(-10px); /* Floating effect on hover */
  background-color: #4b00c9; /* Neon purple background on hover */
}

.card:hover .icon {
  transform: rotate(45deg) scale(1.2); /* Icon rotates and enlarges on hover */
}

.card:active .icon {
  transform: translateX(350%) translateY(-190%) rotate(15deg) scale(2); /* Move the icon outside of the card */
  transition: transform 0.5s ease-out; /* Smooth transition on click */
}

.card:active{
  border: 3px solid #00ffdd; /* Add a border on click */
}

.card h2 {
  font-size: 1.5rem;
  margin: 1rem 0;
  color: #fff;
  transition: color 0.3s ease;
}

.card p {
  font-size: 0.9rem;
  margin: 1rem 0;
  color: #e0e0e0;
  transition: color 0.3s ease;
}

.card .icon {
  font-size: 5rem;
  transition: transform 0.3s ease;
}

.card button {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 0.5rem;
  padding: 0.7rem 1.5rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.card button:hover {
  background-color: #fff;
  color: #333;
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Liquid Background Animation */
@keyframes liquidBackground {
  0% {
    background: #4b00c9;
  }
  50% {
    background: #ff006d;
  }
  100% {
    background: #4b00c9;
  }
}

.card {
  animation: liquidBackground 6s infinite alternate;
}

<!-- No JS code needed for this card -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
  <h2 id='shake-effect'  id="boomdevs_93" >Shake Effect</h2>
  <p>Hover over the card to shake it!</p>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #000000;
}
.card {
  width: 17rem;
  height: 10rem;
  background: linear-gradient(90deg, rgb(72, 228, 228) 0%, hsla(310, 76%, 82%, 1) 50%, hsla(256, 83%, 72%, 1) 100%);
  color: white;
  text-align: center;
  cursor: pointer;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 0px 20px rgba(13, 237, 169, 0.8);
  transition: transform 0.5s;
}
.card:hover {
  animation: shake 0.5s infinite ease-in-out;
}


@keyframes shake {
  0% {
      transform: translateX(0);
  }
  25% {
      transform: translateX(-10px);
  }
  50% {
      transform: translatey(10px);
  }
  75% {
      transform: translateX(-10px);
  }
  100% {
      transform: translateX(10);
  }
}

<!-- No JS code needed for this card -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
  <h2 id='disco-card'  id="boomdevs_96" >Disco Card</h2>
  <p>I am a disco dancer..</p>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #f4f4f4;
}

.card {
  width: 18rem;
  height: 10rem;
  background: linear-gradient(45deg, #d53369, #cbad6d);  /* Gradient background */
  color: white;
  text-align: center;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 5px solid transparent; /* Border color will be animated */
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.card h2 {
  margin: 0;
  font-size: 2.5rem;
  animation: slideInFromLeft 1s ease-out forwards;
}

.card p {
  font-size: 1.2rem;
  margin-top: 2.5rem !important;
  animation: slideInFromRight 1.5s ease-out forwards;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes disco{
  0% {
    background: linear-gradient(45deg, #000000, #00ff99, #000000);
  }
  5%{
    background: linear-gradient(55deg, #000000, #ff6600, #000000);
  }
  10%{
    background: linear-gradient(65deg, #000000, #ff0000, #000000);
  }
  15%{
    background: linear-gradient(75deg, #000000, #9900ff, #000000);
  }
  20%{
    background: linear-gradient(85deg, #000000, #00ff99, #000000);
  }
  25%{
    background: linear-gradient(95deg, #000000, #0099ff, #000000);
  }
  30%{
    background: linear-gradient(105deg, #000000, #0000ff, #000000);
  }
  35%{
    background: linear-gradient(115deg, #000000, #ff0066, #000000);
  }
  40%{
    background: linear-gradient(125deg, #000000, #ff6600, #000000);
  }
  45%{
    background: linear-gradient(135deg, #000000, #ff0000, #000000);
  }
  50%{
    background: linear-gradient(145deg, #000000, #9900ff, #000000);
  }
  55%{
    background: linear-gradient(155deg, #000000, #00ff99, #000000);
  }
  60%{
    background: linear-gradient(165deg, #000000, #0099ff, #000000);
  }
  65%{
    background: linear-gradient(175deg, #000000, #0000ff, #000000);
  }
  70%{
    background: linear-gradient(185deg, #000000, #ff0066, #000000);
  }
  75%{
    background: linear-gradient(195deg, #000000, #ff6600, #000000);
  }
  80%{
    background: linear-gradient(205deg, #000000, #ff0000, #000000);
  }
  85%{
    background: linear-gradient(215deg, #000000, #9900ff, #000000);
    }
  90%{
    background: linear-gradient(225deg, #000000, #00ff99, #000000);
  }
  95%{
    background: linear-gradient(235deg, #000000, #0099ff, #000000);
  }
  100%{
    background: linear-gradient(245deg, #000000, #0000ff, #000000);
  }
}

/* Hover Effect: Shine Border and Scale */
.card:hover {
  transform: scale(1.05); /* Slight scale up */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); /* Increase shadow for depth */
  border: 5px solid #fff; /* White border on hover */
  animation: shineBorder 1s infinite, disco 6s infinite alternate; /* Add a shining border effect */
}

@keyframes shineBorder {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: rgba(255, 255, 255, 0.7);
  }
  100% {
    border-color: transparent;
  }
}

/* Background Animation for Card */
@keyframes liquidBackground {
  0% {
    background: linear-gradient(45deg, #d53369, #cbad6d);
  }
  50% {
    background: linear-gradient(45deg, #ff0066, #ff6600);
  }
  100% {
    background: linear-gradient(45deg, #d53369, #cbad6d);
  }
}

.card {
  animation: liquidBackground 6s infinite alternate;
  cursor: pointer;
}

<!-- No JS code needed for this card -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
  <div class="flip-card-inner">
      <div class="flip-card-front">
          <h2 id='hover-me-2'  id="boomdevs_99" >Hover Me</h2>
      </div>
      <div class="flip-card-back">
          <h2 id='flipped'  id="boomdevs_100" >Flipped!</h2>
      </div>
  </div>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #333;
}
.card {
  width: 20rem;
  height: 12rem;
  perspective: 1000px;
  cursor: pointer;
}
.flip-card-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  position: relative;
}
.card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}
.flip-card-front {
  background: radial-gradient(circle, #ff6a00 10%, #ee0979 20%, #09dbee 20%, #364cf4 20%, #ee7b09 20%, #6d00da );
}
.flip-card-back {
  background: linear-gradient(105deg, #9605f0, #6859ec, #3e0bd8,#ac83e8, #05b5e1, #05ebaa);
  transform: rotateY(180deg);
  opacity: 0;
  animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

<!-- No JS code needed for this card -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
  <img decoding="async" src="https://images.nightcafe.studio/jobs/TUSj3kxsxGifvmvqxp3J/TUSj3kxsxGifvmvqxp3J--0--2hzmy.jpg?tr=w-1600,c-at_max" class="icon" alt="Icon 1">
  <img decoding="async" src="https://images.nightcafe.studio/jobs/zekORIsBBmsGrlzKZMnb/zekORIsBBmsGrlzKZMnb--0--apq2n.jpg?tr=w-1600,c-at_max" class="icon" alt="Icon 2">
  <img decoding="async" src="https://images.nightcafe.studio/jobs/sVv2oR9uCGpuMxjUhr1I/sVv2oR9uCGpuMxjUhr1I--1--6gycc.jpg?tr=w-1600,c-at_max" class="icon" alt="Icon 3">
  <img decoding="async" src="https://images.nightcafe.studio/jobs/oP0gC64WkoBOfkOlGrUB/oP0gC64WkoBOfkOlGrUB--1--jiymi_4x-clty-upscale-4b3zf.jpg?tr=w-1600,c-at_max" class="icon" alt="Icon 4">
</div>


body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #e7e7e7; /* Fallback background */
}

.card {
  position: relative;
  width: 20rem;
  height: 10rem;
  background: linear-gradient(270deg, #ff6f61, #6fa3ef, #88d8b0, #ffcc5c);
  background-size: 400% 400%;
  animation: gradientAnimation 15s ease infinite;
  color: white;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden; /* Prevent icons from overflowing */
}

@keyframes gradientAnimation {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

.icon {
  position: absolute;
  width: 4rem;
  height: 4rem;
  border-radius: 10%;
  border: 0.3rem solid white;
  animation: bounce 2s infinite;
  cursor: pointer;
  transition: all 0.3s ease;
}

.icon:nth-child(2) {
  animation-delay: 0.5s; /* Delay for the second icon */
}

.icon:nth-child(3) {
  animation-delay: 1s; /* Delay for the third icon */
}

@keyframes bounce {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-30px);
  }
}

.icon:hover {
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.8);
}

const icons = document.querySelectorAll('.icon');
const card = document.querySelector('.card');

icons.forEach(icon => {
    // Set random positions for each icon
    const randomX = Math.random() * (card.clientWidth - 50); // 50 is the icon width
    const randomY = Math.random() * (card.clientHeight - 50); // 50 is the icon height
    icon.style.left = `${randomX}px`;
    icon.style.top = `${randomY}px`;

    // Add random animation delay for unpredictability
    const randomDelay = Math.random() * 2; // Random delay between 0 and 2 seconds
    icon.style.animationDelay = `${randomDelay}s`;
});

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
  <h2 id='blur-fade-in'  id="boomdevs_105" >Blur Fade-In</h2>
  <p>This text fades in with a blur effect.</p>
</div>


body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: linear-gradient(135deg, #0f0f0f, #1b1b1b);
}

.card {
  width: 17rem;
  height: 10rem;
  background: linear-gradient(135deg, #222, #333);
  color: white;
  text-align: center;
  padding: 2rem;
  border: 3px solid #4a90e2; /* Vivid blue */
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: transform 0.5s ease, box-shadow 0.5s ease, background 0.5s ease, border-color 0.5s ease;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
  animation: fadeInBlur 2s ease forwards;
  background: linear-gradient(135deg, #212223, #6c63ff); /* Blue to purple gradient */
  border-color: #6c63ff;
}

.card h2 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: bold;
  background: linear-gradient(90deg, #4a90e2, #6c63ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeInBlur 1.5s ease forwards;
}

.card:hover h2 {
  background: linear-gradient(90deg, #6c63ff, #ff6ec7); /* Purple to pink gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card p {
  font-size: 1.2rem;
  margin-top: 1rem;
  animation: fadeInBlur 2s ease forwards;
  color: #ccc;
  transition: color 0.5s ease;
}

.card p:hover {
  color: #fff; /* Bright white on hover */
}

@keyframes fadeInBlur {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

<!-- No JS is required for this card -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="floating-card">
  <div class="card-layer layer1"></div>
  <div class="card-layer layer2"></div>
  <div class="card-content">
    <h2 id='hover-me-3'  id="boomdevs_108" >Hover Me!</h2>
    <p>A dynamic and modern card concept.</p>
  </div>
</div>


body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: radial-gradient(circle, #1a1a1d, #000000);
  font-family: Arial, sans-serif;
}

.floating-card {
  position: relative;
  width: 16rem;
  height: 10rem;
  margin-left:-2.5rem;
  perspective: 1000px; /* Adds depth */
  cursor: pointer;
  border-radius: 10px;
  animation: movingBorders 1.2s linear infinite;
}

.floating-card:hover{
    animation: stopped;
}

.card-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  background: linear-gradient(135deg, #ff6ec7, #4a90e2);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  transform-origin: center;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.layer1 {
  transform: translateZ(-20px) rotateX(10deg);
  opacity: 0.8;
}

.layer2 {
  transform: translateZ(-10px) rotateX(5deg);
  opacity: 0.9;
}

.floating-card:hover .layer1 {
  transform: translateZ(-40px) rotateX(15deg) rotateY(10deg);
  opacity: 0.6;
}

.floating-card:hover .layer2 {
  transform: translateZ(-20px) rotateX(10deg) rotateY(5deg);
  opacity: 0.7;
}

.card-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #151515, #222222);
  color: white;
  border-radius: 1rem;
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  z-index: 3;
}

.floating-card:hover .card-content {
  transform: translateZ(20px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
  animation: movingBorders 1.2s linear infinite;
}

.card-content h2 {
  font-size: 2rem;
  margin: 0;
  background: linear-gradient(90deg, #4a90e2, #ff6ec7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-content p {
  font-size: 1.2rem;
  color: #ccc;
  margin-top: 1rem;
  transition: color 0.5s ease;
}

.card-content p:hover {
  color: #fff;
}

@keyframes movingBorders {
    0% {
        border: 1px solid #ff6ec7;
    }
    25% {
        border: 3px solid #4ae29b;
    }

    50% {
        border: 5px solid #4a90e2;
    }
    75% {
        border: 3px solid #6effad;
    }
    100% {
        border: 1px solid #ff6ec7;
    }
    
}

<!-- No JS is required for this card -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="rotating-platforms">
  <div class="platform top-platform"></div>
  <div class="platform bottom-platform"></div>
  <div class="hex-card">
    <div class="hexagon">
      <div class="hex-layer layer1"></div>
      <div class="hex-layer layer2"></div>
      <div class="hex-content">
        <h2 id='hex-card'  id="boomdevs_111" >Hex Card</h2>
        <p>Rotating in its futuristic frame.</p>
      </div>
    </div>
  </div>
</div>


body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle, #0d0d0d, #000000);
  font-family: 'Arial', sans-serif;
  overflow: hidden;
}

.rotating-platforms {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 30rem;
  cursor: pointer;
  perspective: 1000px; /* Adds depth for 3D rotation */
}

.platform {
  position: absolute;
  width: 15rem;
  height: 0.5rem;
  background: linear-gradient(90deg, #4a90e2, #ff6ec7);
  box-shadow: 0 20px 65px rgba(255, 110, 199, 1);
  border-radius: 5px;
  z-index: 2;
}

.top-platform {
  top: 0;
  transform: translateY(4rem);
}

.bottom-platform {
  bottom: 0;
  transform: translateY(-4rem);
  box-shadow: 0 -20px 65px rgba(255, 110, 199, 01.6);
}

.hex-card {
  position: relative;
  width: 15rem;
  height: 17rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hexagon {
  position: relative;
  width: 15rem;
  height: 17rem;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(135deg, #1a1a1d, #282828);
  transform-style: preserve-3d;
  animation: rotateHex 10s infinite linear;
}

.hexagon:hover{
  cursor: pointer;
  animation: stopped;
}

.hex-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inherit;
  border: 4px solid rgba(255, 255, 255, 0.1); /* Visible border */
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.layer1 {
  background: linear-gradient(135deg, rgba(255, 110, 199, 0.3), rgba(74, 144, 226, 0.3));
  transform: translateZ(-10px);
}

.layer2 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  transform: translateZ(-20px);
}

.hex-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inherit;
  background: linear-gradient(135deg, #151515, #1f1f1f);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 5;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.hex-content h2 {
  font-size: 1.8rem;
  margin: 0;
  background: linear-gradient(90deg, #4a90e2, #ff6ec7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeInGlow 2s ease;
}

.hex-content p {
  font-size: 1.1rem;
  margin-top: 0.8rem;
  color: #ccc;
  transition: color 0.5s ease;
}

.hex-content:hover p {
  color: white;
}

.hexagon:hover .layer1 {
  transform: translateZ(-15px) rotateZ(10deg);
  opacity: 0.8;
}

.hexagon:hover .layer2 {
  transform: translateZ(-25px) rotateZ(5deg);
  opacity: 0.7;
}

.hexagon:hover .hex-content {
  transform: translateZ(20px);
  box-shadow: 0 10px 30px rgba(255, 110, 199, 0.6);
}

@keyframes rotateHex {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes fadeInGlow {
  0% {
    opacity: 0;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 20px rgba(255, 110, 199, 0.8);
  }
}

<!-- No JS is required for this card -->

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
<div class="card">
    <div class="card-content">
        <div class="card-title">Creative Card</div>
        <div class="card-description">Hover to see more details!</div>

    </div>
    <div class="card-hover-content">
        <h3 id='more-information'  id="boomdevs_114" id='more-information' id="boomdevs_8" >More Information</h3>
        <p>This card uses animations and patterns to create an engaging user experience.</p>
        <button class="card-button">Learn More <i class="fa-brands fa-readme"></i></button>
    </div>
</div>

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f4f8;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.card {
    position: relative;
    width: 15rem;
    /* Changed to rem */
    height: 22rem;
    /* Adjusted height */
    border-radius: 1rem;
    /* Changed to rem */
    overflow: hidden;
    box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: white;
    transition: transform 0.3s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.8rem);
    }
}

@keyframes slideIn {
    from {
        transform: translate(-50%, 20px);
        opacity: 0;
    }

    to {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    /* Optional: subtle overlay */
    z-index: 1;
}

.card-content {
    position: relative;
    z-index: 2;
    transition: opacity 0.3s;
    /* Transition for opacity */
}

.card-title {
    font-size: 1.5rem;
    /* Changed to rem */
    margin: 0.5rem 0;
    /* Changed to rem */
}

.card-description {
    font-size: 1rem;
    /* Changed to rem */
    margin-bottom: 1rem;
    /* Changed to rem */
}

.card-button {
    background: #ffffff;
    color: #6a11cb;
    border: none;
    padding: 0.5rem 1rem;
    /* Changed to rem */
    border-radius: 0.5rem;
    /* Changed to rem */
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    z-index: 2;
}

.card-button:hover {
    background: #6a11cb;
    color: white;
}

.card:hover {
    transform: scale(1.05);
}

.card-hover-content {
    position: absolute;
    top: 100%;
    /* Start below the card */
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 0;
    color: #6a11cb;
    text-align: center;
    z-index: 2;
    transition: opacity 0.3s ease;
    /* Transition for opacity */
}

.card:hover .card-content {
    opacity: 0;
    /* Make original content disappear */
}

.card:hover .card-hover-content {
    color: white;
    top: 50%;
    /* Move to the center of the card */
    animation: slideIn 0.5s forwards;
    /* Apply slide-in animation */
    opacity: 1;
    /* Make it visible */
}

.card-hover-content h3 {
    font-size: 1.25rem;
    /* Changed to rem */
    margin: 0.5rem 0;
    /* Changed to rem */
}

.card-hover-content p {
    font-size: 1rem;
    /* Changed to rem */
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
  <h2 id='glitch-effect'  id="boomdevs_117" >Glitch Effect</h2>
  <div class="icon" title="Home Icon">
      <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M12 3l10 9h-3v9h-6v-6h-4v6H5v-9H2l10-9z"/></svg>
  </div>
  <div class="icon" title="Settings Icon">
      <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M12 8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm6.36-12.36l-1.42 1.42C16.84 6.84 15.5 6 14 6c-1.5 0-2.84.84-3.94 2.06L8.64 6.64C7.24 5.24 5.5 4 4 4c-1.5 0-2.84.84-3.94 2.06L.64 4.64C.24 5.04 0 5.5 0 6c0 1.5.84 2.84 2.06 3.94l1.42 1.42C2.84 12.84 2 14.5 2 16c0 1.5.84 2.84 2.06 3.94l1.42 1.42C5.24 22.76 6.5 24 8 24c1.5 0 2.84-.84 3.94-2.06l1.42 1.42C15.76 22.76 17.5 24 19 24c1.5 ```html
0 2.84-.84 3.94-2.06l1.42-1.42C23.76 19.84 24 18.5 24 17c0-1.5-.84-2.84-2.06-3.94l-1.42-1.42C21.76 10.84 22 9.5 22 8c0-1.5-.84-2.84-2.06-3.94z"/></svg>
  </div>
  <div class="icon" title="User  Icon">
      <svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M12 12c2.67 0 8 1.34 8 4v2H4v-2c0-2.66 5.33-4 8-4zm0-10c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z"/></svg>
  </div>
</div>


body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #333;
}
.card {
  width: 17rem;
  height: 10rem;
  background: #1e1e1e;
  color: white;
  text-align: center;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden; /* Prevent overflow of glitch effect */
  transform: scale(1); /* Initial scale */
  transition: transform 0.3s; /* Animation */
  animation: glitch 0.5s infinite; /* Glitch effect */
  cursor: pointer;
}
.card:hover {
  transform: scale(1.05);
}
.card h2 {
  margin: 0;
  font-size: 2rem;
}
.icon {
  width: 50px;
  height: 50px;
  margin: 10px;
  margin-top: 5rem;
  position: relative;
  display: inline-block; /* Ensure the glitch effect works properly */
  transition: transform 0.3s;
}
.icon:hover {
  animation: glitch 0.5s infinite;
  transform: scale(1.1);
}
@keyframes glitch {
  0% {
      transform: translate(0);
  }
  20% {
      transform: translate(-2px, -2px);
  }
  40% {
      transform: translate(2px, 2px);
  }
  60% {
      transform: translate(-2px, 2px);
  }
  80% {
      transform: translate(2px, -2px);
  }
  100% {
      transform: translate(0);
  }
}

<!-- No JS is required for this card -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
  <h2 id='welcome-1'  id="boomdevs_120" >Welcome</h2>
  <p>This is typing effect.</p>
</div>


body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #1a1a2e;
  font-family: 'Arial', sans-serif;
}

.card {
  width: 18rem;
  height: 10rem;
  background: linear-gradient(145deg, #0f3460, #16213e);
  border-radius: 1rem;
  box-shadow: 0 0 1rem rgba(0, 255, 255, 0.3), 0 0 2rem rgba(0, 255, 255, 0.2);
  text-align: center;
  padding: 2rem;
  color: #e4f9ff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.card:hover {
  transform: scale(1.02);
  border: 1px solid #36f48b;
  box-shadow: 0 0 2rem rgba(0, 255, 255, 0.5), 0 0 4rem rgba(0, 255, 255, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  z-index: 0;
}

.card h2 {
  margin: 0;
  font-size: 2.4rem;
  color: #00d4ff;
  text-shadow: 0 0 0.5rem rgba(0, 212, 255, 0.7);
  animation: glow 3s infinite alternate;
  z-index: 1;
  position: relative;
}

.card p {
  font-size: 1.2rem;
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
  width: 0;
  white-space: nowrap;
  animation: typing 3s steps(30) 1.5s forwards, blink 0.6s step-end infinite;
  z-index: 1;
  position: relative;
  padding: 1rem;
}

@keyframes typing {
  from {
      width: 0;
  }
  to {
      width: 100%;
  }
}

@keyframes blink {
  50% {
      border-right: 0.15rem solid #00d4ff;
  }
  100% {
      border-right: none;
  }
}

@keyframes glow {
  from {
      text-shadow: 0 0 0.5rem rgba(0, 212, 255, 0.7);
  }
  to {
      text-shadow: 0 0 1.5rem rgba(0, 212, 255, 1);
  }
}

<!-- No JS is required for this card -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card dotted-card">
  <div class="card-content">
      <h2 id='webdevtales'  id="boomdevs_123" id='webdevtales' id="boomdevs_61" >WebDevTales</h2>
      <p>A community for web developers to share their knowledge and experiences.</p>
  </div>
</div>

:root {
  --card-width: 20rem;
  --card-height: 12rem;
  --border-speed: 4s;
  --border-color: #00b3b3;
  --background: #3a3d46;
  --light-color: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --light-shadow: rgba(255, 255, 255, 0.3);
}

/* Body Styling */
body {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  margin: 0;
  background: #f4f4f7;
  font-family: 'Arial', sans-serif;
}

/* Card Base Styling with Neomorphism Effect */
.card {
  position: relative;
  width: var(--card-width);
  height: var(--card-height);
  background: var(--background);
  color: rgb(0, 0, 0);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1rem;
  box-shadow: 10px 10px 20px var(--shadow-color), -10px -10px 20px var(--light-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(10px);
  /* Neomorphism soft blur effect */
  background: var(--light-color);
  /* Light card body color */
}

/* Hover Effect */
.card:hover {
  transform: scale(1.05);
  /* Scale up the card on hover */
  box-shadow: 15px 15px 30px var(--shadow-color), -15px -15px 30px var(--light-shadow);
}

/* Dotted Moving Borders with More Prominent Dots */
.dotted-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.3rem dotted var(--border-color);
  /* Clearer dotted border */
  border-radius: 1rem;
  box-sizing: border-box;
  animation: moveDottedBorders var(--border-speed) linear infinite;
}

/* Keyframes for Dotted Border Animation */
@keyframes moveDottedBorders {
  0% {
      transform: translate(0, 0);
  }

  50% {
      transform: translate(0.5rem, 0.5rem);
  }

  100% {
      transform: translate(0, 0);
  }
}

/* Content Inside the Card */
.card-content {
  position: relative;
  z-index: 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Title Styling with Text Glow */
.card-content h2 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  animation: text-glow 3s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Paragraph Styling with Text Fade */
.card-content p {
  font-size: 1rem;
  opacity: 0.8;
  line-height: 1.5;
  color: #ddd;
  animation: text-fade 4s ease-in-out infinite;
}

/* Text Glow Animation */
@keyframes text-glow {

  0%,
  100% {
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.5);
  }

  50% {
      text-shadow: 0 0 20px rgba(0, 255, 255, 1), 0 0 40px rgba(0, 255, 255, 0.7);
  }
}

/* Text Fade Animation */
@keyframes text-fade {

  0%,
  100% {
      opacity: 0.8;
  }

  50% {
      opacity: 1;
  }
}

     <!-- No js -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<iv class="card">
  <div class="profile">
      <img decoding="async" src="https://images.nightcafe.studio/jobs/sVv2oR9uCGpuMxjUhr1I/sVv2oR9uCGpuMxjUhr1I--1--6gycc.jpg?tr=w-1600,c-at_max" alt="Profile Picture">
  </div>
  <h2 id='john-doe'  id="boomdevs_126" >John Doe</h2>
  <p>Hover to see more!</p>
  <div class="social-icons">
      <a href="#" title="Facebook"><i class="fab fa-facebook-f"></i></a>
      <a href="#" title="Twitter"><i class="fab fa-twitter"></i></a>
      <a href="#" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
      <a href="#" title="Instagram"><i class="fab fa-instagram"></i></a>
  </div>
</div>


body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #1a1a2e;
  font-family: Arial, sans-serif;
}

.card {
  width: 18rem;
  height: 10rem;
  background: linear-gradient(145deg, #0f3460, #16213e);
  color: white;
  text-align: center;
  border-radius: 1rem;
  padding: 1rem;
  cursor: pointer;
  position: relative;
  transition: height 0.4s ease, width 0.4s ease;
  overflow: hidden;
  box-shadow: 0 0 1rem rgba(0, 255, 255, 0.5), 0 0 2rem rgba(0, 255, 255, 0.4);
  border: 0.15rem solid transparent;
}

.card:hover {
  width: 18rem;
  height: 24rem;
  border-color: #00d4ff;
  box-shadow: 0 0 2rem rgba(0, 255, 255, 0.7), 0 0 3rem rgba(0, 255, 255, 0.6);
}

.profile {
  position: absolute;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6rem;
  height: 6rem;
  background: white;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 1rem rgba(0, 255, 255, 0.5);
  transition: top 0.4s ease, box-shadow 0.4s ease;
}

.card:hover .profile {
  top: 1rem;
  box-shadow: 0 0 1.5rem rgba(0, 255, 255, 0.7);
}

.profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card h2 {
  margin: 6rem 0 0.5rem 0;
  font-size: 1.5rem;
  color: #00d4ff;
  margin-top: 6.5rem;
  text-shadow: 0 0 1rem rgba(0, 212, 255, 0.7);
}

.card p {
  font-size: 1rem;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  position: absolute;
  bottom: -4rem;
  left: 50%;
  transform: translateX(-50%);
  transition: bottom 0.4s ease;
}

.card:hover .social-icons {
  bottom: 1rem;
}

.social-icons a {
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  transition: color 0.3s, text-shadow 0.3s;
}

.social-icons a:hover {
  color: #00d4ff;
  text-shadow: 0 0 1rem rgba(0, 212, 255, 0.7);
}

<!-- No JS is required for this card -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="price-card">
  <h2 id='premium-plan-1'  id="boomdevs_129" >Premium Plan</h2>
  <div class="price">$49.99 <small>/ month</small></div>
  <div class="divider"></div>
  <ul class="features">
      <li>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>
          Unlimited Access
      </li>
      <li>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>
          50GB Cloud Storage
      </li>
      <li>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>
          Priority Support
      </li>
  </ul>
  <button class="cta-button">Get Started</button>
  <p class="footer">No commitments. Cancel anytime.</p>
</div>


body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #f3f4f7, #e2e8f0);
  font-family: "Poppins", sans-serif;
}

.price-card {
  width: 18rem;
  background: linear-gradient(135deg, #000000, #274d36, #000000);
  color: white;
  border-radius: 1.5rem;
  text-align: center;
  padding: 2rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.price-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.price-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.price-card h2 {
  font-size: 1.8rem;
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.price {
  font-size: 2.5rem;
  margin: 1rem 0 0.5rem;
  font-weight: bold;
}

.price small {
  font-size: 1rem;
  opacity: 0.8;
  color: #ffffff;
}

.divider {
  width: 60%;
  height: 2px;
  background: white;
  margin: 1rem auto;
  opacity: 0.4;
  border-radius: 10px;
}

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  text-align: left;
}

.features li {
  margin: 0.6rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.features li svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: white;
}

.cta-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  color: #27ae60;
  background: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
  background-color: #2ecc71;
  color: white;
  transform: scale(1.05);
}

.footer {
  font-size: 0.8rem;
  margin-top: 1rem;
  opacity: 0.8;
}

<!-- No JS is required for this card -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="container">
  <button class="show-button" onclick="showPlans()">Show Plans</button>
  <div class="plans" id="plans">
      <!-- Plan 1 -->
      <div class="plan-card">
          <h3 id='basic'  id="boomdevs_132" >Basic</h3>
          <div class="price">$19.99</div>
          <ul class="features">
              <li>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>
                  5GB Storage
              </li>
              <li>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>
                  Email Support
              </li>
          </ul>
          <div class="plan-footer">
              <button class="cta-button">Choose</button>
          </div>
      </div>
      <!-- Plan 2 -->
      <div class="plan-card">
          <h3 id='premium'  id="boomdevs_133" >Premium</h3>
          <div class="price">$39.99</div>
          <ul class="features">
              <li>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>
                  50GB Storage
              </li>
              <li>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4z"/></svg>
                  Priority Support
              </li>
          </ul>
          <div class="plan-footer">
              <button class="cta-button">Choose</button>
          </div>
      </div>
  </div>
</div>


body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #f3f4f7, #e2e8f0);
  font-family: "Poppins", sans-serif;
  overflow: hidden;
}

.container {
  text-align: center;
  position: relative;
}

.show-button {
  background: #000000;
  color: white;
  font-size: 1rem;
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.show-button:hover {
  background-color: #ffffff;
  color: #000;
  border: 2px solid black;
  transform: scale(1.05);
}

.plans {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.plans.active {
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
}

.plan-card {
  width: 8rem;
  background: linear-gradient(135deg, #1abc9c, #16a085);
  color: white;
  border-radius: 1rem;
  text-align: center;
  padding: 1.5rem;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.plan-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.plan-card h3 {
  font-size: 1.2rem;
  margin: 0;
  font-weight: bold;
  text-transform: uppercase;
}

.price {
  font-size: 1.5rem;
  margin: 0.8rem 0;
  font-weight: bold;
}

.features {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  font-size: 0.85rem;
  text-align: left;
}

.features li {
  margin: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.features li svg {
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
  fill: white;
}

.plan-footer {
  margin-top: 1rem;
}

.cta-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  color: #1abc9c;
  background: white;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
  background-color: #16a085;
  color: white;
  border: 2px solid white;
  transform: scale(1.05);
}

function showPlans() {
  const plans = document.getElementById("plans");
  plans.classList.add("active");
}

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="container">
  <h1 id='explore-our-features'  id="boomdevs_136" class="heading" >Explore Our Features</h1>
  <div class="card">
      <img decoding="async" src="https://images.nightcafe.studio/jobs/wV16ncM0HIS5yjb4z5rZ/wV16ncM0HIS5yjb4z5rZ--0--cffn8.jpg?tr=w-1600,c-at_max" alt="Feature 1">
      <h3 id='ai-chatbot'  id="boomdevs_137" >AI Chatbot</h3>
      <p>Interact with our intelligent chatbot for instant solutions.</p>
      <button>Learn More</button>
  </div>
  <div class="card">
      <img decoding="async" src="https://images.nightcafe.studio/jobs/4Jq4OLjQvFh8steeFW4b/4Jq4OLjQvFh8steeFW4b--0--72vf4.jpg?tr=w-1600,c-at_max" alt="Feature 2">
      <h3 id='secure-payments'  id="boomdevs_138" >Secure Payments</h3>
      <p>Experience hassle-free and secure online transactions.</p>
      <button>Learn More</button>
  </div>
  <div class="card">
      <img decoding="async" src="https://images.nightcafe.studio/jobs/sVv2oR9uCGpuMxjUhr1I/sVv2oR9uCGpuMxjUhr1I--1--6gycc.jpg?tr=w-1600,c-at_max" alt="Feature 3">
      <h3 id='custom-dashboards'  id="boomdevs_139" >Custom Dashboards</h3>
      <p>Create tailored dashboards to track your progress easily.</p>
      <button>Learn More</button>
  </div>
  <div class="card">
      <img decoding="async" src="https://images.nightcafe.studio/ik-seo/jobs/osiGB1b5I81SESySfBaH/osiGB1b5I81SESySfBaH--1--m0k1g/create-a-powerful-and-visually-striking-image-showcasing-a-variety-of-premium-electronics-feature-a-.jpg?tr=w-1600,c-at_max" alt="Feature 4">
      <h3 id='api-integration'  id="boomdevs_140" >API Integration</h3>
      <p>Connect with various APIs to enhance your functionality.</p>
      <button>Learn More</button>
  </div>
  <div class="card">
      <img decoding="async" src="https://images.nightcafe.studio/jobs/scSEkF4Mqa7eGup6rv0y/scSEkF4Mqa7eGup6rv0y--1--0246j.jpg?tr=w-1600,c-at_max" alt="Feature 5">
      <h3 id='real-time-notifications'  id="boomdevs_141" >Real-time Notifications</h3>
      <p>Receive notifications in real-time when new updates are available.</p>
      <button>Learn More</button>
  </div>
</div>


body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: white;
  overflow-x: hidden;
}

/* Webkit Browsers (Chrome, Edge, Safari) */
body::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}

body::-webkit-scrollbar-track {
    background: #0f172a; /* Dark background for the track */
    border-radius: 1px; /* Rounded track corners */
}

body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #60a5fa, #2563eb); /* Gradient thumb color */
    border-radius: 10px; /* Rounded corners for the thumb */
    border: 3px solid #0f172a; /* Adds spacing and blends with the track */
}

body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8); /* Darker gradient on hover */
    border: 3px solid #1e293b; /* Subtle border on hover */
}

body::-webkit-scrollbar-thumb:active {
    background: #1d4ed8; /* Solid blue color when active (dragging) */
    border: 3px solid #1e293b; /* Active border */
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 3rem 1rem;
}

.heading {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #60a5fa;
}

.card {
  width: 90%;
  max-width: 15rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  text-align: center;
  padding: 1.5rem 1rem;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.card img {
  width: 100%;
  height: 8rem;
  object-fit: cover;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  transition: transform 0.5s ease;
}

.card img:hover {
  transform: scale(1.1) translateX(5px) rotate(10deg);
  cursor: pointer;
  animation: boxshadowchange 5s linear infinite;
}

@keyframes boxshadowchange {
  0% {
      box-shadow: 0 8px 15px rgba(255, 255, 255, 0.6);
  }
  25%{
      box-shadow: 0 0 15px rgba(21, 229, 215, 0.7);
  }
  50% {
      box-shadow: 0 0 15px rgba(54, 19, 255, 0.8);
  }
  75% {
      box-shadow: 0 0 15px rgba(251, 5, 5, 0.8);
  }
  100% {
      box-shadow: 0 8px 15px rgba(255, 255, 255, 0.6);
  }
  
}

.card h3 {
  font-size: 1.2rem;
  margin: 0.5rem 0;
  color: #60a5fa;
}

.card p {
  font-size: 0.9rem;
  color: #cbd5e1;
  margin: 0.5rem 0 1rem;
}

.card button {
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.card button:hover {
  background-color: #2563eb;
  transform: scale(1.05);
}

.card.visible {
  opacity: 1;
  transform: translateY(0);
}

const cards = document.querySelectorAll(".card");

function revealCards() {
    const triggerBottom = window.innerHeight * 0.9;

    cards.forEach((card) => {
        const cardTop = card.getBoundingClientRect().top;

        if (cardTop < triggerBottom) {
            card.classList.add("visible");
        }
    });
}

// Attach the scroll event listener
window.addEventListener("scroll", revealCards);

// Initial call to check for visible cards
revealCards();

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card-container">
  <div class="card">
      <!-- Front Side -->
      <div class="card-side front">
          <h3 id='explore-features'  id="boomdevs_144" >Explore Features</h3>
          <p>Discover the unique features of our platform.</p>
          <button>Learn More</button>
      </div>
      <!-- Back Side -->
      <div class="card-side back">
          <h3 id='get-started'  id="boomdevs_145" >Get Started</h3>
          <p>Join us today to unlock endless possibilities!</p>
          <button>Sign Up</button>
      </div>
  </div>
</div>


body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  font-family: "Poppins", sans-serif;
}

.card-container {
  width: 250px;
  height: 350px;
  perspective: 1000px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 0.8s ease-in-out;
  cursor: pointer;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-side {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
}

.card-side.front {
  background: linear-gradient(135deg, #60a5fa, #1d4ed8);
}

.card-side.back {
  background: linear-gradient(135deg, #34d399, #10b981);
  transform: rotateY(180deg);
}

.card-side h3 {
  font-size: 1.5rem;
  margin: 1rem 0;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.card-side p {
  font-size: 1rem;
  text-align: center;
  max-width: 80%;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.card-side button {
  padding: 0.7rem 1.5rem;
  background: white;
  color: #2563eb;
  border: none;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease, transform 0.3s ease;
}

.card-side button:hover {
  background: #2563eb;
  color: white;
  transform: scale(1.05);
}

<!-- No JS is required for this card -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="card">
    <!-- Base Layer -->
    <div class="card-layer layer-base">
        <h3 id='welcome-2'  id="boomdevs_148" >Welcome</h3>
        <p>Discover something new today.</p>
    </div>

    <!-- Sliding Layer -->
    <div class="card-layer layer-slide">
        <h3 id='join-us'  id="boomdevs_149" >Join Us</h3>
        <p>Get started on your journey with us now.</p>
        <button>Get Started</button>
    </div>
</div>


body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1e293b, #0f172a);
    font-family: "Poppins", sans-serif;
    overflow: hidden;
}

.card {
    position: relative;
    width: 300px;
    height: 400px;
    background: #1e293b;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.card-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    backface-visibility: hidden;
}

/* Base Layer */
.layer-base {
    background: linear-gradient(105deg, #121212, #eb7125, #080808);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    z-index: 1;
}

.layer-base h3 {
    font-size: 1.8rem;
    margin: 0.5rem 0;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.layer-base p {
    font-size: 1rem;
    margin: 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Sliding Layer */
.layer-slide {
    background: linear-gradient(135deg, #a834d3, #b91035);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateY(100%);
    color: white;
    z-index: 2;
}

.layer-slide h3 {
    font-size: 1.5rem;
    margin: 0.5rem 0;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.layer-slide p {
    font-size: 0.9rem;
    margin: 0.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Hover Effect */
.card:hover .layer-slide {
    transform: translateY(0%);
}

/* Button */
.card button {
    padding: 0.7rem 1.5rem;
    background: white;
    color: #2563eb;
    border: none;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, transform 0.3s ease;
}

.card button:hover {
    background: #000000;
    color: white;
    border: 2px solid white;
    transform: scale(1.05);
}

<!-- No JS is required for this card -->

Document

HTML Code Copied!

CSS Code Copied!

JS Code Copied!


<div class="carousel-container">
    <div class="carousel">
        <div class="carousel-card">
            <h3 id='plan-a'  id="boomdevs_152" >Plan A</h3>
            <p>$19.99/month</p>
        </div>
        <div class="carousel-card">
            <h3 id='plan-b'  id="boomdevs_153" >Plan B</h3>
            <p>$29.99/month</p>
        </div>
        <div class="carousel-card">
            <h3 id='plan-c'  id="boomdevs_154" >Plan C</h3>
            <p>$39.99/month</p>
        </div>
        <div class="carousel-card">
            <h3 id='plan-d'  id="boomdevs_155" >Plan D</h3>
            <p>$49.99/month</p>
        </div>
        <div class="carousel-card">
            <h3 id='plan-e'  id="boomdevs_156" >Plan E</h3>
            <p>$59.99/month</p>
        </div>
    </div>
</div>


body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, #1e293b, #0f172a);
    font-family: "Poppins", sans-serif;
    overflow: hidden;
}

.carousel-container {
    position: relative;
    width: 150px;
    height: 300px;
    perspective: 1000px;
}

.carousel {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotateCarousel 5s infinite linear;
}

.carousel-card {
    position: absolute;
    width: 150px;
    height: 200px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.carousel-card:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.carousel-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.carousel-card p {
    font-size: 0.9rem;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Card Styles */
.carousel-card:nth-child(1) {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    border: 2px solid #e11d48;
    box-shadow: 0 10px 20px rgba(244, 63, 94, 0.4);
}
.carousel-card:nth-child(2) {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: 2px solid #4f46e5;
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.4);
}
.carousel-card:nth-child(3) {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: 2px solid #16a34a;
    box-shadow: 0 10px 20px rgba(34, 197, 94, 0.4);
}
.carousel-card:nth-child(4) {
    background: linear-gradient(135deg, #facc15, #eab308);
    border: 2px solid #eab308;
    box-shadow: 0 10px 20px rgba(250, 204, 21, 0.4);
}
.carousel-card:nth-child(5) {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    border: 2px solid #0891b2;
    box-shadow: 0 10px 20px rgba(6, 182, 212, 0.4);
}

/* Card Positions */
.carousel-card:nth-child(1) { transform: rotateY(0deg) translateZ(150px); }
.carousel-card:nth-child(2) { transform: rotateY(72deg) translateZ(150px); }
.carousel-card:nth-child(3) { transform: rotateY(144deg) translateZ(150px); }
.carousel-card:nth-child(4) { transform: rotateY(216deg) translateZ(150px); }
.carousel-card:nth-child(5) { transform: rotateY(288deg) translateZ(150px); }

/* Animation */
@keyframes rotateCarousel {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

<!-- No JS is required for this card -->

51 CSS Cards

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code

Edit & Get Code