web-development-tutorials/tut24.html at master · chinmay021/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
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Display properties</title>
    <style>
        * {
            box-sizing: border-box;
        }

        header {
            border: 2px solid red;
            width: 1200px;
            margin: auto;
        }

        img {
            width: 34px;
            display: block;
            margin: auto;
        }

        h3 {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0px;
            text-align: center;
        }

        .box {
            border: 4px solid black;
            background-color: grey;
            margin: 4px 0px;
            padding: 23px;
            width: 33%;
            box-sizing: border-box;
            display: inline-block;
        }

        .container {
            margin: auto;
            width: 1200px;
        }

        .heading {
            text-align: center;
        }
    </style>
</head>

<body>
    <header class="top">
        <img src="https://www.codewithharry.com/static/common/img/photo.png" alt="">
        <h3>Welcome to my blog</h3>
    </header>
    <div class="container">
        <div class="box">
            <h4 class="heading">Heading</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur odio laudantium quos praesentium
                maxime nam tenetur quia sequi, ducimus molestias, quas repellendus aliquid tempora! Hic libero beatae,
                sit in asperiores sapiente explicabo perspiciatis suscipit eos omnis fugit id alias tempora.</p>
        </div>
        <div class="box">
            <h4 class="heading">Heading</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur odio laudantium quos praesentium
                maxime nam tenetur quia sequi, ducimus molestias, quas repellendus aliquid tempora! Hic libero beatae,
                sit in asperiores sapiente explicabo perspiciatis suscipit eos omnis fugit id alias tempora.</p>
        </div>
        <div class="box">
            <h4 class="heading">Heading</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur odio laudantium quos praesentium
                maxime nam tenetur quia sequi, ducimus molestias, quas repellendus aliquid tempora! Hic libero beatae,
                sit in asperiores sapiente explicabo perspiciatis suscipit eos omnis fugit id alias tempora.</p>
        </div>
    </div>
</body>

</html>