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. Sat, 23 Sep 2023 13:09:50 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 How to Create Responsive Cards in HTML and CSS https://www.codingnepalweb.com/create-responsive-cards-in-html-css/ https://www.codingnepalweb.com/create-responsive-cards-in-html-css/#respond Sat, 23 Sep 2023 13:07:21 +0000 https://www.codingnepalweb.com/?p=5756 Create Beautiful Responsive Cards in HTML and CSS

You may have seen cards on different websites. Cards are important web elements used to showcase short articles, product descriptions, or user profiles. If you’re a beginner web developer, creating responsive cards can be a valuable project to understand CSS fundamental concepts such as positing, flexbox, and grid layouts.

In this blog post, I will guide you through the process of creating a responsive card design using HTML and CSS. There will be 3 cards displayed on the screen; each card contains an image, a title, and a button. When you hover over the card, a simple border animation will appear.

To create this card, we will use commonly used HTML elements such as div a, image, heading, and basic CSS properties to style the card and make it responsive. This project is simple and straightforward, so you should not have any trouble following the steps and understanding the codes.

Steps to Create Responsive Card in HTML and CSS

To create a responsive card design using HTML and CSS, follow these simple step-by-step instructions:

  • First, create a folder with any name you like. Then, put the necessary files inside it.
  • Create a file called index.html to serve as the main file.
  • Create a file called style.css for the CSS code.
  • Finally, download the Images folder and place it in your project directory. This folder contains all the images you’ll need for this card project.

To start, add the following HTML codes to your index.html file: This code includes essential HTML markup with different semantic tags like div, image, and heading to create our card layout.

<!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>Responsive Card Design HTML and CSS | CodingNepal</title>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card-list">
        <a href="#" class="card-item">
            <img src="images/developer.jpg" alt="Card Image">
            <span class="developer">Developer</span>
            <h3>A "developer" codes software and websites.</h3>
            <div class="arrow">
                <i class="fas fa-arrow-right card-icon"></i>
            </div>
        </a>
        <a href="#" class="card-item">
            <img src="images/designer.jpg" alt="Card Image">
            <span class="designer">Designer</span>
            <h3>A "designer" is a design expert.</h3>
            <div class="arrow">
                <i class="fas fa-arrow-right card-icon"></i>
            </div>
        </a>
        <a href="#" class="card-item">
            <img src="images/editor.jpg" alt="Card Image">
            <span class="editor">Editor</span>
            <h3>An "editor" ensures content quality and accuracy.</h3>
            <div class="arrow">
                <i class="fas fa-arrow-right card-icon"></i>
            </div>
        </a>
    </div>
</body>
</html>

Next, add the following CSS codes to your style.css file to make your card stylish and responsive. Feel free to experiment with different CSS properties, such as colors, fonts, backgrounds, etc., to make your card even more beautiful.

/* 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 {
    background: #ecececdb;
}

.card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    max-width: 1250px;
    margin: 150px auto;
    padding: 20px;
    gap: 20px;
}

.card-list .card-item {
    background: #fff;
    padding: 26px;
    border-radius: 8px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.04);
    list-style: none;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent;
    transition: border 0.5s ease;
}

.card-list .card-item:hover {
    border: 2px solid #000;
}

.card-list .card-item img {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    object-fit: cover;
}

.card-list span {
    display: inline-block;
    background: #F7DFF5;
    margin-top: 32px;
    padding: 8px 15px;
    font-size: 0.75rem;
    border-radius: 50px;
    font-weight: 600;
}

.card-list .developer {
    background-color: #F7DFF5; 
    color: #B22485;
}   

.card-list .designer {
    background-color: #d1e8ff;
    color: #2968a8;
}

.card-list .editor {
    background-color: #d6f8d6; 
    color: #205c20;
}

.card-item h3 {
    color: #000;
    font-size: 1.438rem;
    margin-top: 28px;
    font-weight: 600;
}

.card-item .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-35deg);
    height: 40px;
    width: 40px;
    color: #000;
    border: 1px solid #000;
    border-radius: 50%;
    margin-top: 40px;
    transition: 0.2s ease;
}

.card-list .card-item:hover .arrow  {
    background: #000;
    color: #fff; 
}

@media (max-width: 1200px) {
    .card-list .card-item {
        padding: 15px;
    }
}

@media screen and (max-width: 980px) {
    .card-list {
        margin: 0 auto;
    }
}

Conclusion and final words

In conclusion, creating responsive CSS cards is a simple but practical project for beginner web developers to apply their newly learned HTML and CSS skills. I believe that by following the steps and the codes in this post, you’ve successfully created your own CSS cards.

To further improve your skills in HTML and CSS, I suggest you try recreating other practical website elements such as card designs, login forms, navigation bars, website homepages, etc.

If you encounter any problems while creating your responsive card design, you can download the source code files for this form project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

]]> https://www.codingnepalweb.com/create-responsive-cards-in-html-css/feed/ 0 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 Top 10 Profile Card Template Designs in HTML & CSS https://www.codingnepalweb.com/10-profile-card-template-designs-html-css/ https://www.codingnepalweb.com/10-profile-card-template-designs-html-css/#respond Fri, 30 Dec 2022 21:11:21 +0000 https://www.codingnepalweb.com/?p=4126

Top 10 Profile Card Template Designs in HTML & CSS

This blog post covers the creation of various types of profile cards using HTML and CSS, with the goal of providing a wide range of options for designing a profile card with a good user interface and user experience.

This blog post provides step-by-step instructions with code on how to create a profile card using HTML and CSS, even if you are new to these technologies. It aims to teach you how to design different types of profile cards, giving you the skills and knowledge needed to create professional and visually appealing profile cards. Recently I have provided a blog on Top 5 Sidebar Templates, I hope that will also be helpful for you.

A profile card is a user interface element that displays information about a person or organization. It typically includes a profile picture, the person’s or entity’s name, and additional details such as job title, location, or contact information.

Let’s get into our Profile Card Template Design’s Lists.

1. Simple Profile Card Design in HTML & CSS

Simple Profile Card in HTML & CSS

This profile card design is simple but effective, featuring essential elements that a typical profile should include, such as a person’s image, name, and social media buttons. I have tried to make this profile card design attractive and easy to understand.

If you are in need of a simple and visually appealing profile card, this design may be a good fit for your needs. It can be created using basic HTML and CSS code, and the source code and video instructions for creating it are available through the provided links.

2. Neumorphism Profile Card Design in HTML & CSS

Neumorphism Profile Card Design in HTML & CSS

This profile card features a neomorphic user interface design, with all elements on the card showcasing this visually appealing and modern style. The card includes essential elements such as a profile image, name, and social media buttons, as well as any other necessary information.

The neomorphic design gives the card a unique and eye-catching appearance, making it a great choice for those looking to create a visually distinctive profile card. I hope you will try to create this profile card with HTML & CSS. For the source code and video tutorial of this Neumorphism Profile Card Design visit the given links.

3. Responsive Profile Cards in HTML & CSS 

Responsive Profile Cards in HTML & CSS

These responsive profile cards are designed to fit any device screen size. As shown in the preview, each card includes a profile image, name, description, and button. With these cards, you can display three profiles in an organized and visually appealing manner.

If you are looking for a profile card that can adapt to any screen-sized device then this profile could fulfill your demand. You can create this Responsive Profile Card with basic HTML and CSS code. Check out the given links for the source code and video tutorial.

4. Animated Profile Card Design in HTML & CSS

Animated Profile Card Design in HTML & CSS

This profile card is made using HTML and CSS and includes a small animation. Initially, the details on the card are hidden and the button text is “share.” When the button is clicked, the details of the card are revealed and the button text changes to “cancel.”

If you want to create a profile card that allows a dynamic and interactive experience for the user then this profile can meet your demand. You can visit the given links for the source code file and video instructions for the profile card design.

5. Profile Card with Hover Animation in HTML & CSS

Profile Card with Hover Animation in HTML & CSS

These profile cards feature interesting hover animations. As shown in the preview, all of the cards and their details are initially hidden, with only the last card visible. When the user hovers their mouse over the profile icons of each card, the card will appear with a visually appealing animation with its profile details.

If you are looking for profile cards with hover animation that is created using HTML and CSS, this resource may be useful to you. Click on the provided links to access the video tutorial and source code file.

6. Profile Card with Dark Light Mode in HTML & CSS

Profile Card with Dark Light Mode in HTML & CSS

This profile card has been designed using HTML and CSS and includes the functionality to switch between dark and light modes, making it more contemporary. The toggle button visible on the card enables the switching between the two modes.

If you want a stylish profile card with the ability to switch between dark and light modes, and are interested in using HTML and CSS to create it, this design may be a good fit for you. The video tutorial and source code can be accessed through the links provided below.

7. Profile Card with 3d Flipping Animation in HTML & CSS

Profile Card with 3d Flipping Animation
This profile card features a 3D flip animation. When the card get hovered over, the front section flips to reveal the back portion of the profile. This adds a dynamic and interactive element to the card.

If you want to create a profile card with a 3D flipping animation, this design may be suitable for your needs. The card can be created using just HTML and CSS. For the video tutorial and the source code, click on the provided links.

8. Responsive Profile Card Slider in HTML & CSS

Responsive Profile Card Slider in HTML & CSS

This is a highly advanced profile card design created using HTML and CSS. One of its standout features is the sliding function. The button located under the card can be used to slide it to the left or right.

If you are a beginner and want to create  Responsive Profile Cards with Sliding Features in just HTML and CSS then this Profile card could be the best fit for you.

9. Responsive Profile Card Slider in HTML CSS & Swiperjs

Responsive Profile Card Slider in HTML CSS & Swiperjs

This modern profile card design includes a sliding feature, created using HTML, CSS, and the Swiper js plugin. The card features buttons to slide left or right, pagination and displays basic information.

If you want to create a responsive profile card with a full sliding feature using HTML, CSS, and the Swiperjs plugin, this design may be able to meet your needs. The source code and video tutorial can be accessed through the provided links.

10. Responsive Card Slider in HTML CSS & JavaScript

Responsive Profile Card Slider in HTML CSS & JavaScript

This is a card slider created using vanilla HTML, CSS, and JavaScript. While it is not specifically designed as a profile card interface, it could be used as a reference if you want to create a profile card with a sliding feature using vanilla JavaScript.

If you want to create a responsive profile card with a sliding feature using HTML, CSS, and JavaScript, the card slider design can be useful to you. The source code and video tutorial for this card slider can be accessed through the provided links.

Conclusion

Those were the Top 10 Profile Card Template Designs in HTML & CSS. I hope you liked them and got the idea to create a simple to advance profile card design.

There are lots of other profile card designs that I have not included here but you can get them on my website. In addition, you can also subscribe to my YouTube Channel to enhance your skill in HTML CSS, and JavaScript.

If you found this blog helpful. Please do share.

]]> https://www.codingnepalweb.com/10-profile-card-template-designs-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 Create Responsive Card Slider in HTML CSS & JavaScript | SwiperJs https://www.codingnepalweb.com/card-slider-html-css-javascript-swiperjs/ https://www.codingnepalweb.com/card-slider-html-css-javascript-swiperjs/#respond Sun, 06 Nov 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4150 Create Responsive Card Slider in HTML CSS & JavaScript | SwiperJs

In YouTube, Netflix, Facebook and other platform you may have seen and used image, text or videos carousel or sliding option form where you can get other content by sliding it. Did you know we can make that type of Card Slider just using HTML CSS and JavaScript with Swiper Js plugin.

Yes, today you will to create a Responsive Card Slider in HTML CSS JavaScript with SwiperJs plugin. Even though you are beginner at HTML CSS and JavaScript and don’t know to use plugin like SwiperJs then also you will be able to create that crousal easily after reading this blog. There are lots of Cards & Card Slider I already have created. In this card slider you will find more function and design.

Card slider are the combination of two or more than two cards that are slideable right or left.  These types of card are available on the website or in the application which contains some specific information in a brief way.

Take a look on the given image of our Card Slider. As you can see there, there are total three cards with different image, name and job. At the first and last card’s middle we can see button, obviously that is used to slide card right of left. Also, we can slide those card by grabbing cursor on it. Intresting thing on this project is that I have also added pagination. This card slider will be fully responsive.

To see the real demo of this card slider or carousel and all the code that I have used to create this card slider, you can watch the video tutorial. After watching the given video tutorial you will also know to how HTML and CSS coder are working behind this card slider and how to use swiperjs.

Card Slider in HTML CSS JavaScript | SwiperJs | Video Tutorial

You would be wondering to getting all the HTML CSS and JavaScript/SwieprJs code that I have used to create this Card Slider, 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 sliding card briefly.

As you have seen in the video tutorial of our Carousel. you have seen there. At first there was total three cards with image, information, buttons and pagination. When I clicked on the right side button the card slid to those left and next card appeared. Simailarly when I clicked on the right side button those card slid right and next card appeared.

Also, we were able slide card by grabbing cursor on it. Those card were fully responsive, I have show you by resizing the screen. In the small device screen those nav button was hidden. To create this project  this card slider I used HTML CSS and Swiperjs, which you already have watched in the video tutorial.

I hope, now you are able to create this Card Slider using HTML CSS and JavaScript with using plugin like SwiperJs. If you are feeling difficulty to create this sliding card, all the source code are given below.

You May Like This:

Card Slider in HTML CSS & JS | SwiperJs [Source Code]

To create Card Slider in HTML CSS & JS, 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 Card Slider in HTML CSS & JS 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 http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Responsive Card Slider in HTML CSS & JavaScript with Swiperjs</title>

    <!-- Swiper CSS -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css" />

    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container swiper">
      <div class="slide-container">
        <div class="card-wrapper swiper-wrapper">
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/fullDev.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile1.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">David Cardlos</h3>
                <h4 class="job">Full Stack Developer</h4>
              </div>
            </div>
          </div>
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/photographer.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile2.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">Siliana Ramis</h3>
                <h4 class="job">Photographer</h4>
              </div>
            </div>
          </div>
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/dataAna.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile3.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">Richard Bond</h3>
                <h4 class="job">Data Analyst</h4>
              </div>
            </div>
          </div>
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/appDev.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile4.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">Priase</h3>
                <h4 class="job">App Developer</h4>
              </div>
            </div>
          </div>
          <div class="card swiper-slide">
            <div class="image-box">
              <!--<img src="images/showImg/blogger.jpg" alt="" />-->
            </div>
            <div class="profile-details">
              <!--<img src="images/profile/profile5.jpg" alt="" />-->
              <div class="name-job">
                <h3 class="name">James Laze</h3>
                <h4 class="job">Blogger</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-button-next swiper-navBtn"></div>
      <div class="swiper-button-prev swiper-navBtn"></div>
      <div class="swiper-pagination"></div>
    </div>

    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

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

/* 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 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efefef;
}
.container {
  max-width: 1120px;
  width: 100%;
  padding: 40px 0;
}
.slide-container {
  margin: 0 30px;
  overflow: hidden;
}
.card {
  background: #fff;
  border-radius: 8px;
}
.card .image-box {
  height: 200px;
}
.card .image-box img {
  width: 100%;
  height: 100%;
  border-radius: 8px 8px 0 0;
}
.card .profile-details {
  display: flex;
  align-items: center;
  column-gap: 12px;
  padding: 15px;
}
.card .profile-details img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.profile-details .name {
  font-size: 15px;
  font-weight: 500;
}
.profile-details .job {
  font-size: 12px;
  font-weight: 500;
  color: #4d4d4d;
}

.swiper-navBtn {
  color: #000;
  height: 40px;
  width: 40px;
  background: #fff;
  border-radius: 50%;
}
.swiper-navBtn::before,
.swiper-navBtn::after {
  font-size: 18px;
}

.swiper-pagination-bullet {
  background-color: #000;
}

@media screen and (max-width: 768px) {
  .swiper-navBtn {
    display: none;
  }
}

Third, paste the following codes into your script.js file.

var swiper = new Swiper(".slide-container", {
  slidesPerView: 4,
  spaceBetween: 20,
  sliderPerGroup: 4,
  loop: true,
  centerSlide: "true",
  fade: "true",
  grabCursor: "true",
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    dynamicBullets: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },

  breakpoints: {
    0: {
      slidesPerView: 1,
    },
    520: {
      slidesPerView: 2,
    },
    768: {
      slidesPerView: 3,
    },
    1000: {
      slidesPerView: 4,
    },
  },
});

If you face any difficulties while creating your Card Slider or your code is not working as expected, you can download the source code files for this Image Slider 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.

View Live Demo

 

]]> https://www.codingnepalweb.com/card-slider-html-css-javascript-swiperjs/feed/ 0 Flipping Card UI Design in HTML & CSS https://www.codingnepalweb.com/flipping-card-ui-design-html-css/ https://www.codingnepalweb.com/flipping-card-ui-design-html-css/#respond Mon, 24 Oct 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4153 Flipping Card UI Design in HTML & CSS

Hey buddy, I hope you are doing are creating an exciting project. Today I have brought a beautiful project for you. Bascially today you will learn to create a Card with Flipping Animation in HTML CSS and JavaScript. There are lots of other Card designs I have already created before.

A card is a section that can be square or rectangular and contains some vital information about a particular. Cards can be in various types like profile cards, product cards,s and the least goes on.

Take a look at the given image of our project [Flipping Card UI Design]. As you can see there are two beautiful gradients two balls and between them, there is a card with grassmorphism UI. In the card, there is a master card logo, chip, and some card owner details like card number, name, and the valid date of the card. The interesting part of this project is when you hover over the card it will flid and the back side of the card visible. On the back side of that card, I have added some other information as well.

To see the real demo of this card and how it flips and the back part of this card, you can watch the given video tutorial of this project [Flipping Card UI Design], that I have given below. After watching the given video tutorial, you also get the idea, of how all the HTML and CSS code is working behind it.

Flipping Card UI Design in HTML & CSS | Video Tutorial

I have provided all the HTML and CSS code that I have used to create this project [Flipping Card UI Design], before jumping into the source code file. I would like to briefly explain the given video.

As you have seen in the video tutorial of this project [Flipping Card UI Design]. At first on the screen we saw, there were two gradient balls. Between those two balls, there was our card with some basic information that debit cards need to have like name, card number, expiry date, and others. When I hover over the card, it flipped and the back part of the card visibled. On the back part, there is some other information that typical has.

As you have seen, how I created those two balls. the card and its UI design and the code that is used to flip it by using only HTML and CSS. I hope you also can create this type of card with flipping animation on hove by using HTML and CSS. If you are feeling difficulty to create this project [Flipping Card UI Design], I have provided all the HTML and CSS code and all the images that I have used to create this Card, which you can find below.

You May Like This:

Flipping Card UI Design [Source Codes]

To create a  Flipping Card UI Design using HTML and CSS, 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 source codes of this Border Loading Animation 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 http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flipping Card UI Design</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section>
      <div class="container">
        <div class="card front-face">
          <header>
            <span class="logo">
              <!--<img src="images/logo.png" alt="" />-->
              <h5>Master Card</h5>
            </span>
           <!--<img src="images/chip.png" alt="" class="chip" />-->
          </header>

          <div class="card-details">
            <div class="name-number">
              <h6>Card Number</h6>
              <h5 class="number">8050 2030 3020 5040</h5>
              <h5 class="name">Prem Kumar Shahi</h5>
            </div>

            <div class="valid-date">
              <h6>Valid Thru</h6>
              <h5>05/28</h5>
            </div>
          </div>
        </div>

        <div class="card back-face">
          <h6>
            For customer service call +977 4343 3433 or email at
            mastercard@gmail.com
          </h6>
          <span class="magnetic-strip"></span>
          <div class="signature"><i>005</i></div>
          <h5>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia
            maiores sed doloremque nesciunt neque beatae voluptatibus doloribus.
            Libero et quis magni magnam nihil temporibus? Facere consectetur
            dolore reiciendis et veniam.
          </h5>
        </div>
      </div>
    </section>
  </body>
</html>


/* Import Google Font - 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;
}
section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: #121321;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  perspective: 1000px;
}
section::before {
  content: "";
  position: absolute;
  height: 240px;
  width: 240px;
  border-radius: 50%;
  transform: translate(-150px, -100px);
  background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
section::after {
  content: "";
  position: absolute;
  height: 240px;
  width: 240px;
  border-radius: 50%;
  transform: translate(150px, 100px);
  background: linear-gradient(90deg, #9c27b0, #f3f5f5);
}
.container {
  position: relative;
  height: 225px;
  width: 375px;
  z-index: 100;
  transition: 0.6s;
  transform-style: preserve-3d;
}
.container:hover {
  transform: rotateY(180deg);
}
.container .card {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 25px;
  border-radius: 25px;
  backdrop-filter: blur(25px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backface-visibility: hidden;
}
.front-face header,
.front-face .logo {
  display: flex;
  align-items: center;
}
.front-face header {
  justify-content: space-between;
}
.front-face .logo img {
  width: 48px;
  margin-right: 10px;
}
h5 {
  font-size: 16px;
  font-weight: 400;
}
.front-face .chip {
  width: 50px;
}
.front-face .card-details {
  display: flex;
  margin-top: 40px;
  align-items: flex-end;
  justify-content: space-between;
}
h6 {
  font-size: 10px;
  font-weight: 400;
}
h5.number {
  font-size: 18px;
  letter-spacing: 1px;
}
h5.name {
  margin-top: 20px;
}
.card.back-face {
  border: none;
  padding: 15px 25px 25px 25px;
  transform: rotateY(180deg);
}
.card.back-face h6 {
  font-size: 8px;
}
.card.back-face .magnetic-strip {
  position: absolute;
  top: 40px;
  left: 0;
  height: 45px;
  width: 100%;
  background: #000;
}
.card.back-face .signature {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 80px;
  height: 40px;
  width: 85%;
  border-radius: 6px;
  background: repeating-linear-gradient(
    #fff,
    #fff 3px,
    #efefef 0px,
    #efefef 9px
  );
}
.signature i {
  color: #000;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 4px;
  background-color: #fff;
  margin-right: -30px;
  z-index: -1;
}
.card.back-face h5 {
  font-size: 8px;
  margin-top: 15px;
}
If you face any difficulties while creating your Credit Card or your code is not working as expected, you can download the source code files for this Card 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.

 

View Live Demo

 

]]> https://www.codingnepalweb.com/flipping-card-ui-design-html-css/feed/ 0 Create Popup Modal Box in HTML CSS & JavaScript https://www.codingnepalweb.com/create-popup-modal-box-in-html-css-javascript/ https://www.codingnepalweb.com/create-popup-modal-box-in-html-css-javascript/#respond Tue, 18 Oct 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4154 Create Popup Modal Box in HTML CSS & JavaScript

Hey buddy, I hope you are doing and creating mindblowing content. Today I have brought a beautiful and valuable project for you. Today you will learn to Create a Popup Modal Box in HTML CSS and JavaScript. As far as the modal box is concerned, if you want to create Popup Modal with Message Box HTML and CSS only click the given link. It is also called a dialog box.

A modal Box is the type of section which is displayed on the front of the webpage, and it contains information, warning, errors, and other things. Actually, it appears when the user did any action on the webpage. Similarly, content models can have different sizes and shapes.

Take a look at the given image of our project [ Popup Modal Box]. Basically, at the top, there is an icon of the tick, and below that tick, there is some text and underneath that text, there are two buttons. In fact, according to this project [ Popup Modal Box], the given modal box will appear after we click on the button which will be available before coming to this modal box. We can close this modal box simply by clicking on the close button or the outside of the modal box which will be in a little darker color.

To see the real demo of this project [Popup Modal Box]. How it appears, how we can close it, and all the animation I have added to this Modal Box you have to watch the video tutorial of this project, after watching the video tutorial of this project [ Popup Modal Box], you will also get the idea of HTML CSS and JavaScript code.

Create Popup Modal Box in HTML CSS & JavaScript | Video

Yeah, I have provided all the HTML CSS, and JavaScript code that I have used to create this project [ Popup Modal Box]. Before getting into the source code file, I would like to briefly explain the given video tutorial.

As you have seen in the video of this project [ Popup Modal Box]. At first, there was a button on the screen with the name “Open Modal”, When I clicked on that button the button disappeared and a modal box, as well as a little dark color overly behind the modal box, appeared. As you the modal box can be closed by clicking on the close button or just by clicking on the outside of the modal box. To make the UI design of this project [ Popup Modal Box], I just used HTML and CSS, and to open and close it, I used some JavaScript code.

I hope now you can create this project [ Popup Modal Box] easily. If you are feeling difficulty making this modal box. You can take all the HTML CSS and JavaScript code of this modal box from below.

You May Like This:

Popup Modal Box  [Source Codes]

To create a  Popup Modal Box using HTML CSS and JavaScript, follow the given steps line by line:
1. Create a folder. You can put any name in this folder and create the below-mentioned files inside this folder.
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 source codes of this Border Loading Animation 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 http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popup Modal Box</title>
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" />
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"/>
  </head>
  <body>
    <section>
      <button class="show-modal">Show Modal</button>
      <span class="overlay"></span>

      <div class="modal-box">
        <i class="fa-regular fa-circle-check"></i>
        <h2>Completed</h2>
        <h3>You have sucessfully downloaded all the source code files.</h3>

        <div class="buttons">
          <button class="close-btn">Ok, Close</button>
          <button>Open File</button>
        </div>
      </div>
    </section>

    <script>
      const section = document.querySelector("section"),
        overlay = document.querySelector(".overlay"),
        showBtn = document.querySelector(".show-modal"),
        closeBtn = document.querySelector(".close-btn");

      showBtn.addEventListener("click", () => section.classList.add("active"));

      overlay.addEventListener("click", () =>
        section.classList.remove("active")
      );

      closeBtn.addEventListener("click", () =>
        section.classList.remove("active")
      );
    </script>
  </body>
</html>


/* 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;
}
section {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
}
button {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  padding: 14px 22px;
  border: none;
  background: #4070f4;
  border-radius: 6px;
  cursor: pointer;
}
button:hover {
  background-color: #265df2;
}
button.show-modal,
.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
section.active .show-modal {
  display: none;
}
.overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
}
section.active .overlay {
  opacity: 1;
  pointer-events: auto;
}
.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 380px;
  width: 100%;
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
}
section.active .modal-box {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.modal-box i {
  font-size: 70px;
  color: #4070f4;
}
.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}
.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}
.modal-box .buttons {
  margin-top: 25px;
}
.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}

If you face any difficulties while creating your Modal Box or your code is not working as expected, you can download the source code files for this Modal Box 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.

View Live Demo

 

]]> https://www.codingnepalweb.com/create-popup-modal-box-in-html-css-javascript/feed/ 0 Credit Card Ui Design in HTML & CSS https://www.codingnepalweb.com/credit-card-ui-design-in-html-css/ https://www.codingnepalweb.com/credit-card-ui-design-in-html-css/#respond Fri, 14 Oct 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4155 Credit Card Ui Design in HTML & CSS

Hello brother, I believe you are doing and creating fantastic projects. Today I have brought a interesting project for you and that is a Credit UI Design using HTML and CSS. As I have already created lots of Card Design but by now this credit card design will be my first project.

Credit card is the medium that issued by the bank and financial institution which allow card holder to our purchase goods and services in credit. There are lots of designs that card has and their various types also like master card, visa card, debit/credit and so on.

Take a look on the given image of our Credit Card. As you can see on the top section, I have added master card logo and text, next to it there is a chip of that card, in the middle section there is card number and underneath of it there are name and expiry date.

To see the real demo of this credit card and all the HTML and CSS code that I have used to create this credit card, You can watch the given video tutorial of this credit card.

Credit Card Ui Design in HTML & CSS | Video Tutorial

I have provided all the HTML and CSS code with the image that I have used to make this Credit Card UI Design. Before getting into the source code files, I would to explain about the given video in sort.

As you have seen in the video tutorial of the Credit Card UI Design. As the top section I added logo and chip which was image. At the middle section I added some text and number and at the bottom I added name and valide date. To create this all interface I just used HTML and CSS.

I hope now you can make this Credit Card Ui Design by using HTML & CSS. If you are feeling difficulty to create this credit card, I have provided all the code and images below, from there you can simply copy or download all the source code files.

You Might Like This:

Credit Card Ui Design  [Source Codes]

To create a Credit Card Ui Design using HTML and CSS, 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 source codes of this Border Loading Animation 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 http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Credit Card Ui Design</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <header>
        <span class="logo">
          <img src="images/logo.png" alt="" />
          <h5>Master Card</h5>
        </span>
        <img src="images/chip.png" alt="" class="chip" />
      </header>

      <div class="card-details">
        <div class="name-number">
          <h6>Card Number</h6>
          <h5 class="number">8050 5040 2030 3020</h5>
          <h5 class="name">Prem Kumar Shahi</h5>
        </div>
        <div class="valid-date">
          <h6>Valid Thru</h6>
          <h5>05/28</h5>
        </div>
      </div>
    </div>
  </body>
</html>

/* Import Google Font - 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 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3f2fd;
}
.container {
  position: relative;
  background-image: url("images/bg.png");
  background-size: cover;
  padding: 25px;
  border-radius: 28px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
header,
.logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo img {
  width: 48px;
  margin-right: 10px;
}
h5 {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}
header .chip {
  width: 60px;
}
h6 {
  color: #fff;
  font-size: 10px;
  font-weight: 400;
}
h5.number {
  margin-top: 4px;
  font-size: 18px;
  letter-spacing: 1px;
}
h5.name {
  margin-top: 20px;
}
.container .card-details {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

That is all, now you’ve successfully created a Dynamic Calendar App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It is free and a zip file will be downloaded that contains the project folder with source code files.

 

]]> https://www.codingnepalweb.com/credit-card-ui-design-in-html-css/feed/ 0 Border Loading Animation in HTML CSS & JavaScript https://www.codingnepalweb.com/border-loading-animation-html-css-js/ https://www.codingnepalweb.com/border-loading-animation-html-css-js/#respond Sat, 08 Oct 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4156 Border Loading Animation in HTML CSS & JavaScript

Hello there, as usual, today you will learn to create exciting projects, Card’s Border Loading Animation, and the animated percentage inside it from 0 to 100 in HTML CSS and JavaScript. As you know there are lots of Card Designs that I have already created and they are available on this blog, but today’s project will be different and exciting.

Border Animation means the animation that happens with the border of any stuff like a card and others. Percentage animation means the increase of the number from 0 to 100%. You can see this type of loading animation in different websites and applications while we are exporting something from it.

Take a quick look at the given image of our project [Border Loading Animation with Percentage], at the right side you can see there is a card with a black border about it. At the top right side, there is a white border and inside the card, there is a percentage.

Basically, when the webpage is reloaded, the white border starts to rotate around that card, and along with the border, the percentage starts animating as well from 0 to 100%. When the percentage becomes 100 the border stops animating and the card’s border color changed from black to white.

To watch the real demo of this project [Border Loading Animation with Percentage] how it animates and all the HTML CSS and JavaScript code that I have used to create this animation, I have provided a full video tutorial of this project [Border Loading Animation with Percentage].

Border Loading Animation in HTML CSS JavaScript

I have provided all the HTML CSS & JavaScript code that I used to create this project [Border Loading Animation with Percentage], before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial when the webpage is reloaded the border and percentage number started animating and after that when the percentage number became 100 it stopped to animate and the card border color changed from dark to white. To make that card and border animation and the percentage I used HTML and CSS to animate the percentage number and to make border white after I used some JavaScript code.

I believe now you can make this project [Border Loading Animation with Percentage], easily by using HTML CSS, and JavaScript. If you are feeling difficulty creating this card and its border animation with percentages, I have provided all the source codes below. From there you copy or download all the source code files.

You Could Like This:

Border Loading Animation [Source Codes]

To create a Border Loading Animation using HTML CSS & JavaScript, 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 source codes of this Border Loading Animation 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 http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border Loading Animaton</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container active">
      <span class="overlay" id="percent">0%</span>
    </div>

    <script>
      const container = document.querySelector(".container"),
        percent = document.querySelector("#percent");

      let perVal = 0;

      let increament = setInterval(() => {
        perVal++;
        percent.textContent = `${perVal}%`;

        if (perVal == 100) {
          clearInterval(increament);
          container.classList.remove("active");
        }
      }, 100);
    </script>
  </body>
</html>

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

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  background-color: #131221;
}
body,
.container,
.overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  position: relative;
  height: 450px;
  width: 350px;
  border-radius: 16px;
  background-color: #fff;
  overflow: hidden;
}
.container.active {
  background-color: #000;
}
.container::before {
  content: "";
  position: absolute;
  height: 650px;
  width: 650px;
  background-image: conic-gradient(transparent, transparent, transparent, #fff);
}
.container.active:before {
  animation: rotate 4s linear infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.container .overlay {
  position: absolute;
  height: 440px;
  width: 340px;
  font-size: 40px;
  font-weight: 500;
  color: #fff;
  border-radius: 12px;
  background-color: #131221;
}

That’s all, now you’ve successfully created a Dynamic Calendar App in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It is free and a zip file will be downloaded that contains the project folder with source code files.

 

]]> https://www.codingnepalweb.com/border-loading-animation-html-css-js/feed/ 0