Are you looking to create a modern website using React? In this step-by-step tutorial, you’ll learn how to set up your development environment, and we will learn How To Create A Modern Website Using React Js .creating a new React project, and build a sleek website using React components and libraries. From installing Node.js and selecting a text editor to coding custom components and using popular libraries like React Router and Bootstrap, this tutorial covers everything you need to know to create a professional-looking website. Whether you’re a beginner or an experienced developer, this guide will help you take your web development skills to the next level. Follow along and create your own stunning website today!. Be ready of a tutorial How To Make Website a modern website using React | Create Website Header Design
App.js
Let’s start by creating an app.js file and writing all the HTML elements.Let’s begin by creating the website’s skeleton using simple HTML. The navbar must come first, followed by the header and finally the picture section of the website. You may use the code below to
import "./App.css";
function App() {
return (
<div className="container">
<nav>
<img src="images/logo.png" className="logo" alt="imaged" />
<ul>
<li>
<a href="www.ziontutorial.com">Traval Guide</a>
</li>
<li>
<a href="www.ziontutorial.com">Famous Places</a>
</li>
<li>
<a href="www.ziontutorial.com">Contact Us</a>
</li>
</ul>
<button className="btn">
<img src="images/icon.png" alt="icon" /> Bookings
</button>
</nav>
<div className="content">
<h1>
Beautiful
<br />
Places to explore
</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book.
</p>
<form>
<input type="text" placeholder="Country Name" />
<button type="submit" className="btn">
Search
</button>
</form>
</div>
<p></p>
</div>
);
}
export default App;
Let’s write all the CSS and the landing page which will make this landing page very beautiful.
App.css
Let’s create a really simple CSS style for our header portion. As I mentioned in the previous section, we generated the navbar, header text, and header picture using HTML. Now that we have these components, let’s add some CSS to our skeleton to make the header seem lovely. I’ve listed all the code necessary to construct our header below. You may check this out and experiment with these values to see what happens.
Create Responsive Gym Website Using HTML CSS JavaScript
Hello to Everyone. In this article, you will learn how to create Responsive Gym Website Using HTML CSS JavaScript. You will be able to create your own website at the end of this article since we will start from scratch with this project and teach you every HTML, CSS, and JavaScript concept.
Being physically and mentally fit is necessary for a happy and long life. Exercise Is One Of The Best Ways To Keep Your Health In Check. So, regardless of how busy you are, finding a workout routine is always recommended. Because diseases are so prevalent today, more people are now aware of the benefits of exercise. The Best Exercise Program Will Particularly Improve A Person’s Physical, Mental, And Social Well-Being.
Responsive Gym Website Using HTML, CSS & JavaScript
I Wish You Were Generally Aware Of What The Project Involves. We’ll walk you through this project step by step in our article.
Step1: Adding HTML Markup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--=============== FAVICON ===============-->
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
<!--=============== BOXICONS ===============-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<!--=============== SWIPER CSS ===============-->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<!--=============== CSS ===============-->
<link rel="stylesheet" href="assets/css/styles.css">
<title>Gym management system</title>
</head>
<body>
<!--==================== HEADER ====================-->
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav__logo">
<img src="assets/img/Dumbell_03.png" alt="" class="nav__logo-img">
Gym Managment
</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active-link">Home</a>
</li>
<li class="nav__item">
<a href="#weoffer" class="nav__link">We offer</a>
</li>
<li class="nav__item">
<a href="#about" class="nav__link">Payroll</a>
</li>
<li class="nav__item">
<a href="#features" class="nav__link">Membership</a>
</li>
<a href="#" class="button button--ghost">Support</a>
</ul>
<div class="nav__close" id="nav-close">
<i class='bx bx-x'></i>
</div>
<img src="assets/img/nav-img.png" alt="" class="nav__img">
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-grid-alt'></i>
</div>
</nav>
</header>
<main class="main">
<!--==================== HOME ====================-->
<section class="home container" id="home">
<div class="swiper home-swiper">
<div class="swiper-wrapper">
<!-- HOME SLIDER 1 -->
<section class="swiper-slide">
<div class="home__content grid">
<div class="home__group">
<img src="assets/img/home1-img.png" alt="" class="home__img">
</div>
<div class="home__data">
<h1 class="home__title">Esmart <br> Fitness <br> Solution</h1>
<p class="home__description">A top gym management software solution to simplify managing your gym.With dedicated mobile apps for trainers and members, administer workouts schedules & diet plans and many more activities effectively.
</p>
<div class="home__buttons">
<a href="#" class="button">Book Now</a>
</div>
</div>
</div>
</section>
<!-- HOME SLIDER 2 -->
<section class="swiper-slide">
<div class="home__content grid">
<div class="home__group">
<img src="assets/img/home2-img.png" alt="" class="home__img">
</div>
<div class="home__data">
<h1 class="home__title">Makes <br>your GYM Smarter!</h1>
<p class="home__description">Adino steals cotton candy from his brother and eats them all in one bite,
a hungry beast. Grahami can no longer contain his anger towards Adino.
</p>
<div class="home__buttons">
<a href="#" class="button">Book Now</a>
</div>
</div>
</div>
</section>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<!--==================== CATEGORY ====================-->
<section class="section category " id="weoffer">
<h2 class="section__title">WE OFFERS </h2>
<div class="category__container container grid">
<div class="category__data">
<img src="assets/img/Gym Bottle_01.png" alt="" class="category__img">
<h3 class="category__title">Enquiry Management</h3>
<p class="category__description">will reveal lots of paper work burden, makes enquiry process easier and more faster.</p>
</div>
<div class="category__data">
<img src="assets/img/Dumbell_01.png" alt="" class="category__img">
<h3 class="category__title">Membership Management</h3>
<p class="category__description">Each member have their own set of measurement, membership</p>
</div>
<div class="category__data">
<img src="assets/img/Kettlebell_01.png" alt="" class="category__img">
<h3 class="category__title">Workout Management</h3>
<p class="category__description">e-SmartFitness optimizes your users to track record of their workouts with help of quick access features </p>
</div>
</div>
</section>
<!--==================== ABOUT ====================-->
<section class="section about" id="about">
<div class="about__container container grid">
<div class="about__data">
<h2 class="section__title about__title">Payroll Management</h2>
<p class="about__description">Using Payroll management you can easily manage staff salary, shift assignment, advance salary, and many more features makes your software more handy.
</p>
<a href="#" class="button">Know more</a>
</div>
<img src="assets/img/Weight machine_03.png" alt="" class="about__img">
</div>
</section>
<!--==================== Payroll ====================-->
<section class="section features" id="features">
<div class="about__container container grid">
<img src="assets/img/Kettlebell_01.png" alt="" class="about__img">
<div class="about__data">
<h2 class="section__title about__title">Membership Management</h2>
<p class="about__description">Each member have their own set of measurement, membership and task details. Manage Financial accounts by enrolling member to a membership plan.
</p>
<a href="#" class="button">Know more</a>
</div>
</div>
</section>
<!--==================== DISCOUNT ====================-->
<section class="section discount">
<div class="discount__container container grid">
<div class="discount__data">
<h2 class="discount__title">20% Discount <br> For new Membership</h2>
<a href="#" class="button">Go to new</a>
</div>
<img src="assets/img/Dumbell_03.png" alt="" class="discount__img">
</div>
</section>
<!--==================== OUR NEWSLETTER ====================-->
<section class="section newsletter">
<div class="newsletter__container container">
<h2 class="section__title">Our Newsletter</h2>
<p class="newsletter__description">
Promotion new products and sales. Directly to your inbox
</p>
<form action="" class="newsletter__form">
<input type="text" placeholder="Enter your email" class="newsletter__input">
<button class="button">
Subscribe
</button>
</form>
</div>
</section>
</main>
<!--==================== FOOTER ====================-->
<footer class="footer section">
<div class="footer__container container grid">
<div class="footer__content">
<a href="#" class="footer__logo">
Gymmanagment System
</a>
<p class="footer__description">Enjoy the our Services</p>
<div class="footer__social">
<a href="https://www.facebook.com/" target="_blank" class="footer__social-link">
<i class='bx bxl-facebook'></i>
</a>
<a href="https://www.instagram.com/" target="_blank" class="footer__social-link">
<i class='bx bxl-instagram-alt' ></i>
</a>
<a href="https://twitter.com/" target="_blank" class="footer__social-link">
<i class='bx bxl-twitter' ></i>
</a>
</div>
</div>
<div class="footer__content">
<h3 class="footer__title">About</h3>
<ul class="footer__links">
<li>
<a href="#" class="footer__link">We offer</a>
</li>
</ul>
</div>
<div class="footer__content">
<h3 class="footer__title">Our Services</h3>
<ul class="footer__links">
<li>
<a href="#" class="footer__link">Payroll</a>
</li>
</ul>
</div>
<div class="footer__content">
<h3 class="footer__title">Our Company</h3>
<ul class="footer__links">
<li>
<a href="#" class="footer__link">Membership</a>
</li>
</ul>
</div>
</div>
<span class="footer__copy">© All rigths reserved</span>
<img src="assets/img/Handgrip_01.png" alt="" class="footer__img-one">
<img src="assets/img/Handgrip_01.png" alt="" class="footer__img-two">
</footer>
<!--=============== SCROLL UP ===============-->
<a href="#" class="scrollup" id="scroll-up">
<i class='bx bx-up-arrow-alt scrollup__icon'></i>
</a>
<!--=============== SCROLL REVEAL ===============-->
<script src="assets/js/scrollreveal.min.js"></script>
<!--=============== SWIPER JS ===============-->
<script src="assets/js/swiper-bundle.min.js"></script>
<!--=============== MAIN JS ===============-->
<script src="assets/js/main.js"></script>
</body>
</html>
Building Navigation Bar
To add a navigation bar to our website, first create a div with the class “Menu,” and inside of that, use the img> tag to add our logo to the left side of the navbar. Finally, inside of that, use the nav> tag to add various menu items to the navbar. In order to make it easier for visitors to navigate our website using the navbar, we will create a link to all of the menu items inside the navbar.
Building Header Section
We will use the Tag to insert the primary heading for our gym website now that we have added a header section using the Header Tag. Next, we’ll use the paragraph tag to add a succinct description of our website and anchor -based Get Started Now button. We Will Also Include An Image To Enhance The Visual Appeal Of Our Header.
Body Section :
We will now include sub-parts in our body section like the feature, explore, and trainer sections. We will now build those various sections using the div element with various classes, the p tag to add some text, and the img tag to add images to our website. I Suggest Using More And More Visuals To Make Your Website Appear More Attractive. Simply taking a quick look at our structure might give you an idea, and you should work to use your own creativity to improve the website.
Building Footer Section
We Will Build A Footer Section With The Footer Tag And A Div> Section With the tag. We Will Add The Copyright Icon And Copyright Content Using The &Copy Tag, And The Name Of The Person Who Designed The Website Using the tag. Let’s Have A Look At Our Webpage Now That We’ve Added Structure.
/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close')
/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
navToggle.addEventListener('click', () =>{
navMenu.classList.add('show-menu')
})
}
/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
navClose.addEventListener('click', () =>{
navMenu.classList.remove('show-menu')
})
}
/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')
function linkAction(){
const navMenu = document.getElementById('nav-menu')
// When we click on each nav__link, we remove the show-menu class
navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))
/*=============== HOME SWIPER ===============*/
let homeSwiper = new Swiper(".home-swiper", {
spaceBetween: 30,
loop: 'true',
pagination: {
el: ".swiper-pagination",
clickable: true,
},
})
/*=============== CHANGE BACKGROUND HEADER ===============*/
function scrollHeader(){
const header = document.getElementById('header')
// When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
if(this.scrollY >= 50) header.classList.add('scroll-header'); else header.classList.remove('scroll-header')
}
window.addEventListener('scroll', scrollHeader)
/*=============== NEW SWIPER ===============*/
let newSwiper = new Swiper(".new-swiper", {
centeredSlides: true,
slidesPerView: "auto",
loop: 'true',
spaceBetween: 16,
});
/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
const sections = document.querySelectorAll('section[id]')
function scrollActive(){
const scrollY = window.pageYOffset
sections.forEach(current =>{
const sectionHeight = current.offsetHeight,
sectionTop = current.offsetTop - 58,
sectionId = current.getAttribute('id')
if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
}else{
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
}
})
}
window.addEventListener('scroll', scrollActive)
/*=============== SHOW SCROLL UP ===============*/
function scrollUp(){
const scrollUp = document.getElementById('scroll-up');
// When the scroll is higher than 460 viewport height, add the show-scroll class to the a tag with the scroll-top class
if(this.scrollY >= 460) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll')
}
window.addEventListener('scroll', scrollUp)
/*=============== SCROLL REVEAL ANIMATION ===============*/
const sr = ScrollReveal({
origin: 'top',
distance: '60px',
duration: 2500,
delay: 400,
// reset: true
})
sr.reveal(`.home-swiper, .new-swiper, .newsletter__container`)
sr.reveal(`.category__data, .trick__content, .footer__content`,{interval: 100})
sr.reveal(`.about__data, .discount__img`,{origin: 'left'})
sr.reveal(`.about__img, .discount__data`,{origin: 'right'})
Output:
Conclusion
We did it! ? Hope you like Responsive Gym Website Using HTML CSS JavaScript. For such projects do visits and comment on which project should I cover next.
Check out this BMI Calculator using react and hooks. Comment if you have any dought Regarding this project please comment in the comment box. Or join Our telegram Channel mostly available on that platform you can ask any question.
Blob Maker Using HTML, CSS, and JavaScript: Step by Step
Greetings to everybody. I’m glad you’re here for today’s instruction on ziontutorial. We’ll discover Blob Maker Step By Step Using HTML, CSS & JavaScript, which is a pie-shaped design. All we have to do is provide the height and width, and the program will provide the syntax needed to add that shape to the project’s CSS code. To finish this project, we’ll utilize HTML, CSS, and JavaScript in today’s session.
In order to build Blob Maker, we will need to arrange the list using a few HTML (Hypertext Markup Language) characteristics and components.
Then, using CSS (Cascading Stylesheets), we can style or design the Blob Maker project with the proper padding and alignment.
In order to make the Blob Maker project responsive from the user’s perspective, we will finally use JS (JavaScript).
With source code accessible for you to copy and paste into your own project, we give Blob Maker Step By Step Using HTML, CSS, & JavaScript projects using CSS.
Hopefully, you now have a general idea of the project.
As you can see in the preceding code, we have used all essential components and attributes in order to create the framework of the Blob Maker project. Please share the CSS code for the styling and tag alignment.
Now let’s code the JavaScript part to make it responsive.
let outputCode = document.getElementById("css-code");
let sliders = document.querySelectorAll("input[type='range']");
sliders.forEach(function(slider){
slider.addEventListener("input",createBlob);
});
let inputs = document.querySelectorAll("input[type='number']");
inputs.forEach(function(inp){
inp.addEventListener("change",createBlob);
});
function createBlob(){
let radiusOne = sliders[0].value;
let radiusTwo = sliders[1].value;
let radiusThree = sliders[2].value;
let radiusFour = sliders[3].value;
let blobHeight = inputs[0].value;
let blobWidth = inputs[1].value;
let borderRadius = `${radiusOne}% ${100 - radiusOne}% ${100 - radiusThree}% ${radiusThree}% / ${radiusFour}% ${radiusTwo}% ${100 - radiusTwo}% ${100 - radiusFour}%`;
document.getElementById("blob").style.cssText = `border-radius: ${borderRadius}; height: ${blobHeight}px; width: ${blobWidth}px`;
outputCode.value = `border-radius: ${borderRadius};`
}
document.getElementById("copy").addEventListener("click", function(){
outputCode.select();
document.execCommand('copy');
alert('Code Copied');
});
createBlob();
Conclusion
Using HTML, CSS, and JavaScript, we were able to develop our Blob Maker (Source Code) I will mention in the given below. in this tutorial we have cover Blob Maker Step By Step Using HTML, CSS & JavaScript. Hope you enjoy this tutorial
If you think this blog is useful, always visit ziontutorial by searching on Google to locate Source Codes, and follow us on social platforms also
Hello, friend’s hope you are doing so today we are making very cool tooltips with only CSS.
Either you can download the source from the bottom file or follow the tutorial along with me.
Again before deep dive diving into the tutorial do comment and subscribe to our youtube channel so that you can get new videos each and every week.
Let’s start our tooltips with only CSS & this is one of the best tooltips with only CSS Also, make your tooltips with only CSS . So without wasting any time let’s jump into the source code.
We start our code with the tooltips with only CSS.
THE HTML
<div class="tooltip-container">
Hover Me !
<span class="tooltip">Praesent ut tincidunt ligula. Donec at sem sit amet nulla porttitor consequat sit amet quis velit. Phasellus imperdiet mi in velit gravida tincidunt.</span>
</div>
THE CSS
Lets talk about our styling part where put some twic effect for our tooltip its a very small abd simple tooltip project using css. With
This is the final version of the TOOLTIP if you are following the source code then this will look like this and you can modify and change as per your requirement. That’s shit hope you like this tutorial I will provide you the source file link where you can download the sources.
Hello, friend’s hope you are doing so today we are making a very cool Navigation Bar with Flexbox using HTML and CSS. Also we make this navbar responsive so that you can use this on your mobo devices.
Either you can download the source from the bottom file or follow the tutorial along with me.
Again before deep dive diving into the tutorial do comment and subscribe to our youtube channel so that you can get new videos each and every week.
Let’s start our Responsive Navigation Bar with Flexbox & this is the one of the best navbar example using flexbox. using CSS and HTML. Also, make your website is navbar in just a few min by using this source code. So without wasting any time let’s jump into the source code.
We start our code with the skeleton of the navbar using HTML AND CSS. first, we make a header tag where we put out logo nav links and last but not least our contact info button.
Make a folder of index and style and also an image folder where we put our logo and other remaining images. It this gonna be fun to create this navigation bar which makes you practical scenario with Navigation Bar with Flexbox using HTML and CSS. Hope you like it too .
eg.
Let’s start our first HTML part where we have to make our skeleton of the website using HTML AND CSS without using javascript.
This is the final version of the navbar if you are following the source code then this will look like this and you can modify and change as per your requirement. That’s shit hope you like this tutorial I will provide you the source file link where you can download the sources.
In this tutorial, we will make a very simple javascript Simple interest calculator using HTML CSS and javascript. If you are a beginner then this tutorial is the best for you what you will learn from this tutorial is .
since we will be building to make this simple interest calculator. You will learn lots of this which will give a great knowledge about DOM manipulation. I will all the list which you will learn during making or following this tutorial.
We will learn how to center a container .
we will learn how to deal with formula to implement our simple inerest in javascript
how to get user input .
how to save and manipulate to given specipic place of your output .
And many other things which is related with our styling part that will give you an great idea about dom manipulation and some basic element .
To start off we will draw a basic idea of our application which we are be building for this application either you can refer to your notebook or an online software tool Like Figma,Adobe xd, or something else from the marketplace.
It’s not about color staying the elements it’s just a layout refining where you will learn about components of our application .
The Html
Lets start with HTML syntax for the application so that we can define our elements of inputs paragraphs and so on then we will move in javascript and CSS part to make our application working .
Our basic elements are ready let’s move into our styling part where we will learn about how to make our applications looks awesome with our CSS and js for the workability part. Let’s move to our javascript which gives our application winds to calculate our simple interest by using simple logic formula .
The Javascript
<!--Script-->
<script>
/*Simple Interest Formula =
p*r*t/100*/
btn.addEventListener("click", () => {
/*Get input values to the variables */
let p = parseInt(document.getElementById('principal').value);
let r = document.getElementById('rate').value;
let t = document.getElementById('time').value;
let btn = document.getElementById('btn');
var interest = (p*r*t)/100;
document.getElementById('interest').innerHTML = interest;
var plusInterest = p + interest;
document.getElementById('plus').innerHTML = plusInterest;
})
</script>
Since we have already done our javascript part lets jump to our styling part so that our app looks amazing and beautiful.
After following the whole code of HTML CSS and javascript you will get this kind of interface mention in blow .
Congratulations! You’ve created a fully functional and styled app. Hopefully, you’ve learned a something new during the whole process! Do comment in the comment box for any suggestion and query .
Downloading Files
4 KB
Conclusion
Hope you like this article ? Did you enjoy How to make Simple Interest Calculator in Javascript? Let me know in the comment box. Finally, we learn to enjoy and try it on our own.
hello guys, Today in this blog you will learn how to make a Reponsive modern pricing table using HTML & CSS. In the previous blog, I have shared a blog on how to make a modern website landing page using HTML and CSS and now it’s time to move into a Responsive pricing table using HTML & CSS.
A pricing table is used in many scenarios where users can see the list of prices of the product and services which they are providing. Also, it is used to display various pricing plans, Subscriptions, Or price comparisons. The best part of this pricing table is, it is fully responsive and minimal for any device.
Also i have created so many small projects using HTML CSS and javascript for beginners you can check it out Here
If you used this pricing plan on your website this pricing plan site would give you a very sleek and unique look to clients. and if you want to create or watch a video on it you can watch a full tutorial on it.
Video Tutorial Of Responsive Pricing Table
I have covered this video so that you can achieve or make this pricing table using HTML and CSS I hope you will understand the logic behind the small and minimal pricing table. Also if you are a beginner in web design then this would be the best thing for you. You will learn so many things by making these things at your own pace.
To create a Responsive pricing table first you need to create two files one HTML file and another one is the CSS file. After creating these two files make sure you copy the source code properly so that we can run it on a live server. meanwhile we have to create an HTML file with the name of index.html file and another file name would be style.css and this file would help you to make your styling to your pricing table looks responsive and minimal. Let’s start this simple responsive pricing table using HTML and css step by step .
After pasting the above code into your HTML file your site will look like this. It’s a very basic website where we use only HTML elements. After finishing this part we will move to the CSS part where the main magic will happen to our site.
THE CSS
The best magic will happen here so follow along with the code and paste in your style.css file.
When we hover on the card its color would change which makes this pricing table dope.
After hovering on the card
That’s all, now you’ve successfully created Responsive Pricing Tables using only HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
I have came across this simple and clean google login form design using HTML & CSS and I thought i would make a quick tutorial on it where you learn how to make a google login form using HTML and CSS.
And lot more will cover in this tutorial so read the full article if you face any problem regarding this form tutorial do comment in the comment box will help you.
Let’s start by making two files
index.html
style.css
Here I will provide our markup file so that you can easily understand the scenario and fields of markup files. we will make this form in a very easy way to follow this tutorial along with me.
First, of fall, we will create our form using form tag where we will provide our input and labels so that we can animate that labels upward using CSS also there are two files first one is for EMAIL ID where user can add his email and another will be password field where user can add password too.
We used onkeyup() function of HTML 5 to keep the label of the input field on top when there will be some value’s on the input field otherwise label will animated at its original position.
Let’s move into CSS part where all the magic will happen with our google form. As we move into the CSS we will start with google font for making a google form clone.
If you are eager to watch the output of this code and want to change the code you can easily download the source file and make some changes to it. Through this trick, you can make this Google Login Form Design using HTML & CSS so easily without using any other third-party library. Hope you like this article.
5 KB
Conclusion
I hope you enjoyed this little tutorial. Let me know over on comment and please give me suggestion regarding it which type of content you want. Hope you are comfortable with this tutorial if you kindly comment in the comment box if you are facing any issues with it. Google Login Form Design using HTML & CSS.
Last week i have been design a UI in adobe xd and wan to code that login ui .So today we are going to code or learn with a source code How To Create Minimal Sign Up Form In HTML and CSS | Make Sign Up Form Design . A login form with Html CSS and JavaScript .
The HTML
As you can see the output result above . The markup is quite simple . image some texts input boxes , buttons and list of your skills . So here we complete first step How To Create Login Form In HTML and CSS
I took the image from the Pixabay please visit this site and search for minimal images and pickup from one of them . Thats all about markup lets move to css part where our actual styling of the login page start .
The CSS
There are some basic styling we have to apply for hole body of the document mainly we select hole body of the document by selecting * and to the other component . Just copy all the CSS source code and use it in your project .
As you could see it was a pretty straightforward component to create, and also it looks very awesome ! . I will definitely do this in the future as it is a lot of fun again for sign in ! ? Did you enjoy this type of article? Let me know on on the comment box. Finally we learn How To Create Login Form In HTML and CSS enjoy and try it your own .
