Make an Analog Clock using HTML, CSS and JavaScript
In this article, you are going to learn how to make an analog clock using HTML, CSS, and JavaScript programming code. Earlier I shared with you the method of making…
How to Create a Simple Login Form Using HTML and CSS
In this article, I am going to show you how to create a simple login form using HTML, CSS, and Bootstrap programming code. Earlier I designed different types of login forms like Neumorphism, Glassmorphism. This login form is very simple and beautifully designed.
Basically in this case I have created this login form using HTML, CSS programming code. I designed it using CSS programming code and made it responsive with bootstrap programming. Everything here is like a normal login form. First of all, there is a place to give a profile image, I have used a title below it. Then there is a place to input the email ID and password to log in. In this case, of course, I used the icon in the email ID and password box. There is a forget password and login button. If you do not have an account, there is an option to create an account. All in all, it is a complete login design that you can easily create with HTML CSS and bootstrap code.
Build a Simple Digital Clock with JavaScript, HTML and CSS
In this article, I have shown you how to create a digital clock using HTML, CSS, and JavaScript programming code. If you are a beginner and want to know how to make a digital clock using JavaScript programming code, you can definitely find out from this article.
Earlier I made many more types of watches like analog, digital, etc. You can see those designs if you want. It is made very commonly. There are three types of time such as hour, minute, and second. Similarly here you can see three types of time.
Text Typing Animation Effect Using HTML, CSS, and JavaScript
Hello in this article I have shown you how to create text typing animation effects using HTML, CSS, and JavaScript programming code. I have already made another text typing animation…
#1 Amazing Professional Popup Login Form using HTML
Hello in this article you are going to learn about How to create a popup login form using HTML, CSS, and Bootstrap . I have designed another pop-up login form.…
How To Create An Image Slider Using HTML, CSS, and JavaScript
In this article, I will show you how to create an image slider using HTML, CSS, and JavaScript programming code. Image slider is a popular design that is used in…
Create an Analog Clock using HTML, CSS and JavaScript
In this article, you are going to learn how to make an analog clock using HTML, CSS, and JavaScript programming code. Earlier I showed how digital clocks are made using JavaScript programming code. You must have knowledge of basic HTML, CSS, and JavaScript.
If you are a beginner then you can understand the design of this watch. Here I have shown step by step how I made this design. It shows the exact time, that is, the clock will show the time according to the time on your device. Like a normal watch, three hands have been used here. To indicate an hour, to indicate a second minute, and a third to indicate a second. The background of this watch is arranged in the form of a Neumorphism design. Many people wonder how the hands work in the case of these digital watches. Let me tell you, JavaScript programming code is used to rotate these thorns. Each cut is rotated 360 degrees using the js code. That is, one end of the hand is fixed and the other end is rotated 360. The second hand rotates 360 degrees once per minute.
(more…)
Neumorphism Login Form UI Design Using HTML and CSS
Neumorphism login form is a modern design login form created using HTML and CSS code. Hello friends, in this article I will show you how to create a login form of Neumorphism design using only HTML and CSS programming code.
Login designs come in different types like transparent, Neumorphism, Glassmorphism, responsive, animated, etc. Earlier I showed you the design of many more types of login forms and showed you how I created those login forms. The login form of this design is much more beautiful and attractive than the general design. Like the general design, it has everything, i.e. there is a place to input the email ID and password to log in.
Everyone has a place to use their first profile image or website logo. There is a nice login button to login here and below it is the Facebook and Google buttons. In other words, the user will be able to login with the help of an email id or Facebook and Google account.
Neumorphism Login Form Using HTML and CSS
Hover effects have been added to each. Normally the buttons are slightly upwards but when the mouse is moved or clicked the buttons will move inwards. In the case of this neomorphic design, the background and the color of the background of the login form are completely the same.
However, it has been given the shape of a login form by creating a color effect with the help of CSS code.
See the Pen
Neumorphism login form by shantanu jana (@fghty)
on CodePen.
If you want to see the live demo, you can use the demo button at the bottom of the article. You can also download the required source code. However, if you are a beginner, you can definitely watch the tutorial below.
First of all, you create an HTML file. Then you copy the HTML structure below and paste it into that HTML file.
Step 1: Basic HTML structure of this login form
<!DOCTYPE html>
<html>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
@import url(‘https://fonts.googleapis.com/css2?family=Poppins&display=swap’);
*{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
}
html,body{
height: 100%;
}
</style>
</head>
<body>
<div class=”content”>
</div>
</body>
</html>
Step 2: Neumorphism structure with the help of CSS code
This structure has been converted to a Neumorphism design using the following programming code and given a size.
body{
display: grid;
place-items: center;
text-align: center;
background: #dde1e7;
}
.content{
width: 330px;
background: #dde1e7;
border-radius: 10px;
padding: 40px 30px;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(94, 104, 121, 0.288);
}
Result:
Step 3: Add a profile image to the login form
I created this logo or profile image using the following programming codes. I have also added titles here.
<img src=”https://lh3.googleusercontent.com/a-/AOh14Gj99VObFyE8W_h8RrcwZO_aYiIHu5AAa_XpnOym=s600-k-no-rp-mo”>
<div class=”text”>Foolish Developer</div>
.content img{
width: 90px;
height: 90px;
margin-top: -100px;
border-radius: 50px;
box-shadow:
0px 0px 2px #5f5f5f,
0px 0px 0px 5px #ecf0f3,
8px 8px 15px #a7aaaf,
-8px -8px 15px #ffffff
;
}
.content .text{
font-size: 25px;
font-weight: 600;
margin-bottom: 35px;
color: #000;
}
Result:
Step 4: Make a place to input email and password
I have used the following codes to create a place to input email ID and password. I used the CSS programming code below to design these and sort them into Neumorphism designs.
<div class=”field”>
<span class=”fa fa-user”></span>
<input type=”text” required>
<label>Email Id</label>
</div>
<div class=”field”>
<span class=”fa fa-lock”></span>
<input type=”password”>
<label>Password</label>
</div>
.content .field{
height: 50px;
width: 100%;
display: flex;
position: relative;
}
.field input{
height: 100%;
width: 100%;
padding-left: 45px;
font-size: 18px;
outline: none;
border: none;
color: #595959;
background: #dde1e7;
border-radius: 25px;
box-shadow: inset 2px 2px 5px #babecc,
inset -5px -5px 10px #ffffff73;
}
.field input:focus ~ label{
box-shadow: inset 2px 2px 5px #babecc,
inset -1px -1px 2px #ffffff73;
}
.field:nth-child(2){
margin-top: 20px;
}
.field span{
position: absolute;
width: 50px;
line-height: 50px;
color: #595959;
}
.field label{
position: absolute;
top: 50%;
left: 45px;
pointer-events: none;
color: #666666;
transform: translateY(-50%);
}
.field input:focus ~ label{
opacity: 0;
}
Result: (more…)
Responsive Footer Design using HTML, CSS & Bootstrap
In this article, I am going to show you how to create a footer design using HTML and CSS code. In the meantime, I have designed and shown many more types of footer sections. Hope you like this design too.
It is a complete professional footer design with all kinds of information neatly arranged. Footer credits have been added below. First of all, there is the option of About us where you can give some information about your service or yourself. Below that, I have used icons and links from five social media platforms. Next to it, contact information has been added.
Where address, email ID, and mobile number are given. Next to that are some links known as footer menus. There are pictures of some projects next to it. Here I have used six pictures. Below is a subscribe form to subscribe to. Where you can subscribe by adding a user name and email id.
I have used footer credits below all. Where you can use your own copyright. Next to it, I have used important links such as About Us, Contact Us, Privacy Policy, etc. It is a fully responsive design that can be used on any website. I used HTML and CSS code to design this footer design. I used bootstrap programming code to make it responsive.
Footer Design Using HTML, CSS, and Bootstrap
Below I show you the complete step-by-step how I made the design of this footer section. You can use the demo button below the article to watch the live demo. You can also download the source code using the download button.
If you want to see the complete process of making it step by step, follow the tutorial below. In this tutorial, I have described step by step the programming code that I used to create an element. This tutorial will show you exactly how to design a footer section.
Step 1: Basic structure for footer designs
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<title>Bootstrap Footer Template</title>
<meta content=“width=device-width, initial-scale=1.0” name=“viewport”>
<!– Libraries –>
<link href=“https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css” rel=“stylesheet”>
<link href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css” rel=“stylesheet”>
<!– Stylesheet –>
<link href=“css/footer-4.css” rel=“stylesheet”>
</head>
<body>
<!– Footer Start –>
<div class=“footer”>
<div class=“container”>
<div class=“row”>
<!–Footer About–>
<!–Contact Us–>
<!–Footer Link–>
<!–project Image–>
</div>
</div>
<!– Newswletter –>
<div class=“copyright”>
<div class=“container”>
<div class=“row align-items-center”>
<!–Copy Right–>
<!–Footer Menu–>
</div>
</div>
</div>
</div>
<!– Footer End –>
</body>
</html>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #ffffff;
}
a {
transition: .3s;
}
a:hover,
a:active,
a:focus {
outline: none;
text-decoration: none;
}
.footer {
position: relative;
padding-top: 45px;
background: #121518;
}
.footer .footer-about,
.footer .footer-contact,
.footer .footer-links,
.footer .footer-project {
position: relative;
margin-bottom: 45px;
color: #999999;
}
.footer .footer-about h3,
.footer .footer-contact h3,
.footer .footer-links h3,
.footer .footer-project h3 {
position: relative;
margin-bottom: 20px;
padding-bottom: 10px;
font-size: 20px;
font-weight: 600;
color: #eeeeee;
}
.footer .footer-about h3::after,
.footer .footer-contact h3::after,
.footer .footer-links h3::after,
.footer .footer-project h3::after {
position: absolute;
content: “”;
width: 50px;
height: 2px;
left: 0;
bottom: 0;
background: #eeeeee;
}
Result:
Step 2: Add about section
<div class=“col-md-6 col-lg-3”>
<div class=“footer-about”>
<h3>About Us</h3>
<p>
Lorem ipsum dolor sit amet elit. Quisque eu lectus a leo dictum nec non quam. Tortor eu placerat rhoncus, lorem quam iaculis felis, sed lacus neque id eros
</p>
<div class=“footer-social”>
<a href=“”><i class=“fab fa-twitter”></i></a>
<a href=“”><i class=“fab fa-facebook-f”></i></a>
<a href=“”><i class=“fab fa-youtube”></i></a>
<a href=“”><i class=“fab fa-instagram”></i></a>
<a href=“”><i class=“fab fa-linkedin-in”></i></a>
</div>
</div>
</div>
.footer .footer-social {
position: relative;
margin-top: 20px;
}
.footer .footer-social a {
text-align: center;
color: #999999;
font-size: 14px;
border: 1px solid #999999;
display: inline-block;
width: 35px;
height: 35px;
padding: 6px 0;
border-radius: 35px;
}
.footer .footer-social a:hover {
color: #ffffff;
background: #0085ff;
border-color: #0085ff;
}
Result:
Step 3: Add contact information
<div class=“col-md-6 col-lg-3”>
<div class=“footer-contact”>
<h3>Get In Touch</h3>
<p><i class=“fa fa-map-marker-alt”></i>123 Street, New York, USA</p>
<p><i class=“fa fa-phone-alt”></i>+012 345 67890</p>
<p><i class=“fa fa-envelope”></i>info@example.com</p>
<p><i class=“far fa-clock”></i>Mon – Fri, 9AM – 10PM</p>
</div>
</div>
.footer .footer-contact p {
margin-bottom: 10px;
font-size: 16px;
color: #999999;
}
.footer .footer-contact i {
margin-right: 10px;
font-size: 16px;
color: #999999;
}
.footer .footer-contact a:last-child i {
margin: 0;
}
.footer .footer-contact a:hover i {
color: #0085ff;
}
Result:
Step 4: Add important links to the footer section
<div class=“col-md-6 col-lg-3”>
<div class=“footer-links”>
<h3>Useful Links</h3>
<a href=“”>Lorem ipsum</a>
<a href=“”>tempus posuere </a>
<a href=“”>velit id accumsan</a>
<a href=“”>ut porttitor</a>
<a href=“”>Nam pretium</a>
<a href=“”>accumsan</a>
</div>
</div>
.footer .footer-links a {
margin-bottom: 6px;
padding-left: 15px;
color: #999999;
display: block;
}
.footer .footer-links a:last-child {
margin: 0;
}
.footer .footer-links a:hover {
color: #0085ff;
}
.footer .footer-links a::before {
position: absolute;
content: “\f105“;
font-family: “Font Awesome 5 Free”;
font-weight: 900;
left: 0;
}
Result:
Step 5: Add important projects and images
<div class=“col-md-6 col-lg-3”>
<div class=“footer-project”>
<h3>Latest Projects</h3>
<a href=“”><img src=“img/img-1.jpg” alt=“Image”></a>
<a href=“”><img src=“img/img-2.jpg” alt=“Image”></a>
<a href=“”><img src=“img/img-3.jpg” alt=“Image”></a>
<a href=“”><img src=“img/img-4.jpg” alt=“Image”></a>
<a href=“”><img src=“img/img-5.jpg” alt=“Image”></a>
<a href=“”><img src=“img/img-6.jpg” alt=“Image”></a>
</div>
</div>
.footer .footer-project {
float: left;
font-size: 0;
}
.footer .footer-project a {
padding: 0 8px 8px 0;
display: block;
width: 33.33%;
float: left;
}
.footer .footer-project a img {
width: 100%;
}
Result Code: (more…)
Responsive Our Team Section Using HTML, CSS and Bootstrap
Today I am going to show you how to create a Responsive Team section using only simple HTML and CSS programming code. Earlier I designed many more types of team sections. Hope you like this design.
The team section is a type of web element that you can use to introduce your team members to different types of service websites and portfolio websites. You can easily arrange all the identities of the significant people in your team or your company. I used HTML, CSS programming code to create this team section. I designed it using HTML code, I designed it using CSS code. I also made it responsive using bootstrap code. It is fully responsive which means you can use it for any type of device. So of course you can add it to your website. In this team section, I have used different hover color effects.
In this section, I have divided it into four columns. You can add more team member information here if you want. The hover effect has been used here, meaning that the color change can be seen by moving the mouse over the image of each team member.
How To Create Responsive Team Section Using HTML & CSS
In this article, I will try to show you in full step by step and with all the information how I made it. Here I have shown step by step which programming code is used to create an element. You can use the download button at the bottom of the article to download the source codes. Here is the bootstrap CDN link used which I have given below.
Add this link to the head section which will help you to make this team section responsive. Also here I have used font awesome’s icon CDN link. Icons have been created with it.