-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtutorial-12.html
79 lines (71 loc) · 2.4 KB
/
tutorial-12.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
<!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 CSS</title>
<style>
* {
box-sizing: border-box;
}
header {
margin: auto;
border: 2px solid red;
border-radius: 33px;
width: 1200px;
}
img {
width: 150px;
margin: auto;
display: block;
}
h3 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0px;
text-align: center;
}
.box {
border: 4px solid black;
margin: 6px;
padding: 28px;
background-color: rgb(236, 216, 216);
display: inline-block;
width: 30%;
box-sizing: border-box;
}
.container {
margin: auto;
width: 1200px;
/* border: 2px solid black; */
}
</style>
</head>
<body>
<header class="top">
<img src="https://www.onepointesolutions.com/wp-content/uploads/2022/05/5-Types-of-Chemistry.jpg"
alt="image not displayed">
<h3>Welcome to My Blog</h3>
</header>
<div class="container">
<div class="box">
<h4>Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam dolorum nihil, recusandae soluta ad fugit
blanditiis dicta perferendis odio debitis illo sit non, natus, voluptatum nisi quo. Itaque, nesciunt
officia. Quod, quia!</p>
</div>
<div class="box">
<h4>Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam dolorum nihil, recusandae soluta ad fugit
blanditiis dicta perferendis odio debitis illo sit non, natus, voluptatum nisi quo. Itaque, nesciunt
officia. Quod, quia!</p>
</div>
<div class="box">
<h4>Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam dolorum nihil, recusandae soluta ad fugit
blanditiis dicta perferendis odio debitis illo sit non, natus, voluptatum nisi quo. Itaque, nesciunt
officia. Quod, quia!</p>
</div>
</div>
</body>
</html>