-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathDisplayProperty.html
63 lines (62 loc) · 2.79 KB
/
DisplayProperty.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!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>Display Property</title>
<style>
*{
box-sizing: border-box;
}
header{
margin:auto;
border: 2px solid black;
width:50%;
}
img{
display:block;
margin:auto;
width:220px;
}
h3{
text-align: center;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin:0px;
}
.box{
border:4px solid black;
background-color: rgb(247, 193, 193);
margin: 10px 2px;
padding: 23px;
width: 30%;
box-sizing: border-box;
display:inline-block;
}
.container{
margin: auto;
width: 1200px;
}
</style>
</head>
<body>
<header class="top">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/boba-fett-season-two-1644424075.jpeg" alt="">
<h3> Welcome to Aman's Blog </h3>
</header>
<div class="container">
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod ad sint a, corporis sed sunt quo doloremque et deserunt, nostrum suscipit. Earum maxime quae nihil veritatis voluptate alias culpa ratione error sint fuga, exercitationem nobis iure vero aperiam sit incidunt commodi officia, veniam in. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus modi ex odit est delectus consequuntur deserunt necessitatibus, atque aut sint dignissimos!</p>
</div>
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod ad sint a, corporis sed sunt quo doloremque et deserunt, nostrum suscipit. Earum maxime quae nihil veritatis voluptate alias culpa ratione error sint fuga, exercitationem nobis iure vero aperiam sit incidunt commodi officia, veniam in. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus modi ex odit est delectus consequuntur deserunt necessitatibus, atque aut sint dignissimos!</p>
</div>
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod ad sint a, corporis sed sunt quo doloremque et deserunt, nostrum suscipit. Earum maxime quae nihil veritatis voluptate alias culpa ratione error sint fuga, exercitationem nobis iure vero aperiam sit incidunt commodi officia, veniam in. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus modi ex odit est delectus consequuntur deserunt necessitatibus, atque aut sint dignissimos!</p>
</div>
</div>
</body>
</html>