Skip to main content

Posts

Showing posts with the label responsive

SIMPLE & RESPONSIVE GLASSMORPHISM LOGIN FORM using HTML & CSS

     In this tutorial, we will show you how to create a simple and responsive glassmorphism login form using HTML and CSS. If you're interested in web development and want to learn how to create a sleek and modern login form for your website, then this video is perfect for you!Glassmorphism is a popular design trend that gives a glass-like effect to elements on a web page. It involves using translucent backgrounds and blurred elements to create a sleek and modern look. In this tutorial, we will show you how to apply glassmorphism to a login form using HTML and CSS. To start, we will create a basic login form in HTML. This will include input fields for the username and password, as well as a submit button for users to sign in. We will also add some basic styling using CSS, such as setting the background color and font styles.      Next, we will dive into the main focus of this tutorial - creating the glassmorphism effect. We will use CSS properties such as backdrop-filter and blur

Banner image/Hero Image Tutorial with HTML and CSS

     In this video, we will be creating a banner/hero image using CSS. A banner or hero image is a large, full-width image that is typically placed at the top of a website or webpage and is used to visually represent the content or purpose of the page. We will be using CSS properties such as background-image and background-size to create the banner/hero image, as well as some basic layout techniques to ensure that it looks great on all devices. By the end of this tutorial, you will have a fully functional banner/hero image that you can use on your own website. So, if you want to learn how to create a banner/hero image using CSS, be sure to follow this tutorial till the end.   index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tutorial 6</title> <link rel="stylesheet" href="css/tutorial6.css"> <link href="https://fonts.googleapis.co

Responsive Navbar Using Jquery

            Welcome to our tutorial on how to create a responsive navbar using jQuery. In this post, we will walk you through the steps to create a navbar that adjusts to the size of the screen and displays a dropdown menu on smaller screens. We will be using jQuery to handle the toggle event for the dropdown menu and some basic CSS to style the navbar. By the end of this tutorial, you will have a fully functional responsive navbar for your website. So let's get started! responsive_navbar.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewpost" content="width=device-width; maximum-scale=1"> <title>Responsive Navbar</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <script type="text/javascript" src="