Profile Card – CodingNepal

Create A Simple Pricing Card in HTML and CSS

CodingNepal — Thu, 31 Aug 2023 17:08:32 +0000

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:

Create a folder. You can name this folder whatever you like, and then create the necessary files inside it.
Create an index.html file. The file name must be index and its extension .html.
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.





  
  
  Pricing Card HTML and CSS | CodingNepal
  


  
    Unlock Exclusive 
 Content
    $29/month
    Gain exclusive access to our premium content library. Explore and enjoy high-quality videos on your preferred devices.
    Act fast! Offer ends on September 20, 2023.
    Subscribe Now
    
      Special Offer!

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.

Create Profile Card in HTML & CSS | With Source Code

CodingNepal — Wed, 09 Nov 2022 21:11:20 +0000

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!

Profile Card UI Design [Source Code]

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

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
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.





  
  
  
   Profle Card UI Design | CoderGirl 
  
  


  
  
    
      
    
    
      Olivia Gomez
      Developer & Designer
    
    
      
        Following
        120
      
      
        Followers
        5000
      
      
        Posts
        209
      
    
    
      Message
      Follow Me
    
  




 
.

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.

How to Create Profile Card in HTML & CSS

CodingNepal — Fri, 30 Sep 2022 21:11:20 +0000

Hey dude, I believe you are doing well. As usual, today you will learn to Create A Profile Card UI Design using only HTML and CSS. I have already created many Card Designs I hope you have watched them. Today’s profile card will be simple and valuable.

Profile cards are card design that contains important details of a specific person in a brief way. It could contain details like a person’s name, email, social media links for that person, and other important details. We can find this type of profile card on websites like portfolio websites and other types of websites

Have a quick look at the given image of our Profile Card Design. As you can see on the image there are lots of details I have added like profile image, name, social media link buttons, subscribe and message button, and the numbers of likes, comments, and shares.

You can watch the demo of this Profile Card UI Design from the video that I have provided below. Also, you can get all the ideas of HTML and CSS code that I have used to create this beautiful profile card design.

How to Create Profile Card in HTML & CSS | Video Tutorial

I have provided all the HTML and CSS code that I have used to create this Profile Card UI Design. Before getting into the source code file. I would like to explain the given video tutorial on the profile card briefly.

As you have seen in the video tutorial on the Profile Card UI Design. There was an image with a beautiful border, some buttons,s and social media links. To create this profile card I used only HTML and CSS. As you have seen I have created this profile card from scratch.

I hope, now you can make this profile card using HTML and CSS. If you are feeling difficulty creating this profile card, I have provided all the source codes below, from there you can copy or download all the source code files of this beautiful profile card.

Profile Card UI Design [Source Code]

To get the following HTML and CSS code for the Profile Card. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.




  
    
    
    
    

    
    

    
    
  
  
    
      
        
      

      
        CodingLab
        YouTuber & Blogger
      

      
        
          
        
        
          
        
        
          
        
        
          
        
      

      
        
        
      

      
        
          
          60k
        
        
          
          20k
        
        
          
          12k

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f4f4;
}
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 370px;
  width: 100%;
  background: #fff;
  border-radius: 24px;
  padding: 25px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}
.profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 36%;
  width: 100%;
  border-radius: 24px 24px 0 0;
  background-color: #4070f4;
}
.image {
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color: #4070f4;
  padding: 3px;
  margin-bottom: 10px;
}
.image .profile-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
}
.profile-card .text-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333;
}
.text-data .name {
  font-size: 22px;
  font-weight: 500;
}
.text-data .job {
  font-size: 15px;
  font-weight: 400;
}
.profile-card .media-buttons {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
.media-buttons .link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  margin: 0 8px;
  background-color: #4070f4;
  text-decoration: none;
}
.profile-card .buttons {
  display: flex;
  align-items: center;
  margin-top: 25px;
}
.buttons .button {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  border: none;
  border-radius: 24px;
  margin: 0 10px;
  padding: 8px 24px;
  background-color: #4070f4;
  cursor: pointer;
  transition: all 0.3s ease;
}
.buttons .button:hover {
  background-color: #0e4bf1;
}
.profile-card .analytics {
  display: flex;
  align-items: center;
  margin-top: 25px;
}
.analytics .data {
  display: flex;
  align-items: center;
  color: #333;
  padding: 0 20px;
  border-right: 2px solid #e7e7e7;
}
.data i {
  font-size: 18px;
  margin-right: 6px;
}
.data:last-child {
  border-right: none;
}

Day Night Mode using only HTML & CSS

CodingNepal — Wed, 27 Jan 2021 21:09:31 +0000

Hello readers, today in this blog I will create a Day-Night Mode On Card using only HTML & CSS. Earlier I have shared a How to Custom Radio Button using HTML & CSS now this I will build day-night mode.

In simple language, day mode means bright color like white color and night means dark color like black color. The main motive of day-night mode is to make user eyes healthier while they are using mobile or computer.

As you can see on the given image which is given on the webpage. This is the real image that I’m going to build in this program [Day Night Mode on Card], the left part of the image is “Day Mode” and the right part is the “Night Mode”. Basically, at first, there is only one profile card in day mode condition, when we clicked the toggle this image transform into night mode. As you can see that toggle is placed on the top right side of the image.

If you want to see the real concept of this program [CSS Day Night Mode], I have provided a full video tutorial below. You will get all the concepts of this program after watching the video.

Full Video Tutorial of Day Night Mode using only HTML & CSS

As you have seen on the video tutorial of this program [Custom Checkbox Day Night Mode Toggle], In first there is only one card on the screen with one beautiful image and her name, a job some other details, and one button on the left side. On the button side, there are some social media icons with hover animation.

The main part of this program’s toggle button is placed on the top left side of this profile card. When I clicked on that toggle button its changed into day to night mode, To make this program [Day Night Mode], I have used the HTML checkbox only and for all the animation I have used CSS.

For those Friends who are feeling difficulty creating this program [Day Night Mode with HTML & CSS], I have provided the full source code below.

Day-Night Mode [Source Code]

To copy-paste the given code, you need to file on is HTML file and another is a CSS file. After creating these two files you can copy-paste all the code which are given below. You can also download all source code from the given “Download Button”.




  
    
    Day Night Toggle | CodingLab 
    
    
     
   

 
   
  
    
      
        
          
        
      
      
       
      
      
        Amelia Fern
        Full Stack Developer
        
          Lorem dolor sit amet, consectetur adipisicing elit. Ab officiis, harum minus aliquam atque aliquid enim commodi accusantium ut maiores dolorum nulla?

@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;
}
.outer{
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f2f2f2;
}
#switch:checked ~ .outer{
  background: #092c3e;
}
.content{
  display: flex;
  width: 570px;
  padding: 15px;
  background: #fff;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
#switch:checked ~ .outer .content{
  background: #092c3e;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.outer .toggle{
  position: absolute;
  width: 40px;
  height: 20px;
  border-radius: 20px;
  background: #092c3e;
  right: 15px;
  top: 13px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#switch:checked ~ .outer .toggle{
  background: #fff;
}
.outer .toggle .circle{
  margin-left: 3px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fff;
  transition: all 0.3s ease;
}
#switch:checked ~ .outer .circle{
  margin-left: 22px;
  background: #092c3e;
}
.image-box {
  height: 232px;
  width: 200px;
  border-radius: 12px;
  padding: 3px;
  background: #092c3e;
}
.image-box img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 12px;
}
#switch:checked ~ .outer .image-box{
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
#switch:checked ~ .outer .image-box img{
  border-color: transparent;
}
.content .details{
  width: 58%;
  margin: 10px 0 20px 20px;
  color: #092c3e;
}
#switch:checked ~ .outer .details{
  transition: 0.1s;
  color: #fff;
}
.content .details .name{
  font-size: 23px;
  font-weight: 600;
}
.content .details .job{
  font-size: 18px;
  font-weight: 500;
}
.content .details p{
 font-size: 15px;
 margin-top: 6px;
}
.content button{
  display: block;
  margin-top: 16px;
  outline: none;
  border: none;
  font-size: 17px;
  padding: 6px 14px;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  background: #092c3e;
  transition: all 0.3s ease;
}
.content button:hover{
  transform: scale(0.97);
}
#switch:checked ~ .outer button{
  background: #fff;
  color: #092c3e;
}
.media-icons{
  position: absolute;
  bottom: 16px;
  right: 15px;
  margin-top: 12px;
  justify-content: flex-end;
}
.media-icons i{
  display: inline-flex;
  margin: 0 4px;
  font-size: 16px;
  color: #092c3e;
  opacity: 0.7;
  cursor: pointer;
}
.media-icons i:hover{
  opacity: 1;
}
#switch:checked ~ .outer i{
  color: #fff;
  opacity: 1;
}
#switch{
  display: none;
}

If you face any difficulties while creating your Profile Card with Day Night Mode or your code is not working as expected, you can download the source code files for this Profile Car with Dark Light Mode for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Neumorphism Profile Card UI Design using only HTML & CSS

CodingNepal — Mon, 09 Nov 2020 10:29:00 +0000

Hello readers, Today in this blog you’ll learn how to create Neumorphism Profile Card UI Design using only HTML & CSS. Earlier I have shared many blogs on Neumorphism or Neomorphic Effects and now I’m going to create a Profile Card with Neumorphism Effect.

A profile card is a card that carries saved profile content. Profile Cards let you select profile values consistently over all items on your website. Neumorphism, or soft UI, is a visible style that mixes background colors, shapes, gradients, highlights, and shadows.

In this program [Neumorphism Profile Card UI Design], there is a profile card with a neomorphic effect. This card contains a profile image, social media buttons, and some social media info. When you hover on particular social media buttons, there is shown a neomorphic effect.

This card is fully based on HTML & CSS. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Neumorphism Profile Card UI Design].

Video Tutorial of Neumorphism Profile Card UI Design

In the video, you have seen the Neumorphism Profile Card UI Design with Neomorphic Effect on Hover. I hope you have understood the codes behind creating this card. This is a pure CSS program that means only HTML & CSS are used to create this card and the neomorphic effect. So if you are a beginner then you can also create this type of profile card.

If you like this card and want to get source codes of this program then you easily copy the codes of this program as well as download them from the below link. You can freely use this card on your websites, projects, and HTML pages.

Neumorphism Profile Card UI Design [Source Codes]

To create this program (Neumorphism Profile Card). 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. 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.





    
    Neumorphism Profile Card | CodingNepal
    
    


  
    
      
        
      
    
    
    
    CodingNepal
    Designer & Developer
    
      
      
      
      
    
    
      
      
    
    
      
        
        
        20.4k
      
      
        
        
        14.3k
      
      
        
        12.8k

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=Poppins:wght@200;300;400;500;600;700&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: #ecf0f3;
}
.wrapper,
.wrapper .img-area,
.social-icons a,
.buttons button{
  background: #ecf0f3;
  box-shadow: -3px -3px 7px #ffffff,
               3px 3px 5px #ceced1;
}
.wrapper{
  position: relative;
  width: 350px;
  padding: 30px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.wrapper .icon{
  font-size: 17px;
  color: #31344b;
  position: absolute;
  cursor: pointer;
  opacity: 0.7;
  top: 15px;
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  font-size: 16px;
}
.wrapper .icon i{
  position: relative;
  z-index: 9;
}
.wrapper .icon.arrow{
  left: 15px;
}
.wrapper .icon.dots{
  right: 15px;
}
.wrapper .img-area{
  height: 150px;
  width: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-area .inner-area{
  height: calc(100% - 25px);
  width: calc(100% - 25px);
  border-radius: 50%;
}
.inner-area img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.wrapper .name{
  font-size: 23px;
  font-weight: 500;
  color: #31344b;
  margin: 10px 0 5px 0;
}
.wrapper .about{
  color: #44476a;
  font-weight: 400;
  font-size: 16px;
}
.wrapper .social-icons{
  margin: 15px 0 25px 0;
}
.social-icons a{
  position: relative;
  height: 40px;
  width: 40px;
  margin: 0 5px;
  display: inline-flex;
  text-decoration: none;
  border-radius: 50%;
}
.social-icons a:hover::before,
.wrapper .icon:hover::before,
.buttons button:hover:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  background: #ecf0f3;
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
}
.buttons button:hover:before{
  z-index: -1;
  border-radius: 5px;
}
.social-icons a i{
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  height: 100%;
  line-height: 40px;
}
.social-icons a.fb i{
  color: #4267B2;
}
.social-icons a.twitter i{
  color: #1DA1F2;
}
.social-icons a.insta i{
  color: #E1306C;
}
.social-icons a.yt i{
  color: #ff0000;
}
.wrapper .buttons{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.buttons button{
  position: relative;
  width: 100%;
  border: none;
  outline: none;
  padding: 12px 0;
  color: #31344b;
  font-size: 17px;
  font-weight: 400;
  border-radius: 5px;
  cursor: pointer;
  z-index: 4;
}
.buttons button:first-child{
  margin-right: 10px;
}
.buttons button:last-child{
  margin-left: 10px;
}
.wrapper .social-share{
  display: flex;
  width: 100%;
  margin-top: 30px;
  padding: 0 5px;
  justify-content: space-between;
}
.social-share .row{
  color: #31344b;
  font-size: 17px;
  cursor: pointer;
  position: relative;
}
.social-share .row::before{
  position: absolute;
  content: "";
  height: 100%;
  width: 2px;
  background: #e0e6eb;
  margin-left: -25px;
}
.row:first-child::before{
  background: none;
}
.social-share .row i.icon-2{
  position: absolute;
  left: 0;
  top: 50%;
  color: #31344b;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.row:nth-child(1):hover i.fa-heart,
.row:nth-child(2):hover i.fa-comment{
  opacity: 1;
  pointer-events: auto;
}

That’s all, now you’ve successfully created a Neumorphism Profile Card UI Design using only 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.

Responsive CSS Card Design with Hover Animation in HTML & CSS

CodingNepal — Tue, 05 May 2020 09:56:00 +0000

Hello 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.

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.




   
      
      Profile UI Card Design | CodingNepal
      
      
   
   
      
         
            
               
            
            
               
                  Annie Lea
               
               
                  Apps Developer
               
            
            
               
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
               
               
                  Read more
               
            
         
         
            
               
            
            
               
                  Eliana Maia
               
               
                  Website Developer
               
            
            
               
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
               
               
                  Read more
               
            
         
         
            
               
            
            
               
                  Harley Briana
               
               
                  Graphic Developer
               
            
            
               
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
               
               
                  Read more

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.

Profile Card – CodingNepal

Create A Simple Pricing Card in HTML and CSS

Steps To Create Pricing Card in HTML and CSS

Unlock Exclusive
Content

$29/month

Conclusion and Final words

Create Profile Card in HTML & CSS | With Source Code

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

You Might Like This :

Profile Card UI Design [Source Code]

Olivia Gomez

Following

Followers

Posts

How to Create Profile Card in HTML & CSS

How to Create Profile Card in HTML & CSS | Video Tutorial

You May Like This:

Profile Card UI Design [Source Code]

Day Night Mode using only HTML & CSS

Full Video Tutorial of Day Night Mode using only HTML & CSS

You Might Like This:

Day-Night Mode [Source Code]

Neumorphism Profile Card UI Design using only HTML & CSS

Video Tutorial of Neumorphism Profile Card UI Design

You might like this:

Neumorphism Profile Card UI Design [Source Codes]

Responsive CSS Card Design with Hover Animation in HTML & CSS

Video Tutorial of Responsive Profile CSS Card Design

You might like this:

Responsive CSS Card with Hover Animation [Source Codes]

Profile Card – CodingNepal

Create A Simple Pricing Card in HTML and CSS

Steps To Create Pricing Card in HTML and CSS

Unlock Exclusive Content

$29/month

Conclusion and Final words

Create Profile Card in HTML & CSS | With Source Code

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

You Might Like This :

Profile Card UI Design [Source Code]

Olivia Gomez

Following

Followers

Posts

How to Create Profile Card in HTML & CSS

How to Create Profile Card in HTML & CSS | Video Tutorial

You May Like This:

Profile Card UI Design [Source Code]

Day Night Mode using only HTML & CSS

Full Video Tutorial of Day Night Mode using only HTML & CSS

You Might Like This:

Day-Night Mode [Source Code]

Neumorphism Profile Card UI Design using only HTML & CSS

Video Tutorial of Neumorphism Profile Card UI Design

You might like this:

Neumorphism Profile Card UI Design [Source Codes]

Responsive CSS Card Design with Hover Animation in HTML & CSS

Video Tutorial of Responsive Profile CSS Card Design

You might like this:

Responsive CSS Card with Hover Animation [Source Codes]

Unlock Exclusive
Content