This is the Home tab. Reduce the viewport to see …

Here you can find HTML5 programming tutorials & reference guides on how to use tags, attributes, class, ID, meta tag, and more to use in HTML5.
This is the Home tab. Reduce the viewport to see …
Marquee is one of the most important tags in HTML …
Building responsive sidebar navigations for mega dashboards and websites is …
Hello guys, in this tutorials you’ll learn how to code a HTML program to display the capital of a state, it is very easy, just peak these code and paste in your daily code editor as well in text editor keep it separate html, css and javascript file.
<html> <head> <meta charset="utf-8"> <title>viewtechindia.com</title> </head> <body> <form class="form" name="myform" id="myForm"> <lable class="label">Select Country:</lable> <select class="select" name="state" id="countySel" size="1"> <option value="" selected="selected">Select Country</option> </select> <br> <br> <lable class="label">Select State:</lable> <select class="select" name="countrya" id="stateSel" size="1"> <option class="option" value="" selected="selected">Please select Country first</option> </select> <br> <br> <lable class="label">Select District: </lable><select class="select" name="district" id="districtSel" size="1"> <option value="" selected="selected">Please select State first</option> </select><br> <input class="submit-button" type="submit"> </form> </body> </html>
body { font-family: system-ui; background: #f06d06; color: white; text-align: center; } .form { border:solid 1px #ffffff; padding:40px; text-align:left; display:block; margin:65px auto 0px auto; max-width:400px; border-radius:5px; background:rbga(256,256,256, 0.5); } .select { height:35px; border-radius:5px; min-width:250px; padding:7px 7px; } .label { min-width:130px; display:inline-block; } .submit-button { height:35px; border-radius:5px; min-width:250px; padding:7px 7px; border:none; background:#f2f2f2; margin-left:130px; margin-top:25px }
var stateObject = { "India": { "Delhi": ["new Delhi", "North Delhi"], "Kerala": ["Thiruvananthapuram", "Palakkad"], "Goa": ["North Goa", "South Goa"], }, "Australia": { "South Australia": ["Dunstan", "Mitchell"], "Victoria": ["Altona", "Euroa"] }, "Canada": { "Alberta": ["Acadia", "Bighorn"], "Columbia": ["Washington", ""] }, } window.onload = function () { var countySel = document.getElementById("countySel"), stateSel = document.getElementById("stateSel"), districtSel = document.getElementById("districtSel"); for (var country in stateObject) { countySel.options[countySel.options.length] = new Option(country, country); } countySel.onchange = function () { stateSel.length = 1; // remove all options bar first districtSel.length = 1; // remove all options bar first if (this.selectedIndex < 1) return; // done for (var state in stateObject[this.value]) { stateSel.options[stateSel.options.length] = new Option(state, state); } } countySel.onchange(); // reset in case page is reloaded stateSel.onchange = function () { districtSel.length = 1; // remove all options bar first if (this.selectedIndex < 1) return; // done var district = stateObject[countySel.value][this.value]; for (var i = 0; i < district.length; i++) { districtSel.options[districtSel.options.length] = new Option(district[i], district[i]); } } }
See the Pen
[FCC] Kahlil Gibran – Tribute Page by J. Antonio Avalos (@jantonioavalos)
on CodePen.
To most webmasters, the term CSS horizontal drop down menu is self explanatory. But, for those whom are a bit less experienced, it is simply a horizontal drop down menu created by way of SCSS code, rather than hard-coding it into html, or using a scripting language, such as JavaScript. The drop down menu part refers to the way a sub-menu item “drops down” from its parent menu item. In tutorial you are able how to create submenu
<nav class="navbar"> <div class="logo"><img src="http://viewtechindia.com/wp-content/uploads/2019/10/final-logo.png" alt="LOGO"></div> <div class="push-left"> <button id="menu-toggler" data-class="menu-active" class="hamburger"> <span class="hamburger-line hamburger-line-top"></span> <span class="hamburger-line hamburger-line-middle"></span> <span class="hamburger-line hamburger-line-bottom"></span> </button> <ul id="primary-menu" class="menu nav-menu"> <li class="menu-item current-menu-item"><a class="nav__link" href="#">Home</a></li> <li class="menu-item dropdown"><a class="nav__link" href="#">About</a> <ul class="sub-nav" > <li><a class="sub-nav__link" href="#">link 1</a></li> <li><a class="sub-nav__link" href="#">link 2</a></li> <li><a class="sub-nav__link" href="#">link 3 - long link - long link - long link</a></li> </ul> </li> <li class="menu-item dropdown"><a class="nav__link" href="#">Contact</a> <ul class = "sub-nav"> <li><a class="sub-nav__link" href="#">link 1</a></li> <li><a class="sub-nav__link" href="#">link 2</a></li> <li><a class="sub-nav__link" href="#">link 3 - long link - long link - long link</a></li> </ul> </li> <li class="menu-item "><a class="nav__link" href="#">Blog</a> </li> </ul> </div> </nav>
$primary: #fff; $secondary: #ccc; $ternary: #272727; $dark: #444444; body { background: linear-gradient(90deg, rgba(18,40,182,1) 3%, rgba(0,212,255,1) 100%); color: $ternary; font-size: 14px; margin: 0; } .logo { max-width: 200px; } .navbar { align-items: center; background: $primary; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); display: flex; flex-direction: row; font-family: sans-serif; padding: 10px 50px; } .push-left { margin-left: auto; } .hamburger { background: transparent; border: none; cursor: pointer; display: none; outline: none; height: 30px; position: relative; width: 30px; z-index: 1000; @media screen and (max-width: 768px) { display: inline-block; } &-line { background: $ternary; height: 3px; position: absolute; left: 0; transition: all 0.2s ease-out; width: 100%; .hamburger:hover & { background: #777; } &-top { top: 3px; } .menu-active &-top { top: 50%; transform: rotate(45deg) translatey(-50%); } &-middle { top: 50%; transform: translatey(-50%); } .menu-active &-middle { left: 50%; opacity: 0; width: 0; } &-bottom { bottom: 3px; } .menu-active &-bottom { bottom: 50%; transform: rotate(-45deg) translatey(50%); } } } .nav-menu { display: flex; list-style: none; margin: 0; padding: 0; transition: all 0.25s ease-in; @media screen and (max-width: 768px) { background: $primary; flex-direction: column; justify-content: center; opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translatey(-100%); text-align: center; .menu-active & { transform: translatey(0%); opacity: 1; } } .menu-item a { color: $dark; display: block; line-height: 30px; margin: 0px 10px; text-decoration: none; text-transform: uppercase; &:hover { color: lighten($dark, 20); text-decoration: underline; } @media screen and (max-width: 768px) { font-size: 20px; margin: 8px; } } } .sub-nav { border: 1px solid #ccc; display: none; position: absolute; background-color: $primary; padding: 5px 5px; list-style: none; width: 230px; @media screen and (max-width: 768px) { position: relative; width: 100%; display: none; background-color: rgba(0, 0, 0, 0.2); box-sizing: border-box; } } .nav__link { &:hover + .sub-nav { display: block; } } .sub-nav { &:hover { display: block; } }
$(document).ready(function() { // Toggle menu on click $("#menu-toggler").click(function() { toggleBodyClass("menu-active"); }); function toggleBodyClass(className) { document.body.classList.toggle(className); }});
Responsive
In this tutorials we are going to learning how to create a simple digital clock using HTML5, CSS3 and JavaScript.
For this project we can use any text editor like Notepad++, SublimeText, gEdit, TextMate, Coda, Brackets etc.
For this project we will need three files namely
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Big+Shoulders+Display&display=swap" rel="stylesheet"> </head> <body> <h2>Digital Clock</h2> <div class="clock"> <div class="times"> <div class="time"> <span id="hour">00</span> </div> <div class="title"> <span>Hours</span> </div> </div> <div class="times"> <div class="time"> <span id="minute">00</span> </div> <div class="title"> <span>Minutes</span> </div> </div> <div class="times"> <div class="time"> <span id="second">00</span> </div> <div class="title"> <span>Seconds</span> </div> </div> </div> </body> </html>
*{ font-family: 'Big Shoulders Display', cursive; margin: 0; padding: 0; box-sizing: border-box; } body{ min-height: 100vh; background: #c2c2c2; display: flex; justify-content: center; align-items: center; flex-direction: column; color: white; } h2{ font-size: 4em; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 30px; } .clock{ max-width: 800px; width: 100%; height: 100%; display: flex; justify-content: space-evenly; } .clock .times{ width: 200px; height: 250px; position: relative; } .clock .times::before{ content: ""; position: absolute; transform-origin: bottom; } .clock .times::after{ content: ""; position: absolute; transform-origin: left; } .clock .times .time{ width: 100%; height: 180px; text-align: center; background: #003f83; line-height: 180px; font-size: 5em; letter-spacing: 3px; } .clock .times .title{ width: 100%; height: 70px; text-align: center; line-height: 70px; background:#0051a9; font-size: 2em; letter-spacing: 2px; } .clock .times .title::before{ content: ""; position: absolute; width: 100%; height: 250px; bottom: 0; left: 0; z-index: -1; filter: blur(5px); }
<script> const hours = document.querySelector('#hour'); const minutes = document.querySelector('#minute'); const seconds = document.querySelector('#second'); function clock(){ let h = new Date().getHours(); let m = new Date().getMinutes(); let s = new Date().getSeconds(); hours.textContent = h; minutes.textContent = m; seconds.textContent = s; } // clock(); let interval = setInterval(clock, 1000); <script>
The HTML tables allow web designer to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default
<table class="rwd-table"> <tbody> <tr> <th>Supplier Code</th> <th>Supplier Name</th> <th>Invoice Number</th> <th>Invoice Date</th> <th>Due Date</th> <th>Net Amount</th> </tr> <tr> <td data-th="Supplier Code"> UPS5005 </td> <td data-th="Supplier Name"> UPS </td> <td data-th="Invoice Number"> ASDF19218 </td> <td data-th="Invoice Date"> 06/25/2016 </td> <td data-th="Due Date">12/25/2016</td> <td data-th="Net Amount"> $8,322.12 </td> </tr> <tr> <td data-th="Supplier Code"> UPS3449</td> <td data-th="Supplier Name">UPS South Inc.</td> <td data-th="Invoice Number"> ASDF29301</td> <td data-th="Due Date"> 12/25/2016</td> <td data-th="Net Amount"> $3,255.49</td> <td data-th="Net Amount"> $8,255.49</td> </tr> <tr> <td data-th="Supplier Code"> BOX5599</td> <td data-th="Supplier Name">BOX Pro West</td> <td data-th="Invoice Number">ASDF43000</td> <td data-th="Invoice Date"> 6/27/2016 </td> <td data-th="Due Date"> 12/25/2016</td> <td data-th="Net Amount"> $45,255.49</td> </tr> <tr> <td data-th="Supplier Code">PAN9999</td> <td data-th="Supplier Name">Pan Providers and Co.</td> <td data-th="Invoice Number">ASDF33433</td> <td data-th="Invoice Date">6/29/2016</td> <td data-th="Due Date"> 12/25/2016</td> <td data-th="Net Amount">$12,335.69</td> </tr> </tbody> </table>
This will produce the following result −
Supplier Code | Supplier Name | Invoice Number | Invoice Date | Due Date | Net Amount |
---|---|---|---|---|---|
UPS5005 | UPS | ASDF19218 | 06/25/2016 | 12/25/2016 | $8,322.12 |
UPS3449 | UPS South Inc. | ASDF29301 | 12/25/2016 | $3,255.49 | $8,255.49 |
BOX5599 | BOX Pro West | ASDF43000 | 6/27/2016 | 12/25/2016 | $45,255.49 |
PAN9999 | Pan Providers and Co. | ASDF33433 | 6/29/2016 | 12/25/2016 | $12,335.69 |
You can set table background using css style sheet
You can also set border color also using bordercolor attribute.
@import 'https://fonts.googleapis.com/css?family=Open+Sans:600,700'; * {font-family: 'Open Sans', sans-serif;} .rwd-table { margin: auto; min-width: 300px; max-width: 100%; border-collapse: collapse; } .rwd-table tr:first-child border-top: none; background: #428bca; color: #fff; .rwd-table tr border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #f5f9fc; .rwd-table tr:nth-child(odd):not(:first-child) { background-color: #ebf3f9; } .rwd-table th .rwd-table td display: block; .rwd-table td:first-child { margin-top: .5em; } .rwd-table td:last-child { margin-bottom: .5em; } .rwd-table td:before .rwd-table th, .rwd-table td { text-align: left; } .rwd-table color: #333; border-radius: .4em; overflow: hidden; .rwd-table tr { border-color: #bfbfbf; } .rwd-table th, .rwd-table td { padding: .5em 1em; }
This will produce the following result −
Fore responiive
@media screen and (max-width: 601px) { .rwd-table tr:nth-child(2) { border-top: none; } } @media screen and (min-width: 600px) { .rwd-table tr:hover:not(:first-child) { background-color: #d8e7f3; } .rwd-table td:before show: none; .rwd-table th, .rwd-table td display: table-cell; padding: .25em .5em; .rwd-table th:first-child, .rwd-table td:first-child { padding-left: 0; } .rwd-table th:last-child, .rwd-table td:last-child { padding-right: 0; } .rwd-table th, .rwd-table td } body { background: #4B79A1; background: -webkit-linear-gradient(to left, #4B79A1 , #283E51); background: linear-gradient(to left, #4B79A1 , #283E51); } h1 .container display: block; text-align: center; h3 display: inline-block; position: relative; text-align: center; font-size: 1.5em; color: #cecece; h3:before content: "\25C0"; position: absolute; left: -50px; -webkit-animation: leftRight 2s linear infinite; animation: leftRight 2s linear infinite; h3:after @-webkit-keyframes leftRight { 0% { -webkit-transform: translateX(0)} 25% { -webkit-transform: translateX(-10px)} 75% { -webkit-transform: translateX(10px)} 100% { -webkit-transform: translateX(0)} } @keyframes leftRight { 0% 25% 75% 100% }
This will produce the following result −
Mega menus are a type of drop-down, which seeks to overcome some of the usability drawbacks of traditional drop-downs. Hierarchy of your navigation is made visible all at once and the amount of clicking, searching, and navigating is reduced.
This module allows you to build mega menus by leveraging jQuery and the prevailing Bootstrap menu system. Megamenu takes a menu that is 3 levels deep, and converts it into a categorized 3-level mega menu, which is placed into your site as a block.
See the Pen
Responsive and Mega menu by Arjun Amgain (@arjunamgain)
on CodePen.
See the Pen
Responsive Mega Menu – Navigation by samir alley (@samiralley)
on CodePen.
See the Pen
Mega Menu Dropdowns with Foundation 5 by SitePoint (@SitePoint)
on CodePen.
See the Pen
Responsive Bootstrap mega menu by Martin Stanek (@skywalkapps)
on CodePen.
In this tutorial, learn how to add datepicker to input field using Bootstrap. The short answer is to use the bootstrap-datepicker.js to create a text box with the date picker. The input box if contains the date picker will display the date picker when the user clicks on it.
The date picker adds the date picker to the input box which contains days, month and year to select. When you select the date from the date picker, it adds the selected date to the input box.
So, let’s start creating a date picker input box using Bootstrap with the below methods.
See the Pen
Simple Bootstrap datepicker example by Luís Cruz (@milz)
on CodePen.
See the Pen
Bootstrap datepicker in modal by Sinetheta (@Sinetheta)
on CodePen.
See the Pen
Bootstrap Datepicker Demo by Ryan Mulligan (@hexagoncircle)
on CodePen.
See the Pen
Bootstrap Datepicker – Inline by alenii (@alenii)
on CodePen.
See the Pen
Date Picker Untuk Jadwal Penerbangan Travel Website by Desain 360 (@desain360)
on CodePen.