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%) ;
}
JavaScript Animated
JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer { width: 400px; height: 400px; position: relative;...
-
HTML Text Formatting <code> <!Doctype html> <html> <head><title>Html Page Sketc...
-
The For In Loop The JavaScript for in statement loops through the properties of an Object: for (key in object) { // code block to...
-
JavaScript Events HTML Events An HTML event can be something the browser does, or something a user does. Here are some examples of HTML e...