If you’re looking to elevate the user interface of your website or application, consider incorporating eye-catching CSS cards. To help inspire you, we’ve compiled a list of 107 stunning CSS card examples that you can use as a reference.
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.
If you’re a web designer or developer, you know how important it is to stay on top of the latest tools and trends in the field. That’s why we’ve put together a list of 40 must-have CSS libraries that can take your web design game to the next level. From responsive frameworks to advanced animations and effects, these libraries can help you create stunning and engaging websites that stand out from the crowd. Whether you’re a seasoned pro or just starting out, these CSS libraries are sure to be valuable additions to your toolkit.
A CSS library is a collection of pre-written CSS code that can be used to style web pages. A library typically focuses on specific CSS functionalities, such as typography or animation, and provides a set of styles that can be added to existing web designs to achieve a desired look and feel.
CSS libraries are often lightweight, easy to use, and can save developers a significant amount of time when styling web pages. They can also help ensure consistency across different pages of a website, and improve the overall user experience by providing a visually appealing and responsive design. Popular CSS libraries include Bootstrap, Foundation, Materialize, and many others.
Most Used CSS libraries
Bootstrap: A CSS framework developed by Twitter that provides a set of pre-designed user interface (UI) components, such as buttons, forms, navigation bars, and grids, to help developers build responsive and mobile-first websites and applications quickly.
Foundation: Another popular CSS framework that offers a suite of UI components, including forms, navigation menus, and typography styles, that are easy to customize and responsive by default.
Materialize: A CSS framework based on Google’s Material Design language, which is a design philosophy that emphasizes a clean and modern look and feel for web and mobile applications.
Bulma: A lightweight and modular CSS framework that focuses on providing a clean and simple design for web interfaces, with a flexible grid system and a range of UI components that can be customized easily.
Semantic UI: A comprehensive and intuitive CSS framework that uses human-friendly HTML syntax to make building responsive and accessible web interfaces easy and efficient. It offers a wide range of UI components, such as buttons, forms, and grids, that can be easily customized.
Tailwind CSS: A CSS utility framework that provides a set of pre-defined classes for common design patterns, such as spacing, typography, and layout. This allows developers to build custom and responsive web interfaces quickly, without needing to write custom CSS styles.
Spectre.css: A minimalist and lightweight CSS framework that provides a range of useful UI components, such as grids, typography, and forms, for building modern and responsive web interfaces.
Pure.css: Another lightweight and minimalistic CSS framework that offers a range of UI components, including forms, tables, and grids, that are easy to customize and responsive by default.
UIKit: A comprehensive and modular CSS framework that offers a range of UI components, such as navigation menus, grids, and forms, that are highly customizable and responsive by default.
Ant Design: A popular CSS framework that provides a range of customizable UI components, such as forms, tables, and navigation menus, that are optimized for building enterprise-level web applications and interfaces. It also offers a design language that emphasizes consistency and usability across all components.
Vuetify: A popular CSS framework for building web interfaces using the Vue.js JavaScript framework, offering a range of customizable UI components, such as navigation menus, forms, and cards.
PrimeNG: A CSS framework for building web interfaces using the Angular JavaScript framework, offering a range of customizable UI components, such as grids, forms, and charts.
Shards: A modern and lightweight CSS framework that provides a range of responsive UI components, such as buttons, forms, and cards, that are easy to customize and integrate into web interfaces.
Element: A CSS framework that provides a range of customizable UI components, such as forms, tables, and grids, for building responsive and modern web interfaces.
Chakra UI: A popular and modern CSS framework that provides a range of customizable UI components, such as forms, modals, and typography, for building responsive and accessible web interfaces.
Carbon Design System: A comprehensive and modular CSS framework that offers a range of UI components, such as buttons, forms, and grids, that are optimized for building enterprise-level web applications.
Fluent UI: A CSS framework that provides a range of customizable UI components, such as buttons, forms, and icons, for building modern and responsive web interfaces.
Grommet: A modern and responsive CSS framework that provides a range of UI components, such as tables, charts, and modals, that are easy to customize and integrate into web interfaces.
Blueprint: A CSS framework that provides a range of customizable UI components, such as forms, navigation menus, and grids, that are optimized for building web interfaces with the React.js JavaScript framework.
Tachyons: A CSS utility framework that provides a set of pre-defined classes for building custom and responsive web interfaces quickly and efficiently, with a focus on readability and consistency.
Basscss: Another CSS utility framework that provides a range of pre-defined classes for building custom and responsive web interfaces quickly and efficiently, with a focus on simplicity and modularity.
NES.css: A fun and retro-themed CSS framework that provides a range of customizable UI components, such as buttons, forms, and cards, for building modern web interfaces with a nostalgic feel.
Milligram: A minimalist and lightweight CSS framework that offers a range of UI components, such as buttons, forms, and typography, for building modern and responsive web interfaces.
Mini.css: Another minimalist and lightweight CSS framework that provides a range of UI components, such as grids, forms, and navigation menus, that are easy to customize and responsive by default.
Material Design Lite: A lightweight and customizable CSS framework based on Google’s Material Design philosophy, offering a range of UI components, such as buttons, forms, and grids, for building modern and responsive web interfaces.
Ionic Framework: A popular CSS framework for building hybrid mobile applications using web technologies, offering a range of customizable UI components, such as buttons, forms, and cards, that can be easily integrated into mobile apps.
Quasar: Another CSS framework for building hybrid mobile applications using web technologies, offering a range of customizable UI components, such as modals, forms, and navigation menus, that are optimized for mobile devices.
Webflow: A comprehensive web design platform that offers a range of customizable templates and UI components, such as forms, animations, and sliders, for building modern and responsive web interfaces without writing code.
Skeleton: A lightweight and responsive CSS framework that provides a set of pre-defined classes for building custom web interfaces quickly and efficiently.
Suzie: A CSS framework that offers a range of customizable UI components, such as buttons, forms,
Conclusion
In general, using CSS libraries can be a helpful way for web developers to save time and effort in creating consistent designs across their projects. By utilizing pre-existing code for common features, developers can focus more on creating great web design and efficient apps. While some CSS libraries may not seem exciting at first, they can still be valuable tools for making the development process more productive and efficient. Overall, incorporating CSS libraries into web development projects can help streamline the design process and create a cohesive visual aesthetic.
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.
