web-development-tutorials/tut21.html at master · anmolbatth/web-development-tutorials · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alignment</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
        .container{
            width: 900px;
            border: 3px solid purple;
            margin: 33px auto;
            background-color: burlywood;

        }
        .item{
            border: 2px solid grey;
            margin: 12px 3px;
            padding: 12px 3px;
            background:rgb(184, 145, 145);
        }
        #fruits{
            float: left;
            width: 48%;
        }

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

        #stationary{
            /* float: left; */
            clear: both;
            width: 100%;
        }
        p,h3{
            /* text-align: center; */
            text-align: justify;
        }
        h1{
            text-align: center;
            margin: 23px auto;
            padding:auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to my store</h1>
        <div id="fruits" class="item">
            <h3>fruits</h3>
            <p id="fruitspara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi assumenda voluptatem totam perspiciatis quas rerum consectetur dolorum nam autem. Consectetur quasi ex sunt autem sit ipsa, minus optio non cupiditate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero inventore ipsum obcaecati asperiores, ipsam nulla quas omnis. Incidunt animi fugiat et quaerat aut eaque similique! Nulla accusantium eos recusandae quas est? Iure, aliquid consequatur?</p>
        </div>
        <div id="computer" class="item">
            <h3>computer</h3>
            <p id="computerpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi assumenda voluptatem totam perspiciatis quas rerum consectetur dolorum nam autem. Consectetur quasi ex sunt autem sit ipsa, minus optio non cupiditate! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quaerat in, corporis sequi ducimus corrupti reprehenderit totam qui ipsam illo laborum, dolorum magni soluta eligendi accusamus ipsa doloribus similique quas quasi eaque eveniet! Illo, esse.</p>
        </div>
        <div id="stationary" class="item">
            <h3>stationary</h3>
            <p id="stationarypara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi assumenda voluptatem totam perspiciatis quas rerum consectetur dolorum nam autem. Consectetur quasi ex sunt autem sit ipsa, minus optio non cupiditate!</p>
        </div>
    </div>
</body>
</html>