CSS TUTORIAL SECOND PART
1. MORE ON SELECTORS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>More on selectors</title>
<style>
h1 {
text-align: center;
color: cornsilk;
background-color: darkblue;
font-weight: bolder;
}
/* if p is contained by any li which is contained by div div li p { */
div li p {
background-color: greenyellow;
color: red;
font-weight: bolder;
}
/* if p is right inside div then this css will be applied div>p { */
div>p {
background-color: greenyellow;
color: red;
font-weight: bolder;
}
/* if p is right after div i.e p is the next sibling of div div+p { */
div+p {
background-color: rgb(6, 243, 243);
color: rgb(20, 19, 19);
font-weight: bolder;
}
</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 paragrafh is not effected</li>
<p>this is a para inside ul</p>
</ul>
<p>THIS IS A PARAGRAPH</p>
</div>
<p>THIS IS A ANOTHER PARAGRAPH</p>
</div>
<p>THIS IS A OUTERMOST PARAGRAPH</p>
</body>
</html>
2. Attribute and nth child pseudo selectors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attribute and nth child pseudo selectors</title>
<style>
input {
display: block;
}
a[target] {
font-size: 35px;
color: gold;
}
a[target='_self'] {
font-size: 30px;
color: rgb(7, 194, 63);
}
input[type='text'] {
padding: 25px;
border: 5px solid red;
}
.container {
margin: auto;
width: 235px;
display: block;
}
input[type='email'] {
color: green;
border: 5px solid blue;
}
/* this will apply css for third child */
li:nth-child(3) {
color: rgb(25, 236, 71);
}
li:nth-child(2n+0) {
color: rgb(233, 13, 13);
}
li:nth-child(5n+0) {
color: rgb(58, 14, 218);
}
/* odd child */
li:nth-child(odd) {
background-color: coral;
}
/* even child */
li:nth-child(even) {
background-color: rgb(69, 8, 168);
}
</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 facebook</a></h1>
<form action="" class="form-control">
<input type="text" placeholder="Enter your name">
<input type="password" placeholder="Enter your Password">
<input type="email" placeholder="Enter your Email">
<input type="submit" value="Submit">
</form>
<ul>
<li class="class" id="item-1">item1</li>
<li class="class" id="item-2">item2</li>
<li class="class" id="item-3">item3</li>
<li class="class" id="item-4">item4</li>
<li class="class" id="item-5">item5</li>
<li class="class" id="item-6">item6</li>
<li class="class" id="item-7">item7</li>
<li class="class" id="item-8">item8</li>
<li class="class" id="item-9">item9</li>
<li class="class" id="item-10">item10</li>
<li class="class" id="item-11">item11</li>
<li class="class" id="item-1">item1</li>
<li class="class" id="item-2">item2</li>
<li class="class" id="item-3">item3</li>
<li class="class" id="item-4">item4</li>
<li class="class" id="item-5">item5</li>
<li class="class" id="item-6">item6</li>
<li class="class" id="item-7">item7</li>
<li class="class" id="item-8">item8</li>
<li class="class" id="item-9">item9</li>
<li class="class" id="item-10">item10</li>
<li class="class" id="item-11">item11</li>
</ul>
</div>
</body>
</html>
3. Before and After pseudo selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Before and After pseudo selector</title>
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<style>
body {
margin: 0px;
padding: 0px;
background-color: rgb(127, 241, 12);
color: rgb(253, 5, 5);
background: url(https://source.unsplash.com/user/erondu/1600x900)no-repeat center center/cover;
}
header::before {
background: url(https://source.unsplash.com/user/erondu/1600x900)no-repeat center center/cover;
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: 0;
left: 0;
/* opacity: 0.3; */
}
.navigation {
font-family: 'Langar', cursive;
font-size: 25px;
display: flex;
}
li {
list-style: none;
padding: 15px 23px;
}
section {
font-family: 'Langar', cursive;
margin: 3px 23px;
height: 355px;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
/* border: 2px solid red; */
}
/* section::before {
content: "this is a content"
}
section::after {
content: "this is a content"
} */
h1 {
font-size: 4rem;
}
p {
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<ul class="navigation">
<li class="item">Home</li>
<li class="item">Services</li>
<li class="item">About</li>
<li class="item">Contect us</li>
</ul>
</nav>
</header>
<section>
<h1>Welcome to coding word</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos obcaecati enim eos vero praesentium
officiis fugiat necessitatibus dolores! Sed ratione laudantium quasi ea sequi, cumque maiores delectus
laboriosam voluptate inventore.</p>
</section>
<!-- <hr> -->
</body>
</html>
4. Box Shadow Taxt Shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow Taxt Shadow</title>
<style>
.container {
display: flex;
}
.card {
padding: 23px 12px;
margin: 23px 12px;
/* border: 2px solid blue; */
background-color: chartreuse;
/* box-shadow: offset-x offset-y color;
box-shadow: offset-x offset-y blur-radius color;
box-shadow: offset-x offset-y blur-radius spread-radius color; */
box-shadow: 10px 13px red;
box-shadow: -10px -13px rgb(12, 187, 231);
box-shadow: 10px 13px 10px rgb(229, 245, 10);
box-shadow: -10px -13px 11px 12px violet;
/* box-shadow: -7px -5px 10px rgba(red, green, blue, alpha); */
box-shadow: -7px -5px 10px 23px rgba(10, 202, 202, 0.7);
box-shadow: inset 5px 8px violet;
box-shadow: 3px 4px red, 6px 8px blue;
}
.card h1 {
text-shadow: 2px 1px red;
text-shadow: 2px 1px 3px red;
text-shadow: -2px -1px red;
text-shadow: -2px -1px 3px red;
}
</style>
</head>
</div>
<body>
<div class="container">
<div class="card" id="card-1">
<h1>This is C++ course</h1>
<p>I have started c++ course which does not mean that we will stop this course. We will continue this course
to completion . Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, iusto enim. Animi
nobis possimus
est fuga minus repudiandae, molestias vero fugiat voluptas ullam! Eveniet autem, expedita hic numquam
vitae maiores.</p>
</div>
<div class="card" id="card-2">
<h1>This is HTML course</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto dolor itaque ducimus commodi accusantium,
error ab accusamus cupiditate asperiores unde odio optio! Distinctio repudiandae beatae quisquam dolorem
a voluptatem est!</p>
</div>
<div class="card" id="card-3">
<h1>This is JAVA course</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam nostrum voluptatibus vel laudantium quaerat
eveniet, quos tempora dolore eius numquam aspernatur consequatur ipsam id dicta ratione excepturi alias
inventore fugit?
</p>
</div>
</div>
</body>
</html>
5. CSS Variables/ Custom Properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables/ Custom Properties</title>
<style>
:root {
/* --box-cloor: chartreuse; */
--primary-color: chartreuse;
--danger-color: rgb(23, 8, 228);
--maxw: 820px;
}
.box {
/* --box-cloor: chartreuse; */
/* box-shadow: 3px 3px var(--box-cloor);
background-color: var(--box-cloor); */
background-color: var(--primary-color);
box-shadow: 5px 5px var(--danger-color);
width: 200px;
height: 200px;
border: 3px solid red;
margin: 2px 9px;
padding: 50px 25px
}
.container {
display: flex;
align-items: center;
justify-content: center;
/* background-color: var(--box-cloor); */
background-color: var(--primary-color);
max-width: var(--maxw);
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae laboriosam dignissimos illum
quas, quaerat libero delectus necessitatibus? Atque sint voluptas quibusdam, necessitatibus fuga mollitia
recusandae rerum, enim facere repellendus quo.</div>
<div class="box">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi nemo ea ad commodi aspernatur
non minus amet doloribus unde quas. Nam assumenda aspernatur ex. Debitis recusandae repellendus quaerat fuga
omnis!</div>
<div class="box">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate harum fugit officiis
impedit nisi. Repudiandae veritatis aperiam quos eaque quis quidem, inventore minus? Accusamus dolore
voluptatem quas sint. Expedita, labore.</div>
</div>
</body>
</html>
6. Keyframes and Animations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes and Animations</title>
<style>
.container {
background-color: aqua;
border: 3px solid red;
}
.box {
background-color: springgreen;
border: 5px solid blueviolet;
width: 250px;
height: 250px;
position: relative;
/* animation-name: shivam1; */
animation-name: shivam2;
animation-duration: 5s;
/* animation-iteration-count: infinite; */
animation-iteration-count: 2;
/* animation-fill-mode: forwards; */
animation-fill-mode: alternate;
/* animation-timing-function: ease-in;
animation-timing-function: ease-out; */
animation-timing-function: ease-in-out;
/* animation-delay: 2s; */
/* animation-direction: alternate;
animation-direction: reverse; */
animation-direction: alternate-reverse;
/* THIS PROPERTIES CAN BE SET USING THIS SHORTHAND */
/* animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-cont animation-fill-mode; */
animation: shivam1 5s ease-in-out 2s 10 backwards;
}
@keyframes shivam1 {
from {
width: 200px;
}
to {
width: 1100px;
}
}
@keyframes shivam2 {
0% {
top: 0px;
left: 0px;
}
20% {
top: 0px;
left: 250px;
}
40% {
top: 250px;
left: 0px;
}
60% {
top: 150px;
left: 100px;
}
80% {
top: 200px;
left: 50px;
}
100% {
top: 250px;
left: 0px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
This is box
</div>
</div>
</body>
</html>
7. CSS Transitions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transitions</title>
<style>
body {
background-color: khaki;
}
#box {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
width: 200px;
background-color: red;
transition-property: background color;
transition-duration: 2s;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-delay: 0.2s;
/* TRANSITION SHORT HAND PROPERTY IN ONE LINE */
transition: all background-color 1s ease-in-out 3s;
}
#box:hover {
background-color: lawngreen;
height: 400px;
width: 400px;
font-size: 50px;
border-radius: 100px;
}
</style>
</head>
<body>
<h1>This is CSS Transition TAUTORIAL</h1>
<div class="container">
<div id="box">
This is my box
</div>
</div>
</body>
</html>
8. CSS Transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transform</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
background-color: khaki;
height: 90vh;
}
.box {
display: flex;
align-items: center;
justify-content: center;
background: lawngreen;
border: 4px solid blue;
border-radius: 8px;
height: 400px;
width: 400px;
transition: all .5s ease-in-out;
}
.box:hover {
transform: rotate(360deg);
transform: skew(45deg);
transform: scaleZ(3);
transform: scale(2);
transform: translateX(125px);
transform: translateY(125px);
transform: translate(125px, 125px);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h1> This is my box</h1>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transform</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
background-color: khaki;
height: 90vh;
}
.box {
display: flex;
align-items: center;
justify-content: center;
background: lawngreen;
border: 4px solid blue;
border-radius: 8px;
height: 400px;
width: 400px;
transition: all .5s ease-in-out;
}
.box:hover {
transform: rotate(360deg);
transform: skew(45deg);
transform: scaleZ(3);
transform: scale(2);
transform: translateX(125px);
transform: translateY(125px);
transform: translate(125px, 125px);
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h1> This is my box</h1>
</div>
</div>
</body>
</html>
9. CSS Grid Tutorial
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Tutorial</title>
<style>
.container {
display: grid;
/* grid-template-columns: 300px 100px 100px; */
/* grid-template-columns: 300px auto 100px; */
/* grid-template-columns: 1fr 4fr 1fr; */
grid-template-columns: repeat(5, auto);
grid-gap: 3rem;
}
.item {
height: 100px;
border: 3px solid black;
width: 100px;
background-color: chartreuse;
margin: 3px;
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-10</div>
<div class="item">This is Item-12</div>
<div class="item">This is Item-13</div>
<div class="item">This is Item-14</div>
<div class="item">This is Item-15</div>
<div class="item">This is Item-16</div>
<div class="item">This is Item-17</div>
<div class="item">This is Item-18</div>
<div class="item">This is Item-19</div>
<div class="item">This is Item20</div>
<div class="item">This is Item-21</div>
<div class="item">This is Item-22</div>
<div class="item">This is Item-24</div>
<div class="item">This is Item-51</div>
<div class="item">This is Item-61</div>
<div class="item">This is Item-27</div>
<div class="item">This is Item-82</div>
<div class="item">This is Item-69</div>
</div>
</body>
</html>
10. CSAS GRID
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid</title>
<style>
body {
background-color: cyan;
}
.grid {
display: grid;
grid-template-rows: 1fr 1fr 4fr;
grid-auto-rows: 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 class="box">This is box-11</div>
<div class="box">This is box-12</div>
</div>
</body>
</html>
11.CSS GRID
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 2rem;
/* grid-row-gap: 1rem;
grid-column-gap: 5rem; */
}
.box {
border: 2px solid black;
background-color: chartreuse;
padding: 23px;
}
.box:first-child {
/* grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3; */
grid-column: 1/span 3;
grid-row: 1/ span3;
}
</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-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>
</body>
</html>
12. CSS GRID
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid</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(300px, 1fr));
/* justify-content: center;
align-items: center;*/
}
.boc {
border: 2px solid red;
background-color: yellow;
padding: 34px;
}
</style>
</head>
<body>
<div class="container">
<div class="boc">Item-1</div>
<div class="boc">Item-2</div>
<div class="boc">Item-3</div>
<div class="boc">Item-4</div>
<div class="boc">Item-5</div>
<div class="boc">Item-6</div>
<div class="boc">Item-7</div>
<div class="boc">Item-8</div>
<div class="boc">Item-9</div>
<div class="boc">Item-10</div>
<div class="boc">Item-11</div>
<div class="boc">Item-12</div>
<div class="boc">Item-13</div>
<div class="boc">Item-14</div>
<div class="boc">Item-15</div>
</div>
</body>
</html>
13. CSS GRID
<!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">
<title>CSS Grid </title>
<style>
.container{
display: grid;
grid-gap: 1rem;
grid-template-areas:
'navbar navbar navbar navbar'
'section section section aside'
'footer footer footer footer ';
}
.item{
background-color:chartreuse;
border: 3px solid red;
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. Excepturi consequuntur quos accusamus iste omnis aut illo expedita facere veniam, sapiente ullam possimus suscipit.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias, rerum assumenda facere et voluptas praesentium dolores sequi dolorem dolorum labore vel asperiores, odit, saepe soluta quibusdam beatae quasi dignissimos minima! Obcaecati facere ducimus, beatae illo laboriosam officiis esse a rerum quibusdam. Autem laboriosam, veniam vel, voluptates, dolor voluptatem voluptatum fugiat unde tenetur quia ad dolorum tempore quas corporis! Ut distinctio inventore dolorum quis odio totam aliquam exercitationem! Debitis animi ipsum unde obcaecati sed, fugiat autem iste provident odio, illum asperiores, temporibus a veniam. Est eveniet sint recusandae ducimus mollitia accusamus doloremque dignissimos, iusto enim commodi, illo, sequi odit! Saepe doloremque labore aperiam incidunt pariatur. Necessitatibus mollitia expedita reprehenderit accusamus in animi officia voluptates. Similique voluptates ad nam, dolor vero nisi eos, ut eum illum cumque molestiae quod incidunt voluptatum, provident itaque dolorum nesciunt. Nisi omnis necessitatibus voluptatum cupiditate doloribus, magni quasi iste quos deleniti voluptas qui non ad, aliquid quam numquam in consequuntur possimus? Debitis, ipsum officiis libero maiores hic natus? Iste ipsam facere fugit quasi distinctio quos sit voluptatem quas adipisci veniam incidunt possimus aperiam maiores inventore eaque consectetur nam nulla, magni labore minima consequuntur! Quae molestiae distinctio eaque ipsam ab sit quis tenetur veritatis, id voluptatem recusandae, optio quas itaque ex possimus dignissimos enim nihil. Exercitationem accusantium quis fugiat quos, cumque molestiae architecto iure modi reprehenderit, eveniet doloribus hic aliquid quaerat deleniti magni impedit itaque inventore esse aspernatur qui. Sequi omnis laborum est eaque quaerat perspiciatis perferendis possimus nemo maxime, libero unde officia voluptates iusto accusantium quos mollitia eos porro odit, distinctio consectetur in. Magni, quam accusamus quibusdam eligendi nobis nulla, eveniet nesciunt hic perspiciatis maxime repudiandae excepturi, animi consequuntur. Nam tempore exercitationem ad laboriosam libero quis inventore iste minus illo totam? Rem, eligendi excepturi ducimus similique vero doloribus eveniet quas doloremque. Doloribus tenetur voluptatibus quo sit deserunt laboriosam doloremque. Eaque aliquam error incidunt? Illo rem quibusdam numquam omnis aliquam ipsam, doloremque sequi mollitia nobis harum eius suscipit officiis labore, fugit nemo quidem autem ex, eos quisquam iusto. Maxime totam debitis quis provident pariatur fugiat aliquam, alias praesentium? Laudantium sint, aliquam porro obcaecati numquam at explicabo totam harum iure debitis asperiores quod cumque neque dolores accusantium, tempore ipsa quo quae perspiciatis aperiam natus reprehenderit dolorum quam. Consectetur, laborum voluptatibus ullam libero voluptas perspiciatis maiores eligendi id dolorum suscipit perferendis blanditiis, dignissimos nemo consequuntur voluptate tempora velit numquam, eos maxime optio voluptatem odio. Sequi et tempore a quos praesentium.
</div>
<div id="aside" class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas soluta expedita quis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam beatae laudantium nihil aliquam quisquam, suscipit, tempora maxime excepturi vitae animi voluptatem dignissimos cumque nobis obcaecati, eius temporibus voluptas? Numquam ullam atque cum minima quod deleniti quae qui! Possimus doloribus ea odio explicabo vel. Nemo saepe suscipit ipsa eum tenetur quidem laborum alias corrupti! Ad doloribus voluptas laudantium fugiat odit temporibus, minima in assumenda cupiditate nihil aliquid sit ullam porro esse tempore neque! Error et illo sit deleniti voluptates. Exercitationem fuga quos, autem ea explicabo minima animi impedit, corporis obcaecati qui esse fugiat a illum dicta quam quis, non repellendus saepe dolores sequi vero eveniet ipsum! Qui enim soluta non eveniet pariatur totam ipsa alias vitae, eum minus rerum facere magnam nesciunt inventore exercitationem praesentium voluptatibus blanditiis mollitia ipsum illo asperiores animi quas distinctio veniam! Sit enim numquam, consequuntur eius inventore sint quidem praesentium iusto, commodi itaque eligendi atque expedita perferendis quam quae quod eaque totam culpa quia sed ad. Error nisi voluptates doloribus ab, enim porro tenetur? Nulla eligendi minus deleniti omnis quae blanditiis, tempora voluptas incidunt beatae obcaecati? Facilis animi delectus quaerat, rem quidem totam iure cum maiores dolore ut magni. Consequuntur cum magnam dolor officiis, harum ipsum blanditiis dicta amet iusto quos, sed eaque ipsa atque provident voluptas rem. Nesciunt minima esse, facilis recusandae quod adipisci magnam assumenda necessitatibus! Dolor blanditiis exercitationem quas vero officia quia ipsam, vel maiores distinctio minus autem eveniet consequuntur magni. Id nostrum, sunt cum nesciunt dolore quisquam eligendi dolorem recusandae, beatae quis eveniet, aut velit itaque neque necessitatibus quasi laudantium commodi illo adipisci minima! Id suscipit quae omnis. Veritatis, temporibus. Delectus, eligendi! Magnam itaque veritatis reprehenderit eos odit, explicabo recusandae incidunt vitae voluptate saepe hic blanditiis pariatur officia. Necessitatibus suscipit quo nostrum! Expedita nostrum dolore perspiciatis id, itaque repudiandae tempora doloribus amet quas, dicta quam! Nam dolorem voluptatum incidunt iure cum eos enim voluptate, iusto voluptatibus modi repudiandae quo, ipsum, quos qui soluta. Eos architecto, adipisci rem ipsam unde reiciendis officiis eveniet, suscipit eaque quae tempora omnis earum ipsum sapiente nostrum neque itaque consequuntur maiores. Saepe officia dolores inventore! Natus et aliquid dolorem eius delectus, architecto dolor non atque beatae aperiam ipsum numquam quae deserunt voluptates voluptate maxime, cum quis ex quia quaerat placeat illo. Distinctio, atque, adipisci officia alias excepturi facere iure minus non voluptas dolore quidem architecto impedit nostrum optio delectus expedita possimus hic, repudiandae iste ipsa eveniet tempore. Impedit, cupiditate.
</div>
<footer class="item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident quo libero cumque.</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>
14. CSS Grid + Media Queries
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid + Media Queries</title>
<style>
.container {
display: grid;
grid-gap: 1rem;
grid-template-areas:
'navbar navbar navbar navbar'
'section section section aside'
'footer footer footer footer ';
}
@media only screen and (max-width: 500px) {
body {
background-color: rgb(235, 219, 3);
}
.container {
grid-template-areas:
'navbar navbar navbar navbar'
'section section section section'
'aside aside aside aside'
'footer footer footer footer ';
}
span {
display: block;
text-align: center;
}
aside {
display: none;
}
}
@media only screen and (min-width: 500px) and (max-width: 1000px) {
body {
background-color: red;
}
.container {
grid-template-areas:
'navbar navbar navbar navbar'
'section section section section'
'aside aside aside aside'
'footer footer footer footer ';
}
span {
display: block;
text-align: center;
}
aside {
display: none;
}
}
@media (min-width: 1000px) and (max-width: 1300px) {
body {
background-color: rgb(17, 204, 195);
}
}
@media (min-width: 1300px) {
body {
background-color: rgb(70, 18, 192);
}
}
.bdr {
border: 2px solid black;
padding: 10px 23px;
background-color: chartreuse;
}
nav {
grid-area: navbar;
}
section {
grid-area: section;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<nav class="bdr">
<span> Home </span>
<span>About </span>
<span>Offers</span>
<span>Cntacts</span>
</nav>
<section class="bdr">
<h2>Learn About CSS in Hindi</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci magni nostrum consequatur
exercitationem labore mollitia ipsum nihil sit nulla natus? Provident laboriosam eum exercitationem
aliquid esse at eligendi beatae voluptatibus unde. Dolore consequuntur deleniti asperiores repellat
repudiandae earum totam ipsam rem omnis, non ab at nihil iusto expedita mollitia dolores, culpa, labore
exercitationem numquam qui doloribus voluptate voluptas incidunt! Repellat officiis, iste incidunt
impedit repudiandae ratione corporis eaque! Placeat cupiditate doloremque earum. Repellat iusto, natus,
enim culpa ab illo minus eligendi, quisquam asperiores doloribus autem eveniet sit eius fugit quibusdam
explicabo in quo necessitatibus. Laudantium perferendis ad neque sed, iusto dignissimos error
repudiandae. Inventore saepe alias dolor deleniti. Nesciunt libero hic quo modi veniam provident sit est
ea odio dignissimos.</p>
</section>
<aside class="bdr">
<h1> More about us </h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse nobis temporibus repellendus beatae assumenda iste expedita cumque, blanditiis aliquam quasi nisi! Vitae autem quae fugit ullam corrupti odit. Vel, quia.</p>
</aside>
</div>
<footer class="bdr">Copyright Shivamsingh4458 2020</footer>
</body>
</html>
Comments
Post a Comment