Posts

Showing posts from August 18, 2024

Hover dropdown menu

Image
 Create Hover Dropdown Menu Dropdown down menu type one is hover dropdown menu when the mouse is over the button the menu will be open it mean hover the mouse. a list under dropdown menu will be open whenever the mouse is over the dropdown menu. following are the main step of creating this tutorial 00 open VS code editor 01 create file index.html and style.css file 02 code in html document to create the structure of dropdown menu 03 code in CSS to styling the dropdown menu 04 take demo finally we create a dropdown menu Hover Dropdown menu source code index.html <! DOCTYPE html > < html > < head >   < meta name = "viewport" content = "width=device-width, initial-scale=1" >   < title > Hoverable dropdown </ title >   < link rel = "stylesheet" href = "style.css" > </ head > < body >   < div class = "container" >     < h2 > Mouseover / Hoverable Dropdown </ h

eCommerce website product detail page

Image
Product detail page with description  Developed and design product details page in html CSS and JavaScript for an ecommerce website. the product details page has include main items in details the design is simple and unique product description, product all possible images and add to cart button and selected items. Source code link Download Watch tutorial for more info

Theme Toggle button

Image
Making theme toggle button  In this tutorial we make Theme toggle button which work as switch between black and dark mode. Theme Toggle Tutorial steps 00 Demo to theme toggle button 01 open VS code 02 create file index.html, style.css 03 code in html file to create the basic structure of theme toggle button 04 code in CSS file to style the toggle button 05 finally we create theme toggle button Source code index.html <! DOCTYPE html > < html > < head >     < meta name = "viewport" content = "width=device-width, initial-scale=1" >     < link rel = "stylesheet" href = "style.css" > </ head > < body >     < div class = "container" >         < h2 > Theme Toggle / Collapse </ h2 >         < div class = "r" >             < label class = "switch" >                 < input type = "checkbox" >                 < span class = &

To Do app

Image
Build To Do App in JavaScript  In today tutorial we are building a to do list app in html CSS and JavaScript Every task will be add with add button the doing task are shown at the bottom of doing list app. there are various action can perform at each task on the app. the task should be add delete and crossover. Download source code Watch tutorial for more details