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

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

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

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

Steps To Create Pricing Card in HTML and CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Conclusion and Final words

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

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

 

]]> https://www.codingnepalweb.com/create-simple-pricing-card-html-css/feed/ 0 Creative Product Card UI Design in HTML CSS & JavaScript https://www.codingnepalweb.com/creative-product-card-ui-design-javascript/ https://www.codingnepalweb.com/creative-product-card-ui-design-javascript/#comments Tue, 28 Jul 2020 04:52:00 +0000 https://codingnepalweb.com/2020/07/28/creative-product-card-ui-design-in-html-css-javascript/ Creative Product Card UI Design in HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Creative Product Card UI Design using HTML CSS & JavaScript. Earlier I have shared a blog on how to create a Profile Card with Hover Animation using only HTML & CSS. But now I’m going to create an Awesome Product Card.

A product card used to display a picture of an item that linked in some way to related items, for example, products we sell or recipes. It allows someone to quickly recognize a particular item of interest to them from a group, for example in search results.

In this program (Creative Product Card UI Design), at first, on the webpage, there is only a product image but when you hover on that image then the options/customize container of that product appears with a sliding animation. In the product customize container, there is a product name, size numbers, price value, color options, and buttons. There are only three color options in this product and when you click on each color, the product image, background color, and the color of the customize container change according to your chosen color.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Creative Product Card UI Design).

Video Tutorial of Creative Product Card UI Design

 
In the video, you have seen how this product card change its color, product image, and background color when you clicked on the specific color option. You have also seen, at first, on the web page, there is only a product image and after hovering on the image then the customize container is shown from the bottom with a smooth sliding animation. This sliding animation is created using only HTML & CSS.

There I used jQuery also to change the product image, colors, and, background color according to the chosen color option/value. Generally, jQuery is the library of JavaScript and it helps to write fewer JavaScript codes. If you like this program (Creative Product Card UI Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

You might like this:

Creative Product Card UI Design [Source Codes]

To create this program (Creative Product Card UI Design). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on these cards won’t appear. You’ve to download files from the given download button to use images also.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Awesome Product Card Design | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
      <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
   </head>
   <body>
      <div class="container">
         <div class="image">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="">
         </div>
         <div class="card-content">
            <div class="wrapper">
               <div class="title">
                  Adidas Originals
               </div>
               <p>
                  Men's running tshirt
               </p>
               <span class="price">$29.99</span>
               <div class="content size">
                  <div class="name size-name">
                     Size
                  </div>
                  <div class="size-value">
                     <span class="color">XS</span>
                     <span class="color">S</span>
                     <span class="active">M</span>
                     <span class="color">L</span>
                     <span class="color">XL</span>
                  </div>
               </div>
               <div class="content colour">
                  <div class="name colour-name">
                     Colour
                  </div>
                  <div class="colour-value">
                     <span class="white" data-color="lightgrey" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png"></span>
                     <span class="blue active" data-color="#456ABD" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png"></span>
                     <span class="yellow" data-color="#EAA523" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png"></span>
                  </div>
               </div>
               <div class="btns">
                  <button>Buy now</button>
                  <button>Add to cart</button>
               </div>
            </div>
         </div>
      </div>
      <script>
         $(".colour-value span").click(function(){
           $(".colour-value span").removeClass("active");
           $(this).addClass("active");
           $("body").css("background", $(this).attr("data-color"));
           $(".wrapper .price").css("color", $(this).attr("data-color"));
           $(".size-value span.color").css("color", $(this).attr("data-color"));
           $(".size-value span.active").css("background", $(this).attr("data-color"));
           $(".image img").attr("src", $(this).attr("data-img"));
           $(".btns button").css({
             "background": $(this).attr("data-color"),
             "border-color": $(this).attr("data-color")
           });
         });
      </script>
   </body>
</html>

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

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #456ABD;
  width: 100%;
  transition: background 0.3s ease;
}
.container{
  position: relative;
  height: 500px;
  width: 380px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 8px 0 rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.container:hover{
  box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);
}
.container .image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.container .image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}
.container:hover .image img{
  transform: scale(1.1);
}
.container .card-content{
  position: relative;
  height: 100%;
  width: 100%;
}
.card-content .wrapper{
  position: absolute;
  bottom: -100%;
  width: 100%;
  background: #fff;
  padding: 10px 25px;
  box-shadow: -1px -1px 6px rgba(0,0,0,0.1);
  transition: bottom 0.3s ease;
}
.container:hover .card-content .wrapper{
  bottom: 0px;
}
.wrapper .title{
  font-size: 22px;
  font-weight: 500;
}
.wrapper p{
  font-size: 17px;
  color: grey;
}
.wrapper .price{
  position: absolute;
  top: 10px;
  right: 30px;
  font-size: 23px;
  font-weight: 600;
  color: #456ABD;
}
.wrapper .content{
  margin: 10px 0;
}
.wrapper .content .name{
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 500;
}
.wrapper .content .size-value{
  width: 50%;
  display: flex;
  margin: 5px 0;
  justify-content: space-between;
}
.content .size-value span{
  display: block;
  height: 28px;
  width: 28px;
  text-align: center;
  line-height: 28px;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  color: #456ABD;
}
.content .size-value span.active{
  background: #456ABD;
  color: #fff;
}
.content .colour-value{
  width: 30%;
  display: flex;
  margin: 10px 0;
  justify-content: space-between;
}
.content .colour-value span{
  height: 18px;
  width: 18px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  position: relative;
}
.content .colour-value span.white{
  background: lightgrey;
}
.content .colour-value span.blue{
  background: #456ABD;
}
.content .colour-value span.yellow{
  background: #EAA523;
}
.content .colour-value span.active:after{
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: -4px;
  top: -4px;
  box-sizing: border-box;
  border: 2px solid #456ABD;
  border-radius: 50%;
}
.content .colour-value span.white.active:after{
  border-color: lightgrey;
}
.content .colour-value span.yellow.active:after{
  border-color: #EAA523;
}
.wrapper .btns{
  display: flex;
  height: 80px;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.wrapper .btns button{
  height: 40px;
  width: 100%;
  margin: 0 10px;
  border: 2px solid #456ABD;
  background: #456ABD;
  outline: none;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
}

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

 

]]> https://www.codingnepalweb.com/creative-product-card-ui-design-javascript/feed/ 10