web-development/Alignment.html at main · Varshalachheta/web-development · 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>
        <title>Alignment</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body{

                font-family: 'Edu NSW ACT Foundation', cursive;
                font-family: 'Edu VIC WA NT Beginner', cursive;
                font-family: 'Square Peg', cursive;
            }
            .container{
                /* width: 100%; */
                border: 3px solid rgb(121, 19, 19);
                /* margin: auto; */
                background-color: rgb(235, 168, 168);

            }
            .item{
                border: 3px solid red;
                margin: 12px 3px;
                padding: 12px 3px;
                background-color: rgb(216, 105, 105);


            }
            /* #fruits{
                float: left;
                width: 50%;

            }
            #computer{
                 float: left;
                width: 50%;

            }
            #stationary{
                float: left;
                width: 50%;
                clear: both;

            } */
            h3,p{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="fruits" class="item">
                <h3>Fruits</h3>
                <p id="fruitspara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, at! Rem quam totam amet vel. Provident magnam ea voluptates voluptatibus qui illo porro, sapiente totam odio ratione quam optio earum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut facilis repellat quod laudantium! Itaque consequuntur pariatur, illum officia inventore minus nulla ab veritatis, quam dicta veniam ex quidem, deserunt quo.</p>
            </div>
            <div id="computer" class="item">
                <h3>computers</h3>
                <p id="computerpara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, at! Rem quam totam amet vel. Provident magnam ea voluptates voluptatibus qui illo porro, sapiente totam odio ratione quam optio earum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus architecto ea eius a quam quaerat mollitia odit dolores voluptas vel, beatae alias dolorem maxime? Ad obcaecati dolore vel dolor labore!</p>
            </div>
            <div id="stationary" class="item">
                <h3>stationary</h3>
                <p id="stationarypara" class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, at! Rem quam totam amet vel. Provident magnam ea voluptates voluptatibus qui illo porro, sapiente totam odio ratione quam optio earum.</p>
            </div>
        </div>
    </body>
</html>