-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathflot & clar.html
100 lines (89 loc) · 3.57 KB
/
flot & clar.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
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alignment</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Ubuntu', sans-serif;
}
.container {
width: 900px;
border: 3px solid purple;
background-color: rgb(250, 226, 205);
margin: 33px auto;
}
.item {
border: 3px solid grey;
margin: 12px 3px;
padding: 12px 3px;
background: rgb(248, 238, 238);
}
#fruit {
float: right;
width: 48%;
}
#computer {
float: left;
width: 48%;
}
#stationary {
/* float: left; */
clear: both;
clear: left;
width: 100%;
}
p, h3 {
/* text-align: right;
text-align: left;
text-align: center; */
text-align: justify;
}
h1 {
margin: 23px auto;
width: 455px;
}
</style>
</head>
<body>
<div class="container">
<h1> Welcome to my store </h1>
<div id="fruit" class="item">
<h3>Fruits</h3>
<p id="fruitpara" class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
quibusdam explicabo, porro magnam quas sint enim cumque minima odit cupiditate ex itaque, eaque
distinctio sed ipsam totam, nihil tenetur. Recusandae. Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Aspernatur fugiat iusto vel. Qui, veniam nam, enim dolore deleniti dignissimos
veritatis tenetur animi sunt voluptatem laboriosam, nihil inventore molestias totam. Quas ducimus
quibusdam quaerat necessitatibus.</p>
</div>
<div id="computer" class="item">
<h3>Computer</h3>
<p id="computerpara" class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
quibusdam explicabo, porro magnam quas sint enim cumque minima odit cupiditate ex itaque, eaque
distinctio sed ipsam totam, nihil tenetur. Recusandae. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Rerum commodi vitae exercitationem necessitatibus laboriosam corporis dicta, eveniet
architecto reprehenderit eum id repudiandae deleniti fugiat fugit inventore ea dolorum neque amet nulla
vero culpa. Accusamus.</p>
</div>
<div id="stationary" class="item">
<h3>Stationary</h3>
<p id="stationarypara" class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
quibusdam explicabo, porro magnam quas sint enim cumque minima odit cupiditate ex itaque, eaque
distinctio sed ipsam totam, nihil tenetur. Recusandae.</p>
</div>
<div id="glasses" class="item">
<h3>Stationary</h3>
<p id="glassespara" class="para">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
quibusdam explicabo, porro magnam quas sint enim cumque minima odit cupiditate ex itaque, eaque
distinctio sed ipsam totam, nihil tenetur. Recusandae.</p>
</div>
</div>
</body>
</html>