-
Notifications
You must be signed in to change notification settings - Fork 0
/
tut23.html
87 lines (80 loc) · 2.99 KB
/
tut23.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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!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;
}
h3 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
text-align: center;
}
img {
width: 80px;
margin: auto;
display: block;
}
header {
margin: auto;
border: 2px solid red;
width: 20%;
}
.box {
border: 4px solid black;
background-color: grey;
margin: 4px 0px;
width: 33%;
display: inline-block;
box-sizing: border-box;
padding: 23px;
}
.container{
margin: auto;
width: 1200px;
}
</style>
</head>
<body>
<header class="top">
<img src="https://avatars2.githubusercontent.com/u/65482473?s=400&u=053a0fbadc3e77596ca7be5171442a5157fc4a80&v=4"
alt="">
<h3>Welcome to Dhara's Blog</h3>
</header>
<div class="container">
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus modi explicabo adipisci omnis eveniet
culpa minus fugiat dolore tempora in magnam consequatur, distinctio id vero doloremque similique facere
odio iure obcaecati nisi optio magni libero soluta ad! Vero, in possimus?</p>
</div>
</div>
<div class="container">
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus modi explicabo adipisci omnis eveniet
culpa minus fugiat dolore tempora in magnam consequatur, distinctio id vero doloremque similique facere
odio iure obcaecati nisi optio magni libero soluta ad! Vero, in possimus?</p>
</div>
</div>
<div class="container">
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus modi explicabo adipisci omnis eveniet
culpa minus fugiat dolore tempora in magnam consequatur, distinctio id vero doloremque similique facere
odio iure obcaecati nisi optio magni libero soluta ad! Vero, in possimus?</p>
</div>
</div>
<div class="container">
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus modi explicabo adipisci omnis eveniet
culpa minus fugiat dolore tempora in magnam consequatur, distinctio id vero doloremque similique facere
odio iure obcaecati nisi optio magni libero soluta ad! Vero, in possimus?</p>
</div>
</div>
</body>
</html>