neumorphism - FoolishDeveloper

Popup Contact Form using HTML and CSS (Free Code)

Post author:Foolish Developer
Post published:March 2, 2022
Post category:Contact_From Contact_US css html HTML_Form neumorphism PopUp

In this article, you will learn how to create Popup Contact Form using HTML and CSS. Earlier I shared with you the tutorials of different types of Simple Contact Forms. However, this HTML Contact Form is a complete pop-up.

This means that under normal circumstances this form is hidden. A button is available. When you click on that button, you can see the complete contact form.

This type of form is used on various websites to save a lot of space. This Popup Contact Form is very easy to create if you have an idea about Basic HTML CSS. I didn’t use any javascript or jQuery here. Earlier I shared tutorials on a pop-up login form, popup registration forms, etc. You can see those designs.

Popup Contact Form Html

Below I have given a preview that will help you to know how this Popup Contact Form HTML CSS works. Below you will find tutorials and source codes. If you want to download the source code, use the download button at the bottom of the article.

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

As you can see above, the contact form is completely hidden. Instead, a small button is found inside the webpage. When you click on that popup button, you can see the complete contact form.

I used HTML’s checkbox to make this button work. So there is no need to use JavaScript here. There is a cancel button in the contact form which if clicked will hide the HTML Popup Contact Form.

How to create a popup contact form in HTML

The form has a heading used first and then there are three input boxes for input. The input boxes are for inputting names, emails, and messages, respectively. At the end of all, there is a submit button on which the messages can be sent by clicking.

I created this contact form according to the neomorphic design. I have already shared tutorials on many elements such as login form, analog clock, digital clock, etc. using Neumorphism. If you want to create this popup contact form then follow the tutorial below.

Step 1: Html code of contact form

Below is the HTML code needed to create this popup contact form. However, each code has given the required information so that you can understand which code I have used for which purpose.

First I created the button on the homepage then created an area of the contact form. That area has three input boxes, first the heading, the cancel button, and then the input. At the end of it all, I have a submit button.

<!–Popup button on the homepage–>

<label for=”click” class=”click-me”>Contact Us</label>

<!–popup login form area–>

<!–The heading of the login form–>

<h3>Contact Us</h3>

<!–Button to close the form–>

<!–Place to input the name–>

</div>

<!–Place to input the email–>

</div>

<!–Place to input the message–>

</div>

<!–Submit button–>

</div>

Step 2: Design the webpage with CSS (more…)

Neumorphism Login Form Tutorial for Beginner (2021)

CSS Neumorphism Login Form with HTML & CSS

Post author:Foolish Developer
Post published:September 25, 2021
Post category:css html neumorphism Neumorphism_Login_Form

Do you want to create a CSS Neumorphism Login Form? If your answer is yes then you will get your answer in this article. Here I am going to show…

How To Create a Popup Login Form using only CSS & HTML

Post author:Foolish Developer
Post published:September 18, 2021
Post category:css html login_form login_page neumorphism PopUp popup_login_form

In this article, I am going to show you how to create a pop-up login form using HTML and CSS. You must have seen different types of websites or applications…

Neumorphism Login Form using HTML & CSS

Post author:Foolish Developer
Post published:August 12, 2021
Post category:css For_Beginners html login_form login_page neumorphism

Neumorphism Login Form is much more interesting than other login designs. CSS Neumorphism Login Form You can easily create with HTML and CSS. In this article, I am going to show you how to create a Neumorphism login form using only HTML and CSS code. Earlier I made login form in many more designs.

We all know that the login form is a very important element of a website. This type of login form is used to access accounts on various websites. There are different types of login forms that I have already created. Neumorphism is a very important UI trend. This design is much simpler and much more interesting to look at than the general design.

Neumorphism All these elements are made by a single color in the case of login design. In this case, the element and the background of the web page are completely the same. The size of the element is determined here using only the shadow of the CSS code.

Video Tutorial of Neumorphism Login Form

You can watch the video below to know the complete tutorial on how I made this CSS Neumorphism login page.

Hopefully, you have learned how to make it from the video tutorial above. Everything here is like a normal login form.

In the case of Neumorphism design, the background color of the webpage and the background color of the element is the same. In that case, the shape of the element is created using the shadow (box-shadow) of CSS.

First of all, I used a profile image. This image is slightly above the login form, meaning that half of the image is inside the Neomorphism Login Form Design and the other half is outside the login form. Which looks much more interesting and beautiful to look at. Below that, I used a title. I used email ID and password input space to log in. I have used one icon for each input. Then there is a login button.

Normally the button rises slightly upwards. When you click on it, the button will move slightly inwards. I have used some text below everyone. All in all, it is a very simple CSS Neumorphism login form design.

Below I have given a live demo that will help you know how it works. Below you will find the required source code which you can copy and use for any of your own purposes. Also at the bottom of the article, I have given the download button to download the source code. But if you are a beginner then you must follow the tutorial below.

(more…)

Simple PopUp Login Form Using HTML and CSS

Post author:Foolish Developer
Post published:June 28, 2021
Post category:css html javascript login_form neumorphism PopUp popup_login_form

Learn how to create a pop-up login form using HTML, CSS, and JavaScript. The popup login form is a great modern UI design login form. In the meantime, I have…

Easy Simple Login and Registration Form Using HTML CSS

Post author:Foolish Developer
Post published:June 15, 2021
Post category:css html jquery login_form neumorphism Neumorphism_Login_Form

Neumorphism Login and Registration Form Using Html CSS & Jquery

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;
}

Create the basic structure of this login form

Step 2: Create a button to open the login and registration form (more…)

How To Create A Calculator Using HTML, CSS, and JavaScript

Post author:Foolish Developer
Post published:June 6, 2021
Post category:calculator css javascript neumorphism

display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
word-wrap: break-word;

line-height: 2em;}

h3{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;
color:#333131;
font-weight: 520;

-webkit-font-smoothing: antialiased;
}

h2{text-align: left;
font-family: Open Sans,Arial,sans-serif;
line-height: 1.7em;
color:black;

font-weight: 620;
-webkit-font-smoothing: antialiased;
}

.class {
background:#edf0f2;
font-family: Consolas,Monaco,Lucida Console,monospace;
line-height: 1.65;
word-wrap: break-word;
border-radius: 5px;
color:#001d8f;
font-size:17.1px;
padding-left:10px;
white-space: pre-wrap;}

button.last-btn{
padding:14px 29px;
font-size:17px;
background-color:#0e87f0;
border-radius:6px;
color:white;
font-family: Open Sans,Arial,sans-serif;
border:none;
margin-left:35%;

}

@media only screen and (max-width: 400px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 300px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 600px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}
@media only screen and (max-width: 800px) {
button.last-btn{
margin-left:0px;
margin-right:0px;
}
}

@media only screen and (max-width: 400px) {
.copyButton {
width: 45%;
}

In this article, I am going to show you how to make a JavaScript calculator very easily. Earlier I designed many more types of calculators using HTML CSS and JavaScript programming code. This design is basically made in the form of Neumorphism design.

Neumorphism is basically a very popular design currently used to create a variety of UI elements. If you want to learn how to make this design, you must have a basic idea about HTML, CSS, and JavaScript.

This type of design gives a 3d look to our website helps in creating a real and interactive enviornment for our calculator project.

Simple JavaScript Calculator

Here, the structure and buttons of this calculator are basically made using HTML programming code. The CSS code helped to transform it into a Neumorphism design. This calculator is enabled using JavaScript code.

I have shown step by step how I made this calculator. If you want to see the demo of it, I have added the demo of Codepen below. From here you can see the demo and download the required source code.

See the Pen
calculator 1 by Foolish Developer (@fghty)
on CodePen.

However, if you are a beginner, I request you to watch the tutorial and learn how to make it step by step.

Create A Calculator Using HTML, CSS, and JavaScript

To create it, first, you need to create an HTML and CSS file. Of course, you can attach the CSS file to the HTML file. Then copy the structure below and add it to the HTML file.

In the structure below I have given complete information on how you can add other codes to the file.

(more…)

Create an Analog Clock using HTML, CSS and JavaScript

Post author:Foolish Developer
Post published:June 6, 2021
Post category:analog_clock clock html javascript neumorphism p1

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

Post author:Foolish Developer
Post published:May 22, 2021
Post category:best Best_Login html html_login_form neumorphism Neumorphism_Login_Form p1

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>

<head>

<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>

</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.

<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.

<label>Email Id</label>

</div>

<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…)

How To Create Pop Up Login Form Using HTML and CSS

Post author:Foolish Developer
Post published:May 12, 2021
Post category:html html_login_form login_form login_page neumorphism PopUp popup_login_form

The pop-up login form is a modern type of login form design that is very popular nowadays. In the case of this type of design, the login form is completely…

CSS Neumorphism Login Form with HTML & CSS

Neumorphism Login Form using HTML & CSS

Video Tutorial of Neumorphism Login Form

Easy Simple Login and Registration Form Using HTML CSS

Simple Login and Registration Form HTML CSS

How to create login and registration form

Step 1: Create the basic structure of this login form

Step 2: Create a button to open the login and registration form (more…)

How To Create A Calculator Using HTML, CSS, and JavaScript

Simple JavaScript Calculator

Create A Calculator Using HTML, CSS, and JavaScript

Create an Analog Clock using HTML, CSS and JavaScript

(more…)

Neumorphism Login Form UI Design Using HTML and CSS

Neumorphism Login Form Using HTML and CSS

Step 1: Basic HTML structure of this login form

Step 2: Neumorphism structure with the help of CSS code

Step 3: Add a profile image to the login form

Step 4: Make a place to input email and password

Navigate

All Coding Handwritten Notes

Browse Handwritten Notes