Card Designs

HTML

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

<div class="container">
  <div class="card">
    <img src="https://bimstudies.com/wp-content/uploads/2024/01/hcj.png" class="card__image">
    <p class="card__name">BimStudies.com</p>
    <div class="rating">
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="far fa-star"></i>
    </div>
    <div class="grid-container">

      <div class="grid-child-posts">
        100+ Projects
      </div>

      <div class="grid-child-followers">
        2000+ Likes
      </div>

    </div>
  
    <button class="btn draw-border">Visit Site</button>
    <button class="btn draw-border"><a style="text-decoration: none; color: #55d7dc;" href="https://play.google.com/store/apps/details?id=user.bimstudies.com">Download App</a></button>

  </div>
  <div class="card">
    <img src="https://bimstudies.com/wp-content/uploads/2024/01/Kivy_logo.png" class="card__image">
    <p class="card__name">BimStudies.com</p>
    <div class="rating">
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="far fa-star"></i>
    </div>
    <div class="grid-container">

      <div class="grid-child-posts">
        20+ Projects
      </div>

      <div class="grid-child-followers">
        1500+ Likes
      </div>

    </div>

    <button class="btn draw-border">Visit Site</button>
    <button class="btn draw-border"><a style="text-decoration: none; color: #55d7dc;" href="https://play.google.com/store/apps/details?id=user.bimstudies.com">Download App</a></button>
  </div>
  <div class="card">
    <img src="https://bimstudies.com/wp-content/uploads/2024/01/xml.jpg" class="card__image">
    <p class="card__name">BimStudies.com</p>
    <div class="rating">
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="fas fa-star"></i>
      <i class="far fa-star"></i>
    </div>
    <div class="grid-container">

      <div class="grid-child-posts">
        10+ Projects
      </div>

      <div class="grid-child-followers">
        100+ Likes
      </div>

    </div>
    
    <button class="btn draw-border">Visit Site</button>
    <button class="btn draw-border"><a style="text-decoration: none; color: #55d7dc;" href="https://play.google.com/store/apps/details?id=user.bimstudies.com">Download App</a></button>
  </div>
</div>

CSS


  @import url("https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@400;500&display=swap");

.container {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  grid-gap: 50px;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
  font-family: 'Baloo Paaji 2', cursive;
}

.card {
  background-color: #0a5d6a;
  height: 37rem;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: rgba(0, 0, 0, 0.7);
  color: white;
}

.card__name {
  margin-top: 15px;
  font-size: 1.5em;
}

.card__image {
  height: 160px;
  width: 160px;
  border-radius: 50%;
  border: 5px solid #272133;
  margin-top: 20px;
  box-shadow: 0 10px 50px rgb(25, 235, 225);
}


.draw-border {
  box-shadow: inset 0 0 0 4px #58cdd1;
  color: #58afd1;
  -webkit-transition: color 0.25s 0.0833333333s;
  transition: color 0.25s 0.0833333333s;
  position: relative;
}

.draw-border::before,
.draw-border::after {
  border: 0 solid transparent;
  box-sizing: border-box;
  content: '';
  pointer-events: none;
  position: absolute;
  width: 0rem;
  height: 0;
  bottom: 0;
  right: 0;
}

.draw-border::before {
  border-bottom-width: 4px;
  border-left-width: 4px;
}

.draw-border::after {
  border-top-width: 4px;
  border-right-width: 4px;
}

.draw-border:hover {
  color: #ffe593;
}

.draw-border:hover::before,
.draw-border:hover::after {
  border-color: #4a4eca;
  -webkit-transition: border-color 0s, width 0.25s, height 0.25s;
  transition: border-color 0s, width 0.25s, height 0.25s;
  width: 100%;
  height: 100%;
}

.draw-border:hover::before {
  -webkit-transition-delay: 0s, 0s, 0.25s;
  transition-delay: 0s, 0s, 0.25s;
}

.draw-border:hover::after {
  -webkit-transition-delay: 0s, 0.25s, 0s;
  transition-delay: 0s, 0.25s, 0s;
}

.btn {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1.5;
  font: 700 1.2rem 'Roboto Slab', sans-serif;
  padding: 0.75em 2em;
  letter-spacing: 0.05rem;
  margin: 1em;
  width: 13rem;
}

.btn:focus {
  outline: 2px dotted #55d7dc;
}


.rating i {
      font-size: 18px;
      color: #bca6c5;
      margin-bottom: 5px;
    }

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  font-size: 1.2em;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
    
</head>
<body>

    <div class="container">
        <div class="card">
            <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png" class="card__image">
            <p><span class="card__name">Your Name</span><br>
            <span class="email">yourname@gmail.com</span>
            </p>
            <div class="social-media">
                <i class="fab fa-facebook"></i>
                <i class="fab fa-twitter"></i>
                <i class="fab fa-instagram"></i>
                <i class="fab fa-youtube"></i>
            </div>
            <div class="btn-container">
                <button class="btn draw-border">Follow</button>
                <button class="btn draw-border">Message</button>
            </div>
        </div>
    </div>

</body>
</html>

CSS


        @import url("https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@400;500&display=swap");

        .container {
            display: grid;
            grid-gap: 50px;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
            font-family: 'Baloo Paaji 2', cursive;
        }

        .card {
            background-color: #34495E;
            height: 33rem;
            width: 25rem;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: rgba(0, 0, 0, 0.7);
            color: white;
        }

        .card__name {
            margin-top: 15px;
            font-size: 1.5em;
            margin-left: 16px;
        }

        .card__image {
            height: 160px;
            width: 160px;
            border-radius: 50%;
            border: 5px solid #272133;
            margin-top: 20px;
            box-shadow: 0 10px 50px rgb(25, 235, 225);
        }

        .draw-border {
            box-shadow: inset 0 0 0 4px #1395b5;
            color: #d7e6ec;
            transition: color 0.25s;
            position: relative;
        }

        .draw-border:hover {
            color: #7593d3;
        }

        .btn-container {
            margin-top: 50px;
            display: flex;
            gap: 10px;
        }

        .btn {
            background: none;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            line-height: 1.5;
            font: 700 1.2rem 'Roboto Slab', sans-serif;
            padding: 0.75em 2em;
            letter-spacing: 0.05rem;
            width: 9rem;
        }

        .social-media {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .social-media i {
            font-size: 25px;
            color: #fff;
            background-color: #6c4c78;
            padding: 8px;
            border-radius: 50%;
            margin-bottom: 5px;
        }

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
   
</head>
<body>

    <div class="container">
        <div class="invitation-card">
            <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png" class="card__image">
            <p><span class="card__name">You're Invited!</span><br>
            <span class="email">Join us for a special event</span>
            </p>
            <div class="event-info">
                <p><strong>From:</strong> January 1, 2025</p>
                <p><strong>To:</strong> January 3, 2025</p>
                <p><strong>Place:</strong> Elegant Venue</p>
                <p><strong>Time:</strong> 7:00 PM</p>
                <p><strong>Venue:</strong> 123 Main Street, Cityville</p>
            </div>
            <div class="social-media">
                <i class="fab fa-facebook"></i>
                <i class="fab fa-twitter"></i>
                <i class="fab fa-instagram"></i>
                <i class="fab fa-youtube"></i>
            </div>
            <div class="btn-container">
                <button class="btn draw-border">RSVP</button>
                <button class="btn draw-border">Details</button>
            </div>
        </div>
    </div>

</body>
</html>

CSS


        @import url("https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@400;500&display=swap");

        .container {
            display: grid;
            grid-gap: 50px;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
            font-family: 'Baloo Paaji 2', cursive;
        }

        .invitation-card {
            background-color: #3f8ddc;
            height: 33rem;
            width: 25rem;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .card__image {
            height: 160px;
            width: 160px;
            border-radius: 50%;
            margin-top: -150px;
        }

        .event-info {
            text-align: center;
            margin-top: 20px;
        }

        .event-info p {
            margin: 5px 0;
        }

        .draw-border {
            box-shadow: inset 0 0 0 4px #1395b5;
            color: #d7e6ec;
            transition: color 0.25s;
            position: relative;
        }

        .draw-border:hover {
            color: #7593d3;
        }

        .btn-container {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }

        .btn {
            background: #27ae60;
            color: white;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            line-height: 1.5;
            font: 700 1.2rem 'Roboto Slab', sans-serif;
            padding: 0.75em 2em;
            letter-spacing: 0.05rem;
            width: 9rem;
        }

        .social-media {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .social-media i {
            font-size: 25px;
            color: #fff;
            background-color: #6c4c78;
            padding: 8px;
            border-radius: 50%;
            margin-bottom: 5px;
        }

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
  
   <body>
      <div class="cards">
         <div class="services">
            <div class="content content-1">
               <div class="fab fa-facebook"></div>
               <h2>
                  Facebook
               </h2>
               <p>
                  Connect with us on Facebook for the latest updates and news.
               </p>
               <a href="#">Follow Us</a>
            </div>
            <div class="content content-2">
               <div class="fab fa-instagram"></div>
               <h2>
                  Instagram
               </h2>
               <p>
                  Explore our visual stories, posts and exciting moments on Instagram.
               </p>
               <a href="#">Follow Us</a>
            </div>
            <div class="content content-3">
               <div class="fab fa-youtube"></div>
               <h2>
                  Youtube
               </h2>
               <p>
                  Subscribe to our YouTube channel for exciting videos and content.
               </p>
               <a href="#">Subscribe</a>
            </div>
         </div>
      </div>
   </body>
</html>

CSS


    @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800|Poppins&display=swap');
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Montserrat', sans-serif;
    }

    .cards {
      max-width: 1100px;
      margin: 0 auto;
      text-align: center;
      padding: 30px;
    }

    .cards h2.header {
      font-size: 40px;
      margin: 0 0 30px 0;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .services {
      display: flex;
      align-items: center;
    }

    .content {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin: 20px;
  padding: 20px;
  border: 2px solid rgb(14, 177, 232);
  border-radius: 12px;
  transition: all .3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Add box shadow */
}


    .content .fab {
      font-size: 70px;
      margin: 16px 0;
    }

    .content > * {
      flex: 1 1 100%;
    }

    .content:hover {
      color: white;
    }

    .content:hover a {
      border-color: white;
      background: white;
    }

    .content-1:hover {
      border-color: #1DA1F2;
      background: #1DA1F2;
    }

    .content-1:hover a {
      color: #1DA1F2;
    }

    .content-2:hover {
      border-color: #E1306C;
      background: #E1306C;
    }

    .content-2:hover a {
      color: #E1306C;
    }

    .content-3:hover {
      border-color: #ff0000;
      background: #ff0000;
    }

    .content-3:hover a {
      color: #ff0000;
    }

    .content h2 {
      font-size: 30px;
      margin: 16px 0;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .content p {
      font-size: 17px;
      font-family: 'Poppins', sans-serif;
    }

    .content a {
      margin: 22px 0;
      background: black;
      color: white;
      text-decoration: none;
      text-transform: uppercase;
      border: 1px solid black;
      padding: 15px 0;
      border-radius: 25px;
      transition: .3s ease;
    }

    .content a:hover {
      border-radius: 4px;
    }

    @media (max-width: 900px) {
      .services {
        display: flex;
        flex-direction: column;
      }
    }

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>

<body>
    <div class="wrapper">
        <div class="box">
            <div class="content">
                <div class="image">
                    <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png" alt="">
                </div>
        
                <div class="info">
                    <div class="name">Chandan Jaiswal</div>
                    <div class="job">Mobile App Developer</div>
                    <div class="projects">Projects: XYZ App, ABC Project</div>
                    <div class="experience">Experience: 3 years</div>
                    <div class="address">Address: City, Country</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                </div>
            </div>
            <p>As a Mobile App Developer, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet vulputate nisi. Sed laoreet, nisi in posuere tincidunt, augue odio varius justo, vel auctor neque nisl id purus.</p>
        </div>
        <div class="box">
            <div class="content">
                <div class="image">
                    <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png" alt="">
                </div>
                <div class="info">
                    <div class="name">Dipesh Yadav</div>
                    <div class="job">Full Stack Developer</div>
                    <div class="projects">Projects: Web App, E-commerce Site</div>
                    <div class="experience">Experience: 5 years</div>
                    <div class="address">Address: City, Country</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                </div>
            </div>
            <p>Being a Full Stack Developer, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet vulputate nisi. Sed laoreet, nisi in posuere tincidunt, augue odio varius justo, vel auctor neque nisl id purus.</p>
        </div>
        <div class="box">
            <div class="content">
                <div class="image">
                    <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png" alt="">
                </div>
             
                <div class="info">
                    <div class="name">Rahul Mahato</div>
                    <div class="job">Web Developer</div>
                    <div class="projects">Projects: Portfolio Site, Blog Platform</div>
                    <div class="experience">Experience: 4 years</div>
                    <div class="address">Address: City, Country</div>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                </div>
            </div>
            <p>As a Web Developer, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet vulputate nisi. Sed laoreet, nisi in posuere tincidunt, augue odio varius justo, vel auctor neque nisl id purus.</p>
        </div>
    </div>
</body>
</html>

CSS


    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }
    html, body {
        display: grid;
        height: 100%;
        place-items: center;
    }
    ::selection {
        background: rgba(23,162,184,0.3);
    }
    .wrapper {
        max-width: 1200px;
        margin: auto;
        padding: 0 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    .wrapper .box {
        background: #0cc7ca;
        width: calc(33% - 10px);
        padding: 25px;
        border-radius: 3px;
        box-shadow: 0px 4px 8px rgba(20, 163, 137, 0.9);
    }
    .wrapper .box i.quote {
        font-size: 20px;
        color: #17a2b8;
    }
    .wrapper .box .content {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        padding-top: 10px;
    }
    .box .info .name {
        font-weight: 600;
        font-size: 17px;
        color: #f3f8f9; /* Added text color */
    }
    .box .info .job {
        font-size: 16px;
        font-weight: 500;
        color: #f3f8f9;
    }
    .box .info .projects,
    .box .info .experience,
    .box .info .address {
        font-size: 14px;
        color: #f3f8f9;
        margin-top: 5px;
    }
    .box .info .stars {
        margin-top: 2px;
    }
    .box .info .stars i {
        color: #8fab1b;
    }
    .box .content .image {
        height: 120px;
        width: 120px;
        background: #17a2b8;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 15px;
    }
    .content .image img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 10px;
    }
    .box:hover .content .image img {
        border-color: #fff;
    }

    @media (max-width: 1045px) {
        .wrapper .box {
            width: calc(50% - 10px);
            margin: 10px 0;
        }
    }
    @media (max-width: 702px) {
        .wrapper .box {
            width: 100%;
        }
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body>
    <div class="card">
        <h2 class="nname">कुमारी बैंक लिमिटेड</h2>
        <hr>
        <h2 class="ename">Kumari Bank Limited</h2>
        <p>
            <span class="valid">VALID ONLY IN NEPAL, BHUTAN & INDIA</span>
            <br>
            <span class="coat">सबैको लागि, सधैंको लागि</span>
            <br>
            <span class="account-number" style="font-size: 24px;"> XXXX-XXXX-XXXX-1234</span>
            <br>
            <span class="validity">Validity: 01/25 - 12/30</span>
        </p>
        <span class="user">BIMSTUDIES.COM</span>
        <span class="visa">VISA</span>
    </div>
</body>
</html>


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

        .card {
            width: 440px;
            height: 30vh;
            padding: 20px;
            background: linear-gradient(to top, #2ECC71, #2A8CEE);
            border-radius: 10px;
            color: #fff; 
            position: relative;
        }

        .card .nname {
            color: #fff;
            font-size: 20px;
            margin-top: -5px;
        }

        hr {
            margin-top: -8px;
            color: rgb(160, 236, 29);
        }

        .card .ename {
            color: #fff;
            font-size: 20px;
            margin-top: -5px;
        }

        .card p {
            position: relative;
        }

        .card p .valid {
            margin-top: -80px;
        }

        .coat {
            color: #201c1c;
            font-size: 12px;
            position: absolute;
            bottom: 80px;
            left: 15px;
        }

        .valid {
            color: #fff;
            font-size: 12px;
            position: absolute;
            top: 0;
            right: 0;
        }

        .user {
            color: black;
            font-size: 20px;
            position: absolute;
            bottom: 15px;
            left: 15px;
        }

        .visa {
            color: #fff;
            font-size: 40px;
            position: absolute;
            bottom: 15px;
            right: 15px;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
</head>
<body>
    <div class="visiting-card">
        <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png" alt="Profile Image" class="profile-image">
        <h2 class="name">John Doe</h2>
        <hr>
        <h2 class="designation">Web Developer</h2>
        <p>
            <span class="contact-info">Email: john.doe@example.com</span>
            <br>
            <span class="tagline">Connecting Ideas</span>
            <br>
            <span class="phone" style="font-size: 24px;"> Phone: (123) 456-7890</span>
            <br>
            <span class="address">123 Main Street, Cityville</span>
        </p>
        <span class="company">Knowledge Hub LLC.</span>
        <span class="logo">🌐</span>
    </div>
</body>
</html>


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

        .visiting-card {
            width: 440px;
            height: 30vh;
            padding: 20px;
            background: #178ccb;
            border-radius: 10px;
            color: #fff; 
            position: relative;
        }

        .visiting-card .name {
            color: #060e69;
            font-size: 20px;
            margin-top: -5px;
        }

        hr {
            margin-top: -8px;
            color: rgb(160, 236, 29);
        }

        .visiting-card .designation {
            color: #211d02;
            font-size: 20px;
            margin-top: -5px;
        }

        .visiting-card p {
            position: relative;
        }

        .visiting-card p .contact-info {
            margin-top: -80px;
        }

        .tagline {
            color: #201c1c;
            font-size: 12px;
            position: absolute;
            bottom: 80px;
            left: 15px;
        }

        .contact-info {
            color: #fff;
            font-size: 12px;
            position: absolute;
            top: 0;
            right: 0;
        }

        .company {
            color: black;
            font-size: 20px;
            position: absolute;
            bottom: 15px;
            left: 15px;
        }

        .logo {
            color: #fff;
            font-size: 40px;
            position: absolute;
            bottom: 15px;
            right: 15px;
        }

        .profile-image {
            width: 100px; /* Set the width as needed */
            height: 100px; /* Set the height as needed */
            border-radius: 50%;
            position: absolute;
            top:50px;
            right: 25px;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
    
</head>
<body>
    <div class="card">
        <div class="circular-image">
            <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png" alt="Profile Image">
        </div>
        <div class="user-info">
            <h2 class="name">John Doe</h2>
            <p class="job">Web Developer</p>
            <p class="address"><i class="fas fa-map-marker-alt"></i>123 Main Street, Cityville</p>
        </div>
        <div class="social-stats">
            <span><i class="fas fa-users"></i> 1000 Followers</span>
            <span><i class="fas fa-user-friends"></i> 500 Following</span>
            <span><i class="fas fa-file-alt"></i> 300 Posts</span>
            <span><i class="fas fa-video"></i> 50 Reels</span>
        </div>
        <div class="social-icons">
            <div class="social-icon"><i class="fab fa-facebook-f"></i></div>
            <div class="social-icon"><i class="fab fa-twitter"></i></div>
            <div class="social-icon"><i class="fab fa-instagram"></i></div>
            <div class="social-icon"><i class="fab fa-youtube"></i></div>
            <div class="social-icon"><i class="fab fa-linkedin-in"></i></div>
            <div class="social-icon"><i class="fab fa-pinterest"></i></div>
        </div>
        <div class="message-follow">
            <div class="message">Message</div>
            <div class="follow">Follow</div>
        </div>
    </div>
</body>
</html>


        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(to top, #22d6bb, #1563c9);
        }

        .card {
            width: 500px;
            height: 500px;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .circular-image {
            width: 100px;
            height: 100px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(179, 17, 182, 0.5);
        }

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

        .user-info {
            margin-top: 100px;
        }

        .name, .job, .address {
            color: #424a07;
            margin: 10px 0;
        }

        .social-stats {
            display: flex;
            justify-content: space-around;
            margin-top: 50px;
            font-size: 15px;
            color: #1439c0;
        }

        .social-stats i {
            margin-right: 5px;
        }

        .social-icons {
            display: flex;
            justify-content: space-around;
            margin-top: 50px;
        }

        .social-icon {
            box-shadow: 0 4px 8px rgba(117, 8, 119, 0.99);
            width: 40px;
            height: 40px;
            background-color: #218d95;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }

        .message-follow {
            display: flex;
            justify-content: space-around;
            margin-top: 90px;
        }

        .message, .follow {
            box-shadow: 0 4px 8px rgba(94, 122, 10, 0.99);
            background-color: #0b5271;
            color: #fff;
            padding: 10px 70px 10px 50px;
            border-radius: 12px;
            cursor: pointer;
            text-align: center;
        }


<a href="https://www.mythrillfiction.com/the-dark-rider" alt="Mythrill" target="_blank">
    <div class="card">
      <div class="wrapper">
        <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg" class="cover-image" />
      </div>
      <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-title.png" class="title" />
      <img src="https://ggayane.github.io/css-experiments/cards/dark_rider-character.webp" class="character" />
    </div>
  </a>
  
  <a href="https://www.mythrillfiction.com/force-mage" alt="Mythrill" target="_blank">
    <div class="card">
      <div class="wrapper">
        <img src="https://ggayane.github.io/css-experiments/cards/force_mage-cover.jpg" class="cover-image" />
      </div>
      <img src="https://ggayane.github.io/css-experiments/cards/force_mage-title.png" class="title" />
      <img src="https://ggayane.github.io/css-experiments/cards/force_mage-character.webp" class="character" />
    </div>
  </a>


    :root {
  --card-height: 300px;
  --card-width: calc(var(--card-height) / 1.5);
}
* {
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #191c29;
}
.card {
  width: var(--card-width);
  height: var(--card-height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 36px;
  perspective: 2500px;
  margin: 0 50px;
}

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

.wrapper {
  transition: all 0.5s;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.card:hover .wrapper {
  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}

.wrapper::before,
.wrapper::after {
  content: "";
  opacity: 0;
  width: 100%;
  height: 80px;
  transition: all 0.5s;
  position: absolute;
  left: 0;
}
.wrapper::before {
  top: 0;
  height: 100%;
  background-image: linear-gradient(
    to top,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}
.wrapper::after {
  bottom: 0;
  opacity: 1;
  background-image: linear-gradient(
    to bottom,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}

.card:hover .wrapper::before,
.wrapper::after {
  opacity: 1;
}

.card:hover .wrapper::after {
  height: 120px;
}
.title {
  width: 100%;
  transition: transform 0.5s;
}
.card:hover .title {
  transform: translate3d(0%, -50px, 100px);
}

.character {
  width: 100%;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
}

.card:hover .character {
  opacity: 1;
  transform: translate3d(0%, -30%, 100px);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
</head>
<body>

    <div class="card">
        <div class="image-box">
            <img src="https://i.pinimg.com/236x/3e/a9/47/3ea947c7c2ae57d763a9442fee8f1f2a.jpg" alt="Sample Image">
        </div>
        <div class="text-box">
            <h3>Your Name</h3>
            <p>This is some sample text inside the card. You can add more content here.</p>
        </div>
    </div>

</body>
</html>


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

        .card {
            width: 400px;
            height: 400px;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            perspective: 1000px;
            box-shadow: 0 0 20px rgba(203, 17, 17, 0.5);
            transition: transform 0.5s;
        }

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

        .image-box {
            width: 100%;
            height: 250px;
            overflow: hidden;
        }

        .image-box img {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }

        .text-box {
            padding: 20px;
            background-color: #0b6346; /* Set background color to white */
            transform: translateZ(30px);
        }


<article class="card">
    <img
      class="card__background"
      src="https://i.pinimg.com/originals/09/24/a7/0924a7ef295741e916c8f42512bbe5bd.jpg"
      width="1920"
      height="2193"
    />
    <div class="card__content | flow">
      <div class="card__content--container | flow">
        <h2 class="card__title">CIPHER</h2>
        <p class="card__description">
          Independent web developer 
        </p>
      </div>
      <button class="card__button">Read more</button>
    </div>
  </article>


    @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&display=swap");

:root {
  /* Colors */
  --brand-color: hsl(46, 100%, 50%);
  --black: hsl(0, 0%, 0%);
  --white: hsl(0, 0%, 100%);
  /* Fonts */
  --font-title: "Montserrat", sans-serif;
  --font-text: "Lato", sans-serif;
}

/* RESET */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h2,
p {
  margin: 0;
}

/* GLOBAL STYLES */
body {
  display: grid;
  place-items: center;
  height: 100vh;
}

h2 {
  font-size: 2.25rem;
  font-family: var(--font-title);
  color: var(--white);
  line-height: 1.1;
}

p {
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--white);
}

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

/* CARD COMPONENT */

.card {
  display: grid;
  place-items: center;
  width: 80vw;
  max-width: 21.875rem;
  height: 28.125rem;
  overflow: hidden;
  border-radius: 0.625rem;
  box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}

.card > * {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.card__background {
  object-fit: cover;
  max-width: 100%;
  height: 100%;
}

.card__content {
  --flow-space: 0.9375rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: flex-end;
  height: 55%;
  padding: 12% 1.25rem 1.875rem;
  background: linear-gradient(
    180deg,
    hsla(0, 0%, 0%, 0) 0%,
    hsla(0, 0%, 0%, 0.3) 10%,
    hsl(0, 0%, 0%) 100%
  );
}

.card__content--container {
  --flow-space: 1.25rem;
}

.card__title {
  position: relative;
  width: fit-content;
  width: -moz-fit-content; /* Prefijo necesario para Firefox  */
}

.card__title::after {
  content: "";
  position: absolute;
  height: 0.3125rem;
  width: calc(100% + 1.25rem);
  bottom: calc((1.25rem - 0.5rem) * -1);
  left: -1.25rem;
  background-color: var(--brand-color);
}

.card__button {
  padding: 0.75em 1.6em;
  width: fit-content;
  width: -moz-fit-content; /* Prefijo necesario para Firefox  */
  font-variant: small-caps;
  font-weight: bold;
  border-radius: 0.45em;
  border: none;
  background-color: var(--brand-color);
  font-family: var(--font-title);
  font-size: 1.125rem;
  color: var(--black);
}

.card__button:focus {
  outline: 2px solid black;
  outline-offset: -5px;
}

@media (any-hover: hover) and (any-pointer: fine) {
  .card__content {
    transform: translateY(62%);
    transition: transform 500ms ease-out;
    transition-delay: 500ms;
  }

  .card__title::after {
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 1000ms ease-in, transform 500ms ease-out;
    transition-delay: 500ms;
    transform-origin: right;
  }

  .card__background {
    transition: transform 500ms ease-in;
  }

  .card__content--container > :not(.card__title),
  .card__button {
    opacity: 0;
    transition: transform 500ms ease-out, opacity 500ms ease-out;
  }

  .card:hover,
  .card:focus-within {
    transform: scale(1.05);
    transition: transform 500ms ease-in;
  }

  .card:hover .card__content,
  .card:focus-within .card__content {
    transform: translateY(0);
    transition: transform 500ms ease-in;
  }

  .card:focus-within .card__content {
    transition-duration: 0ms;
  }

  .card:hover .card__background,
  .card:focus-within .card__background {
    transform: scale(1.3);
  }

  .card:hover .card__content--container > :not(.card__title),
  .card:hover .card__button,
  .card:focus-within .card__content--container > :not(.card__title),
  .card:focus-within .card__button {
    opacity: 1;
    transition: opacity 500ms ease-in;
    transition-delay: 1000ms;
  }

  .card:hover .card__title::after,
  .card:focus-within .card__title::after {
    opacity: 1;
    transform: scaleX(1);
    transform-origin: left;
    transition: opacity 500ms ease-in, transform 500ms ease-in;
    transition-delay: 500ms;
  }
}

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

<article class="profile">
    <div class="profile-image">
      <img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png" />
    </div>
    <h2 class="profile-username">Chandan Jaiswal</h2>
    <small class="profile-user-handle">@soon_chandra</small>
    <div class="profile-actions">
      <button class="btn btn--primary">Follow</button>
      <button class="btn btn--icon">
        <i class="fas fa-cloud-upload-alt"></i>
      </button>
      <button class="btn btn--icon">
        <i class="fas fa-ellipsis-v"></i>
      </button>
    </div>
    <div class="profile-links">
      <a href="#" class="link link--icon">
        <i class="fab fa-facebook"></i>
      </a>
      <a href="#" class="link link--icon">
        <i class="fab fa-instagram"></i>
      </a>
      <a href="#" class="link link--icon">
        <i class="fab fa-twitter"></i>
      </a>
    </div>
  </article>


    @import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  line-height: 1.5;
  min-height: 100vh;
  font-family: "Be Vietnam Pro", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #060606;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

.profile {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 3rem;
  width: 90%;
  max-width: 300px;
  background-color: #043a25;
  border-radius: 16px;
  position: relative;
  border: 3px solid transparent;
  background-clip: padding-box;
  text-align: center;
  color: #f1f3f3;
  background-image: linear-gradient(
    135deg,
    rgba(117, 46, 124, 0.35),
    rgba(115, 74, 88, 0.1) 15%,
    #1b2028 20%,
    #043a25 100%
  );
}

.profile:after {
  content: "";
  display: block;
  top: -3px;
  left: -3px;
  bottom: -3px;
  right: -3px;
  z-index: -1;
  position: absolute;
  border-radius: 16px;
  background-image: linear-gradient(
    135deg,
    #752e7c,
    #734a58 20%,
    #1149a3 30%,
    #b4cd0d 100%
  );
}

.profile-image {
  border-radius: 50%;
  overflow: hidden;
  width: 175px;
  height: 175px;
  position: relative;
}

.profile-image img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.profile-username {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1.5rem;
}

.profile-user-handle {
  color: #7d8396;
}

.profile-actions {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-actions > * {
  margin: 0 0.25rem;
}

.btn {
  border: 0;
  background-color: transparent;
  padding: 0;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: 0.15s ease;
}

.btn--primary {
  border-radius: 99em;
  background-color: #3772ff;
  background-image: linear-gradient(135deg, #5587ff, #3772ff);
  color: #fff;
  padding: 0 1.375em;
}

.btn--primary:hover,
.btn--primary:focus {
  background-size: 150%;
}

.btn--icon {
  height: 46px;
  width: 46px;
  border-radius: 50%;
  border: 3px solid #343945;
  color: #7d8396;
}

.btn--icon i {
  font-size: 1.25em;
}

.btn--icon:hover,
.btn--icon:focus {
  border-color: #7d8396;
}

.profile-links {
  margin-top: 3.5rem;
}

.link {
  text-decoration: none;
  color: #7d8396;
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}

.link i {
  font-size: 1.25em;
}

Card Designs

BimStudies.Com

Beginners Projects

Leave a Reply Cancel reply

Model Question for BIM 5th Semester 2024

Exam Schedule Published: BBA, BIM, BBM, BBA-F, BHM, BTTM, BPA and BMS 1st and 3rd Semester Regular Examination 2024

Microprocessor and Computer Architecture Model Question and Solution(IT-228)

Microprocessor and Computer Architecture Model Question and Solutions

Beginners Projects

How can we help?

Leave a Reply Cancel reply

Model Question for BIM 5th Semester 2024

Exam Schedule Published: BBA, BIM, BBM, BBA-F, BHM, BTTM, BPA and BMS 1st and 3rd Semester Regular Examination 2024

Microprocessor and Computer Architecture Model Question and Solution(IT-228)

Microprocessor and Computer Architecture Model Question and Solutions