FrontEndWeb/DisplayProp.html at main · FreeDSA/FrontEndWeb · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Display Property</title>
    <style>
        *{
            box-sizing: border-box;
        }
        header{
            margin: auto;
            border: 2px solid red;
            /* width: 28%; */
            width: 1200px;
        }
        img{
            display: block;
            width: 10%;
            margin: auto;
        }
        h3{
            text-align: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serifs;
            margin: 0px 21px;
        }
        .box{
            border: 5px solid blue;
            background-color: rgb(157, 192, 245);
            margin: 2px;
            padding: 10px;
            display: inline-block;
            width: 32%;
            box-sizing: border-box;
        }
        .container{
            margin: auto;
            width: 1200px;
        }
    </style>
</head>
<body>
    <header>
        <!-- <img src="IMG_20201103_133424.jpg" alt=""> -->
        <h3>Welcome to My World Computer Tech</h3>
    </header>
    <div class="container">
        <div class="box">
            <h4 class="heading"> Heading1</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus ab dolorum vero harum cupiditate doloribus commodi qui ullam perferendis fugiat nulla, cum explicabo fuga molestiae aperiam? Non, quaerat repellat laudantium consequuntur sunt sequi aliquid est facilis maiores repellendus nulla voluptatem necessitatibus veritatis placeat, id in rem unde? Nam deserunt enim, eveniet, necessitatibus iure voluptatem nisi et sit odio tenetur consectetur esse doloremque repellat modi! Excepturi ratione commodi asperiores eum quod!</p>
        </div>
        <div class="box">
            <h4 class="heading"> Heading2</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus ab dolorum vero harum cupiditate doloribus commodi qui ullam perferendis fugiat nulla, cum explicabo fuga molestiae aperiam? Non, quaerat repellat laudantium consequuntur sunt sequi aliquid est facilis maiores repellendus nulla voluptatem necessitatibus veritatis placeat, id in rem unde? Nam deserunt enim, eveniet, necessitatibus iure voluptatem nisi et sit odio tenetur consectetur esse doloremque repellat modi! Excepturi ratione commodi asperiores eum quod!</p>
        </div>
        <div class="box">
            <h4 class="heading"> Heading3</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus ab dolorum vero harum cupiditate doloribus commodi qui ullam perferendis fugiat nulla, cum explicabo fuga molestiae aperiam? Non, quaerat repellat laudantium consequuntur sunt sequi aliquid est facilis maiores repellendus nulla voluptatem necessitatibus veritatis placeat, id in rem unde? Nam deserunt enim, eveniet, necessitatibus iure voluptatem nisi et sit odio tenetur consectetur esse doloremque repellat modi! Excepturi ratione commodi asperiores eum quod!</p>
        </div>
    </div>
</body>
</html>