Tuesday, August 31, 2021
Responsive Website Design with CSS Layout Float
Monday, August 30, 2021
Responsive Website Design with CSS Layout Flex Box
Responsive Website Design with CSS Layout Flex Box Code
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>Html Froms</title>
</head>
<body>
<h1>Css layout flexbox</h1>
<header>
<h1>Pakistan</h1>
</header>
<section>
<nav>
<UL>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</UL>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</section>
<footer>Copright websites</footer>
</body>
</html>
CSS SYLESHEET CODE
*{
box-sizing: border-box;
}
body{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
header{
background-color: gray;
padding:30px;
text-align: center;
font-size: 35px;
color: #fff;
}
section{
display: -webkit-flex;
display: flex;
}
nav{
-webkit-flex:flex 1 ;
-ms-flex:flex 1 ;
flex:flex 1 ;
background-color: #ccc;
padding:20px;
}
article{
-webkit-flex:flex 3 ;
-ms-flex: flex 3;
flex:flex 3;
background-color:#f1f1f1 ;
}
footer{
background-color: gray;
text-align: center;
padding:10px ;
}
Sunday, August 29, 2021
Html Css Search Bar with Button
Html Css Search Bar with Button Code
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>Html Froms</title>
</head>
<body>
<div class="main-con">
<form>
<input type="text"id="search"placeholder="Search.....">
<button>Search</button>
</form>
</div>
</body>
</html>
CSS STYLESHEET CODE
body{
margin: 0px;
background-color: aliceblue;
}
.main-con{
position: absolute;
top: 50%;
left:50%;
transform:translate(-50%,50%) ;
}
Saturday, August 28, 2021
Html Forms with File upload
Html Forms with File upload Code
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>Html Froms</title>
</head>
<body>
<h1>html forms with fileupload</h1>
<form>
<label class="my file">Select a File</label>
<input type="file"id="my file"name="my file"><br><br>
<input type="submit">
</form>
</body>
</html>
Friday, August 27, 2021
Html Forms with Message Element
Html Forms with Message Element Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>Html Froms</title>
</head>
<body>
<form>
<label for="fname">You Name</label><br>
<input type="text"id="fname"placeholder="you are name"><<br>
<label for="lname">You last name</label><br>
<input type="text"id="lname"placeholder="you are last-name"><br>
<label for="message">Massage</label><br>
<textarea type="message"id="message"placeholder="Massage"row="10"col="10"> you message</textarea><br>
<input type="submit">
</form>
</body>
</html>
Thursday, August 26, 2021
Html Forms with fieldset
Html Forms with fieldset Code
Html Forms with Select element
Html Forms with Select element CODE
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>Html Froms</title>
</head>
<body>
<h1> the select elment</h1>
<form>
<label for="html">html</label>
<select class="html"name="html">
<option value="link">link</option>
<option class="img">img</option>
<option class="form">form</option>
</select>
<input type="submit">
</form>
</body>
</html>
Tuesday, August 24, 2021
Html Forms with Radio Button
Html Forms with Radio Button CODE
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>Html Froms</title>
</head>
<body>
<h1>Radio Button</h1>
<form>
<input type="radio"id="html">
<label for="html">html</label><br>
<input type="radio"id="css">
<label for="css">css</label><br>
<input type="radio"id="php">
<label for="php">php</label>
</form>
</body>
</html>
HTML FORM
HTML FORM CODE
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>web design</title>
</head>
<body>
<h1>html using from</h1>
<form>
<label for="fname">fristname</label>
<input type="text"id="fname"placeholder="you name"><br>
<label for="lastname">lastname</label>
<input type="text"id="lastname"placeholder="you last"><br>
<input type="submit"valua="submit">
</body>
</html>
Saturday, August 21, 2021
Html&CSS Navigation bar
Html&CSS Navigation bar Code
Thursday, August 19, 2021
Html&CSS Navigation bar with icon
Html&CSS Navigation bar with icon Code
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>web design</title>
</head>
<body>
<nav>
<ul>
<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
<li><a href="#"><i class="fa fa-book" aria-hidden="true"></i>Categories</a></li>
<li><a href="#"><i class="fa fa-fire" aria-hidden="true"></i>Popular</a></li>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i>About-us</a></li>
<li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i>Contact</a></li>
</ul>
</nav>
</body>
</html>
CSS STYLESHEET CODE
nav{
background-color: black;
overflow: hidden;
}
ul{
list-style-type: none;
padding:0px;
margin-right: 15px;
}
li{
float: left;
}
li a{
display: block;
color: #fff;
text-align: center;
padding:20px 15px;
text-decoration: none;
}
li a:hover{
background-color: white;
color: #000;
}
Wednesday, August 18, 2021
Create a Navbar with Brand Logo using HTML and CSS
Create a Navbar with Brand Logo using HTML and CSS CODE
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<title>web design</title>
</head>
<body>
<div class="logo">
<a href="#"><img src="photo.jpg"width="70"></a>
</div>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">ABOUT-US</a></li>
</ul>
</nav>
</body>
</html>
CSS STYLESHEET CODE
nav{
background-color: black;
width: 100%;
overflow: auto;
}
ul{
list-style-type: none;
padding:0px;
margin-right: 16px;
}
li{
float:left;
}
.logo{
position: absolute;
margin-top: 2px;
}
li a{
width:100px;
display: block;
padding:20px 15px;
text-align: center;
color: #f2f2f2;
text-decoration: none;
}
li a:hover{
background-color: red;
color: #000;
}
Tuesday, August 17, 2021
Responsive Website Design
Responsive Website Design code
Sunday, August 15, 2021
Responsive Website Design
Responsive Website Design CODE
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<title>web design</title>
</head>
<body>
<div class="header">
<h1>Weblayout</h1>
<p>Resize the browser window to see the responsive effect</p>
</div>
<div class="nav">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div class="row">
<div class="column">
<h1>Column</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus
venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget
aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor
sed accumsan convallis.</p>
</div>
<div class="column">
<h1>Column</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus
venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget
aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor
sed accumsan convallis.</p>
</div>
<div class="column">
<h1>Column</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus
venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget
aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor
sed accumsan convallis.</p>
</div>
</div>
</body>
</html>
CSS STYLESHEET CODE
Friday, August 13, 2021
Html&Css navigation bar with icon code
Html&Css navigation with icon code
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>CSS Searchbox</title>
</head>
<body>
<nav>
<ul>
<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
<li><a href="#"><i class="fa fa-music" aria-hidden="true"></i>>Music</a></li>
<li><a href="#"><i class="fa fa-product-hunt" aria-hidden="true"></i>Product</a></li>
<li><a href="#"><i class="fa fa-sign-in" aria-hidden="true"></i>login</a></li>
</ul>
</nav>
</body>
</html>
CSS STYLE SHEET CODE
nav{
width:100%;
background-color: gray;
overflow: auto;
}
ul{
list-style-type: none;
margin-left:10px;
}
li{
float: left;
}
li a{
display: block;
padding:14px 16px;
text-decoration: none;
text-align: center;
color: #000;
border:2px solid #e7e7e7;
}
li:last-child{
float: right;
border: 3px solid red;
border-radius:50px;
outline: none;
}
li a:hover{
background-color: rosybrown;
color: #fff;
border-bottom:3px solid yellow ;
}
Thursday, August 12, 2021
Html Css Search Bar
Html Css Search Bar
code
<!DOCTYPE html>>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<title>CSS Searchbox</title>
</head>
<body>
<div class="searchbar">
<input type="text"name="searchbar"Placeholder="Search anthing to want.....">
<a href="#"><i class="fa fa-search" aria-hidden="true"></i>
</a>
</div>
</body>
</html>
:::CSS STYLESHEET:::
*{
padding:0px;
margin:0px;
font-family: sans-serif;
}
body{
background-color: gray;
}
.searchbar{
position: absolute;
top:50%;
left:50%;
}
input{
border:3px solid red ;
width:200px;
border-radius:50px;
}
Tuesday, August 10, 2021
Navbar with Brand logo
code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="nav.css">
<title>CSS Navigation Bar with logo</title>
</head>
<body>
<div class="logo"><a href="#" ><img src="logo.jpg"width="70"height="auto"></a></div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a class="active" href="#">Muic</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
CSS StyleSheet with logo navbar
ul{
list-style-type: none;
padding:0px;
margin:0 0 0 15px ;
}
li{
float: left;
}
li a{
display: block;
text-decoration: none;
padding:20px 15px;
text-align: center;
}
nav{
width:100%;
background-color: #e7e7e7;
overflow: auto;
}
.logo{
position: absolute;
}
.active{
background-color: greenyellow;
border-right:1px solid black;
}
li a:hover:not(.active){
background-color: red;
border-bottom:5px solid gold ;
}
Monday, August 9, 2021
Image Gallery
Image Gallery
code
Sunday, August 8, 2021
Dropdown Image
Dropdown Image
Saturday, August 7, 2021
How to create a Simple Dropdown menu Button using html css
How to create a Simple Dropdown menu Button using html css
code
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<p><strong>Note:</strong> We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
Friday, August 6, 2021
Create a Navbar with Brand Logo using HTML and CSS
Create a Navbar with Brand Logo using HTML and CSS
code
<!Doctype html>
<html>
<head><title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<body>
<div><a href="#"><img src="logo.png"></a></div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">download</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Contack</a></li>
<li><a href="#">About-us</a></li>
</ul>
</nav>
</body>
</html>
CSS Stylesheet
JavaScript Animated
JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer { width: 400px; height: 400px; position: relative;...
-
Button on Image Code <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://c...
-
JavaScript Variables 4 Ways to Declare a JavaScript Variable: Using var Using let Using const Using nothing What are Variables? Vari...
-
The Scale()Method <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudf...