<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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 firebrick;
/* width: 30%; */
}
img {
/* display: inline; this is most property display inline, block and inline block */
/* if you select display inline so...... you do not set width but */
/* you select display block than you set box/items width */
display: block;
margin: auto;
width: 50px;
}
h3 {
font-family: cursive;
margin: 0px;
text-align: center;
}
.box {
border: 2px solid seagreen;
margin: 7px;
padding: 10px;
width: 30%;
background-color: tan;
box-sizing: border-box;
text-align: center;
display: inline-block;
}
</style>
</head>
<body>
<header>
<img src="RCoder.JPG" alt="">
<h3>This is Header's H3</h3>
</header>
<div class="cont">
<div class="box">
<h4>Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo illo, dolores nulla quod deleniti
iusto
voluptates sit, consequuntur dignissimos sint alias maiores fugiat voluptatibus, beatae esse
reiciendis
deserunt omnis architecto consectetur. Provident repellat dolore delectus. Nostrum, suscipit ipsam
praesentium voluptate blanditiis sit iusto consequatur corrupti? Odit quae vero est facilis!</p>
</div>
<div class="box">
<h4>Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo illo, dolores nulla quod deleniti
iusto
voluptates sit, consequuntur dignissimos sint alias maiores fugiat voluptatibus, beatae esse reiciendis
deserunt omnis architecto consectetur. Provident repellat dolore delectus. Nostrum, suscipit ipsam
praesentium voluptate blanditiis sit iusto consequatur corrupti? Odit quae vero est facilis!</p>
</div>
<div class="box">
<h4>Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo illo, dolores nulla quod deleniti
iusto
voluptates sit, consequuntur dignissimos sint alias maiores fugiat voluptatibus, beatae esse reiciendis
deserunt omnis architecto consectetur. Provident repellat dolore delectus. Nostrum, suscipit ipsam
praesentium voluptate blanditiis sit iusto consequatur corrupti? Odit quae vero est facilis!</p>
</div>
<div class="box">
<h4>Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo illo, dolores nulla quod deleniti
iusto
voluptates sit, consequuntur dignissimos sint alias maiores fugiat voluptatibus, beatae esse reiciendis
deserunt omnis architecto consectetur. Provident repellat dolore delectus. Nostrum, suscipit ipsam
praesentium voluptate blanditiis sit iusto consequatur corrupti? Odit quae vero est facilis!</p>
</div>
<div class="box">
<h4>Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo illo, dolores nulla quod deleniti
iusto
voluptates sit, consequuntur dignissimos sint alias maiores fugiat voluptatibus, beatae esse reiciendis
deserunt omnis architecto consectetur. Provident repellat dolore delectus. Nostrum, suscipit ipsam
praesentium voluptate blanditiis sit iusto consequatur corrupti? Odit quae vero est facilis!</p>
</div>
<div class="box">
<h4>Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo illo, dolores nulla quod deleniti
iusto
voluptates sit, consequuntur dignissimos sint alias maiores fugiat voluptatibus, beatae esse reiciendis
deserunt omnis architecto consectetur. Provident repellat dolore delectus. Nostrum, suscipit ipsam
praesentium voluptate blanditiis sit iusto consequatur corrupti? Odit quae vero est facilis!</p>
</div>
</div>
</body>
</html>
Comments
Post a Comment