zeek24.html
<html lang="en">
<!-- In this webpage we learn about display property it means that block elements even
though width is less than 100% for example 25% but still occupies entire block so we
use (display=inline-block) to take care of this problem-->
<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 Display Property</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<style>
*{box-sizing: border-box;font-family: 'Dancing Script', cursive;}
.top{background-color: rgb(239 243 205);}
img{
width:10%; margin-left:43% ;}
#heading{color: darkblue;
font-weight: bold;
font-size: 30px;
text-align: center;
margin: 10px;}
.top{border: darkred solid 1px;
margin:8px auto;}
.box{width:30%;border: forestgreen solid 1px; padding: 5px;
display: inline-block;margin: auto;border-radius: 10px;
background-color: rgb(221 255 182);}
#firstPara{margin-left: 4%;}
.heading{color: rgb(17 126 212);}
p{color: rgb(30 131 144);}
</style>
</head>
<body>
<header class="top">
<img src="/Windows Photo Viewer Wallpaper.jpg" alt="Error in loading">
<p id="heading">Welcome to Zeeshan Scenery Blog</p>
</header>
<div class="container">
<div id="firstPara"class="box">
<h1 class="heading">First Para</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, veritatis
corrupti. Quibusdam, autem. Eos corrupti velit officiis nam doloremque quis ut sed
quidem architecto consequatur minus repudiandae sequi consequuntur dicta at, possimus
nostrum perferendis?</p>
</div>
<div id="secondPara" class="box">
<h1 class="heading">Second Para</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, veritatis
corrupti. Quibusdam, autem. Eos corrupti velit officiis nam doloremque quis ut sed
quidem architecto consequatur minus repudiandae sequi consequuntur dicta at, possimus
nostrum perferendis?</p>
</div>
<div id="ThirdPara" class="box">
<h1 class="heading">Third Para</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam, veritatis
corrupti. Quibusdam, autem. Eos corrupti velit officiis nam doloremque quis ut sed
quidem architecto consequatur minus repudiandae sequi consequuntur dicta at, possimus
nostrum perferendis?</p>
</div>
</div>
</body>
</html>
Comments
Post a Comment