Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Web Development Articles
Page 104 of 801
How to create a responsive website with Bootstrap 4?
To create a responsive website with Bootstrap 4, the code is as follows −Example Bootstrap 4 Website Example body{ height: 100vh; } Website ⇅ Logo Link Link Link Headline 1 Published in January Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias perferendis hic quas praesentium quod totam atque dignissimos nobis numquam consequuntur? Headline 2 Published in march Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam doloribus incidunt voluptatum labore dolorem voluptate iure dicta, dolorum quis maiores. Copyright © Website OutputThe above code will produce the following output −On resizing the screen −
Read MoreHow to create a mixed column layout grid with CSS?
To create a mixed column layout grid with CSS, the code is as follows −Example body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } * { box-sizing: border-box; } .col { color: white; float: left; width: 25%; padding: 10px; } .colContainer:after { content: ""; display: table; clear: both; } @media screen and (max-width: 900px) { .col { width: 50%; } } @media screen and (max-width: 600px) { .col { width: 100%; } } Mixed col Layout Example Resize the screen to see the below divs resize themselves First col Second col Third col Fourth col OutputThe above code will produce the following output −On resizing the screen the 4 column layout will turn 2 column and so on −
Read MoreHow to create a list grid view with CSS and JavaScript?
To create a list grid view, the code is as follows −Example * { box-sizing: border-box; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } /* Create two equal columns that floats next to each other */ .column { float: left; width: 50%; padding: 10px; color: white; } /* Clear floats after the columns */ .row:after { content: ""; display: table; ...
Read MoreHow to create a weight converter with HTML and JavaScript?
To create a weight converter with HTML and JavaScript, the code is as follows −Example body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } input,span{ font-size: 20px; } Weight Converter Type weight in kg to convert it into grams Kilogram Grams: function KgtoGConverter(weight) { document.getElementById("outputGrams").innerHTML=weight*1000; } OutputThe above code will produce the following output −On typing some weight in KGs −
Read MoreHow to create a temperature converter with HTML and JavaScript?
To create a temperature converter with HTML and JavaScript, the code is as follows −Example body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } input,span{ font-size: 20px; } Temperature Converter Type Temperature in celcius to convert it into fahrenheit Celcius Fahrenheit: function CtoFConverter(temp) { document.querySelector(".fahrenheit").innerHTML=(temp-32)/1.8; } OutputThe above code will produce the following output −On entering temperature in celcius −
Read MoreHow to create a length converter with HTML and JavaScript?
To create a length converter with HTML and JavaScript, the code is as follows −Example body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } input,span{ font-size: 20px; } Length Converter Type length in Kilometers to convert it into meters Kilometers Meters: function KmtoMConverter(length) { document.querySelector(".meters").innerHTML=length*1000; } OutputThe above code will produce the following output −On entering length in kilometers −
Read MoreHow to create a speed converter with HTML and JavaScript?
To create a speed converter with HTML and JavaScript, the code is as follows −Example body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } input, span { font-size: 20px; } Speed Converter Type speed in Kilometer per hour to convert it into meter per hour Kilometer Per Hour Meters Per second: function KmphtoMphConverter(speed) { document.querySelector(".metersPerSecond").innerHTML = speed * 0.277778; } OutputThe above code will produce the following output −On entering some speed in kph −
Read MoreHow to create a Menu Icon with CSS?
To create a Menu Icon with CSS, the code is as follows −Example div { width: 40px; height: 7px; background-color: blue; margin: 5px 2px; } > Sample Menu Icon OutputThis will produce the following output −
Read MoreHow to create a responsive navigation menu with icons, using CSS?\\n
Following is the code for creating the responsive navigation menu with icons.Example Document body{ margin:0px; margin-top:10px; padding: 0px; } nav{ width: 100%; background-color: rgb(39, 39, 39); overflow: auto; height: auto; } .links { display: inline-block; text-align: center; padding: 14px; color: rgb(178, 137, 253); text-decoration: none; font-size: 17px; } .links:hover { background-color: rgb(100, 100, 100); } .selected{ background-color: rgb(0, 18, 43); } @media screen and (max-width: 600px) { .links { display: block; } } Home Login Register Contact Us More Info OutputThe above code will produce the following output −When the screen will be resized to 600px −
Read MoreHow to create a responsive side navigation menu with CSS?
Following is the code to create a responsive side navigation menu with CSS −Example body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } nav { margin: 0; padding: 0; width: 150px; background-color: #2f77e4; position: fixed; height: 100%; overflow: auto; } nav a { display: block; color: rgb(255, 255, 255); font-weight: bolder; font-size: 20px; padding: 16px; text-decoration: none; } nav a.selected { background-color: rgb(15, 189, 20); color: rgb(255, 255, 255); } nav a:hover:not(.selected) { background-color: white; ...
Read More