Lets-learn-git/Practice.html at main · bbhavik16/Lets-learn-git · 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
<!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 6px;
            padding: 12px 3px;
            background: rgb(248, 238, 238);
        }

        #fruit {
            float: left;
            width: 48%;
        }

        #computer {
            float: right;
            width: 48%;
        }

        #stationary {
            clear: both;
            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>Glasses</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>