Navigation Menu Bar Design Using HTML and CSS
Learn how to create a navigation menu bar using Html and CSS. The nav menu bar is found on almost all websites which enhances the quality of the website. Earlier…
Pure CSS Flip Card On Hover Using HTML & CSS
Learn how to make a flip card using Html and CSS code. Flip Card is a great UI design that you can create with the help of basic Html and CSS. The flip card basically helps to add a lot of information to a card. You can add some information on the front and back of this card.
As a result, this type of flip card is used to add a lot of information in one place. When you click on this card or move the mouse, the backside of this card will appear in front. The structure I have created in this article is basically a subscribe box and in this case, information related to a YouTube channel has been added. Under normal circumstances, I used the background red color on the front of this card and a youtube logo image.
The back of this design can be seen when you hover the mouse over the card. On the backside, I added the profile image, name, some information about that youtube channel. I have added a subscribe button with all this information. Clicking on it will subscribe to the channel.
See the Pen
Flip subscribe Card by Foolish Developer (@fghty)
on CodePen.
In the following tutorial, I have shared complete information for making this design. I have shared with you the method of making this flip card with all the information step by step. I hope you can learn how to make a flip card by following the tutorial below.
Step 1: Create the basic structure of the card
First of all, I have used the basic HTML structure below which has been used to create the front and back sites of the card.
The CSS code below has helped to design the front and backside of this card and add a variety of colors. On the front I used red and on the back I used white. Height: 13px and width: 26px have been used for this card.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
</style>
</head>
<body>
<div class=”card-wrap”>
<div class=”card”>
<div class=”card-front”>
<!– Card Fonts –>
</div>
<div class=”card-back”>
<!– card Back –>
</div>
</div>
</div>
</body>
</html>
@import url(‘https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&display=swap’);
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
height: 100vh;
justify-content: center;
font-family: ‘Cabin’, sans-serif;
background-image: linear-gradient(60deg, #66757F, #292F33);
display: flex;
align-items: center;
}
.card-wrap{
border-radius: 0.37rem;
perspective: 1000px;
height: 13.65rem; /* Card Height */
width: 27.15rem; /* card width */
}
.card{
height: inherit;
width: inherit;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.card-front,.card-back{
width: inherit;
backface-visibility: hidden;
position: absolute;
height: inherit;
border-radius: 0.37rem;
}
.card-front{
background-color: #d30404; / * Card front background color */
display: flex;
align-items: center;
justify-content: center;
}
.card-back{
background-color: #CCD6DD;
transform: rotateY(180deg);
}
The hover effect is used in the card as I said before. When you click on this card you will see the back of this card. For this, I have used a small amount of CSS code below which means that when you click on the top of the card the card will rotate at a 180-degree angle.
.card-wrap:hover .card{
transform: rotateY(180deg);
}
Step 2: Add an image to the front of the card
First of all, we have added the profile image on the front of this card i.e. YouTube logo with the help of our own HTML and CSS code.
<div class=”card-logo”>
<img src=”https://i.pinimg.com/originals/19/7b/36/197b365922d1ea3aa1a932ff9bbda4a6.png”/>
</div>
.card-logo img{
width: 290px;
}
Step 3: Add a profile image to the back of the card
Again we will design the back of this card i.e. we will add all the information on the back. As I said before I added a profile image and some information on the back. The following HTML and CSS code helped to create and design the profile image.
Box-shadow has been used to make this profile image more interesting. I have used a border radius of 50% in this case. The following HTML code helps to make the various information on the card and the subscribe button on the card to make this image completely round.
<div class=”user”>
<img src=”https://lh3.googleusercontent.com/a-/AOh14Gj99VObFyE8W_h8RrcwZO_aYiIHu5AAa_XpnOym=s600-k-no-rp-mo” alt=”user-profile-picture”>
</div>
.card-back .user img{
width: 35%;
float: left;
border-radius: 50%;
margin: 1.6rem 1.1rem;
box-shadow: 3px 3px 10px #66757F;
}
Step 4: Add profile information and buttons (more…)
Fullscreen Overlay Responsive Navigation Menu Using HTML & CSS
In this article, I am going to show you how to create a full-screen navigation menu bar. You can create a full-page menu bar using only HTML and CSS code. Earlier I have created many types of navigation menus such as site menu bar, top menu bar, responsive menu bar, etc. You can visit our new website Tecnoacquisti to know more about this.
Full-screen navigation is a kind of menu design where you can arrange the topics in your website or blog neatly. So that your user can easily find the topics. In most cases, the top menu bar can be noticed in most websites which is the most popular. But in some cases, this type of full skin menu bar is used which can be made very easily and simply.
In this case, there is a button on the homepage, which when clicked, the menu bar can be seen across the entire page. Hope you like this design.
See the Pen
fullpage menu 1 by Foolish Developer (@fghty)
on CodePen.
Hopefully looking at the design above you like this Full-screen Overlay Responsive Navigation menu. If you want to make it and want to know how I made this design then you can follow the tutorial below.
Below you can watch the video tutorial to know the complete step-by-step. Here you can find out which programming code has been used to create which element.
Awesome Animated Search bar using HTML & CSS
In this article, I am going to show you how to create an animated search bar using HTML and CSS code. The search bar is an important design that is used in every website. There are different types of search bars.
In some cases, the search bar is completely fixed, in some cases pop-ups, and in some cases animated. In the case of animated search bars, the icon is basically visible. When you click on that icon, the entire search bar is visible. The design I have shown in this tutorial is a complete animated search bar. Normally only icons are seen in this search bar. When you click on that icon, the full search box will appear and you will see the place to input.
In this case, I have basically used a small amount of JavaScript programming code. You can use the demo below to know how it works.
Simple Analog Clock using HTML, CSS and JavaScript
In this article, I will show you how to make an analog clock using HTML CSS and JavaScript programming code. Earlier I made many more types of analog and digital clocks with the help of JavaScript programming code. If you know basic CSS and JavaScript, you can easily create an analog clock.
This type of design is largely based on JavaScript programming code. The time that is seen in this case depends on the time of your device. As you can see in the picture above it is a rectangular analog clock. In this, I have added numbers from 1 to 12 which indicate time. Of these I have used three hands, one hand will indicate the time, one minute, and the other the second. I have designed each hand to be a different color. I have used an image to make the numbers that appear in the background.
If you want to add these numbers manually, you can see another analog watch design I made. Manually I added this number from 1 to 12 to the watch made in that article. Basically in the case of analog clocks, it will take the time of your device once then it will run at its own interval every second.
You can watch the demo below to know better.
See the Pen
analog clock 2 by shantanu jana (@fghty)
on CodePen.
Hopefully from the demo above you know how this digital clockworks. If you want to get the required source code on this watch, you can copy that source code from the section above.
Glassmorphism login form Design using HTML and CSS
In this article, You will learn how to create a Glassmorphism login form using HTML and CSS. I have shown many more types of login forms and Glassmorphism login forms…
How to Create a digital clock with date using JavaScript
In this article, you are going to learn how to make a digital clock using HTML, CSS, and JavaScript programming code. Earlier I shared with you many more types of analog and digital clock-making methods. In this article, I have shown you how to make a completely simple digital watch design.
There are basically two types of clock, an analog and a digital. Digital clocks are much easier to make than analog clocks. In this watch, I have added a date with time, not just time. That means together you will see time, date, month, date everything.
This design is based on JavaScript programming code. If you know the basic JavaScript programming code then you will definitely know how to make this design.
Simple Digital clock using Javascript [Live Demo]
If you want to know how it works then you can watch the live demo below. From below you can copy the required source code i.e. HTML, CSS, and JavaScript, and use it in your own work.
See the Pen
digital clock 2 by shantanu jana (@fghty)
on CodePen.
If you want to know how to make this digital with the help of video then you can follow the video tutorial below. This is a youtube video where I showed you step by step how I made this digital watch. We hope this tutorial helps you.
How to Create a digital clock using JavaScript
First of all, you create an HTML and CSS file. You can add CSS code to the Html file using style tags. In this case, I have used a very small amount of HTML and CSS code, so even if you do not create a separate file for the CSS code.
Step 1: Create the basic structure of the clock
The HTML programming code below is basically the basic HTML structure. You copy the following structure and paste it into your HTML file. The CSS codes below are mainly used to design the background of this digital watch. The CSS code below has helped to create and design the box you saw in the demo.
<div class=”time”>
</div>
body {
font-family: “Work Sans”, sans-serif;
margin-left: 50px;
margin-top: 150px;
background: rgb(230, 230, 230);
}
.time {
background: rgb(12, 12, 12);
color: #fff;
border: 7px solid rgb(255, 252, 252);
box-shadow: 0 2px 10px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
padding: 8px;
text-align: center;
width: 500px;
}
Step 2: Add time, am / pm, date options (more…)
Create Image Slider Using HTML, CSS, and javaScript
In this article, we are going to learn how to create a simple image slider using HTML, CSS, and JavaScript programming code.
Image sliders are now used for different tasks on different websites. This type of slider is mainly used on the homepage of the website or in the gallery within the website.
Using this type of CSS image slider you can arrange a large number of pictures neatly together. In any case, developers usually think of using different plugins or jQuery to create sliders.
If you want to create an image slider with simple JavaScript without using plugins or jQuery then this article will definitely help you.
Image Slider Using HTML CSS JavaScript
This is a very simple and beautiful image slider. In this case, I have used three images and used the left and right buttons to change them. I have used a border around the simple image slider which indicates the size of this slide well.
In this case, there is a place to give specific text for each image, which means you can add some information about that image.
If you want to see its live demo, you can see the demo below. From there you can copy the required source code and use it in your own project.
See the Pen
image slider 3 by shantanu jana (@fghty)
on CodePen.
If you want to get the required source code, you can download the required source code using the download button below the article.
How to Create Image Slider in HTML CSS
If you are a beginner and want to know how I made this design then you should definitely follow the tutorial below.
Below I have shown which programming code I have used to create any element of this design. This requires you to have knowledge of basic HTML CSS and JavaScript.
Step 1: Basic structure of the image slider
First of all, you have to create an HTML and CSS file. Then attach that CSS file to the HTML file.
Copy the HTML programming code below and paste it into the body section of your HTML file.
<div class=”carousel-container”>
<!–Nav Button(prev, next)–>
<div class=”carousel”>
<1–Image item–>
</div>
</div>
The code below is the basic design of the image slider. The following CSS codes have been used to design the background of this slider.
body{
background-color: rgb(58, 58, 58);
margin-top: 100px;
}
.carousel-container {
width: 600px;
height: 400px;
position: relative;
margin: 0 auto;
}
Step 2: Add two buttons to change the image
If you have seen the demo above, you will understand that I have used two buttons to change the images in this slider. The HTML and CSS code below helped to create and design that button.
<div class=”navigation”>
<div class=”prev nav-btn”><</div>
<div class=”next nav-btn”>></div>
</div>
.navigation .prev { position: absolute; z-index: 10; font-size: 25px;
top: 40%;
left: 10px;
font-weight: 700;
}
.navigation .next {
right: 10px;
position: absolute;
font-size: 25px;
z-index: 10;
top: 40%;
}
.navigation .nav-btn {
background: rgba(255, 255, 255, 0.55);
cursor: pointer;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}
.navigation .nav-btn:hover {
background: white;
}
Step 3: Add images to the slider using Html code (more…)
Sidebar Menu Using HTML, CSS & JavaScript
In this article, you will learn how to create sidebar menus using HTML, CSS, and JavaScript programming code. I have designed many more sidebar menus before. Hope you like these sidebar menus like those designs.
In this case, I have used HTML to build and CSS programming code to design. In this case, a small amount of JavaScript has been used to activate the menu button. If you want to create a sidebar menu without JavaScript programming code, you can see the other designs I made. Clicking on the menu button here will hide the entire menu bar.
When you click on that button again, the full menu bar will appear. This sidebar menu is designed in a modern way and has everything you need to make a sidebar beautiful and attractive.
Sidebar Menu Using HTML CSS JavaScript
First of all, here I used a profile image. Below that is a place to give names and descriptions. Below that, I have added many menu items here. I added icons to each menu item. Adding icons makes menu items look more beautiful and attractive.
If you want, you can change these menu items to your liking. Here in the background, I have used blue color(background: rgb(5, 68, 104);) and added a hover color effect on menu items. The icons will change the background when you hover or click on the menu items. The sidebar menu is a very simple and simple design that you can undoubtedly learn to make very easily.
If you want to see a live demo of this structure, you can see the demo section below. You can also copy the required source code from there and use it for your own purposes.
See the Pen
side bar menu by shantanu jana (@fghty)
on CodePen.
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;
}
