Create A Custom Video Player using JavaScript & HTML
In this article, you will learn how to create a custom video player using HTML CSS, and JavaScript. Many times it is necessary to use a video player on the…
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.
Show and Hide Password Using jQuery and CSS
Show and Hide Password A JavaScript project helps to see and hide passwords in the input field. This article will help you to know how to show and hide passwords using jQuery. When we input a password into an input box, it appears as a bullet. As a result, those passwords can be easily protected from hackers.
The “Show and Hide Password” option is very important in case the user wants to see the password. This will allow the user to easily see the password in the input field.
When we use type = “password” in an input field, the characters input in that input box will appear as bullets. When type = “text” of input is used then the passwords will be converted to text and we will see.
There is a small button in the input box that can be clicked to see the password. In general, input type = “password”. Type = “text” of the input will be converted when that button is clicked.
How to Show and Hide Password Using jQuery
This article will help you to know how to create password Show and Hide using JQuery. Very little JQuery has been used here. JQuery is an external JavaScript library. I took the help of HTML CSS JavaScript to create this project.
First, we created and designed the input field using HTML and CSS. Then he implemented it with the help of Jquery. First, we created a box on the webpage on which we created an area for input. There is a small button in the input box that will help to show and hide the password.
See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.
Hope the above demo has helped you to know how to create this JavaScript Show and Hide Password project. As I said before, I took the help of Jquery to make this project. So you must include the JQuery CDN link in your HTML file.
Step 1: Basic structure of Show and Hide Password
The basic design of this password input box is created using the following HTML and CSS codes. Here I first made a box on the webpage using the background color green.
I used white as the background color of the box and width: 320px. Along with this, a shadow has been used around the box which enhances the beauty.
<div class=”input__item”>
</div>
body {
background: rgb(41, 140, 140);
}
* {
box-sizing: border-box;
}
.input__item {
background: #fff;
box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.3);
margin: 140px auto;
padding: 1rem;
width: 320px;
}
Step 2: Create a place to input the password (more…)
Email Subscription Form using HTML & CSS
In this article, you will learn how to create an Email Subscription Form using HTML CSS, and JavaScript. The newsletter subscription form is an important and widely used project. It helps the website user to connect with that website.
Using this form the user will be able to subscribe to the website with his email id. The user will be notified whenever some content is updated and uploaded to the website.
Although I haven’t seen this system work here. Here only I have designed HTML CSS with the help of JavaScript. This is basically a pop-up subscriber form.
A small button can be found instead. When the user clicks on that button, the complete design can be seen. There is a cancel button in this form which if clicked will hide this form again.
Newsletter Subscription Form HTML CSS
The first of the newsletter subscription form HTML has a cancel button. It has a small logo on it. Here you can use your own website logo.
See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.
Then there is some text and some headings. Below that is a place to input an email ID. Below everyone is a button to subscribe. Below I have shared the complete step-by-step tutorial.
Step 1: Create a popup button
I created a button at the top of the web page using the HTML and CSS codes below. The form can be seen by clicking on it. I have added the necessary information using the following HTML.
<div class=”start-btn”>
<a href=”#”>Subscribe</a>
</div>
I have designed the web page using the following codes.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
text-align: center;
background: #048bd9;
font-family: ‘Poppins’,sans-serif;
}
Now the following codes have helped to design this button. I have used the background color white and the text color black. I have used font-size: 22px to increase the text size a bit.
.center,.start-btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.start-btn a{
font-size: 22px;
background: white;
color: #02242b;
padding: 15px 18px;
border-radius: 5px;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
}
Step 2: Basic structure of Email Subscription Form
Now I have created the basic structure of the subscription form. Box width: 400px is used and background color is white. I have used opacity: 0 and visibility: hidden to hide this form in its normal state.
Finally, we used opacity: 1 and visibility: visible in the ‘show-modal’ tag. Later I connected this ‘show-modal’ to the form with the help of JavaScript.
<div class=”center modal-box”>
</div>
.modal-box{
top: 40%;
opacity: 0;
visibility: hidden;
background: white;
height: auto;
width: 400px;
padding: 38px 30px;
border-radius: 5px;
box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
.start-btn.show-modal{
opacity: 0;
visibility: hidden;
}
.modal-box.show-modal{
top: 50%;
opacity: 1;
visibility: visible;
transition: .4s;
}
Step 3: Cancel button in Email Newsletter (more…)
Glowing Digital Clock Using HTML, CSS & JavaScript
In this article, you will learn how to make a digital clock with the help of HTML CSS, and JavaScript programming code. In a previous article, I showed you how…
Easy Simple Login and Registration Form Using HTML CSS
In this article, I am going to show you how to create a simple login and registration form of Neumorphism design using HTML, CSS, and Jquery code. Earlier I shared with you the design of many more types of login forms. Hope you like this design login form like other designs.
Basically different forms are created for login and registration on different websites. In the meantime, I have shown you how to create a separate login and registration form. In this article, I have created a place for simple log in and registration in a form.
This form allows the user to log in and creates a new account. I used HTML and CSS programming code to design to enhance its structure. A small amount of JQuery programming code is used here to execute the login and registration button above.
I have added social media icon in the login form. This login form is arranged in the form of a Neumorphism design.
Simple Login and Registration Form HTML CSS
If you want to know how it works, you can watch the demo below. You can copy the source code needed to create it from the demo site below and use it for your work.
But if you are a beginner and want to know how to create a login and registration form at the same time, you must follow the tutorial below. In the tutorial below I have shown step by step how I made this design. After each step, I have shown the result so it will be useful for you to understand.
See the Pen
login & sign by Foolish Developer (@fghty)
on CodePen.
First, you create an HTML and CSS file. Then combine the HTML file and the CSS file with each other. You add the JQuery plugin here.
How to create login and registration form
Basically, we know that the JQuery programming code works with the JQuery plugin. So you must add the following JQuery plugin in the head section of your HTML file.
<script src=”https://code.jquery.com/jquery-3.6.0.js”></script>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
Step 1:Â Create the basic structure of this login form
The HTML programming code below is basically the basic structure for creating this registration form. You can copy this structure and add it to your HTML file.
<div class="wrapper">
<div class="container">
<!--tabs(menu)-->
</div>
</div>Basically, the following codes have helped to design the background of this login form and give a certain size to this login form. As I said before, Neumorphism design has been used in this form. CSS programming code has been used to enhance this design.
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body{
background: #dde1e7;
}
.wrapper{
max-width: 400px;
width: 100%;
height: 420px;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
background: #dde1e7;
box-shadow: -3px -3px 7px #ffffff73, 2px 2px 5px rgba(94, 104, 121, 0.288);
}
.container{
padding: 35px 40px;
}
