Post Indexing
CSS GRID
Create Website Layout with #CSS #GRID in Just 20 Minutes Without #Media Queries – #mistersingh1000
CSS GRID VS FLEXBOX
GRID VS FLEXBOX सीएसएस ग्रिड लेआउट और सीएसएस फ्लेक्सबॉक्स लेआउट के बीच मूल अंतर यह है कि फ्लेक्सबॉक्स को एक आयाम में लेआउट के लिए डिज़ाइन किया गया था – या तो एक पंक्ति या एक कॉलम। ग्रिड को एक ही समय में दो-आयामी लेआउट – पंक्तियों और स्तंभों के लिए डिज़ाइन किया गया था।
List of of CSS GRID Properties
गरिड संपत्ति इसके लिए एक आशुलिपि संपत्ति है:
1) grid-template-rows.
2) grid-template-columns.
3) grid-template-areas.
4) grid-auto-rows.
5) grid-auto-columns.
6) grid-auto-flow.
What is CSS GRID Property in Hindi?
ग्रिड सीएसएस संपत्ति एक शॉर्टहैंड संपत्ति है जो एक ही घोषणा में सभी स्पष्ट और निहित ग्रिड गुणों को सेट करती है।
What is 1FR?
Fr एक भिन्नात्मक इकाई है और 1fr उपलब्ध स्थान के 1 भाग के लिए है
Video Using Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page title</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="style.css">
<!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<style>
:root {
--bgclr: rgb(0, 0, 0);
--fontclr: rgb(255, 255, 255);
--hgtclr: rgb(13, 80, 33);
}
body {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}
header{
display: inline-block;
}
nav ul li {
list-style: none;
display: block;
margin: 2px;
padding: 2px;
position: relative;
float: left;
padding-left: 35px;
padding-right: -6px;
}
form {
list-style: none;
display: block;
margin: 10px;
padding: 2px;
position: relative;
float: left;
padding-left: 900px;
padding-right: 0px;
}
.topnav {
background-color: var(--bgclr) overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: var(--fontclr);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
background-color: var(--bgclr);
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: var(--bgclr);
color: var(--fontclr);
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: var(--hgtclr);
color: var(--fontclr);
}
/* Right-aligned section inside the top navigation */
.topnav-right {
float: right;
}
.navbar {
background-color: var(--bgclr);
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
/* Style the links inside the navigation bar */
.navbar a {
float: right;
display: block;
color: var(--fontclr);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: var(--bgclr);
color: var(--fontclr);
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: var(--hgtclr);
color: var(--fontclr);
}
.btn{
color: white;
background-color: red;
width: 150px;
height: 50px;
font-size: larger;
transition-property: height,width;
transition-duration: 1s;
transition-delay: 0;
position: relative;
margin-left: 700px;
/* transition-timing-function: ease-in; */
/* transition-timing-function: ease-in-out; */
/* transition-timing-function: ease-out; */
transition-timing-function: linear;
}
.btn:hover{
color: white;
background-color: black;
width: 200px;
height: 70px;
}
.grid{
display: grid;
background-color: rgb(0, 0, 0);
color: white;
grid-template-columns: auto auto auto;
grid-template-columns: 3fr 1fr 1fr;
}
.box{
/* height: 100px;
width: 100px; */
background-color: rgb(0, 0, 0);
border: 2px solid red;
padding: 85px;
margin: 10px;
}
.grid2{
display: grid;
background-color: rgb(0, 0, 0);
color: white;
grid-template-columns: auto auto auto;
grid-template-columns: 1fr 1fr 1fr;
}
.box2{
/* height: 100px;
width: 100px; */
background-color: rgb(0, 0, 0);
border: 2px solid red;
padding: 85px;
margin: 10px;
}
.grid3{
display: grid;
background-color: rgb(0, 0, 0);
color: white;
/* grid-template-columns: auto auto auto auto; */
grid-template-columns: 3fr 2fr 1fr 1fr;
}
.box3{
/* height: 100px;
/* width: 100px; */ */
background-color: rgb(0, 0, 0);
border: 2px solid red;
padding: 85px;
margin: 10px;
}
</style>
</head>
<body>
<!-- Here is our main header that is used across all the pages of our website -->
<header>
<h1>Logo</h1>
<!--
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav> -->
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#search">Search</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<div class="topnav-right">
</div>
<!-- <form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form> -->
<!-- A Search form is another common non-linear way to navigate through a website. -->
</div>
</header>
<!-- Here is our page's main content -->
<main>
<br>
<!-- It contains an article -->
<article>
<br>
<h2>Article heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris.
Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam
eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</p>
<div class="grid">
<div class="box">This is the Box1</div>
<div class="box">This is the Box2</div>
<div class="box">This is the Box3</div>
</div>
<div class="grid2">
<div class="box2">This is the Box4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia at ipsum modi ratione dignissimos error corporis veritatis atque!</div>
<div class="box2">This is the Box5 Lorem ipsum dolor sit amet consectetur adipisicing elit. tenetur officiis? Dolorem obcaecati dolor reiciendis, aut soluta quo.</div>
<div class="box2">This is the Box6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis libero ut blanditiis quod nobiso sapiente!</div>
</div>
<div class="grid3">
<div class="box3">This is the Box4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. !</div>
<div class="box3">This is the Box5 Lorem ipsum dolor sit amet consectetur adipisicing elit. .</div>
<div class="box3">This is the Box6</div>
<div class="box3">This is the Box6</div>
</div>
<h3>Subsection</h3>
<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt
feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
<h3>Another subsection</h3>
<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis
parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis
semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas
convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit,
is fringille sem nunc vet mi.</p>
</article>
<button class="btn" type="button">Click Me</button>
<!-- the aside content can also be nested within the main content -->
<aside>
<h2>Related</h2>
<ul>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well...</a></li>
</ul>
</aside>
</main>
<!-- And here is our main footer that is used across all the pages of our website -->
<div class="navbar">
<a href="#contact">Support</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#contact">Services</a>
<a href="#contact">License</a>
<a href="#contact">HTML</a>
<a href="#contact">CSS</a>
<a href="#home" class="active">Home</a>
</div>
</body>
</html>
WEBSITE PRICING TABLE Code:
<!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 Pricing</title>
<style>
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
height: 600px;
width: auto;
grid-gap: 10px;
justify-content: center;
}
.plan1,.plan2,.plan3,.plan4{
background-color: orange;
color: white;
font-size: xx-large;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
padding-left: 10px;
margin: 0px;
padding: 10px;
justify-self: center;
height: auto;
width: 300px;
}
.box1,.box2,.box3,.box4{
padding: 0px;
margin: 0px;
font-size: smaller;
justify-content: center;
}
.button{
background-color: rgb(25, 0, 66);
color: white;
border: none;
font-size: large;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
/* border: 2px solid white; */
text-align: center;
padding: 18px;
padding-left: 44px;
padding-right: 46px;
margin: 39px;
}
</style>
</head>
<body>
<div class="grid">
<div class="plan1">Basic I <br>
<hr>
<p class="box1">
1GB Disk Space <br>
5GB Bandwidth<br>
1 FTP Accounts<br>
1 Email Accounts<br>
1 Mailing Lists<br>
1 SQL Databases<br>
1 Sub Domains<br>
1 Parked Domains<br>
1 Addon Domains<br>
500 Traffic<br>
100MB Email BoxSize<br>
<button class="button">Order Now</button>
</p>
</div>
<div class="plan2">Basic II
<hr>
<p class="box2">
1GB Disk Space <br>
5GB Bandwidth<br>
1 FTP Accounts<br>
1 Email Accounts<br>
1 Mailing Lists<br>
1 SQL Databases<br>
1 Sub Domains<br>
1 Parked Domains<br>
1 Addon Domains<br>
500 Traffic<br>
100MB Email BoxSize<br>
<button class="button">Order Now</button>
</p>
</div>
<div class="plan3">Basic III
<hr>
<p class="box3">
1GB Disk Space <br>
5GB Bandwidth<br>
1 FTP Accounts<br>
1 Email Accounts<br>
1 Mailing Lists<br>
1 SQL Databases<br>
1 Sub Domains<br>
1 Parked Domains<br>
1 Addon Domains<br>
500 Traffic<br>
100MB Email BoxSize<br>
<button class="button">Order Now</button>
</p>
</div>
<div class="plan4">Basic IV
<hr>
<p class="box4">
1GB Disk Space <br>
5GB Bandwidth<br>
1 FTP Accounts<br>
1 Email Accounts<br>
1 Mailing Lists<br>
1 SQL Databases<br>
1 Sub Domains<br>
1 Parked Domains<br>
1 Addon Domains<br>
500 Traffic<br>
100MB Email BoxSize<br>
<button class="button">Order Now</button>
</p>
</div>
</div>
</body>
</html>RESPONSIVE GRID LAYOUT CODE
