Complete-Web-Development-BootCamp/CSS tut3.htm at master · SakshamAgg1709/Complete-Web-Development-BootCamp · 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
<!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>
    body{
        font-family: 'Ubuntu', sans-serif;
    }

    *{

    }
.container{
width: 900px;
border: 3px solid purple;
margin: 33px auto ;
background-color: rgb(209, 240, 191)
}
.item{
border:3px solid green;
padding: 12px 3px ;
margin: 12px 3px;
background-color: rgb(233, 187, 229);

}

#fruits{
    float: left;
    width: 40%;
}
#Computers{
    float: right;
    width: 40%;
}
#Stationary{
    /* float: left; */
    /* clear:left; */
    clear: both;
    width: 95%;
}
p,h3,h1{
    text-align: center;
}


</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. Mollitia quibusdam nam, maxime officiis quasi minima aliquam numquam fuga at facilis quaerat repudiandae iusto id, eum recusandae atque, temporibus debitis laudantium! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut sunt illo ea ipsam, temporibus qui quo dolore saepe quae accusamus eum sed distinctio quam officiis quod ipsa. Reiciendis odit sint explicabo in aliquid maxime commodi, ipsa veritatis provident, vitae ut?
            </p>
        </div>
        <div id="Computers" class="item">
            <h3>Computers</h3>
            <p id="computerspara" class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia quibusdam nam, maxime officiis quasi minima aliquam numquam fuga at facilis quaerat repudiandae iusto id, eum recusandae atque, temporibus debitis laudantium! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam qui aspernatur praesentium dolorem! Illo suscipit quas ipsa dolorum numquam rem molestias reprehenderit consequuntur reiciendis quo. Iure iste quae accusamus atque quas odio et unde maxime eveniet, delectus, molestiae deleniti ipsa! </p>
        </div>
        <div id="Stationary" class="item">
            <h3>Stationary</h3>
            <p id="stationarypara" class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia quibusdam nam, maxime officiis quasi minima aliquam numquam fuga at facilis quaerat repudiandae iusto id, eum recusandae atque, temporibus debitis laudantium!</p>
        </div>
        <div id="Glasses" class="item">
            <h3>Glasses</h3>
            <p id="glassespara" class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia quibusdam nam, maxime officiis quasi minima aliquam numquam fuga at facilis quaerat repudiandae iusto id, eum recusandae atque, temporibus debitis laudantium!</p>
        </div>
    </div>

</body>
</html>