CSS Card Design – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Thu, 31 Aug 2023 18:51:46 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Create A Simple Pricing Card in HTML and CSS https://www.codingnepalweb.com/create-simple-pricing-card-html-css/ https://www.codingnepalweb.com/create-simple-pricing-card-html-css/#respond Thu, 31 Aug 2023 17:08:32 +0000 https://www.codingnepalweb.com/?p=5722 Create A Simple Pricing Card in HTML and CSS

As a beginner in web development, it is essential to learn how to design and structure basic components. One of these components is a pricing card, commonly used on websites to display different subscription plans or pricing options.

In this blog post, I will provide a step-by-step guide on how to create a simple pricing card using HTML and CSS. This guide is tailored towards beginners, as it is easy to follow and understand. Throughout the post, you will learn about various HTML tags and CSS properties that will help you create a visually appealing pricing card.

To create this pricing card, we will use commonly used HTML elements like div, h2, h1, and button, as well as basic CSS properties. This project is beginner-friendly, so you should have no trouble following along.

Steps To Create Pricing Card in HTML and CSS

To create a pricing card using HTML and CSS, follow these simple steps:

  1. Create a folder. You can name this folder whatever you like, and then create the necessary files inside it.
  2. Create an index.html file. The file name must be index and its extension .html.
  3. Create a style.css file. The file name must be style and its extension .css.

To start, add the following HTML codes to your index.html file. This code includes essential HTML markup with different elements like h1, h2, div, p, etc. to create a pricing card.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Card HTML and CSS | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h2 class="title">Unlock Exclusive <br> Content</h2>
    <h3 class="price">$29<span>/month</span></h3>
    <p class="description">Gain exclusive access to our premium content library. Explore and enjoy high-quality videos on your preferred devices.</p>
    <b class="offer">Act fast! Offer ends on September 20, 2023.</b>
    <a class="subscribe-button" href="#">Subscribe Now</a>
    <div class="ribbon-wrap">
      <div class="ribbon">Special Offer!</div>
    </div>
  </div>
</body>
</html>

Next, add the following CSS codes to your style.css file to apply visual styling to the pricing card like color, font, border, background, etc. Once added, you can load the web page in your browser to view your newly styled pricing card.

/* Importing Google font -Open+Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    background: #fff6f6;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 460px;
    padding: 40px;
    background: #ffffff;
    text-align: center;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    position: relative;
}

.container .title {
    font-size: 2rem;
    color: #333;
}

.container .price {
    color: #FF6B6B;
    font-weight: 700;
    font-size: 2.2rem;
    margin: 15px 0;
}

.container span {
    font-size: 1.2rem;
}

.container .description {
    color: #3b3b3b;
    font-size: 1.1rem;
    margin: 20px 0 20px;
}

.container .offer {
    display: block;
    color: #555;
    font-size: 1rem;
    margin-top: 25px;
}

.subscribe-button {
    display: inline-block;
    padding: 15px 0;
    background-color: #FF6B6B;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-size: 1.2rem;
    margin-top: 40px;
    width: 100%;
    font-weight: 500;
    transition: 0.2s ease;
}

.subscribe-button:hover {
    background: #ff4d4d;
}

.ribbon-wrap {
    width: 150px;
    height: 150px;
    position: absolute;
    top: -10px;
    left: -10px;
    pointer-events: none;
}

.ribbon {
    width: 230px;
    font-size: 0.918rem;
    text-align: center;
    padding: 8px 0;
    background: #FF6B6B;
    color: #fff;
    position: absolute;
    transform: rotate(-45deg);
    right: -17px;
    top: 29%;
}

Conclusion and Final words

If you’re a beginner in web development, creating your own pricing card with HTML and CSS can be a great project to get started with. This blog post provides simple steps and codes to help you create an attractive pricing card.

To enhance your skills in HTML and CSS, you can try to recreate other cool CSS cards available on this website. In case you encounter any difficulties, feel free to download the source code files for this project for free by clicking the Download button. A zip file will be downloaded to your device.

 

]]> https://www.codingnepalweb.com/create-simple-pricing-card-html-css/feed/ 0 Responsive Card Slider in HTML & CSS https://www.codingnepalweb.com/card-slider-html-css/ https://www.codingnepalweb.com/card-slider-html-css/#respond Tue, 24 Jan 2023 21:11:21 +0000 https://www.codingnepalweb.com/?p=4121 Responsive Card Slider in HTML & CSS

Designing and building a card slider that adjusts to different screen sizes using HTML & CSS can be a valuable project for improving your coding abilities. Additionally, working on a responsive card slider project will provide you with a hands-on understanding of how to apply responsive design principles and techniques in real-world scenarios.

A card slider is a user interface element that allows users to scroll through a collection of items, such as images, text, or other content, in a visually appealing and interactive way. These items are usually arranged in the form of cards, which can be scrolled through horizontally or vertically.

In this blog post, you will learn how to design and build a card slider that adjusts to different screen sizes using HTML and CSS. The card slider will have a user interface similar to the one shown in the image, and it can be scrolled horizontally or vertically. We can also create Card Slider using Swiperjs as well, I hope that project will also be beneficial for you.

Video Tutorial of Card Slider in HTML & CSS

If you would like to create a Card Slider step by step, I would highly recommend you a video tutorial that is provided below. Alternatively, you could continue reading this written guide on the same topic.

Steps to Card Slider in HTML & CSS

We will create this Responsive Card Slider in two steps using HTML and CSS.

1. File Structure

In the initial step, we will create a new directory for our project. You can name it whatever you want, and inside this directory, create two files: index.html and style.css.These files will contain the necessary HTML and CSS code for the card slider.

2. Creating the Card Slider

In the second step, we will create the layout and style the card using HTML and CSS. In your index.html file, add the following HTML code to create the basic structure of the card slider.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Card Slider in HTML & CSS</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="container">
      <div class="card">
        <div class="image">
          <img src="images/img1.jpg" alt="" />
        </div>
        <h2>Someone Name</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elite.</p>
      </div>
      <div class="card">
        <div class="image">
         <img src="images/img2.jpg" alt="" />
        </div>
        <h2>Someone Name</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elite.</p>
      </div>
      <div class="card">
        <div class="image">
          <img src="images/img3.jpg" alt="" />
        </div>
        <h2>Someone Name</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elite.</p>
      </div>
      <div class="card">
        <div class="image">
          <img src="images/img4.jpg" alt="" />
        </div>
        <h2>Someone Name</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elite.</p>
      </div>
    </section>
  </body>
</html>

In your style.css file, add the following CSS code to style the card slider. If you want, you can change the font, size, color, and background of the notification by slightly modifying this code.

/* Import Google font - Poppins */
@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;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3f2fd;
}
::-webkit-scrollbar {
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 25px;
}
::-webkit-scrollbar-thumb {
  background: #6e93f7;
  border-radius: 25px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4070f4;
}
.container {
  display: flex;
  gap: 12px;
  max-width: 400px;
  width: 100%;
  background: #4070f4;
  border-radius: 12px;
  padding: 30px;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scroll-padding: 30px;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.container .card {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  border-radius: 12px;
  background: #fff;
  scroll-snap-align: start;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.card .image {
  height: 150px;
  width: 150px;
  padding: 4px;
  background: #4070f4;
  border-radius: 50%;
}
.image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
}
.card h2 {
  margin-top: 25px;
  color: #333;
  font-size: 22px;
  font-weight: 600;
}
.card p {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

Conclusion and Final Words

By following the steps in this blog post, you’ve learned how to create Responsive Card Slider in HTML and CSS.

If you encounter any problems or your code is not working as expected, you can download the source code files of this Card Slider by clicking on the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.

 

]]> https://www.codingnepalweb.com/card-slider-html-css/feed/ 0 Create Profile Card in HTML & CSS | With Source Code https://www.codingnepalweb.com/create-profile-card-html-css/ https://www.codingnepalweb.com/create-profile-card-html-css/#respond Wed, 09 Nov 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4148 Create Profile Card in HTML & CSS | With Source Code

If you are looking for CSS Profile Card Designs, you are in the right post. In this blog, you will learn how to create a user profile card in HTML & CSS. Earlier, I shared with you tutorials on many other types of Web elements such as Simple Website, Card Slider, etc.

Profile cards provide quick access to key Personal Profile information. It could contain detail like a person’s name, email, social media link for that person, and other important details. Simply we can understand profile means the flat, thick piece of paper, used to prove the identification of a particular person.

I used HTML & CSS for this Profile Card. If you are familiar with the basics of HTML & CSS you can easily create this Profile Card. This type of design is far more attractive and beautiful than the regular design.

Below I have given a demo to know what this Profile Card looks like and all the code that I have used to create this Profile Card. you can watch the video tutorial. After watching the given video tutorial you will also know how HTML and CSS codes are working behind this profile card.

Video Tutorial of User Profile Card UI Design in HTML & CSS

 

Hopefully, from this simple tutorial above you learned how to create this  Profile Card. You would be wondering to get all the HTML & CSS code that I have used to create this profile card. Don’t worry I have provided all the source code files below.

Before getting into the source code file. I would like to explain given video tutorial of our project. As you have seen in the video tutorial on Profile Cards in HTML & CSS. There was an image with beautiful background color, some information about the user, and two buttons. To create this profile card I used only HTML and CSS.

I suggest you watch the full video and try to understand the codes, methods, and logic of it properly. If you are a beginner and have some basic knowledge of HTML & CSS then you can also create this type of  Profile Card easily.

And that’s how I designed and built a profile card, without having to hire a designer.I hope you found this post helpful!

You Might Like This :

Profile Card UI Design [Source Code]

To create a Profile Card Design, follow the given steps line by line:

  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Profile Card by clicking on the given download button

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Profle Card UI Design | CoderGirl </title>
  <!---Custom Css File!--->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="main">
  <div class="profile-card">
    <div class="image">
      <!--<img src="images/profile.jpg" alt="" class="profile-pic">-->
    </div>
    <div class="data">
      <h2>Olivia Gomez</h2>
      <span>Developer & Designer</span>
    </div>
    <div class="row">
      <div class="info">
        <h3>Following</h3>
        <span>120</span>
      </div>
      <div class="info">
        <h3>Followers</h3>
        <span>5000</span>
      </div>
      <div class="info">
        <h3>Posts</h3>
        <span>209</span>
      </div>
    </div>
    <div class="buttons">
      <a href="#" class="btn">Message</a>
      <a href="#" class="btn">Follow Me</a>
    </div>
  </div>
</section>
</body>
</html>

 
.

Second, paste the following codes into your style.css file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.main{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(images/back.jpg);
  background-position: center;
  background-size: cover;
}
.profile-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 400px;
  width: 100%;
  border-radius: 25px;
  padding: 30px;
  border: 1px solid #ffffff40;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.image{
  position: relative;
  height: 150px;
  width: 150px;
}
.image .profile-pic{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.data{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 15px;
}
.data h2{
  font-size: 33px;
  font-weight: 600;
}
span{
  font-size: 18px;
}
.row{
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.row .info{
  text-align: center;
  padding: 0 20px;
}
.buttons{
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.buttons .btn{
  color: #fff;
  text-decoration: none;
  margin: 0 20px;
  padding: 8px 25px;
  border-radius: 25px;
  font-size: 18px;
  white-space: nowrap;
  background: linear-gradient(to left, #33ccff 0%, #ff99cc 100%);
}
.buttons .btn:hover{
  box-shadow: inset 0 5px 20px rgba(0,0,0,0.4);
}

That’s all, now you’ve successfully created a project on Profile Card . If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

 

]]> https://www.codingnepalweb.com/create-profile-card-html-css/feed/ 0 Animated Pricing Card Design using HTML & CSS https://www.codingnepalweb.com/pricing-card-with-sliding-animation-css/ https://www.codingnepalweb.com/pricing-card-with-sliding-animation-css/#comments Mon, 17 May 2021 10:27:35 +0000 https://codingnepalweb.com/?p=1402 Animated Pricing Card Design using HTML & CSS

Hey friends, today in this blog you’ll learn how to create a Pricing Card with Sliding Animation using only HTML & CSS. In the earlier blog, I have shared how to create a Profile Card using HTML & CSS and now it’s time to create a Pricing Card.

A pricing card is a design element on a commercial website to display the various pricing plans, subscriptions, or price comparisons.

In our design [Pure CSS Pricing Card], there is a single card as you can see in the preview image above. In this card, there is a total of 3 packages, and you can view each package with the help of a slider tab which is placed to the top. When you click on the particular tab, the particular package will appear with a sliding animation, making this card pretty cool.

If you are confusing about how this card slide to show it other packages or how it is created using only HTML & CSS then you can watch a video tutorial of this Pricing Card with Sliding Animation.

Video Tutorial of Animated Pricing Card UI Design

 
In the video, you have seen how this card looks like, its animation, and how it is created using HTML & CSS only. As I already told you, this is a pure CSS card and its animation is also done by using only HTML & CSS. To make the tab clickable and slide card accordingly, I used HTML <input> type radio and <label> tag. Using the for attribute of the label tag, I controlled the input.

If you’re confused or you’re a beginner and difficult to understand how this slide actually possible using these tags then simply know when you put the id of the input tag inside the for the attribute of the label tag then you can control the input tag from the label tag that’s it. Just try by self two-three times you’ll definitely understand.

You might like this:

Animated Pricing Card Design [Source Codes]

To create this program [CSS Pricing Card Design]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this Pricing Card from the given download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure CSS Pricing Cards | CodingNepal</title>
  <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">
    <input type="radio" name="slider" id="tab-1">
    <input type="radio" name="slider" id="tab-2" checked>
    <input type="radio" name="slider" id="tab-3">
    <header>
      <label for="tab-1" class="tab-1">Basic</label>
      <label for="tab-2" class="tab-2">Standard</label>
      <label for="tab-3" class="tab-3">Team</label>
      <div class="slider"></div>
    </header>
    <div class="card-area">
      <div class="cards">
        <div class="row row-1">
          <div class="price-details">
            <span class="price">19</span>
            <p>For beginner use</p>
          </div>
          <ul class="features">
            <li><i class="fas fa-check"></i><span>100 GB Premium Bandwidth</span></li>
            <li><i class="fas fa-check"></i><span>FREE 50+ Installation Scripts WordPress Supported</span></li>
            <li><i class="fas fa-check"></i><span>One FREE Domain Registration .com and .np extensions only</span></li>
            <li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li>
          </ul>
        </div>
        <div class="row">
          <div class="price-details">
            <span class="price">99</span>
            <p>For professional use</p>
          </div>
          <ul class="features">
            <li><i class="fas fa-check"></i><span>Unlimited GB Premium Bandwidth</span></li>
            <li><i class="fas fa-check"></i><span>FREE 200+ Installation Scripts WordPress Supported</span></li>
            <li><i class="fas fa-check"></i><span>Five FREE Domain Registration .com and .np extensions only</span></li>
            <li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li>
          </ul>
        </div>
        <div class="row">
          <div class="price-details">
            <span class="price">49</span>
            <p>For team collaboration</p>
          </div>
          <ul class="features">
            <li><i class="fas fa-check"></i><span>200 GB Premium Bandwidth</span></li>
            <li><i class="fas fa-check"></i><span>FREE 100+ Installation Scripts WordPress Supported</span></li>
            <li><i class="fas fa-check"></i><span>Two FREE Domain Registration .com and .np extensions only</span></li>
            <li><i class="fas fa-check"></i><span>Unlimited Email Accounts & Databases</span></li>
          </ul>
        </div>
      </div>
    </div>
    <button>Choose plan</button>
  </div>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(#D5A3FF 0%, #77A5F8 100%);
}
.wrapper{
  width: 400px;
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 10px 10px 15px rgba(0,0,0,0.05);
}
.wrapper header{
  height: 55px;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 30px;
  position: relative;
}
header label{
  height: 100%;
  z-index: 2;
  width: 30%;
  display: flex;
  cursor: pointer;
  font-size: 18px;
  position: relative;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}
#tab-1:checked ~ header .tab-1,
#tab-2:checked ~ header .tab-2,
#tab-3:checked ~ header .tab-3{
  color: #fff;
}
header label:nth-child(2){
  width: 40%;
}
header .slider{
  position: absolute;
  height: 85%;
  border-radius: inherit;
  background: linear-gradient(145deg, #D5A3FF 0%, #77A5F8 100%);
  transition: all 0.3s ease;
}
#tab-1:checked ~ header .slider{
  left: 0%;
  width: 90px;
  transform: translateX(5%);
}
#tab-2:checked ~ header .slider{
  left: 50%;
  width: 120px;
  transform: translateX(-50%);
}
#tab-3:checked ~ header .slider{
  left: 100%;
  width: 95px;
  transform: translateX(-105%);
}
.wrapper input[type="radio"]{
  display: none;
}
.card-area{
  overflow: hidden;
}
.card-area .cards{
  display: flex;
  width: 300%;
}
.cards .row{
  width: 33.4%;
}
.cards .row-1{
  transition: all 0.3s ease;
}
#tab-1:checked ~ .card-area .cards .row-1{
   margin-left: 0%;
}
#tab-2:checked ~ .card-area .cards .row-1{
  margin-left: -33.4%;
}
#tab-3:checked ~ .card-area .cards .row-1{
   margin-left: -66.8%;
}
.row .price-details{
  margin: 20px 0;
  text-align: center;
  padding-bottom: 25px;
  border-bottom: 1px solid #e6e6e6;
}
.price-details .price{
  font-size: 65px;
  font-weight: 600;
  position: relative;
  font-family: 'Noto Sans', sans-serif;
}
.price-details .price::before,
.price-details .price::after{
  position: absolute;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
}
.price-details .price::before{
  content: "$";
  left: -13px;
  top: 17px;
  font-size: 20px;
}
.price-details .price::after{
  content: "/mon";
  right: -33px;
  bottom: 17px;
  font-size: 13px;
}
.price-details p{
  font-size: 18px;
  margin-top: 5px;
}
.row .features li{
  display: flex;
  font-size: 15px;
  list-style: none;
  margin-bottom: 10px;
  align-items: center;
}
.features li i{
  background: linear-gradient(#D5A3FF 0%, #77A5F8 100%);
  background-clip: text;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
.features li span{
  margin-left: 10px;
}
.wrapper button{
  width: 100%;
  border-radius: 25px;
  border: none;
  outline: none;
  height: 50px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  margin-top: 20px;
  background: linear-gradient(145deg, #D5A3FF 0%, #77A5F8 100%);
  transition: transform 0.3s ease;
}
.wrapper button:hover{
  transform: scale(0.98);
}

That’s all, now you’ve successfully created a Pure CSS Pricing Card Design. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

]]> https://www.codingnepalweb.com/pricing-card-with-sliding-animation-css/feed/ 4 Responsive CSS Card Design with Hover Animation in HTML & CSS https://www.codingnepalweb.com/responsive-css-cards-design/ https://www.codingnepalweb.com/responsive-css-cards-design/#comments Tue, 05 May 2020 09:56:00 +0000 https://codingnepalweb.com/2020/05/05/responsive-css-cards-design-with-hover-animation-in-html-css/

Responsive CSS Cards Design with Hover Animation in HTML and CSSHello readers, Today in this blog you’ll learn how to create a Responsive CSS Card with Hover Animation in HTML and CSS only. Previously I have shared an Animated Login Form with Glowing Inputs Login Form, now it’s time to create Responsive Cards using only HTML & CSS.

A card is a small rectangular module with images and text. To balance the usability of the interface, the card UI design is a default choice. Because cards are easy to use, they can also display content that contains different details.

As you can see in the image these are Profile Cards which is based in only HTML & CSS. At first, these cards in the initial stage where contents of the cards are hidden and only images are shown but when you hover on the specific card the contents of the card smoothly slide down and show.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Responsive CSS Card Design with Hover Animation).

Video Tutorial of Responsive Profile CSS Card Design

 
I believe this will help beginners to understand the code of creating the card. If you have basic knowledge of HTML & CSS then you can use these cards in your website and projects after change some lines of codes.

If you like this program (Responsive CSS Cards Design with Hover Animation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

You might like this:

Responsive CSS Card with Hover Animation [Source Codes] 

To create this program (Responsive CSS Card Design with Hover Animation). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Profile UI Card Design | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
      <div class="container">
         <div class="card">
            <div class="img">
               <img src="#">
            </div>
            <div class="top-text">
               <div class="name">
                  Annie Lea
               </div>
               <p>
                  Apps Developer
               </p>
            </div>
            <div class="bottom-text">
               <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
               </div>
               <div class="btn">
                  <a href="#">Read more</a>
               </div>
            </div>
         </div>
         <div class="card">
            <div class="img">
               <img src="#">
            </div>
            <div class="top-text">
               <div class="name">
                  Eliana Maia
               </div>
               <p>
                  Website Developer
               </p>
            </div>
            <div class="bottom-text">
               <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
               </div>
               <div class="btn">
                  <a href="#">Read more</a>
               </div>
            </div>
         </div>
         <div class="card">
            <div class="img">
               <img src="#">
            </div>
            <div class="top-text">
               <div class="name">
                  Harley Briana
               </div>
               <p>
                  Graphic Developer
               </p>
            </div>
            <div class="bottom-text">
               <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
               </div>
               <div class="btn">
                  <a href="#">Read more</a>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  height: 100%;
  display: grid;
  place-items: center;
  background: #f2f2f2;
  text-align: center;
}
.container{
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card{
  height: 280px;
  max-width: 350px;
  margin: 0 20px;
  background: white;
  transition: 0.4s;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.card:hover{
  height: 470px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
.card .img{
  height: 200px;
  width: 100%;
}
.card .img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.card .top-text{
  padding: 5px;
}
.card .top-text .name{
  font-size: 25px;
  font-weight: 600;
  color: #202020;
}
.card .top-text p{
  font-size: 20px;
  font-weight: 600;
  color: #e74c3c;
  line-height: 20px;
}
.card .bottom-text{
  padding: 0 20px 10px 20px;
  margin-top: 5px;
  background: white;
  opacity: 0;
  visibility: hidden;
  transition: 0.1s;
}
.card:hover .bottom-text{
  opacity: 1;
  visibility: visible;
}
.card .bottom-text .text{
  text-align: justify;
}
.card .bottom-text .btn{
  margin: 10px 0;
  text-align: left;
}
.card .bottom-text .btn a{
  text-decoration: none;
  background: #e74c3c;
  color: #f2f2f2;
  padding: 5px 8px;
  border-radius: 3px;
  display: inline-flex;
  transition: 0.2s;
}
.card .bottom-text .btn a:hover{
  transform: scale(0.9);
}
@media screen and (max-width: 978px) {
  .container{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .card{
    max-width: 700px;
    margin: 20px 0;
  }
}

That’s all, now you’ve successfully created a Responsive CSS Cards Design with Hover Animation in HTML & CSS. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

]]> https://www.codingnepalweb.com/responsive-css-cards-design/feed/ 8