Card Design – CodingNepal

How to Create Responsive Cards in HTML and CSS

CodingNepal — Sat, 23 Sep 2023 13:07:21 +0000

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.





    
    
    Responsive Card Design HTML and CSS | CodingNepal
    
    
    
    


    
        
            
            Developer
            A "developer" codes software and websites.
            
                
            
        
        
            
            Designer
            A "designer" is a design expert.
            
                
            
        
        
            
            Editor
            An "editor" ensures content quality and accuracy.

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.

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 A Draggable Card Slider in HTML CSS & JavaScript

CodingNepal — Mon, 08 May 2023 14:22:32 +0000

Sliders have become a crucial part of web design, used to showcase content or images in an engaging and interactive way. As a beginner, creating a card slider can help you develop fundamental web development concepts such as DOM manipulation, responsive designs, and JavaScript event listeners.

These concepts are vital for front-end developers to understand and can be applied to various web development projects. So in this blog post, we will show you how to create a responsive draggable card slider in HTML, CSS, and JavaScript, which can be used to display images, products, user profiles, and other content.

In order to truly understand how a draggable card slider works, we won’t be using any external JavaScript libraries such as SwiperJs or Owl Carousel. Instead, we’ll be creating the slider from scratch using pure vanilla JavaScript, HTML, and CSS. However, if you prefer using a library-based slider, you can check out our other slider blogs.

In our draggable card slider, the user can slide cards by dragging them or using the left or right buttons. It also includes infinite scrolling and autoplay functionality and works on touch-enabled devices like phones.

Video Tutorial of Draggable Card Slider in JavaScript

If you prefer visual learning, then the above video tutorial is a great resource for you. I highly recommend watching it because I go through each line of code in detail and provide explanatory comments to make the code easy to understand and follow, especially for beginners.

However, if you prefer reading blog posts or want a quick summary of the steps involved in creating a card slider, you can continue reading this post. By the end of this post, you will have a good understanding of how to create a draggable card slider with HTML, CSS, and JavaScript.

Steps To Create Draggable Card Slider in JavaScript

To create a draggable card or image slider using HTML, CSS, and vanilla JavaScript, 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
Create a script.js file. The file name must be script and its extension .js
Download the images folder from Google Drive and put this folder inside the project folder. This folder has all the images that will be used for this slider.

To start, add the following HTML codes to your index.html file to create a basic layout for our card slider. This code includes a ul element to hold all of the li elements, which represent each card in the slider. Additionally, the code includes next and previous icons for navigation through the slider.




  
    
    Infinite Card Slider JavaScript | CodingNepal
    
    
    
    
    
  
  
    
      
      
        
          
          Blanche Pearson
          Sales Manager
        
        
          
          Joenas Brauers
          Web Developer
        
        
          
          Lariach French
          Online Teacher
        
        
          
          James Khosravi
          Freelancer
        
        
          
          Kristina Zasiadko
          Bank Manager
        
        
          
          Donald Horton
          App Designer

Next, add the following CSS codes to your style.css file to style the cards and position the next and previous icons. You can customize this code to your liking by adjusting the color, font, size, and other CSS properties. Once you’ve added the CSS code, you should see three cards displayed on your browser screen.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  padding: 0 35px;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(to left top, #031A9A, #8B53FF);
}
.wrapper {
  max-width: 1100px;
  width: 100%;
  position: relative;
}
.wrapper i {
  top: 50%;
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 1.25rem;
  position: absolute;
  text-align: center;
  line-height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.23);
  transform: translateY(-50%);
  transition: transform 0.1s linear;
}
.wrapper i:active{
  transform: translateY(-50%) scale(0.85);
}
.wrapper i:first-child{
  left: -22px;
}
.wrapper i:last-child{
  right: -22px;
}
.wrapper .carousel{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar {
  display: none;
}
.carousel.no-transition {
  scroll-behavior: auto;
}
.carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.carousel.dragging .card {
  cursor: grab;
  user-select: none;
}
.carousel :where(.card, .img) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel .card {
  scroll-snap-align: start;
  height: 342px;
  list-style: none;
  background: #fff;
  cursor: pointer;
  padding-bottom: 15px;
  flex-direction: column;
  border-radius: 8px;
}
.carousel .card .img {
  background: #8B53FF;
  height: 148px;
  width: 148px;
  border-radius: 50%;
}
.card .img img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
}
.carousel .card h2 {
  font-weight: 500;
  font-size: 1.56rem;
  margin: 30px 0 5px;
}
.carousel .card span {
  color: #6A6D78;
  font-size: 1.31rem;
}

@media screen and (max-width: 900px) {
  .wrapper .carousel {
    grid-auto-columns: calc((100% / 2) - 9px);
  }
}

@media screen and (max-width: 600px) {
  .wrapper .carousel {
    grid-auto-columns: 100%;
  }
}

Finally, add the following JavaScript code to your script.js file to make the cards draggable, autoplayable, and create an infinite slider.

const wrapper = document.querySelector(".wrapper");
const carousel = document.querySelector(".carousel");
const firstCardWidth = carousel.querySelector(".card").offsetWidth;
const arrowBtns = document.querySelectorAll(".wrapper i");
const carouselChildrens = [...carousel.children];

let isDragging = false, isAutoPlay = true, startX, startScrollLeft, timeoutId;

// Get the number of cards that can fit in the carousel at once
let cardPerView = Math.round(carousel.offsetWidth / firstCardWidth);

// Insert copies of the last few cards to beginning of carousel for infinite scrolling
carouselChildrens.slice(-cardPerView).reverse().forEach(card => {
    carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
});

// Insert copies of the first few cards to end of carousel for infinite scrolling
carouselChildrens.slice(0, cardPerView).forEach(card => {
    carousel.insertAdjacentHTML("beforeend", card.outerHTML);
});

// Scroll the carousel at appropriate postition to hide first few duplicate cards on Firefox
carousel.classList.add("no-transition");
carousel.scrollLeft = carousel.offsetWidth;
carousel.classList.remove("no-transition");

// Add event listeners for the arrow buttons to scroll the carousel left and right
arrowBtns.forEach(btn => {
    btn.addEventListener("click", () => {
        carousel.scrollLeft += btn.id == "left" ? -firstCardWidth : firstCardWidth;
    });
});

const dragStart = (e) => {
    isDragging = true;
    carousel.classList.add("dragging");
    // Records the initial cursor and scroll position of the carousel
    startX = e.pageX;
    startScrollLeft = carousel.scrollLeft;
}

const dragging = (e) => {
    if(!isDragging) return; // if isDragging is false return from here
    // Updates the scroll position of the carousel based on the cursor movement
    carousel.scrollLeft = startScrollLeft - (e.pageX - startX);
}

const dragStop = () => {
    isDragging = false;
    carousel.classList.remove("dragging");
}

const infiniteScroll = () => {
    // If the carousel is at the beginning, scroll to the end
    if(carousel.scrollLeft === 0) {
        carousel.classList.add("no-transition");
        carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth);
        carousel.classList.remove("no-transition");
    }
    // If the carousel is at the end, scroll to the beginning
    else if(Math.ceil(carousel.scrollLeft) === carousel.scrollWidth - carousel.offsetWidth) {
        carousel.classList.add("no-transition");
        carousel.scrollLeft = carousel.offsetWidth;
        carousel.classList.remove("no-transition");
    }

    // Clear existing timeout & start autoplay if mouse is not hovering over carousel
    clearTimeout(timeoutId);
    if(!wrapper.matches(":hover")) autoPlay();
}

const autoPlay = () => {
    if(window.innerWidth < 800 || !isAutoPlay) return; // Return if window is smaller than 800 or isAutoPlay is false
    // Autoplay the carousel after every 2500 ms
    timeoutId = setTimeout(() => carousel.scrollLeft += firstCardWidth, 2500);
}
autoPlay();

carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("mousemove", dragging);
document.addEventListener("mouseup", dragStop);
carousel.addEventListener("scroll", infiniteScroll);
wrapper.addEventListener("mouseenter", () => clearTimeout(timeoutId));
wrapper.addEventListener("mouseleave", autoPlay);

If you look at the code carefully, everything is explained in the comments. You can stop the autoplay feature by setting the isAutoPlay global variable to false, adjust the autoplay delay duration, and modify other features to customize the slider to your preferences.

Conclusion and Final Words

By following the steps given in this blog post, I hope you were able to create a custom draggable card slider using HTML, CSS, and JavaScript. By creating the slider from scratch, you gain a deeper understanding of how sliders work and can customize the slider to meet your specific needs.

Now, you can use this knowledge to create different interactive web projects to expand your web development skillset even further. If you wish, you can view this blog post on Functional Image Gallery in HTML, CSS, and JavaScript. In this gallery, users can search, view, and download any image within a second.

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

Image Slider in HTML CSS & JavaScript

CodingNepal — Sat, 25 Feb 2023 21:11:22 +0000

You may have seen an image sliding feature on various popular social media platforms. Where the user can slide the image right or left. Did you know those types of image sliders can be made using HTML CSS and JavaScrip without using any plugins?

Today in this blog you will learn how to create an Image Slider using HTML CSS & JavaScript. Creating an image slider is an excellent way to enhance your coding skills in HTML, CSS, and JavaScript. Recently I have also created an Image Slider in Swiper Js I hope that post will also be beneficial for you.

If you are eager to see a demonstration of this Image Slider and are interested in learning how to create it using HTML CSS & JavaScript, then there is a video tutorial available below that will guide you through the process step by step.

Video Tutorial of Image Slider in HTML CSS & JavaScript

Creating Image Slider provides a practical project that allows you to practice using various techniques and concepts in a real-world scenario. I would highly recommend that you watch the full video tutorial.

In the video tutorial for the Image Slider, I provided comments on each line of code to help you better understand the process. However, if you prefer not to watch the video, you can still follow the instructions in this blog post to create your own Automatic Image Slider.

Steps For Creating Image Slider in HTML CSS & JavaScript

To create a Image Slider using HTML, CSS, and vanilla JavaScript, 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
Create a script.js file. The file name must be script and its extension .js

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 code of this Image Slider by clicking on the given download button.

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




  
    
    
    
    Image Slider JavaScript | CodingNepal

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #343f4f;
}
.wrapper {
  display: flex;
  max-width: 650px;
  width: 100%;
  height: 400px;
  background: #fff;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper i.button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  width: 36px;
  background-color: #343f4f;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 15px;
  transition: all 0.3s linear;
  z-index: 100;
  cursor: pointer;
}
i.button:active {
  transform: scale(0.94) translateY(-50%);
}
i#prev {
  left: 25px;
}
i#next {
  right: 25px;
}
.image-container {
  height: 320px;
  max-width: 500px;
  width: 100%;
  overflow: hidden;
}
.image-container .carousel {
  display: flex;
  height: 100%;
  width: 100%;
  transition: all 0.4s ease;
}
.carousel img {
  height: 100%;
  width: 100%;
  border-radius: 18px;
  border: 10px solid #fff;
  object-fit: cover;
}

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

// Get the DOM elements for the image carousel
const wrapper = document.querySelector(".wrapper"),
  carousel = document.querySelector(".carousel"),
  images = document.querySelectorAll("img"),
  buttons = document.querySelectorAll(".button");

let imageIndex = 1,
  intervalId;

// Define function to start automatic image slider
const autoSlide = () => {
  // Start the slideshow by calling slideImage() every 2 seconds
  intervalId = setInterval(() => slideImage(++imageIndex), 2000);
};
// Call autoSlide function on page load
autoSlide();

// A function that updates the carousel display to show the specified image
const slideImage = () => {
  // Calculate the updated image index
  imageIndex = imageIndex === images.length ? 0 : imageIndex < 0 ? images.length - 1 : imageIndex;
  // Update the carousel display to show the specified image
  carousel.style.transform = `translate(-${imageIndex * 100}%)`;
};

// A function that updates the carousel display to show the next or previous image
const updateClick = (e) => {
  // Stop the automatic slideshow
  clearInterval(intervalId);
  // Calculate the updated image index based on the button clicked
  imageIndex += e.target.id === "next" ? 1 : -1;
  slideImage(imageIndex);
  // Restart the automatic slideshow
  autoSlide();
};

// Add event listeners to the navigation buttons
buttons.forEach((button) => button.addEventListener("click", updateClick));

// Add mouseover event listener to wrapper element to stop auto sliding
wrapper.addEventListener("mouseover", () => clearInterval(intervalId));
// Add mouseleave event listener to wrapper element to start auto sliding again
wrapper.addEventListener("mouseleave", autoSlide);

That’s all, now you’ve successfully created a project on Image Slider. 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.

Responsive Card Slider in HTML & CSS

CodingNepal — Tue, 24 Jan 2023 21:11:21 +0000

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.




  
    
    
    
    Card Slider in HTML & CSS
    
  
  
    
      
        
          
        
        Someone Name
        Lorem ipsum dolor sit amet consectetur adipisicing elite.
      
      
        
         
        
        Someone Name
        Lorem ipsum dolor sit amet consectetur adipisicing elite.
      
      
        
          
        
        Someone Name
        Lorem ipsum dolor sit amet consectetur adipisicing elite.
      
      
        
          
        
        Someone Name
        Lorem ipsum dolor sit amet consectetur adipisicing elite.

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.

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.

Create Responsive Card Slider in HTML CSS & JavaScript | SwiperJs

CodingNepal — Sun, 06 Nov 2022 21:11:20 +0000

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.

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

To create Card Slider in HTML CSS & JS, 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 Card Slider in HTML CSS & JS by clicking on the given download button.

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




  
    
    
    
   Responsive Card Slider in HTML CSS & JavaScript with Swiperjs

    
    

    
    
  
  
    
      
        
          
            
              
            
            
              
              
                David Cardlos
                Full Stack Developer
              
            
          
          
            
              
            
            
              
              
                Siliana Ramis
                Photographer
              
            
          
          
            
              
            
            
              
              
                Richard Bond
                Data Analyst
              
            
          
          
            
              
            
            
              
              
                Priase
                App Developer
              
            
          
          
            
              
            
            
              
              
                James Laze
                Blogger

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

Flipping Card UI Design in HTML & CSS

CodingNepal — Mon, 24 Oct 2022 21:11:20 +0000

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.

Flipping Card UI Design [Source Codes]

To create a Flipping Card UI Design using HTML and CSS, 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 source codes of this Border Loading Animation by clicking on the given download button.

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




  
    
    
    
    Flipping Card UI Design
    
  
  
    
      
        
          
            
              
              Master Card
            
           
          

          
            
              Card Number
              8050 2030 3020 5040
              Prem Kumar Shahi
            

            
              Valid Thru
              05/28
            
          
        

        
          
            For customer service call +977 4343 3433 or email at
            mastercard@gmail.com
          
          
          005
          
            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.

/* 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

Create Popup Modal Box in HTML CSS & JavaScript

CodingNepal — Tue, 18 Oct 2022 21:11:20 +0000

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.

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

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




  
    
    
    
    Popup Modal Box
    
    
    
    
  
  
    
      
      

      
        
        Completed
        You have sucessfully downloaded all the source code files.

/* 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

Credit Card Ui Design in HTML & CSS

CodingNepal — Fri, 14 Oct 2022 21:11:20 +0000

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.

Credit Card Ui Design [Source Codes]

To create a Credit Card Ui Design using HTML and CSS, 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

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




  
    
    
    
    Credit Card Ui Design
    
  
  
    
      
        
          
          Master Card
        
        
      

      
        
          Card Number
          8050 5040 2030 3020
          Prem Kumar Shahi
        
        
          Valid Thru
          05/28

/* 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.

Card Design – CodingNepal

How to Create Responsive Cards in HTML and CSS

Steps to Create Responsive Card in HTML and CSS

A "developer" codes software and websites.

A "designer" is a design expert.

An "editor" ensures content quality and accuracy.

Conclusion and final words

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 A Draggable Card Slider in HTML CSS & JavaScript

Video Tutorial of Draggable Card Slider in JavaScript

Steps To Create Draggable Card Slider in JavaScript

Blanche Pearson

Joenas Brauers

Lariach French

James Khosravi

Kristina Zasiadko

Donald Horton

Conclusion and Final Words

Image Slider in HTML CSS & JavaScript

Video Tutorial of Image Slider in HTML CSS & JavaScript

Steps For Creating Image Slider in HTML CSS & JavaScript

Responsive Card Slider in HTML & CSS

Video Tutorial of Card Slider in HTML & CSS

Steps to Card Slider in HTML & CSS

1. File Structure

2. Creating the Card Slider

Someone Name

Someone Name

Someone Name

Someone Name

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

Create Responsive Card Slider in HTML CSS & JavaScript | SwiperJs

Card Slider in HTML CSS JavaScript | SwiperJs | Video Tutorial

You May Like This:

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

David Cardlos

Full Stack Developer

Siliana Ramis

Photographer

Richard Bond

Data Analyst

Priase

App Developer

James Laze

Blogger

Flipping Card UI Design in HTML & CSS

Flipping Card UI Design in HTML & CSS | Video Tutorial

You May Like This:

Flipping Card UI Design [Source Codes]

Card Number

8050 2030 3020 5040

Prem Kumar Shahi

Valid Thru

05/28

For customer service call +977 4343 3433 or email at mastercard@gmail.com

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.

Create Popup Modal Box in HTML CSS & JavaScript

Create Popup Modal Box in HTML CSS & JavaScript | Video

You May Like This:

Popup Modal Box [Source Codes]

Completed

You have sucessfully downloaded all the source code files.

Credit Card Ui Design in HTML & CSS

Credit Card Ui Design in HTML & CSS | Video Tutorial

You Might Like This:

Credit Card Ui Design [Source Codes]

Card Number

8050 5040 2030 3020

Prem Kumar Shahi

Unlock Exclusive
Content