CSS Layout 3 Rows 3 Columns Grid
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Create three columns that floats next to each other */
.column1 {
float: left;
width: 15%;
padding: 10px;
height: 500px; /* Should be removed. Only for demonstration */
background-color:#8A410A;
color:white;
}
.column2 {
border: 10px solid #aaa;
float: left;
width: 70%;
padding: 10px;
height: 500px; /* Should be removed. Only for demonstration */
}
.column3 {
float: right;
width: 15%;
padding: 10px;
height: 500px; /* Should be removed. Only for demonstration */
background-color:#8A410A;
color:white;
}
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
color : #8A410A;
}
.header {
color:#8A410A;
padding: 15px;
}
h1{ color : #8A410A;
}
.menu ul {
color:white;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
color:white;
list-style-type: none;
padding: 8px;
margin-bottom: 7px;
background-color: #8A410A;
color: #ffffff;
text-align:center;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color:#AD6C3D;
color:yellow;
}
.aside {
background-color: #8A410A;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
border: 10px solid white;
background-color: #8A410A;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 10px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
img{
float:right;
}
</style>
</head>
<body>
<div class="header">
<img src="dogs.png" width="100%" height=200px>
<ul>
<div class="col-3 col-s-3 menu" > <a href="#row1" " ><li> POODLE</li> </a> </div>
<div class="col-13 col-s-3 menu" > <a href="#row2" " ><li> GERMAN SHEPHERd </li> </a></div>
<div class="col-13 col-s-3 menu" > <a href="#row3" target="_blank" ><li> CHIWAWA </li></a></div>
<div class="col-13 col-s-3 menu" > <a href="https://javascriptcodeprograms.blogspot.com/" target="_blank" ><li> javascript </li></a></div>
</ul>
</div>
</div>
<div id="row1" class="row">
<div class="column1" >
<h2>Column 1</h2>
<p>Column Left </p>
</div>
<div class="column2" style="background-color:white;">
<h1> POODLE</h1>
<p>The Poodle, called the Pudel in German and the Caniche in French, is a breed of water dog. The breed is dived into four
varieties based on size, the Standard Poodle, Medium Poodle, Miniature Poodle and Toy Poodle, although the Medium Poodle variety
is not universally recognised.The Poodle is most commonly claimed to have been developed in Germany, although it is also claimed to be from France, the Standard Poodle
was originally used by wildfowlhunters to retrieve game from water…..</p>
<img src="POODLE.PNG" alt="dogs" width= 300 height =250 ></img>
</div>
<div class="column3" >
<h2>Column 3</h2>
<p>Column Right..</p>
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
</div>
</div>
<div id="row2" class="row">
<div class="column1" >
<h2>Column 4</h2>
<p>Column Left </p>
</div>
<div class="column2" style="background-color:white;">
<h1>GERMAN SHEPHERD</h1>
<p>German She/herd : German Shepard got originated from Germany. This is a new breed of dog that originated in the year 1899.
These are called as working dogs that are developed for herding sheep. A German dog has a lot of strength, obedient, intelligent,
and very well trained. It is called the second-most popular breed of dog in the United States and fourth-most popular in the United Kingdom..
German She/herd : German Shepard got originated from Germany. This is a new breed of dog that originated in the year 1899. These are called as
working dogs that are developed for herding sheep. A German dog has a lot of strength, obedient, intelligent, and very well trained. It is called the
second-most popular breed of dog in the United States and fourth-most popular in the United Kingdom..</p>
<img src="german.jfif" alt="dogs" width= 300 height =200 ></img>
</div>
<div class="column3" >
<h2>Column 6</h2>
<p>Column Right..</p>
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
</div>
</div>
<div id="row3" lass="row">
<div class="column1" >
<h2>Column 7</h2>
<p>Column Left </p>
</div>
<div class="column2" style="background-color:white;">
<h1>CHIUAUA</h1>
<p>Column Right..</p>
<img src="chiwawa.png" alt="dogs" width= 300 height =200 ></img>
</div>
<div class="column3" ;>
<h2>Column 9</h2>
<p>Column Right..</p>
<img src="german.jfif" alt="dogs" width= 200 height =150 ></img>
</div>
</div>
<div class="footer" style="border:2px solid white;">
<hr width="100%" size=5 color="white" >
<p >all rights reserve 2021 ©.</p>
<hr width="100%" size=5 color="white" >
</div>
</body>
</html>
Comments
Post a Comment