Small-Design-using-HTML-CSS/index.html at main · Ri2004/Small-Design-using-HTML-CSS · 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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" />
    <meta property="og:title" content="medals" />
    <meta property="og:description" content="decorative medals" />
    <meta name="description" content="decorative medals" />
    <title>batch</title>
    <link rel="stylesheet" href="style_sheet.css" type="text/css" />
    <link rel="shortcut icon" href="medals.webp" type="image/x-icon" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter&family=Kalam:wght@300;400;700&family=Lato&family=Merriweather:wght@300&family=Open+Sans:ital,wght@0,700;1,300;1,400;1,500;1,600;1,700&family=PT+Serif:wght@700&family=Roboto&family=Rubik&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <main>
      <div class="body_wrapper">
        <section>
          <div class="body_wrapper_left">
            <div class="wrapper_1">
              <div class="wrapper_1_down">
                <h1
                  style="
                    color: #30f;
                    font-size: 36px;
                    text-align: center;
                    padding-top: 2px;
                  "
                >
                  S
                </h1>
                <h1 style="color: #30f; font-size: 9px; text-align: center">
                  STRENGTHS
                </h1>
              </div>
            </div>
          </div>
        </section>
        <section>
          <div class="body_wrapper_left_middle">
            <div class="wrapper_2">
              <div class="box_1"></div>
              <div class="wrapper_2_down">
                <h1
                  style="
                    color: #fc0;
                    font-size: 36px;
                    text-align: center;
                    padding-top: 3px;
                  "
                >
                  W
                </h1>
                <h1 style="color: #fc0; font-size: 8px; text-align: center">
                  WEAKNESSES
                </h1>
              </div>
            </div>
          </div>
        </section>
        <section>
          <div class="body_wrapper_right_middle">
            <div class="wrapper_3">
              <div class="box_2"></div>
              <div class="wrapper_3_down">
                <h1
                  style="
                    color: #3f3;
                    font-size: 36px;
                    text-align: center;
                    padding-top: 3px;
                  "
                >
                  O
                </h1>
                <h1 style="color: #3f3; font-size: 7px; text-align: center">
                  OPPORTUNITIES
                </h1>
              </div>
            </div>
          </div>
        </section>
        <section>
          <div class="body_wrapper_right">
            <div class="wrapper_4">
              <div class="box_3"></div>
              <div class="wrapper_4_down">
                <h1
                  style="
                    color: #f00;
                    font-size: 36px;
                    text-align: center;
                    padding-top: 3px;
                  "
                >
                  T
                </h1>
                <h1 style="color: #f00; font-size: 9px; text-align: center">
                  THREATS
                </h1>
              </div>
            </div>
          </div>
        </section>
      </div>
    </main>
  </body>
</html>