animated card – CodingNepal

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.

Day Night Mode using only HTML & CSS

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

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

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

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

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

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

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

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

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

Day-Night Mode [Source Code]

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




  
    
    Day Night Toggle | CodingLab 
    
    
     
   

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

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
.outer{
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f2f2f2;
}
#switch:checked ~ .outer{
  background: #092c3e;
}
.content{
  display: flex;
  width: 570px;
  padding: 15px;
  background: #fff;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
#switch:checked ~ .outer .content{
  background: #092c3e;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.outer .toggle{
  position: absolute;
  width: 40px;
  height: 20px;
  border-radius: 20px;
  background: #092c3e;
  right: 15px;
  top: 13px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#switch:checked ~ .outer .toggle{
  background: #fff;
}
.outer .toggle .circle{
  margin-left: 3px;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fff;
  transition: all 0.3s ease;
}
#switch:checked ~ .outer .circle{
  margin-left: 22px;
  background: #092c3e;
}
.image-box {
  height: 232px;
  width: 200px;
  border-radius: 12px;
  padding: 3px;
  background: #092c3e;
}
.image-box img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 12px;
}
#switch:checked ~ .outer .image-box{
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
#switch:checked ~ .outer .image-box img{
  border-color: transparent;
}
.content .details{
  width: 58%;
  margin: 10px 0 20px 20px;
  color: #092c3e;
}
#switch:checked ~ .outer .details{
  transition: 0.1s;
  color: #fff;
}
.content .details .name{
  font-size: 23px;
  font-weight: 600;
}
.content .details .job{
  font-size: 18px;
  font-weight: 500;
}
.content .details p{
 font-size: 15px;
 margin-top: 6px;
}
.content button{
  display: block;
  margin-top: 16px;
  outline: none;
  border: none;
  font-size: 17px;
  padding: 6px 14px;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  background: #092c3e;
  transition: all 0.3s ease;
}
.content button:hover{
  transform: scale(0.97);
}
#switch:checked ~ .outer button{
  background: #fff;
  color: #092c3e;
}
.media-icons{
  position: absolute;
  bottom: 16px;
  right: 15px;
  margin-top: 12px;
  justify-content: flex-end;
}
.media-icons i{
  display: inline-flex;
  margin: 0 4px;
  font-size: 16px;
  color: #092c3e;
  opacity: 0.7;
  cursor: pointer;
}
.media-icons i:hover{
  opacity: 1;
}
#switch:checked ~ .outer i{
  color: #fff;
  opacity: 1;
}
#switch{
  display: none;
}

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

animated card – CodingNepal

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

Day Night Mode using only HTML & CSS

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

You Might Like This:

Day-Night Mode [Source Code]