HTML CSS & Java Script
Boilerplate of HTML
<!DOCTYPE html>
<!--Our HTML code start here -->
<html lang="en">
<!--Our HTML tag start here -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aslam</title>
</head>
<!--Our body tag start here -->
<body>
Hello world
</body>
</html>
Comment syntax
<!-- Our Comments -->
Title, Script, Link & Meta Tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="This is description">
<meta name="keywords" content="html, html tutorials, web development">
<meta name="robots" content="INDEX, FOLLOW">
<title>Document</title>
<!-- This is how you include external css -->
<link rel="stylesheet" href="harry.css">
<!-- This is how you include external JavaScript -->
<script src="harry.js"></script>
</head>
<body>
</body>
</html>
Body Headings Demo text Style Break Line change Horizontal line & Paragraphs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn heading & Title</title>
</head>
<body>
<h1>Aslam</h1>
<h2>Aslam</h2>
<h3>Aslam</h3>
<h4>Aslam</h4>
<h5>Aslam</h5>
<h6>Aslam</h6>
<p>This is tesing</p>
<!-- Lorem command use for dummy text lorem23 for 23 words -->
<p>Lorem ipsum dolor sit, amet consectetur <strong>Lorem, ipsum dolor.</strong>adipisicing elit. Magni voluptas quasi blanditiis officiis <br>facere<em>Lorem, ipsum.</em> autem vitae quos saepe adipisci. Tempore beatae perspiciatis ad!</p>
<!-- p*4 will number four para below -->
<p>first <br> This is to inform you.</p>
<hr>
<p>second</p>
<p>third</p>
<p>fourth</p>
<!-- Strong for bold, em for italic <br> for line change hr for horizontal line -->
</body>
</html>
How to add image, link, and other pages in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><Title></Title></title>
</head>
<body>
<!-- how to link web page with link name -->
<a href="https://iaffordablesolution.com" target="_blank" >Go to linkname0</a><br>
<a href="https://iaffordablesolution.com" target="_blank" >Go to linkname1</a><br>
<a href="https://iaffordablesolution.com" target="_blank" >Go to linkname2</a><br>
<a href="https://iaffordablesolution.com" target="_blank" >Go to linkname3</a><br>
<a href="https://iaffordablesolution.com" target="_blank" >Go to linkname4</a><br>
<!-- target="_blank" will help to open in new tab -->
<!-- <br> wil help to link name in horizontal urvadhar -->
<!-- how to link a html file with link name -->
<a href="bodyheadingparagraph&style.html" target="_blank" > Link name </a>
<!-- How to link a image and it's a changing image website save it, you change the image size directly for
last URL and use CSS for more styling -->
<img src="https://source.unsplash.com/collection/190727/500x900">" alt="Your net is slow">
<img src="satellite.jpg"> alt="Error code">
<!-- alt will show as a text if image in not loaded, file should be save in same folder, only file name will work -->
</body>
</html>
Note: Tags ke andar attribute hota hn like, a href ke andar target blank ek attribute
List & Tables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <ul type ="disc" discm circle square> -->
<ul type="cicle">
<ul type="disc">
<li>This is first item of my unordered list</li>
<li>This is second item of my unordered list</li>
<ol type="i">
<li>This is third item of my unordered list</li>
</ol>
<li>This is third item of my unordered list</li>
</ul>
<ol type="A">
<li>This is first item of my ordered list</li>
<li>This is second item of my ordered list</li>
<li>This is third item of my ordered list</li>
</ol>
<ol type="I">
<li>This is first item of my ordered list</li>
<li>This is second item of my ordered list</li>
<li>This is third item of my ordered list</li>
</ol>
<!-- Table -->
<h3>HTML Table</h3>
<table>
<thead>
<tr>
<th>Name</th>
<th>Employe ID</th>
<th>City</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sameer</td>
<td>1001</td>
<td>Lucknow</td>
<td>Web Devlopment</td>
</tr>
<tr>
<td>Roy</td>
<td>1003</td>
<td>Pune</td>
<td>Web Android</td>
</tr>
</tbody>
</table>
</body>
</html>
How to create forms and inputs tags, dropdown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>This form HTML Tutur</h2>
<form action="backend.php">
<!-- How to lable a name need to save id with same Name -->
<label for="name"> Name </label>
<!-- div for each seprate row else you can use BR -->
<div>
<input type="text" name="myname" id="name">
</div>
<br>
Lable before div for name will be remain same
<label for="role">Role</label>
<div>
<input type="text" name="myrole" id="role">
</div>
<br>
<div>
Email: <input type="email" name="myemail">
</div>
<!-- gives space between the line -->
<br>
<!-- myname, myrole and myemail will work on php file Name -->
<div>
Date : <input type="date" name="myDate">
</div>
<br>
<div>
Bonus: <input type="number" name="mynumber">
</div>
<br>
<div>
Are you eligible? <input type="checkbox" name="mycheckbox">
</div>
<br>
<div>
Gender: Male <input type="radio" name="mygender"> Female <input type="radio" name="mygender"> Other <input
type="radio" name="mygender">
</div>
<br>
<div>
<div>
Write your idea: <textarea name="my Text" cols="30" rows="10"></textarea>
</div>
<br>
<!-- Dropdown Button in form, inside select option will come -->
<div>
<label for="car">Car</label>
<select name="mycar" id="car">
<option value="India">Indica</option>
<option value="Maruti">Mar</option>
<option value="Honda"selected>Hond</option>
</select>
</div>
<br>
Submit: <input type="submit" value="Submit Now">
Reset: <input type="reset" value="Reset Now">
</div>
</form>
</body>
</html>
Inline Block Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Block Elemetnts</title>
</head>
<body>
<!-- jo pura space le wo block element & jo apni jagah le wo inline element -->
<strong style="border: 2px solid red;">This is paragrah</strong>
<p style="border: 2px solid blue;">This is also a paragrah</p>
<pspan style="border: 2px solid red;">This is span</span>
<span style="border: 2px solid red;">This is also a span</span>
<!-- After putting a tag all line comes under one line, "changing p into a" -->
<strong style="border: 2px solid red;">This is paragrah</strong>
<a style="border: 2px solid blue;">This is also a paragrah</a>
<pspan style="border: 2px solid red;">This is span</span>
<span style="border: 2px solid red;">This is also a span</span>
</body>
</html>
ID and Classes 10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>IDs & Classes in HTML</title>
</head>
<body>
<h3>IDs & classes Tutorils in HTML</h3>
<!-- Declaring IDs & Classes which help us to use the particular properties of
"IDs=name of a element" & "Classes=style temple like colr, size, back, border, marging, padding"
ID's only one can use for a element but multiple classes will use after single space -->
<div id="mainbox" class="redBg blackBorder">
This is main box
</div>
<!-- Emmet -->
<!-- . is of class and # is for IDs -->
<span class="redbg"></span>
<span id="mainspam"></span>
<!-- div.redbg.blackBorder.anoterclass -->
<!-- Above line then enter will give complete syntax below and it is shorcut to write complete code without syntax error -->
<div class="redBg anotherclass blackBorder"></div>
<!-- Emmet takes div tag as default -->
<div class="blackbackgroud"></div>
<!-- Creating multiple elements using Emmet -->
<!-- span.myclass.myclasss2.myclass3*4 enter -->
<span class="myClass myClass1 myClass2">First</span>
<span class="myClass myClass1 myClass2">Second</span>
<span class="myClass myClass1 myClass2">Third</span>
<span class="myClass myClass1 myClass2">Fourth</span>
</body>
</html>
HTML Entities 11
Reference link:
https://dev.w3.org/html5/html-author/charref
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Entities</title>
</head>
<body>
<div= class="container">
<p>
This is a paragraph
</p>
</div>
<div>
<p>This is another pragraph with two spaces</p>
<p> Paragrabh is written like this <p></p>
<p> Pound currency will written like this £</p>
<p> Copyright will writter like this ©</p>
<p> Pie will writter like this Π</p>
<!-- Just copy from below link https://dev.w3.org/html5/html-author/charref and paste for any special charcter -->
<p>This empty character ​</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Tags</title>
</head>
<body>
<h3>Semantic Tags</h3>
<!-- Drop down button or one click button -->
<details>
<summary>What We Do</summary>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error iure nemo nobis nesciunt necessitatibus, voluptates tempora illum dicta aut esse fuga hic optio maiores quos. Libero obcaecati facere porro, ad repellat, vero possimus inventore nemo earum explicabo corrupti labore nihil ducimus eveniet. Dignissimos cumque enim voluptatem consequatur soluta mollitia culpa dolor inventore nostrum placeat! Ipsum asperiores mollitia ducimus optio ex.
</details>
<details>
<summary>Our Team</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
<details><summary>Work</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
<details><summary>Testimonials</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
</body>
</html>
Semantic Tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic Tags</title>
</head>
<body>
<h3>Semantic Tags</h3>
<!-- Drop down button or one click button -->
<details>
<summary>What We Do</summary>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error iure nemo nobis nesciunt necessitatibus, voluptates tempora illum dicta aut esse fuga hic optio maiores quos. Libero obcaecati facere porro, ad repellat, vero possimus inventore nemo earum explicabo corrupti labore nihil ducimus eveniet. Dignissimos cumque enim voluptatem consequatur soluta mollitia culpa dolor inventore nostrum placeat! Ipsum asperiores mollitia ducimus optio ex.
</details>
<details>
<summary>Our Team</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
<details><summary>Work</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
<details><summary>Testimonials</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
</body>
</html>
</body>
</html>
CSS Intro
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS intro</title>
<!-- Third Way CSS external link -->
<!-- <link rel="stylesheet" href="13CSS.css"> -->
<!-- Second Way CSS internal CSS, always come in head section -->
<style>
p{
color: blue;
background-color:royalblue;
}
</style>
<link rel="stylesheet" href="13CSS.css">
</head>
<body>
<h3>This is CSS Tutorial</h3>
<!-- First Way CSS inline CSS -->
<!-- <p style="color:red; background-color:blue;"> This tutorial will teach you everything you need to know about HTML/CSS</p> -->
<p> This tutorial will teach you everything you need to know about HTML/CSS</p>
<!-- Priority order
1: inline
2: Interal or External (Last one work, override last style) -->
</body>
</html>
Selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Selectors in CSS</title>
<style>
/* Element Selector */
p{
border: 2px solid red;
}
/* ID selector and targeting via ID */
#firstPara {
color: royalblue;
}
#secondPara {
color: burlywood;
}
Class Selector .bgBlue {
color: yellow;
background-color: blue;
}
/* Grouping Selector */
footer,
span {
background-color: pink;
}
</style>
</head>
<body>
<h3>CSS Selectors</h3>
<p id="firstPara"> This is First paragraph to
demonstrate css selectors</p>
<p id="secondPara" class="redElement bgBlue">
This is second paragraph to demonstrate
css selectors</p>
<p> This is forth paragraph to demonstrate css
selectors</p>
<p> This is fifth paragraph to demonstrate css
selectors</p>
<div>
<p>
This is last paragraph to demonstrate
css
selectors
</p>
<span>This is span</span>
</div>
<footer>This is Footer</footer>
</body>
<!-- ID must be unique & class can be multiple -->
<!-- Element selector like under stype p formating -->
</html>
Chrome Develpment Tool
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Developer Tool</title>
<style>
p{
color: purple;
font-size: italic;
background-color:rosybrown;
}
</style>
</head>
<body>
<h4>
This is a Develper tool
</h4>
<p>This is a tutorial for Chrome developer tools</p>
</body>
</html>
Fonts in CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>CSS Fonts</title>
<link rel="preconnect"
href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Train+One&display=swap"
rel="stylesheet">
<!-- inline CSS selector via paragraph -->
<style>
p {
font-family:'Train One', cursive;
font-size: 30px;
/* space between line */
line-height: 1.8em;
}
span{
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h4>CSS Fonts</h4>
<p>Lets play with <span>fonts</span> it is very exciting
</p>
</body>
</html>
Color in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Color</title>
<style>
#firstPara {
color: red;
/*color by name*/
}
#secondPara {
color: rgb(180, 72, 22);
/*colur by RGB*/
}
#thirdPara {
color: white;
background-color: #D84D2E;
/*colur by HEX Value*/
}
</style>
</head>
<body>
<h3>This is my first block</h3>
<p id="firstPara">This is a paragraph of first
block Lorem ipsum dolor sit amet
consectetur adipisicing elit. Tempora
porro animi quisquam alias maxime odio
neque nihil reiciendis debitis quasi,
voluptas odit explicabo illum nisi veniam
fuga officiis earum ducimus! </p>
<p id="secondPara">This is a paragraph of
second block Lorem ipsum dolor sit amet
consectetur adipisicing elit. Tempora
porro animi quisquam alias maxime odio
neque nihil reiciendis debitis quasi,
voluptas odit explicabo illum nisi veniam
fuga officiis earum ducimus! </p>
<p id="thirdPara">This is a paragraph of third
block Lorem ipsum dolor sit amet
consectetur adipisicing elit. Tempora
porro animi quisquam alias maxime odio
neque nihil reiciendis debitis quasi,
voluptas odit explicabo illum nisi veniam
fuga officiis earum ducimus! </p>
</body>
</html>
Border & Background
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Height Weight Border & Background
</title>
<style>
#firstPara {
background-color: thistle;
height: 100px;
width: 455px;
border-color: yellow;
border-style: bold;
border-radius: 11px;
/* border:2px solid green (another way of writing the border style*/
}
#secondPara {
background-color: rgb(255, 255, 255);
height: 100px;
width: 455px;
border-top: 2px solid red;
border-bottom: 2px solid rgb(63, 221, 32);
border-left: 2px solid rgb(36, 16, 75);
border-right: 2px solid rgb(206, 236, 34);
border-top-right-radius: 5px;
border-top-left-radius: 15px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 35px;
}
#thirdPara {
height: 350px;
width: 455px;
background-image: url('https://www.codewithharry.com/static/home/img/photo.png');
/* image can also pick by local folder by file name under url section above */
border: 2px solid red;
background-repeat: no-repeat;
/* repeat can done only x axis and y axis*/
/* background-position: 8px 10px; (x axis and y axis can set) */
background-position: center center;
/* Top left top right bottom left bottom right center left and center right are combination; */
}
</style>
</head>
<body>
<h3>This is heading</h3>
<p id="firstPara">This is para Lorem ipsum
dolor sit amet consectetur, adipisicing
elit. Unde tenetur fugit eos temporibus
eligendi ipsam qui, nihil praesentium nisi
aliquam doloremque at nostrum enim, minima
maiores. Autem tempora dicta quaerat
maxime nisi sed, fugiat ipsa?</p>
<h3>This second is heading</h3>
<p id="secondPara">This is para Lorem ipsum
dolor sit amet consectetur, adipisicing
elit. Unde tenetur fugit eos temporibus
eligendi ipsam qui, nihil praesentium nisi
aliquam doloremque at nostrum enim, minima
maiores. Autem tempora dicta quaerat
maxime nisi sed, fugiat ipsa?</p>
<h3>This Third is heading</h3>
<p id="thirdPara">This is para Lorem ipsum
dolor sit amet consectetur, adipisicing
elit. Unde tenetur fugit eos temporibus
eligendi ipsam qui, nihil praesentium nisi
aliquam doloremque at nostrum enim, minima
maiores. Autem tempora dicta quaerat
maxime nisi sed, fugiat ipsa?</p>
</body>
</html>
Box Model Margin & Padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Box Model Margin Padding</title>
<style>
/* Universal Selector */
*{
box-sizing: border-box;
margin:0;
padding:0;
}
body{
background-color:rgb(78, 11, 235) ;
}
.container {
background-color: rgb(208 195 195 / 57%);
border: 3px solid rgb(36, 68, 212);
/*we can set padding for top bottom, left and right like this */
/*padding-top:79px;*/
/*padding-bottom:79px; */
/*padding-left:34px; */
/*padding-right:79px; */
/* margin-top: 3px;
margin-bottom: 5px;
margin-left: 34px;
margin-right:5px; */
/* padding:23px 56px 6px 78px ; format of input*/
/*padding = top right bottom left */
/*margin = top right bottom left */
/* pading: y(top/bottom) x(left right) */
/* margin: y(top/bottom) x(left right) */
padding: 34px 19px;
margin: 14px 19px;
border-radius: 23px;
width: 533px;
/* box-sizing: border-box; */
}
</style>
</head>
<body>
<div class="container">
<h3>This is heading</h3>
<p id="firstPara">Lorem ipsum dolor sit
amet consectetur adipisicing elit.
Repudiandae tenetur amet dolorem, esse
nostrum facere aut debitis sunt!
Mollitia cumque enim eos nihil libero
magnam numquam sequi vel assumenda
dolore. Quis ad perferendis ipsum?</p>
</div>
<div class="container">
<h3>This is heading</h3>
<p id="secondPara">Lorem ipsum dolor sit
amet consectetur adipisicing elit.
Repudiandae tenetur amet dolorem, esse
nostrum facere aut debitis sunt!
Mollitia cumque enim eos nihil libero
magnam numquam sequi vel assumenda
dolore. Quis ad perferendis ipsum?</p>
</div>
<div class="container">
<h3>This is heading</h3>
<p id="thirdPara">Lorem ipsum dolor sit
amet consectetur adipisicing elit.
Repudiandae tenetur amet dolorem, esse
nostrum facere aut debitis sunt!
Mollitia cumque enim eos nihil libero
magnam numquam sequi vel assumenda
dolore. Quis ad perferendis ipsum?</p>
</div>
<!-- padding<border<margin (are in this order of rectanglur box) -->
</body>
</html>
Text Alignment Float of Box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Alignmen Float Ct</title>
<link rel="preconnect"
href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Single+Day&display=swap"
rel="stylesheet">
<style>
* {
background-color: silver;
} /* Whole page changes apply here*/
body {
font-family: 'Single Day', cursive;
}
.container {
width: 900px;
border: 3px solid purple;
margin: 33px auto;
background-color: sandybrown;
/* margin input in y axis and x axis format */
}
.item {
border: 3px solid grey;
margin: 12px 3px;
padding: 12px 3px;
background-color: rgba(133, 190, 133, 0.644);
}
#fruit {
float: left;
width: 48%;
}
#computer {
float: left;
width: 48%;
}
#staionary{
/* float: left; */
width: 100%;
clear: both;
}
/* #pencil{
float: left;
width: 50%; */
p, h1{
/* text-align: left;
text-align: right;
text-align: center; */
text-align: justify;
}
</style>
</head>
<body>
<div class="container">
<div id="fruit" class="item">
<h3>Fruits</h3>
<p id="fruitpara" class="para">Lorem
ipsum dolor sit amet consectetur
adipisicing elit. Est tempora
doloremque ipsam deserunt
molestiae dolorum aspernatur
error! Deleniti, modi nemo vero
quae fuga inventore libero, beatae
suscipit temporibus vitae minima
aliquid quisquam repudiandae
dolorum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi alias incidunt beatae officia illo blanditiis commodi dignissimos expedita ipsam quam natus dolorum ab eius provident, dolor excepturi. Facere voluptates omnis, reprehenderit pariatur earum laborum.</p>
</div>
<div id="computer" class="item">
<h3>Computer</h3>
<p id="computerpara" class="para">
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Est
tempora doloremque ipsam deserunt
molestiae dolorum aspernatur
error! Deleniti, modi nemo vero
quae fuga inventore libero, beatae
suscipit temporibus vitae minima
aliquid quisquam repudiandae
dolorum! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, temporibus iusto quaerat vel iste similique illum fugiat molestiae corrupti, quas, dolorem dolore. Dolores illo placeat maxime perspiciatis maiores fugit accusantium porro praesentium temporibus repellendus!</p>
</div>
<div id="staionary" class="item">
<h3>Staionary</h3>
<p id="staionarypara" class="para">
Lorem ipsum dolor sit amet
consectetur adipisicing elit. Est
tempora doloremque ipsam deserunt
molestiae dolorum aspernatur
error! Deleniti, modi nemo vero
quae fuga inventore libero, beatae
suscipit temporibus vitae minima
aliquid quisquam repudiandae
dolorum!</p>
</div>
<div id="pencil" class="item">
<h3>Pencil</h3>
<p id="pencilpara" class="para">Lorem
ipsum dolor sit amet consectetur
adipisicing elit. Est tempora
doloremque ipsam deserunt
molestiae dolorum aspernatur
error! Deleniti, modi nemo vero
quae fuga inventore libero, beatae
suscipit temporibus vitae minima
aliquid quisquam repudiandae
dolorum!</p>
</div>
</div>
</body>
</html>
Button Psedu Sellector
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pseudo Selector & more Styling</title> <style> .container { border: 2px solid rgb(218, 96, 96); background-color: rgba(141, 197, 141, 0.739); padding: 34px; margin: 34px auto; width: 666px;
}
a { text-decoration: none; color: black; }
a:hover { color: rgb(27, 26, 27); background-color: rgb(241, 243, 248); }
a:visited { background-color: yellow; }
a:active { background-color: aquamarine; }
.btn { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; background-color: crimson; padding: 6px; border: 2px solid black; cursor: pointer; font-size: 13px; border-radius: 4px; }
.btn:hover { color: yellow; background-color: white; } </style></head>
<body> <div class="container" id="count1"> <h3>This is my heading</h3> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, sapiente delectus sunt, voluptatum, ex maiores ipsa unde nam alias pariatur perspiciatis assumenda veniam aperiam! Excepturi doloribus ipsa amet hic, quod alias doloremque beatae eius?</p> <a href="https://facebook.com" class="btn">Read more</a> <button class="btn">Contact us</button> </div></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Pseudo Selector & more Styling</title>
<style>
.container {
border: 2px solid rgb(218, 96, 96);
background-color: rgba(141, 197, 141, 0.739);
padding: 34px;
margin: 34px auto;
width: 666px;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: rgb(27, 26, 27);
background-color: rgb(241, 243, 248);
}
a:visited {
background-color: yellow;
}
a:active {
background-color: aquamarine;
}
.btn {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
background-color: crimson;
padding: 6px;
border: 2px solid black;
cursor: pointer;
font-size: 13px;
border-radius: 4px;
}
.btn:hover {
color: yellow;
background-color: white;
}
</style>
</head>
<body>
<div class="container" id="count1">
<h3>This is my heading</h3>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Dignissimos,
sapiente delectus sunt, voluptatum, ex
maiores ipsa unde nam alias pariatur
perspiciatis assumenda veniam aperiam!
Excepturi doloribus ipsa amet hic,
quod alias doloremque beatae eius?</p>
<a href="https://facebook.com"
class="btn">Read more</a>
<button class="btn">Contact us</button>
</div>
</body>
</html>
Navigation Menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Navigation Menu</title>
<style>
/* Menu bar decoration*/
.navbar {
background-color: #ce542e;
border-radius: 30px;
}
.navbar ul {
overflow: auto;
}
.navbar li {
float: left;
list-style: none;
padding: auto;
margin: 13px 20px;
}
.navbar li a {
padding: 3px 3px;
text-decoration: none;
/* removing text from menu bar heading*/
color: white;
}
.search {
float: right;
color: white;
padding: 12px 75px;
text-align: right;
}
.navbar input {
border: 2px solid black;
border-radius: 14px;
padding: 3px;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a>
</li>
<div class="search">
<input type="text"
name="search" id="search"
placeholder="Search this website">
</div>
</ul>
</nav>
</header>
</body>
</html>
CSS Display Property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>CSS Display Property</title>
<style>
* {
box-sizing: border-box;
}
header {
margin: auto;
border: 2px solid rgba(202, 211, 80, 0.952);
background-color: gray;
width: 1200px;
}
img {
width: 34px;
margin: auto;
display: block;
}
h3 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
text-align: center;
}
.box {
border: 4px solid rgba(27, 50, 253, 0.602);
background-color: grey;
margin: 4px 0px;
padding: 23px;
display: inline-block;
width: 33%;
box-sizing: border-box;
}
.container {
width: 1200px;
margin: auto;
}
</style>
</head>
<body>
<header class="top">
<img src="https://codewithharry.com/static/home/img/photo.png"
alt="" class="src">
<h3>Welcome to Aslam blog</h3>
</header>
<div class="container">
<div class="box">
<h4 class="heading">Heading<h4>
<p>Lorem ipsum dolor, sit amet
consectetur adipisicing
elit. Laudantium quibusdam
perspiciatis autem
laboriosam cupiditate quis
error pariatur ab magni
earum obcaecati, dolorem a
id consectetur qui quam
beatae minima, provident
iusto rem illo voluptas.
</p>
</div>
<div class="box">
<h4 class="heading">Heading<h4>
<p>Lorem ipsum dolor, sit amet
consectetur adipisicing
elit. Laudantium quibusdam
perspiciatis autem
laboriosam cupiditate quis
error pariatur ab magni
earum obcaecati, dolorem a
id consectetur qui quam
beatae minima, provident
iusto rem illo voluptas.
</p>
</div>
<div class="box">
<h4 class="heading">Heading<h4>
<p>Lorem ipsum dolor, sit amet
consectetur adipisicing
elit. Laudantium quibusdam
perspiciatis autem
laboriosam cupiditate quis
error pariatur ab magni
earum obcaecati, dolorem a
id consectetur qui quam
beatae minima, provident
iusto rem illo voluptas.
</p>
</div>
<!-- <div class="box">
<h4 class="heading">Heading<h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium quibusdam perspiciatis autem laboriosam cupiditate quis error pariatur ab magni earum obcaecati, dolorem a id consectetur qui quam beatae minima, provident iusto rem illo voluptas.</p> -->
</div>
</div>
</body>
</html>
Position position property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Postion Property</title>
<style>
.container {
border: 2px solid black;
background-color: khaki;
height: 3444px;
}
/* position: static(default), relative,absoulte, fixed, sticky */
.box {
border: 2px solid grey;
width: 150px;
height: 150px;
margin: 2px;
display: inline-block;
}
#box3 {
/* relative: relative to its normal position and will leave a gap at its normal postion*/
/* position: relative; */
/* absolute: relative to the postion of its first parernt line */
/* position: absolute; */
/* fixed: Positions the element relative to the browser window*/
/* position: fixed;
right: 4px;
bottom: 2px; */
/* top:34px;
left: 134px; */
/*Sticky*/
position: sticky;
top: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box1">1</div>
<div class="box" id="box2">2</div>
<div class="box" id="box3">Chat with us
</div>
<div class="box" id="box4">4</div>
</div>
</body>
</html>
Project Gym
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Project Fitness</title>
</head>
<link rel="preconnect"
href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@500&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="CSS/style.css">
<style>
/*CSS rest*/
body {
font-family: 'Baloo Bhaina 2', cursive;
margin: 0px;
padding: 0px;
background: url(img/Gym1.jpg);
border-image-width: 25%;
color: white;
}
.left {
/* border: 2px solid red; */
display: inline-block;
position: absolute;
left: 86px;
top: -3px;
margin: 0px auto;
}
.left img {
width: 108px;
}
.left div {
text-align: center;
line-height: 0px;
font-size: 15px;
}
.mid {
/* border: 2px solid green; */
display: block;
width: 36%;
margin: 20px auto;
}
.right {
/* border: 2px solid yellow; */
display: inline-block;
position: absolute;
right: 34px;
top: 33px;
}
.navbar {
display: inline-block;
}
.navbar li {
color: white;
display: inline-block;
font-size: 20px;
}
.navbar li a {
color: white;
text-decoration: none;
/* to remove line from text menu name*/
padding: 34px 20px;
margin: px;
}
.navbar li a:active {
text-decoration: underline;
color: grey;
}
.btn {
margin: 0px 9px;
background-color: black;
color: white;
padding: 4px 14px;
border: 2px solid grey;
border-radius: 10px;
font-size: 20px;
cursor: pointer;
font-family: 'Baloo Bhaina 2', cursive;
}
.btn:hover {
background-color: grey;
}
.container {
border: 2px solid white;
margin: 106px 29px;
padding: 20px 20px;
width: 31%;
border-radius: 15px;
}
.form-group input {
display: block;
width: 500px;
padding: 8px 3px;
border: 2px solid black;
margin: 14px auto;
/* only work when display is block and widh is given 117 and 118 line of code*/
font-family: 'Baloo Bhaina 2', cursive;
font-size: 25px;
border-radius: 8px;
text-align: center;
}
.container h1 {
text-align: center;
}
.container button {
display: block;
width: 58%;
margin: 30px auto;
padding: 20px auto;
background-color: rgb(140, 150, 130);
}
</style>
<body>
<header class="header">
<div class="left">
<img src="img/Gym.png" alt="">
<div class="">Apple Fitness</div>
</div>
<!-- Left box for logo -->
</ul>
<div class="mid">
<!-- Mid for Menu -->
<ul class="navbar">
<!-- To show line and hover need to add active class in home menu -->
<li><a href="#"
class="active">Home</a>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Fitness
Calcultor</a></li>
<li><a href="#">Contact</a></li>
</div>
<!-- Right for search or box buttons -->
<div class="right">
<button class="btn">Call us
Now</button>
<button class="btn">E-mail Us</button>
</div>
</header>
<div class="container">
<h1>Join the best Gym of Lucknow</h1>
<form action="noactinon.php">
<div class="form-group">
<input type="text" name=""
placeholder="Enter your name">
</div>
<div class="form-group">
<input type="text" name=""
placeholder="Enter your mobile number">
</div>
<div class="form-group">
<input type="text" name=""
placeholder="Enter your address">
</div>
<button class="btn">Submit</button>
</form>
</div>
</body>
</html>
Visibility & z-index
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Visibility & z-index</title> <style> .box { width: 170px; height: 170px; border: 2px solid black; }
#box-1 {
background-color: green; position: relative; top: 49px; z-index: 35px; }
#box-2 {
/* IMP z-index: will only work for position:relative, absoulute, fixed or stichy not on default IMP*/ /* Who ever element z-index is higher will show above*/ /* Hide element with space of that elements*/ /* display: none; */
/* Hide element and keep space for that elements */ /* visibility: hidden; */ position: relative; top: 34px; background-color: red; z-index: 34px; }
#box-3 { background-color: blue; }
#box-4 { background-color: yellow; } </style></head>
<body> <div class="box" id="box-1"></div> <div class="box" id="box-2"></div> <div class="box" id="box-3"></div> <div class="box" id="box-4"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Visibility & z-index</title>
<style>
.box {
width: 170px;
height: 170px;
border: 2px solid black;
}
#box-1 {
background-color: green;
position: relative;
top: 49px;
z-index: 35px;
}
#box-2 {
/* IMP z-index: will only work for position:relative, absoulute, fixed or stichy not on default IMP*/
/* Who ever element z-index is higher will show above*/
/* Hide element with space of that elements*/
/* display: none; */
/* Hide element and keep space for that elements */
/* visibility: hidden; */
position: relative;
top: 34px;
background-color: red;
z-index: 34px;
}
#box-3 {
background-color: blue;
}
#box-4 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="box" id="box-1"></div>
<div class="box" id="box-2"></div>
<div class="box" id="box-3"></div>
<div class="box" id="box-4"></div>
</body>
</html>
Flex box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Flexbox</title>
<style>
/* In block elements full width will taken */
.container {
height: 500px;
width: 100%;
border: 2px solid black;
/* display:flex will change the layout from horizontal line(-) to verital line(!)*/
display: flex;
/*Initilate the container for flex box*/
/* Flex properties for a flex container */
/*Flex Properties for flex container, it also override last value(*/
/* flex-direction: row;(default value flex direction is row) */
/* flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse; */
/* flex-wrap: wrap;(default value flex direction is no-wrap) */
/* flex-wrap: wrap-reverse; */
/* Flex-flow is combination of direction and wrap*/
/*This is shorthand for flex-direction: and flex wrap
After zooming item remain center */
/* flex-flow: row-reverse; */
/* Justify content will justify the content in horizonal direction*/
/* justify-content: center;*/
/*justify-content: space-between; */
/* justify-content: space-evenly; */
/* justify-content: space-around; */
/*/* Justify content will justify the content in vertical direction For vertical center under flex*/
/* align-items: center; */
/* align-items: flex-end; */
/* align-items: flex-start; */
/* align-items: stretch; */
flex-direction: row;
}
.item {
height: 200px;
width: 200px;
background-color: tomato;
border: 2px solid green;
margin: 10px;
padding: 3px;
}
#item-1 {
/* Flex properties for a flex item */
/* Higer the order, later it shows up in the container, order of post */
/* order:2; */
/* flex-grow: 2; */
}
#item-2 {
/* flex-grow: 3; */
/* flex-shrink: 3; */
flex-basis: 160px;
/* When flex direction set to row flex -basis will control width */
/* When flex direction set to column flex -basis will control height */
}
#item-3 {
/*Sikude bhi zada aur badhe bhi zada with row in flex-direction under container*/
/* flex:2 2 230px; */
align-self: flex-start;
align-self: flex-end;
align-self: center;
}
</style>
</head>
<body>
<h1>This is Flexbox Tutorials</h1>
<div class="container">
<div class="item" id="item-1">First Box
</div>
<div class="item" id="item-2">Second Box
</div>
<div class="item" id="item-3">Third Box
</div>
<!-- <div class="item" id="item-4">Fourth Box
</div>
<div class="item" id="item-5">Fifth Box
</div>
<div class="item" id="item-6">Sixth Box
</div> -->
</div>
</body>
</html>
29em_rem_vh_vw_units_Responsive design
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Size Units</title>
<style>
html {
font-size: 25px;
}
.container {
/* width: 400px; */
width: 100vw;
/* height: 344px; */
height: 100vh;
font-size: 10px;
border: 2px solid red;
background-color: gray;
}
h1 {
text-align: center;
}
#First {
/* Usage of em When parent element size change child elements size adjust */
/* font-size: 3em;/* em 10 times of parent */
/* padding: 3em; */
}
#Second {
/* Rem work on basis of base HTML size */
/* font-size: 3rem; */
/* padding: 3rem; */
}
</style>
</head>
<body>
<div class="container">
<h1 id="First">This is a first heading</h1>
<h1 id="Second">This is a second heading</h1>
<h1 id="Third">This is a third heading</h1>
</div>
</body>
</html>
30 Media Queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Queries</title>
<style>
.box {
font-size: 72px;
text-align: center;
background-color: red;
color: white;
display: none;
}
@media only screen and (max-width:300px) {
#box-1 {
display: block;
background-color: cyan;
}
}
@media only screen and (min-width:300px) and (max-width:500px) {
#box-2 {
display: block;
background-color: violet;
}
}
@media only screen and (min-width:500px) and (max-width:800px) {
#box-3 {
display: block;
background-color: yellow;
}
}
@media only screen and (min-width:800px) {
#box-4 {
display: block;
background-color: green;
}
}
</style>
</head>
<body>
<div class="box" id="box-1">Main ek iPhone hoon</div>
<div class="box" id="box-2">Main ek tablet hoon</div>
<div class="box" id="box-3">mai ek computer hoon</div>
<div class="box" id="box-4">Mai ek widescreen computer hoon</div>
</body>
</html>
CSS 31More on selectors how to CSS target in details
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>More on selectors how to CSS target in details</title>
<style>
h1 {
background-color: red;
color: black;
font-weight: bold;
text-align: center;
}
/*If p is contained by any li which is contactined by div */
/* div p{
color:yellow;
font-weight:bold;
background-color:green;
} */
/* if p is right inside div then this CSS will apply */
/*Div ke andar direct p pe apply hoga*/
/* div > p {
color: yellow;
font-weight: bold;
background-color: green;
} */
/*if p is right after div i.e is the next sibling of div*/
div+p {
color: white;
background-color: rgb(179, 155, 155);
}
</style>
</head>
<body>
<h1>This is more on selectors</h1>
<div class="container">
<div class="row">
<ul>
<li class="item">
<p>this is another paragraph inside li</p>
</li>
<li>This will not get effected</li>
</ul>
<p>This is pargraph</p>
</div>
<p>This is other paragraph</p>
</div>
<p>This is outermost pargraph</p>
</body>
</html>
32 Attribute & nth child pseudo Selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute and nth child pseduo selectors</title>
<style>
.container{
/* If we want to center block element then we need to set width and margin need to auto; */
display: block;
margin:auto;
width: 233px;
}
input{
display: block;
}
/* This will change text input values and color */
input[type='text']{
padding: 23px;
border: 2px solid red;
color: green;
}
a[target]{
font-size:29px;
color:orange;
}
/* targeting other link CSS Psuedo selector */
a[target='_self']{
font-size:29px;
color:green;
}
input[type='email']{
padding: 5px;
border: 2px solid rgb(33, 231, 60);
color: aqua;
}
/* This will apply CSS for third child */
/* li:nth-child(3){
color: magenta;
} */
/* in below formula where n=0 */
/* li:nth-child(2n+0){
color: blue;
font-size: 15px;
} */
/* odd child */
li:nth-child(odd){
background-color: chocolate;
}
/* Even Child */
li:nth-child(odd){
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<h1><a href="http://google.com" target="_blank">Go to Google</a></h1>
<h1><a href="http://facebook.com" target="_self">Go to Google</a></h1>
<form action="" class="form-container">
<input type="text" placeholder="Enter your name">
<input type="email" placeholder="Enter your email">
<input type="password" placeholder="Enter your password">
<input type="submit" value="Submit">
</form>
<ul>
<li class="item" id="item-1">Item1</li>
<li class="item" id="item-2">Item2</li>
<li class="item" id="item-3">Item3</li>
<li class="item" id="item-4">Item4</li>
<li class="item" id="item-5">Item5</li>
<li class="item" id="item-6">Item5</li>
<li class="item" id="item-7">Item5</li>
<li class="item" id="item-8">Item5</li>
<li class="item" id="item-9">Item5</li>
<li class="item" id="item-10">Item5</li>
<li class="item" id="item-11">Item5</li>
<li class="item" id="item-12">Item5</li>
</ul>
</div>
</body>
</html>
33 Before and After Pseudo Selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Before and After Pseudo Selector</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto Condensed', sans-serif;
background-color: black;
color: white;
margin: 0;
padding: 0;
}
header::before {
background: url(https://source.unsplash.com/collection/190727/1600x900)
no-repeat center center/cover;
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
opacity: 0.5;
}
section {
height: 344px;
margin: 3px 280px;
display: flex;
flex-direction: column;
align-items: center;
/* border: 2px solid red; */
justify-content: center;
/*Inside Flex box justify all the things*/
font-size: 2rem;
}
/* section::before {
content: "This before content";
} */
/* section::after {
content: "This is after content";
} */
header {
display: flex;
flex-direction: column;
}
li {
list-style: none;
padding: 20px 23px;
}
.navigation {
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
display: flex;
}
h1 {
font-size: 4rem;
}
p {
text-align: center;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<ul class="navigation">
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Service</li>
<li class="item">Contact Us</li>
</ul>
</nav>
</header>
<section>
<h1>Welcome to coding World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro officia beatae itaque hic suscipit
aliquid est laborum voluptatem repellendus modi rem neque consequuntur magnam, accusamus amet facilis
odit corrupti sit eius, ea quos eligendi.</p>
</section>
<hr>
</body>
</html>
34 Box Shadow and Text Shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow and Text Shadow </title>
<style>
.container {
display: flex;
/*Vertical to horizontal aa jayega jis to targert karenge*/
}
.card {
padding: 23px 12px;
margin: 23px 12px;
/* border: 2px solid red; */
background-color: grey;
/*x asix then y axis then color shadow neeche ke liye positive and upar shadow ke liye negative*/
/* box-shadow: 5px 5px orange; */
/* box-shadow: -5px -5px orange; */
/*x asix then y axis then blur radius value then color shadow neeche ke liye positive and upar shadow ke liye negative*/
/* box-shadow: -7px -5px 10px green; */
/*x axis then y axis then blur-radius spread-radius then color (shadow neeche ke liye positive and upar shadow ke liye negative)*/
/* box-shadow: -7px -5px 10px 20px green; */
/*x axis then y axis then blur-radius spread-radius then rgba(alpha decide darkness of color) (shadow neeche ke liye positive and upar shadow ke liye negative)*/
/* box-shadow: -7px -5px 10px 20px rgba(206, 134, 62, 0.5); */
/* box-shadow: inset 3px 5px green; */
/* More than one shadow */
box-shadow: 3px 5px green, 3px 5px red;
}
.card h2 {
/* text-shadow: 2px 3px goldenrod; */
text-shadow: 3px 2px 1px goldenrod;
/*Also work in negative value on opposite direction*/
}
</style>
</head>
<body>
<div class="container">
<div class="card" id="card-1">
<h2>This is C++ Course</h2>
<p>I have started c++ course which does not mean that this will stop Lorem ipsum dolor sit amet consectetur
adipisicing elit. Dolore natus molestiae cumque sed temporibus,
vitae placeat accusamus quia animi sint voluptatem ipsa ex dolores delectus repellendus eum provident
enim illum facere! Quos, delectus repudiandae.</p>
</div>
<div class="card" id="card-2">
<h2>This is HTML course</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore natus molestiae cumque sed temporibus,
vitae placeat accusamus quia animi sint voluptatem ipsa ex dolores delectus repellendus eum provident
enim illum facere! Quos, delectus repudiandae.</p>
</div>
<div class="card" id="card-3">
<h2>Card3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore natus molestiae cumque sed temporibus,
vitae placeat accusamus quia animi sint voluptatem ipsa ex dolores delectus repellendus eum provident
enim illum facere! Quos, delectus repudiandae.</p>
</div>
</div>
</body>
</html>
35 Variables & Custom Properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables / Custom Properties</title>
<style>
:root {
--primary-color: blue;
--danger-color: red;
--thrid-color: green;
--forth-color: yellow;
--maxw: 333px;
}
.box {
--box-color: grey;
width: 200px;
height: 200px;
background-color: var(--primary-color);
border: 2px solid var(--danger-color);
box-shadow: 3px 3px var(--thrid-color);
/*(top bottom) (side) marging format*/
margin: 2px 9px;
}
.container {
max-width: var(--maxw);
margin: auto;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--danger-color);
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box-1"></div>
<div class="box" id="box-2"></div>
<div class="box" id="box-3"></div>
</div>
</body>
</html>
36 Creating Animations & Keyframes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes & Animations </title>
<style>
.container {
background-color: greenyellow;
}
.box {
background-color: green;
width: 250px;
height: 250px;
position: relative;
/* animation-name: aslam1; */
animation-name: aslam2;
animation-duration: 8s;
animation-iteration-count: 1;
/* start ho kar wahi khatam ho */
/* animation-fill-mode: forwards; */
/* start hokar wapas wahi aa jaega */
animation-fill-mode: alternate;
/* animation-timing-function: ease-in-out; */
/* animation-delay: 3s; this wil start animation after 3second*/
/* animation-direction: reverse; */
/* animation properties short hand */
/* animation:animation-name animation duration animation-timing-function animation-delay animation-iteration-count animation-fill-mode; */
/* animation: aslam2 5s ease-in 1s infinite forwards; */
}
@keyframes aslam2 {
0% {
top: 0px;
left: 0px;
}
25% {
top: 250px;
left: 0px;
}
75% {
top: 250px;
left: 250px;
}
100% {
top: 0px;
left: 250px;
}
}
@keyframes aslam1 {
from {
width: 200px;
}
to {
width: 1400px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
This is a box
</div>
</div>
</body>
</html>
37 Transitions in CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transitions</title>
<style>
body {
background-color: black;
}
#box {
display: flex;
height: 200px;
width: 200px;
background-color: red;
justify-content: center;
align-items: center;
/* transition-property: background-color;
transition-duration: 1s; */
/* transition-timing-function: ease-in-out ; */
/* transition-delay: 2s; */
/* Transtion short hand property in online */
transition: all 1s ease-in-out .3s;
}
#box:hover {
background-color: green;
height: 400px;
width: 800px;
border-radius: 100px;
font-size: 25px;
}
</style>
</head>
<body>
<h3>This is CSS Transition tutorial </h3>
<div class="contianer">
<div id="box">
This is my box
</div>
</div>
</body>
</html>
38 Transform property in CSS
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Transform</title> <style> * { margin: 0px; padding: 0px; }
.container { height: 80vh; background-color: burlywood; display: flex; justify-content: center; align-items: center; }
.box { display: flex; justify-content: center; align-items: center; background-color: brown; border: 2px solid black; border-radius: 8px; height: 400px; width: 400px; transition: all 0.5 ease-in-out; }
.box:hover { /* transform: rotate(45deg); */ /* transform: skew(45deg); */ /* transform: scale(2); */ /* transform: translateX(200px); */ /* transform: translateY(150px); */ transform: translate(120px, 120px); } </style></head>
<body> <div class="container"> <div class="box"> This is a box </div> </div></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transform</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.container {
height: 80vh;
background-color: burlywood;
display: flex;
justify-content: center;
align-items: center;
}
.box {
display: flex;
justify-content: center;
align-items: center;
background-color: brown;
border: 2px solid black;
border-radius: 8px;
height: 400px;
width: 400px;
transition: all 0.5 ease-in-out;
}
.box:hover {
/* transform: rotate(45deg); */
/* transform: skew(45deg); */
/* transform: scale(2); */
/* transform: translateX(200px); */
/* transform: translateY(150px); */
transform: translate(120px, 120px);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
This is a box
</div>
</div>
</body>
</html>
Meal Project
project Link:https://drive.google.com/drive/folders/14wD1N8bZqEBQHBqRi--KrUavaQXfVyNU?usp=sharing
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Delivery Service in India</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width: 1170px )" href="css/phone.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&family=Bree+Serif&display=swap"
rel="stylesheet">
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="Myonlinemeal.com">
</div>
<ul>
<li class="item"><a href="#home">Home</a>
</li>
<li class="item"><a href="#services-container">Services</a></li>
<li class="item"><a href="#client-section">Our Clients
Us</a></li>
<li class="item"><a href="#contact">Contact
us</a></li>
</ul>
</nav>
<section id="home">
<h1 class="h-primary">Welcome to Arrow
Meal Services</h1>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Provident cum
reprehenderit consequatur aliquam
maiores nemo vero aspernatur </p>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Provident cum
reprehenderit </p>
<button class="btn">Order Now</button>
</section>
<section id="services-container">
<h1 class="h-primary center">Our Services
</h1>
<div id="services">
<div class="box">
<img src="pizzar.png" alt="">
<h2 class="h-secondry center">Food
Catering</h2>
<p class="center">Lorem ipsum
dolor sit amet consectetur
adipisicing elit. Nemo
veritatis sequi laboriosam,
saepe laudantium natus
architecto nostrum iure
voluptates dignissimos laborum
maxime similique omnis
quibusdam est perferendis
veniam necessitatibus minus
voluptatum consectetur minima
exercitationem.</p>
</div>
<div class="box">
<img src="bg.jpg" alt="">
<h2 class="h-secondry center">Bulk
Ordering</h2>
<p class="center">Lorem ipsum
dolor sit amet consectetur
adipisicing elit. Nemo
veritatis sequi laboriosam,
saepe laudantium natus
architecto nostrum iure
voluptates dignissimos laborum
maxime similique omnis
quibusdam est perferendis
veniam necessitatibus minus
voluptatum consectetur minima
exercitationem.</p>
</div>
<div class="box">
<img src="D1.jpg" alt="">
<h2 class="h-secondry center">Food
Ordering</h2>
<p class="center">Lorem ipsum
dolor sit amet consectetur
adipisicing elit. Nemo
veritatis sequi laboriosam,
saepe laudantium natus
architecto nostrum iure
voluptates dignissimos laborum
maxime similique omnis
quibusdam est perferendis
veniam necessitatibus minus
voluptatum consectetur minima
exercitationem.</p>
</div>
</div>
</section>
<section id="client-section">
<h1 class="h-primary center">Our Clients
</h1>
<div id="clients">
<div class="client-item">
<img src="apple1.png" alt="Ourclinets">
</div>
<div class="client-item">
<img src="HP.png" alt="Ourclinets">
</div>
<div class="client-item">
<img src="mic.png" alt="Ourclinets">
</div>
<div class="client-item">
<img src="wall.png" alt="Ourclinets">
</div>
<div class="client-item">
<img src="apple1.png" alt="Ourclinets">
</div>
</div>
</section>
<section id="contact">
<h1 class="h-primary center">Contact Us</h1>
>
<div id="contact-box">
<form action="">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" name="name" id="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="e-mail">Email:</label>
<input type="email" name="name" id="e-mail" placeholder="Enter your email">
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="phone" name="name" id="phone" placeholder="Enter your phone">
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>
</form>
</div>
</section>
<footer>
<div class="center">
Copyright © www.myonlinemeal.com All rights reserved;
</div>
</footer>
</body>
</html>
Style.css
/* CSS rest */
*{
margin: 0px;
padding :0px;
font-family: 'Baloo Bhai 2', cursive;
}
html{
scroll-behavior: smooth;
}
/* CSS Variable */
:root{
--navbar-height:59px;
}
/* Navigaton Bar */
#navbar{
display: flex;
align-items: center;
position:relative;
top: 0px;
position: sticky;
}
#navbar::before{
content: "";
background-color: black;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: -1;
opacity: 0.4;
}
/* Navigation bar: Logo & Image */
#logo{
display: flex;
height: 100px;
width: 20%;
}
#logo img{
height: 100px;
margin: 3px 6px;
}
/* Navigation bar: Listing Style*/
#navbar ul{
display: flex; /*Menu bar staright karne ke liye*/
font-family: 'Baloo Bhaina 2', cursive;
}
/* Pseudo Selector */
#navbar ul li{
/* To remove bullets from menu*/
list-style: none;
font-size: 1.3rem;
}
#navbar ul li a{
color: white;
display: block;
padding:3px 22px;
border-radius: 20px;
text-decoration: none;
}
#navbar ul li a:hover{
color: black;
background-color: white;}
/*Home*/
#home{
display: flex;
flex-direction: column;
height: 654px;
padding: 3px 200px; /*padding format "top" "leftright" values */
justify-content: center;
align-items: center;
}
/*before we use for background*/
#home::before{
content: "";
background:url(../bg2.jpg) no-repeat center center/cover ;
position: absolute;
height: 100%;
top:0px;
left: 0px;
width: 100%;
z-index: -1;
opacity: 0.89;
}
#home h1{
color: white;
text-align: center;
font-family: 'Bree Serif', serif;
}
#home p{
color: white;
text-align: center;
font-size: 1.5rem;
font-family: 'Bree Serif', serif;
}
/* Services section */
#services {
margin: 30px;
display: flex;
}
#services .box{
border: 2px solid brown;
border-radius: 28px;
margin: 25px 55px;
padding: 5px 6px;
background-color: #f7f0f0;
}
#services .box img{
height: 150px;
display: block;
margin: auto;
}
#services .box p{
font-family: 'Bree Serif', serif;
}
/* Client Section */
#client-section{
position: relative;
}
#client-section::before{
content: "";
position: absolute;
background:url(../bg.jpg);
width: 100%;
height: 100%;
z-index: -1;
opacity: .4;
}
#clients{
display: flex;
justify-content: center;
align-items: center;
}
.client-item{
padding: 34px;
}
#clients img{
height: 150px;
}
/* Contact Section */
.contact{
position: relative;
}
.contact::before{
content: "";
position:absolute;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.7;
background: url(../contact.jpg) no-repeat center center/cover;
}
footer{
background:black;
color: white;
padding: 12px 10px;
}
#contact-box{
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 34px;
}
#contact-box input{
width: 100%;
padding: 0.5rem;
border-radius: 9px;
font-size: 1.1rem;}
#contact-box textarea{
width: 100%;
padding: 0.5rem;
border-radius: 9px;
font-size: 1.1rem;
}
#contact-box form {
width: 40%;
}
#contact-box label{
font-size: 1.3rem;
font-family: 'Bree Serif', serif;
}
/* Utility Class */
.h-primary{
font-size: 3.8rem;
padding: 12px;
font-family: 'Bree Serif', serif;
}
.h-secondry{
font-size: 2.3rem;
padding: 12px;
font-family: 'Bree Serif', serif;
}
.btn{
padding: 6px 20px;
border: 2px solid white;
background-color: brown;
color: white;
margin: 17px;
font-size: 1.5rem;
border-radius: 10px;
cursor: pointer;
}
.center{
text-align: center;
}
phone.css
/* Navigation */
#navbar{
flex-direction: column;
}
#navbar ul li a{
font-size: 1 rem;
padding: 0px 7px;
padding-bottom: 8px;
}
/* Home */
#home{
height: 370px;
padding: 3px 28px;
}
#home::before{
height: 400px;
}
#home p{
font-size: 13px;
}
/* Services */
#services{
flex-direction: column;
}
#services .box{
padding: 14px;
margin: 2px 0px;
margin-bottom: 20px;
}
/* Clients section*/
#clients{
flex-wrap: wrap;
}
#clients img{
width: 66px;
padding: 6px;
height: auto;
}
/* Contact us section */
#contact-box form{
width: 80%;
}
/* Footer */
/* Utility Classes */
.h-primary{
font-size: 26px;
}
.btn{
font-size: 13px;
padding: 4px;
}mm
40 CSS Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid</title>
<style>
.container{
display: grid;
/* grid-template-columns: 300px 100px 100px; */
/* grid-template-columns: auto 300px 100px; */
/* grid-template-columns: 1fr 4fr 1fr; */
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat (3,auto);
grid-gap: 2rem;
}
.item{
/* height: 100px;
width: 100px; */
background-color: red;
border: 2px solid black;
padding: 15px 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">this is Item-1</div>
<div class="item">this is Item-2</div>
<div class="item">this is Item-3</div>
<div class="item">this is Item-4</div>
<div class="item">this is Item-5</div>
<div class="item">this is Item-6</div>
<div class="item">this is Item-7</div>
<div class="item">this is Item-8</div>
<div class="item">this is Item-9</div>
<div class="item">this is Item-1</div>
<div class="item">this is Item-2</div>
<div class="item">this is Item-3</div>
<div class="item">this is Item-4</div>
<div class="item">this is Item-5</div>
<div class="item">this is Item-6</div>
<div class="item">this is Item-7</div>
<div class="item">this is Item-8</div>
<div class="item">this is Item-9</div>
</div>
</body>
</html>
41 CSS More Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Advance</title>
<style>
.grid {
display: grid;
grid-template-rows: 1fr 1fr 4fr;
grid-auto-rows: 2fr;
/* grid-template-columns: 1fr 4fr 2fr; */
grid-template-columns: repeat(4, 2fr);
grid-gap: 1rem;
}
.box {
background-color: red;
border: 2px solid black;
}
</style>
</head>
<body>
<div class="grid">
<div class="box">This is box-1</div>
<div class="box">This is box-2</div>
<div class="box">This is box-3</div>
<div class="box">This is box-4</div>
<div class="box">This is box-5</div>
<div class="box">This is box-6</div>
<div class="box">This is box-7</div>
<div class="box">This is box-8</div>
<div class="box">This is box-9</div>
<div class="box">This is box-10</div>
</div>
</body>
</html>
42 Spanning Multiple Rows and Columns in Grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid: Spanning Multiple Rows and Columns in Grid</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(4, 1fr);
/* grid-column-gap:2rem;
grid-row-gap: 1rem; */
grid-gap: 1rem;
}
.box {
border: 2px solid black;
background-color: rgb(221, 196, 221);
padding: 23px;
}
.box:first-child{
/* grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3; */
/* Short cut */
grid-column:1 /span 3;
grid-row:1 /span 3;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Item-1</div>
<div class="box">Item-2</div>
<div class="box">Item-3</div>
<div class="box">Item-4</div>
<div class="box">Item-5</div>
<div class="box">Item-6</div>
<div class="box">Item-7</div>
<div class="box">Item-8</div>
<div class="box">Item-9</div>
<div class="box">Item-10</div>
<div class="box">Item-11</div>
<div class="box">Item-12</div>
<div class="box">Item-13</div>
<div class="box">Item-14</div>
<div class="box">Item-15</div>
<div class="box">Item-16</div>
<div class="box">Item-17</div>
<div class="box">Item-18</div>
<div class="box">Item-19</div>
<div class="box">Item-20</div>
<div class="box">Item-21</div>
<div class="box">Item-22</div>
<div class="box">Item-23</div>
<div class="box">Item-24</div>
<div class="box">Item-25</div>
<div class="box">Item-26</div>
<div class="box">Item-27</div>
<div class="box">Item-28</div>
<div class="box">Item-29</div>
<div class="box">Item-30</div>
<div class="box">Item-31</div>
<div class="box">Item-32</div>
<div class="box">Item-33</div>
<div class="box">Item-34</div>
<div class="box">Item-35</div>
<div class="box">Item-36</div>
<div class="box">Item-37</div>
<div class="box">Item-38</div>
<div class="box">Item-39</div>
<div class="box">Item-40</div>
</div>
</body>
</html>
43 CSS Grid Autofit & Min Max
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid Autofit & Min Max</title> <style> .container { display: grid; grid-gap: 1rem; /* grid-template-columns: 112px 112px 112px; */ /* grid-template-columns: 1fr 1fr 1fr; */ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* justify-content: center; */
}
.box { border: 2px solid black; background-color: rgb(189, 132, 48); padding: 34px; } </style></head>
<body> <div class="container"> <div class="box">Item-1</div> <div class="box">Item-2</div> <div class="box">Item-3</div> <div class="box">Item-4</div> <div class="box">Item-5</div> <div class="box">Item-6</div> <div class="box">Item-7</div> <div class="box">Item-8</div> <div class="box">Item-9</div> <div class="box">Item-10</div> <div class="box">Item-11</div> <div class="box">Item-12</div> </div></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Autofit & Min Max</title>
<style>
.container {
display: grid;
grid-gap: 1rem;
/* grid-template-columns: 112px 112px 112px; */
/* grid-template-columns: 1fr 1fr 1fr; */
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
/* justify-content: center; */
}
.box {
border: 2px solid black;
background-color: rgb(189, 132, 48);
padding: 34px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Item-1</div>
<div class="box">Item-2</div>
<div class="box">Item-3</div>
<div class="box">Item-4</div>
<div class="box">Item-5</div>
<div class="box">Item-6</div>
<div class="box">Item-7</div>
<div class="box">Item-8</div>
<div class="box">Item-9</div>
<div class="box">Item-10</div>
<div class="box">Item-11</div>
<div class="box">Item-12</div>
</div>
</body>
</html>
44 Layouts Using Grid Template Area
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Layouts Using Grid Template Area</title> <style> .container { display: grid; /* grid-template-areas: ; */ grid-gap: 1rem; grid-template-areas: 'navbar navbar navbar navbar' 'section section section aside' 'footer footer footer footer';
}
.item { background-color: yellow; border: 3px solid black; padding: 12px 23px; }
#navbar { grid-area: navbar; }
#section { grid-area: section; }
#aside { grid-area: aside; }
footer { grid-area: footer; } </style></head>
<body> <div class="container"> <div id="navbar" class="item"> Home About Contact Us </div> <div id="section" class="item"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet eaque possimus ipsa, maxime aliquid dolor facilis fuga libero adipisci, ex iste eum modi fugiat quas repudiandae voluptas quos dolores saepe ullam ducimus et. Repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolorem asperiores nam eum eligendi blanditiis autem labore delectus, placeat molestias magni aliquam assumenda dolorum atque amet sapiente! Nemo exercitationem tempora perspiciatis sunt eligendi quos dolorem dolores voluptate nulla, facere suscipit ea inventore ipsum quae, optio, explicabo repellat numquam. Velit quia dignissimos ratione! Deleniti, optio qui doloremque exercitationem voluptate alias ex, illum voluptatem praesentium, velit vel quam molestias repellendus aut dolore laboriosam. Distinctio sequi dolorem laboriosam? Ut eligendi nobis aut minima iste quam consequatur reiciendis temporibus dolores sed. Pariatur praesentium quam rerum id explicabo dolore, hic sunt ipsa iure laudantium quaerat soluta dolor at eos provident voluptatibus officiis aperiam atque, autem ipsum debitis tempora? Facilis magni ab fuga, perferendis aut ratione voluptate expedita porro quas et quis, necessitatibus voluptas nulla aliquam eum adipisci eius officia quam est repudiandae deleniti commodi molestias. Commodi repellendus ipsum voluptates quae id molestiae quia veritatis quis iste quibusdam dolore neque dicta culpa enim corporis assumenda voluptate laudantium dolorum, iure ducimus, incidunt exercitationem consectetur beatae reiciendis! Quis iste odio ad ipsum repudiandae ut fuga neque libero excepturi repellendus odit, earum quam tempora, sunt sed cum pariatur laboriosam deserunt sapiente ratione voluptas nemo aperiam enim quas. Ullam voluptatum at quis! Itaque est aut corrupti magni eos quis blanditiis hic nostrum sed in animi soluta ullam iste pariatur possimus, optio quisquam natus non tenetur! Quasi libero perspiciatis, laboriosam sunt pariatur molestiae architecto nesciunt ut, cum facere labore eos, totam sit iure deserunt debitis earum quia provident neque quo ipsam. Recusandae natus sint perspiciatis accusamus beatae nobis voluptates assumenda suscipit. Ipsa cum temporibus dolore, explicabo commodi sapiente necessitatibus non enim fugiat ipsum beatae nemo magnam a vel labore totam quos. Ut molestiae natus facilis vitae fugiat culpa praesentium architecto tenetur rerum corrupti neque impedit, consequuntur et quasi totam necessitatibus vel commodi doloribus itaque! Id reprehenderit similique maxime facere. Cum sit iste alias illum ullam recusandae repellendus facilis, minima sunt praesentium itaque, molestiae exercitationem nobis eaque iure cupiditate unde molestias error harum voluptas! Reprehenderit amet quas quod, ratione dolorem nam possimus doloribus exercitationem laborum debitis, facere rerum commodi. Quam quos, maxime animi dignissimos similique neque aliquid dolorum accusantium officiis quibusdam ab saepe, ipsam aspernatur ad ducimus voluptatibus blanditiis esse ex sapiente placeat laborum deserunt! Blanditiis, delectus soluta aspernatur vero fugiat minima obcaecati impedit placeat nostrum ipsa modi praesentium quae enim officiis cumque, voluptatem magnam optio sint adipisci suscipit. Eaque, accusamus totam. </div> <div id="aside" class="item"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia culpa dicta consequuntur?Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis deserunt mollitia asperiores nostrum fuga labore odit dolorum eos atque hic est voluptatibus velit nobis doloribus magnam, dolorem, iste, alias perspiciatis exercitationem nemo repellendus consequatur! Ratione possimus dolores nihil odio officiis ducimus fugiat, consequatur eius optio nobis deleniti autem mollitia dolorum fuga voluptates quod error praesentium earum velit hic quis, libero aut! Excepturi, ullam sed reprehenderit, quam perferendis vero quisquam deserunt assumenda velit facilis harum minus asperiores, repellat sit nisi? Eaque consequatur necessitatibus blanditiis totam velit, minus id quisquam excepturi possimus officia eligendi culpa delectus aliquam tenetur aut impedit eius sed similique quibusdam ipsam ullam! Provident, adipisci totam earum, reprehenderit, repellendus amet dolores accusamus ut quia eius iusto quo. Ipsa itaque et unde autem! Quo architecto quaerat unde autem obcaecati numquam error soluta quos recusandae suscipit sapiente deserunt earum voluptas doloribus voluptatibus, optio sint est eum eius dicta provident repellat inventore! Quidem placeat minus error excepturi? Similique nihil expedita nostrum nemo iste architecto labore, numquam dignissimos ut explicabo ratione quisquam molestiae. Facere modi voluptatem, eveniet distinctio eos id dolorum ullam quaerat nostrum veniam repellendus doloremque facilis consequuntur natus quas praesentium quasi? Pariatur fugit accusamus veniam voluptatibus facilis. Vel eos earum, quas quia unde voluptas veritatis necessitatibus quisquam ea aspernatur! Praesentium minima dolor et inventore dicta ratione quos accusamus sit ipsum eius. Soluta est, fuga autem nesciunt iure incidunt nulla voluptatum deserunt molestiae cupiditate voluptatibus quae reprehenderit officiis placeat. Assumenda vitae ipsa voluptatem eum corrupti nostrum repudiandae quasi non ex dolor pariatur doloribus deserunt odit cupiditate tempora temporibus beatae architecto sint, facere alias, soluta totam repellendus distinctio. Quis, sunt adipisci eligendi blanditiis, corporis doloremque labore, optio dicta sapiente fugiat reiciendis? Magnam aut architecto veritatis aspernatur minima qui tempore recusandae eaque minus molestias ipsum fugit, omnis dolores, voluptatibus vitae unde illum soluta distinctio placeat cum voluptates totam. Quo excepturi, nobis optio dignissimos sit, nulla aliquid, numquam ipsam nisi quaerat eligendi. Temporibus deleniti a voluptate dolorem rem qui, molestias expedita dicta. Modi perspiciatis quo sunt totam exercitationem explicabo rem officiis veritatis, omnis, tenetur nobis nemo laborum dolorem optio voluptas vero aspernatur autem aperiam quas impedit pariatur quae illo. Minus blanditiis, voluptatibus voluptatum sit illum autem vel debitis dolores. Ipsam, perspiciatis aspernatur. Quis nihil ea a velit iusto assumenda excepturi tenetur eligendi voluptatum quia, inventore ipsum sapiente sint, consequuntur suscipit aperiam voluptates iste. Quasi magni asperiores iusto suscipit error sint nulla unde sit vitae at! </div> <footer class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, repellendus! Suscipit eius, non beatae sequi quasi praesentium ex illo sit. Maiores quaerat</footer> <!-- <div class="item">Item-1</div> <div class="item">Item-2</div> <div class="item">Item-3</div> <div class="item">Item-4</div> <div class="item">Item-5</div> <div class="item">Item-6</div> <div class="item">Item-7</div> <div class="item">Item-8</div> <div class="item">Item-9</div> <div class="item">Item-10</div> <div class="item">Item-11</div> <div class="item">Item-12</div> <div class="item">Item-13</div> <div class="item">Item-14</div> --> </div></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layouts Using Grid Template Area</title>
<style>
.container {
display: grid;
/* grid-template-areas: ; */
grid-gap: 1rem;
grid-template-areas:
'navbar navbar navbar navbar'
'section section section aside'
'footer footer footer footer';
}
.item {
background-color: yellow;
border: 3px solid black;
padding: 12px 23px;
}
#navbar {
grid-area: navbar;
}
#section {
grid-area: section;
}
#aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<div id="navbar" class="item">
Home About Contact Us
</div>
<div id="section" class="item">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet eaque possimus ipsa, maxime aliquid dolor
facilis fuga libero adipisci, ex iste eum modi fugiat quas repudiandae voluptas quos dolores saepe ullam
ducimus et. Repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolorem asperiores nam
eum eligendi blanditiis autem labore delectus, placeat molestias magni aliquam assumenda dolorum atque amet
sapiente! Nemo exercitationem tempora perspiciatis sunt eligendi quos dolorem dolores voluptate nulla,
facere suscipit ea inventore ipsum quae, optio, explicabo repellat numquam. Velit quia dignissimos ratione!
Deleniti, optio qui doloremque exercitationem voluptate alias ex, illum voluptatem praesentium, velit vel
quam molestias repellendus aut dolore laboriosam. Distinctio sequi dolorem laboriosam? Ut eligendi nobis aut
minima iste quam consequatur reiciendis temporibus dolores sed. Pariatur praesentium quam rerum id explicabo
dolore, hic sunt ipsa iure laudantium quaerat soluta dolor at eos provident voluptatibus officiis aperiam
atque, autem ipsum debitis tempora? Facilis magni ab fuga, perferendis aut ratione voluptate expedita porro
quas et quis, necessitatibus voluptas nulla aliquam eum adipisci eius officia quam est repudiandae deleniti
commodi molestias. Commodi repellendus ipsum voluptates quae id molestiae quia veritatis quis iste quibusdam
dolore neque dicta culpa enim corporis assumenda voluptate laudantium dolorum, iure ducimus, incidunt
exercitationem consectetur beatae reiciendis! Quis iste odio ad ipsum repudiandae ut fuga neque libero
excepturi repellendus odit, earum quam tempora, sunt sed cum pariatur laboriosam deserunt sapiente ratione
voluptas nemo aperiam enim quas. Ullam voluptatum at quis! Itaque est aut corrupti magni eos quis blanditiis
hic nostrum sed in animi soluta ullam iste pariatur possimus, optio quisquam natus non tenetur! Quasi libero
perspiciatis, laboriosam sunt pariatur molestiae architecto nesciunt ut, cum facere labore eos, totam sit
iure deserunt debitis earum quia provident neque quo ipsam. Recusandae natus sint perspiciatis accusamus
beatae nobis voluptates assumenda suscipit. Ipsa cum temporibus dolore, explicabo commodi sapiente
necessitatibus non enim fugiat ipsum beatae nemo magnam a vel labore totam quos. Ut molestiae natus facilis
vitae fugiat culpa praesentium architecto tenetur rerum corrupti neque impedit, consequuntur et quasi totam
necessitatibus vel commodi doloribus itaque! Id reprehenderit similique maxime facere. Cum sit iste alias
illum ullam recusandae repellendus facilis, minima sunt praesentium itaque, molestiae exercitationem nobis
eaque iure cupiditate unde molestias error harum voluptas! Reprehenderit amet quas quod, ratione dolorem nam
possimus doloribus exercitationem laborum debitis, facere rerum commodi. Quam quos, maxime animi dignissimos
similique neque aliquid dolorum accusantium officiis quibusdam ab saepe, ipsam aspernatur ad ducimus
voluptatibus blanditiis esse ex sapiente placeat laborum deserunt! Blanditiis, delectus soluta aspernatur
vero fugiat minima obcaecati impedit placeat nostrum ipsa modi praesentium quae enim officiis cumque,
voluptatem magnam optio sint adipisci suscipit. Eaque, accusamus totam.
</div>
<div id="aside" class="item">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia culpa dicta consequuntur?Lorem ipsum
dolor sit amet consectetur adipisicing elit. Perferendis deserunt mollitia asperiores nostrum fuga labore
odit dolorum eos atque hic est voluptatibus velit nobis doloribus magnam, dolorem, iste, alias perspiciatis
exercitationem nemo repellendus consequatur! Ratione possimus dolores nihil odio officiis ducimus fugiat,
consequatur eius optio nobis deleniti autem mollitia dolorum fuga voluptates quod error praesentium earum
velit hic quis, libero aut! Excepturi, ullam sed reprehenderit, quam perferendis vero quisquam deserunt
assumenda velit facilis harum minus asperiores, repellat sit nisi? Eaque consequatur necessitatibus
blanditiis totam velit, minus id quisquam excepturi possimus officia eligendi culpa delectus aliquam tenetur
aut impedit eius sed similique quibusdam ipsam ullam! Provident, adipisci totam earum, reprehenderit,
repellendus amet dolores accusamus ut quia eius iusto quo. Ipsa itaque et unde autem! Quo architecto quaerat
unde autem obcaecati numquam error soluta quos recusandae suscipit sapiente deserunt earum voluptas
doloribus voluptatibus, optio sint est eum eius dicta provident repellat inventore! Quidem placeat minus
error excepturi? Similique nihil expedita nostrum nemo iste architecto labore, numquam dignissimos ut
explicabo ratione quisquam molestiae. Facere modi voluptatem, eveniet distinctio eos id dolorum ullam
quaerat nostrum veniam repellendus doloremque facilis consequuntur natus quas praesentium quasi? Pariatur
fugit accusamus veniam voluptatibus facilis. Vel eos earum, quas quia unde voluptas veritatis necessitatibus
quisquam ea aspernatur! Praesentium minima dolor et inventore dicta ratione quos accusamus sit ipsum eius.
Soluta est, fuga autem nesciunt iure incidunt nulla voluptatum deserunt molestiae cupiditate voluptatibus
quae reprehenderit officiis placeat. Assumenda vitae ipsa voluptatem eum corrupti nostrum repudiandae quasi
non ex dolor pariatur doloribus deserunt odit cupiditate tempora temporibus beatae architecto sint, facere
alias, soluta totam repellendus distinctio. Quis, sunt adipisci eligendi blanditiis, corporis doloremque
labore, optio dicta sapiente fugiat reiciendis? Magnam aut architecto veritatis aspernatur minima qui
tempore recusandae eaque minus molestias ipsum fugit, omnis dolores, voluptatibus vitae unde illum soluta
distinctio placeat cum voluptates totam. Quo excepturi, nobis optio dignissimos sit, nulla aliquid, numquam
ipsam nisi quaerat eligendi. Temporibus deleniti a voluptate dolorem rem qui, molestias expedita dicta. Modi
perspiciatis quo sunt totam exercitationem explicabo rem officiis veritatis, omnis, tenetur nobis nemo
laborum dolorem optio voluptas vero aspernatur autem aperiam quas impedit pariatur quae illo. Minus
blanditiis, voluptatibus voluptatum sit illum autem vel debitis dolores. Ipsam, perspiciatis aspernatur.
Quis nihil ea a velit iusto assumenda excepturi tenetur eligendi voluptatum quia, inventore ipsum sapiente
sint, consequuntur suscipit aperiam voluptates iste. Quasi magni asperiores iusto suscipit error sint nulla
unde sit vitae at!
</div>
<footer class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, repellendus! Suscipit eius,
non beatae sequi quasi praesentium ex illo sit. Maiores quaerat</footer>
<!-- <div class="item">Item-1</div>
<div class="item">Item-2</div>
<div class="item">Item-3</div>
<div class="item">Item-4</div>
<div class="item">Item-5</div>
<div class="item">Item-6</div>
<div class="item">Item-7</div>
<div class="item">Item-8</div>
<div class="item">Item-9</div>
<div class="item">Item-10</div>
<div class="item">Item-11</div>
<div class="item">Item-12</div>
<div class="item">Item-13</div>
<div class="item">Item-14</div> -->
</div>
</body>
</html>
Comments
Post a Comment