5 Star Rating System Using HTML and CSS

5 Star Rating System Using HTML and CSS (Free Code)

5 Star Rating System Using HTML and CSS

If you want to create a five-star rating system using HTML and CSS then this tutorial will help you completely. Here I have shared with you the design of a star rating system using HTML and CSS. 5 Star Rating System You will see in different places. 

This type of system is widely used in the case of product or service websites. Where the user can give the rating of his choice about the quality of the product and service. This 5 Star Rating System will help other users to understand the quality of the product.

5 Star Rating HTML CSS

The design of the 5-star rating that I have shared with you here is absolutely simple. Only HTML and CSS are used for this. I added an emoji with the star rating. Emoji will vary according to the quality of your rating when you input the value of the rating.

Below is a demo that will help you know how this five-star rating works. Below you will find the complete source code related to this design.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see, first a small area was created on the webpage. There are five stars here. The stars are created by the input function of HTML. 

Under normal circumstances, the stars have a white background, and a border is used around them. When you mouse over or click on those stars, the background of the stars will turn yellow.

How to Create 5 Star Rating Using HTML CSS

Here is an emoji that will change the shape of your face depending on the number of stars you input. You can use any other emoji in this place if you want. I’ve shared step-by-step how to use another emoji. 

If you only want the source code, you can use the download button below the article. However, I have shared the complete tutorial of this 5 Star Rating System for beginners. 

To build this five-star rating system you need to have a basic idea about HTML and CSS.

Step 1: Html code of star rating

Below I have given all the HTML codes that are required for this star rating. The first five radio buttons were created. These radio buttons are created using the input function of HTML. 

A place to show an emoji at the end of it all. As you can see, the emoji will vary depending on the star you input.

<div class=”rating”>
<!–Input box for making star –>
   <input type=”radio” name=”star”/><span class=”star”> </span>
   <input type=”radio” name=”star”/><span class=”star”> </span>
   <input type=”radio” name=”star”/><span class=”star”> </span>
   <input type=”radio” name=”star”/><span class=”star”> </span>
   <input type=”radio” name=”star”/><span class=”star”> </span>
<!–To view emoji–>
   <span class=”emo”> </span>
</div>

The webpage has been designed using the following CSS codes and more than this CSS 5 Star Rating System. Its width is 256px and the background color is white.

body {
background: #2c7dd9;
}
.rating {
width: 265px;
padding: 10px;
background: rgb(255, 255, 255);
margin: 200px auto 0;
position: relative;
direction: rtl;
}
Html code of star rating

Step 2: Design the input boxes (more…)

Continue Reading5 Star Rating System Using HTML and CSS (Free Code)
How To Make an Animated Search Bar using HTML CSS

How To Make an Animated Search Bar using HTML CSS

How To Make an Animated Search Bar using HTML CSS

If you want to create an Animated Search Bar using HTML and CSS then this tutorial will help you. Here I have shared a tutorial on creating a simple animated search icon.

Search Bar is an important element for different websites. Currently, the search bar is used on all websites. There are different types of search bars, some search bars are completely fixed, some are animated, some are pop-ups, etc.

The design I have shown in this tutorial is an animated search bar. In this case, only one icon can be found, not the entire search bar. The input box appears when you click on that icon. Most websites use this type of Animated Search Bar. Which enhances the quality of the website and saves space.

Animated Search Bar

Below I have given a demo that will help you to know how this Animated Search Bar works. Below you will find the required source code that you can copy directly and use in your work.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, a small area has been created on a web page. He has a search icon. When you click on that icon or button, the icon will move to the right and a space will be created on the left. An input box will be created where you can input the keyword of your choice.

How To Make an Animated Search Bar 

In this case, I have used HTML, CSS, and a small amount of jQuery. All information and search icons have been added by HTML. CSS designed it. Only some jQuery has been used to make it work.

This Animated Search Bar is very easy to create. If you have a basic idea about HTML CSS then you can easily create this Animated Search Bar. Earlier I shared with you many more types of CSS search bar tutorials.

Step 1: Basic structure of Search Bar

Created an area of ​​this animated search bar using the following HTML and CSS codes. This is basically the basic structure of the search bar.

<div class=”wrapper”>
  <div class=”searchbox”>
  </div>
</div>

The webpage has been designed using the following CSS. Here I have used light blue as the background color of the webpage.

*{
margin: 0;
padding: 0;
}
body{
background: #e4eaf0;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.searchbox{
position: relative;
}

Step 2: Place to input in the Search Bar (more…)

Continue ReadingHow To Make an Animated Search Bar using HTML CSS
Simple FAQ Section using HTML, CSS & JavaScript

Simple FAQ Section using HTML, CSS & JavaScript

Simple FAQ Section using HTML, CSS & JavaScript

In this article, I have shown you how to create a Simple FAQ Section using HTML CSS, and JavaScript. Earlier I shared with you the design of many more types of FAQ Accordion Section. This design has been created by Jquery. 

Here HTML and CSS are used for design and JQuery for implementation. The jQuery used here is absolutely simple you will understand very easily. HTML FAQ Section We see on different websites. 

We see this type of Accordion Section for many types of business, service, personal websites. Where some common questions and answers about the service or product are given in advance. So that it is not difficult to know the necessary information of the customer or user. 

FAQ Accordion HTML CSS

The design I have used here is absolutely responsive and ready. You can use it directly on your website. It is made of finished color flowers which further enhances the beauty. 

Four headings have been used here and information about it has been used. Which used HTML CSS to design and JQuery to implement. Below I have given a live preview that will help you to know how this FAQ Accordion Section works.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see above, this is a simple FAQ section that has four headings. There is a lot more information in those four headings. You can add many more headings of your choice here if you want. 

The background color of the headings in blue. When you click on it, an area will be created below it where more information can be found.

How to Create FAQ Accordion Section

To create this JavaScript FAQ Section you need to have a basic idea about HTML CSS and JavaScript. First, you create an HTML and CSS file. Even if you don’t create a javascript file here. You can add those JavaScript directly to the HTML file. 

I have not shared any tutorial here. I have already shared many such tutorials. So here I have just given the source code which you will copy and use in your work.

HTML Code ( index.html ):

The following code is the HTML code used to create this FAQ Section HTML CSS. Contains all types of text and information. You copy them directly and add them to your HTML file. Four headings and their information have been added here.

<!DOCTYPE html>
<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>Document</title>
  <link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>
  <link href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” rel=“stylesheet”>
  <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js” charset=“utf-8”></script>
  <!– CSS file –>
  <link rel=“stylesheet” href=“style.css”>
</head>
<body>
   <section id=“faq”>
    <div class=“container faq”>
      <div class=“container”>
        <div class=“row”>
          <div class=“col-sm-12”>
            <div class=“accordions”>
              <!– 1st accordion menu –>
              <div class=“accordion-item”>
                <div class=“accordion-title” data-tab=“item4”>
                  <h3>Free DDOS Protection <i class=“fa fa-chevron-down”></i></h3>
                </div>
                <div class=“accordion-content” id=“item4”>
                  <p>
                    Unlike other providers who charge extra for DDoS protection, All of our VPS
                    servers comes
                  </p>
                </div>
              </div>
              <!– 2nd accordion menu –>
              <div class=“accordion-item”>
                <div class=“accordion-title” data-tab=“item2”>
                  <h3>What is Windows VPS? <i class=“fa fa-chevron-down”></i></h3>
                </div>
                <div class=“accordion-content” id=“item2”>
                  <p>
                    With a Windows VPS server, you will get a Remote Desktop connection within a few
                    minutes. You can run Windows applications such as IIS, SQL, Microsoft Exchange
                    or any software like Docking,
                  </p>
                </div>
              </div>
              <!– 3rd accordion menu –>
              <div class=“accordion-item”>
                <div class=“accordion-title” data-tab=“item3”>
                  <h3>Payment Options <i class=“fa fa-chevron-down”></i></h3>
                </div>
                <div class=“accordion-content” id=“item3”>
                  <p>
                    Unlike most other providers you don’t have to pay with just Credit Card or
                    PayPal. You can also
                  </p>
                </div>
              </div>
              <!– 4th accordion menu –>
              <div class=“accordion-item”>
                <div class=“accordion-title” data-tab=“item1”>
                  <h3>Why FutureRDP? <i class=“fa fa-chevron-down”></i></h3>
                </div>
                <div class=“accordion-content” id=“item1”>
                  <p>
                    Germany, Netherlands, and Canada. We have a range
                    of different solutions for different purposes such as SSD VPS and Storage
                    servers. All servers are equipped with RAID10 only SSD drives and FREE DDoS
                    Protection!
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!– JavaScript–>
  <!–
    <script>
      Add javascript code
    </script>  
  –>
</body>
</html>

CSS Code ( style.css ):

The following codes are the CSS codes used to design it. Above we have added all the information using HTML code. Now all this information has been designed by CSS code. 

You copy the code and add it to your CSS file. Rename your CSS file to style.css. I have already attached the CSS file to the HTML file.

(more…)

Continue ReadingSimple FAQ Section using HTML, CSS & JavaScript