Use of grids in web page to make partitions
Use of grids in web page to make partitions
<html>
<head>
<title>practice html webpage</title>
<style>
.container3
{ background-color: brown;
display:grid;
grid-template-columns: 33% 33% 33%;
margin: 10px;
padding:10px;
}/*end of style block*/
.container2
{background-color: blueviolet;
display:grid;
grid-template-columns:70% 30%;
margin: 10px;
padding:10px;
}
.container6
{
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
}
.grid-items
{
background-color: rgb(25, 26, 25);
color: whitesmoke;
font-size: 30px;
text-align: center;
}
.grid-items:hover
{
background-color: rgb(237, 6, 6);
color: whitesmoke;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body style="background-color: rgb(92, 89, 89);">
<h1 style="margin:10px;">Use of grids in web page to make partitions</h1>
<div class="container6">
<div class="grid-items">C</div>
<div class="grid-items">C++</div>
<div class="grid-items">Java</div>
<div class="grid-items">DS</div>
<div class="grid-items">SQL</div>
<div class="grid-items">HTML</div>
<div class="grid-items">CSS</div>
<div class="grid-items">JS</div>
<div class="grid-items">Python</div>
<div class="grid-items">Project</div>
</div>
<div class="container3">
<div style="background-color: rgb(142, 126, 211);">
<h1>this is the first heading of div1</h1>
<p>
W3Schools is optimized for learning and training.
Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed
to avoid errors, but we cannot warrant full correctness of
all content. While using W3Schools, you agree to have
read and accepted our terms of use, cookie and privacy policy.
</p>
</div>
<div style="background-color: bisque;">
<h1>This is the second heading of div2</h1>
W3Schools is optimized for learning and training.
Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed
to avoid errors, but we cannot warrant full correctness of
all content. While using W3Schools, you agree to have
read and accepted our terms of use, cookie and privacy policy.
</p>
</div>
<div style="background-color: bisque;">
<h1>This is the third heading of div3</h1>
W3Schools is optimized for learning and training.
Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed
to avoid errors, but we cannot warrant full correctness of
all content. While using W3Schools, you agree to have
read and accepted our terms of use, cookie and privacy policy.
</p>
</div>
</div>
<h1>This is the second grid </h1>
<div class="container2">
<div style="background-color: bisque;">
<h1>this is the first heading of div1</h1>
<p>
W3Schools is optimized for learning and training.
Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed
to avoid errors, but we cannot warrant full correctness of
all content. While using W3Schools, you agree to have
read and accepted our terms of use, cookie and privacy policy.
</p>
</div>
<div style="background-color: bisque;">
<h1>This is the second heading of div2</h1>
W3Schools is optimized for learning and training.
Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed
to avoid errors, but we cannot warrant full correctness of
all content. While using W3Schools, you agree to have
read and accepted our terms of use, cookie and privacy policy.
</p>
</div>
<div style="background-color: bisque;">
<h1>This is the third heading of div3</h1>
W3Schools is optimized for learning and training.
Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed
to avoid errors, but we cannot warrant full correctness of
all content. While using W3Schools, you agree to have
read and accepted our terms of use, cookie and privacy policy.
</p>
</div>
</div>
</body>
</html>
Comments
Post a Comment