WebDev-Notes/CSS/box_m.html at master · AnantLuthra/WebDev-Notes · 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
80
81
82
83
84
85
86
87
88
89
<!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>Box Model</title>
    <link href="https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Rowdies:wght@700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url("https://cdn.wallpapersafari.com/61/22/q6zdWk.jpg");
            background-repeat: no-repeat;
            background-position: cover;
            background-attachment: fixed;
            background-size: cover;

        }
        .content {
            width: 400px;
            height: 320px;
            background-color: rgba(164, 246, 164, 0.868);
            padding: 10px;
            margin: 40px;
            margin-left: 200px;
            border-top: 5px solid rgb(0, 94, 22);
            text-align: center;
            font-family: 'Wix Madefor Text', sans-serif;
            font-size: 17px;
            background-image: url("https://images.hindi.news18.com/ibnkhabar/uploads/2021/11/Yogi-Adityanath-1.jpg");
            background-size: 200px 200px;
            background-repeat: no-repeat;
            background-size: 100px 100px;
            background-position: top left;
            text-align: center;
        }

        #headerMain {
            text-align: center;
            font-family: 'Rowdies', cursive;
            font-size: 70px;
            margin-top: 20px;
        }

        #subHeading {
            font-size: 60px;
            font-family: 'Signika Negative', sans-serif;
            margin-left: 200px;
        }
        .header {
            text-align: center;
            font-family: 'Signika Negative', sans-serif;
            font-size: 40px;
            padding-bottom: 30px;
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <header id="headerMain">CHANDRA VILLA</header>
    <P id="subHeading">Members</P>
    <div style="background-image: url(https://github.com/anantLuthra.png);" class="content">
        <header class="header">ANANT</header>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla eum dolores, nostrum repellat officiis fugit ipsum necessitatibus ratione vero fugiat neque alias quia laborum at voluptate molestiae incidunt praesentium commodi numquam rem debitis aut. Corrupti, optio? Ratione at aspernatur, atque molestiae dolorum. <br>
    </div>
    <div style="background-image: url(https://images.hindi.news18.com/ibnkhabar/uploads/2021/11/Yogi-Adityanath-1.jpg);" class="content">
        <header class="header">YOGI JI</header>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, iusto soluta omnis eaque ratione est! Iure, doloremque ratione adipisci obcaecati enim voluptatibus? Et minima sed porro dolorum tenetur obcaecati enim suscipit distinctio voluptatem atque nam saepe eius aut harum.
    </div>
    <div style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/34/Elon_Musk_Royal_Society_%28crop2%29.jpg); background-size: 100px 110px;" class="content">
        <header class="header">ELON</header>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, iusto soluta omnis eaque ratione est! Iure, doloremque ratione adipisci obcaecati enim voluptatibus? Et minima sed porro dolorum tenetur obcaecati enim suscipit distinctio voluptatem atque nam saepe eius aut harum.
    </div>
    <div style="background-image: url(https://www.shutterstock.com/image-illustration/jakarta-indonesia-december-10-2020-260nw-1871169331.jpg);" class="content">
        <header class="header">BOB</header>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, iusto soluta omnis eaque ratione est! Iure, doloremque ratione adipisci obcaecati enim voluptatibus? Et minima sed porro dolorum tenetur obcaecati enim suscipit distinctio voluptatem atque nam saepe eius aut harum.
    </div>
    <div style="background-image: url(https://img.freepik.com/free-vector/handsome-man_1308-85984.jpg);"class="content">
        <header class="header">GEME</header>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, iusto soluta omnis eaque ratione est! Iure, doloremque ratione adipisci obcaecati enim voluptatibus? Et minima sed porro dolorum tenetur obcaecati enim suscipit distinctio voluptatem atque nam saepe eius aut harum.
    </div>
</body>
</html>