Posts

design and build clothing shop card

Image
This tutorial we are making a Product card Page of a Clothing Store in HTML, CSS Let's create a website product card page that look like good it's very easy even for beginner it include simple steps. this is ecommerce website product page following are the main steps of making this video. i. open your VS code ii. create index.html file ii. create style.css file iv. code in index.html file to build the basic structure of website product page vi. finally we created website product page in html CSS watch video Download Source code

Animated search bar

Image
Let's get create a simple animated search bar whenever user click on the search bar the search will be expand and release after search this is very simple and full of logics to attract viewer and captured. Source code HTML <! DOCTYPE html > < html > < head > < meta name = "viewport" content = "width=device-width, initial-scale=1" > <!-- this is font awesome link for add icon only --> < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" > <!-- add stylesheet --> < link rel = "stylesheet" href = "style.css" > </ head > < body >   < h2 > Search bar </ h2 >   < p > Create and design responsive search bar </ p >   < form class = "search" action = "#" >     < input type = "text" placeholder = "type to search something...."

Overly home menu left top and down

Image
how to make hamburger menu with left up and down menu using html CSS and JavaScript. three menu are showing with different scenario with each other. Source code link Watch short for more details 

Overly home down menu

Image
Let's  make a hamburger menu that move down and up movement and take up short time of interval animation. This type of hamburger will cover the entire screen at a time to open the man menu to navigate the menu. After opening the man menu a close icon will navigate to close the menu and navigate menu once again. For more details watch the video  Source code of Over home down menu HTML <! DOCTYPE html > < html > < head > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = "style.css" > </ head > < body > < div id = "myNav" class = "overlay" >   < a href = "javascript:void(0)" class = "closebtn" onclick = " closeNav ()" > &times; </ a >   < div class = "overlay-content" >     < a href = "#" > Home </ a >     < a href = &quo

Make Login and Signup form in bootstrap

Image
Create and make login and signup redirecting form in bootstrap. two button were place in the front of of form one button is login and one button is signup form with user profile. login and signup form were redirectable to each other by creating new account and login here when the user click on login here the form will call login form when the user click on create account the form will be signup form. Tutorials Of Login and signup form Download Source code

Build Quiz App in JavaScript

Image
Let's try to build a quiz app in html CSS and JavaScript for beginner to advanced. agreement form will be undertaking by every candidate before start the quiz. this quiz app is build on multi choice question every question has four option a, b, c, and d correct option will select by user. Source code link are given below. Watch video foe more details Download Source Code

Portfolio landing page

Image
Create personal portfolio landing page in html CSS and for beginner. this is animated landing page the animation should appear on reloading the page. Following are the main steps of making this landing page 1 showing footage of landing page 2 Demo to landing page 3 overview to code 4 checking the responsiveness of landing page however this not fully responsive landing page if you would like to make it fully responsive then say in comment I would be make responsive for you. HTML code <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <!-- ================ Font awesome CDN ================ -->     < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />     < title > Portfolio landing page </ title &g