HTML/flot.html at master · Ashvin0740/HTML · GitHub

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
101
102
103
104
105
<!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 Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
                illum fugit id fugiat, aperiam adipisci deserunt non accusamus nisi similique eveniet labore earum quae
                unde atque accusantium fuga quaerat. Repellendus deserunt perspiciatis accusamus deleniti, dolore, quod
                ad architecto quas adipisci facilis ipsum ullam nostrum ratione?
            </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>