Amazing Star Rating Design In HTML and CSS | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made a Simple Modal box with the help of HTML and CSS😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this amazing modal step by step.
Before starting the blog, you might think about where you can use this project in real-life-based projects. So it's modal and you can use it on your website as an alert or warning. You can also use this as a login or signup modal it will look awesome.
Let's start making this star rating step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
In HTML we have made a div for the container for the box that will appear when the button will be clicked.
<div class="container">
<div class="interior">
<a class="btn" href="#open-modal">😎 Open Modal </a>
</div>
</div>
<div id="open-modal" class="modal-window">
<div>
<a href="#" title="Close" class="modal-close">x</a>
<h1>Hey Everyone!</h1>
<div>This modal is made up of html and css only! follow us for more amazing content like this one.</div>
</div>
</div>
After the HTML we will design the container and stars and will make an amazing design.
Output till now
 |
| the output of HTML only |
CSS🎈( step - 2)
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
body {
font-family: poppins;
background: linear-gradient(147.3deg, #6FFFC2 0.86%, rgba(57, 218, 218, 0.93) 54.63%, rgba(29, 142, 142, 0.93) 99.57%);
color: black;
}
a{
color: #000;
}
.modal-window {
position: fixed;
background-color: rgba(0, 0, 0, 0.25);
inset: 0;
z-index: 99999;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
}
.modal-window:target {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.modal-window > div {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 2.2em;
background: #fff;
border-radius: 1rem;
}
.modal-window header {
font-weight: bold;
}
.modal-window h1 {
font-size: 151%;
margin: 0 0 15px;
}
.modal-close {
color: #aaa;
line-height: 50px;
font-size: 80%;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 70px;
text-decoration: none;
}
.modal-close:hover {
color: black;
}
html,
body {
height: 100%;
}
.container {
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
}
.modal-window > div {
border-radius: 1rem;
}
.modal-window div:not(:last-of-type) {
margin-bottom: 18px;
}
.btn {
background-color: white;
padding: 1em;
border-radius: 1.3rem;
text-decoration: none;
transition: .3s all;
border: 3px solid transparent;
}
.btn:hover{
background: #fcfcfc;
border: 3px solid gray;
}
Now we have done the CSS coding as well, now we will see the final output and also check the codepen link mentioned below.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.