forked from saniyarahmani786/Projects
-
Notifications
You must be signed in to change notification settings - Fork 1
/
tut24.html
62 lines (62 loc) · 2.68 KB
/
tut24.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
<!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>CSS Display property</title>
<style>
*{
box-sizing: border-box;
}
header{
border: 2px solid purple;
margin: auto;
width: 1200px;
}
img{
margin: auto;
display: block;
width: 50px;
}
h3{
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0px ;
}
.box{
border: 4px solid blue;
background-color: red;
margin: 0px;
padding: 23px;
display: inline-block;
width: 30%;
box-sizing: border-box;
}
.container{
margin: auto;
width: 1200px;
}
</style>
</head>
<body>
<header class="top">
<img src="https://media-exp1.licdn.com/dms/image/C4E03AQEZ5JxlLhKrsA/profile-displayphoto-shrink_200_200/0/1618842331784?e=1633564800&v=beta&t=_lTPhw-QCF5Tewjw_a68fxLrZIJs_XwzKEdQthVlbuY" alt="">
<h3> Welcome to Kashmir</h3>
</header>
<div class="container">
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, enim nihil. Officia ad obcaecati impedit, natus, neque architecto, voluptates odit sunt cum expedita laboriosam perspiciatis porro voluptatem laborum? Aut corrupti fugiat eum iure soluta, ipsam voluptate dicta assumenda non, eos quisquam praesentium ratione nam?</p>
</div>
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, enim nihil. Officia ad obcaecati impedit, natus, neque architecto, voluptates odit sunt cum expedita laboriosam perspiciatis porro voluptatem laborum? Aut corrupti fugiat eum iure soluta, ipsam voluptate dicta assumenda non, eos quisquam praesentium ratione nam?</p>
</div>
<div class="box">
<h4 class="heading">Heading</h4>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, enim nihil. Officia ad obcaecati impedit, natus, neque architecto, voluptates odit sunt cum expedita laboriosam perspiciatis porro voluptatem laborum? Aut corrupti fugiat eum iure soluta, ipsam voluptate dicta assumenda non, eos quisquam praesentium ratione nam?</p>
</div>
</div>
</body>
</html>