-
Notifications
You must be signed in to change notification settings - Fork 1
/
boxmodel.html
71 lines (63 loc) · 2.1 KB
/
boxmodel.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
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box model</title>
<style>
.container {
background-color: rgb(41, 128, 0);
border:4px solid red;
padding:30px 30px 170px 20px;
margin:20px ;
border-radius:35px;
width:20%;
height:100px;
float:left;
}
.navbar ul{
overflow: none;
}
.navbar{ background-color: brown;
padding:23px 30px;
width:1060px;
margin:5px;
border-radius: 100px;
height:22px;
float: right;
}
.navbar li{
float: left;
list-style: none;
padding: 3px 3px;
}
.navbar li a{
padding: 3px 3px;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">IMDB</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
</header>
<div class="container">
<h3>this is heading</h3>
<p id="first">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque adipisci corporis libero blanditiis nostrum natus doloremque odit, distinctio cupiditate ducimus facilis, culpa excepturi sed odio neque nesciunt veniam obcaecati similique tenetur quidem quae molestias?</p>
</div>
<div class="container">
<h3>this is heading</h3>
<p id="second">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque adipisci corporis libero blanditiis nostrum natus doloremque odit, distinctio cupiditate ducimus facilis, culpa excepturi sed odio neque nesciunt veniam obcaecati similique tenetur quidem quae molestias?</p>
</div>
<div class="container">
<h3>this is heading</h3>
<p id="third">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque adipisci corporis libero blanditiis nostrum natus doloremque odit, distinctio cupiditate ducimus facilis, culpa excepturi sed odio neque nesciunt veniam obcaecati similique tenetur quidem quae molestias?</p>
</div>
</body>
</html>