patricklearningcss/index.html at main · Malachik/patricklearningcss · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="Auther" content="Patrick Gayle" />
    <meta
      name="About"
      content="I am lieaning CSS by completing Frontend Mentor"
    />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QR-CODE-FRONTREND MENTOR CHALLENGE</title>

    <link rel="icon" href="images/favicon-32x32.png" />
    <link rel="stylesheet" href="styles/style.css" />
    <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=Outfit:wght@100..900&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <!-- <header></header> -->
    <main>
      <div class="main-flex-container">
        <div
          class="[ card ] [ card-bg-w ] [ card-padding-16 ] [ card-padding-40 ] [ card-br-20 ] [ card-gap-24 ]"
        >
          <img
            class="[ qr-img ] [ qr-img-br-10 ]"
            src="images/image-qr-code.png"
            alt="picture of qr-code challenge"
            width="576"
            height="576"
            loading="lazy"
          />
          <div
            class="context-container [ text-container-gap ] [ text-container-margin-r ] [ text-container-margin-l ]"
          >
            <h2 class="[ h2-fS-22 ] [ h2-fw-700 ] [ h2-color ]">
              Improve your front-end skills by building projects
            </h2>
            <p class="[ qr-p-clr ] [ qr-p-lS ] [ line-height ]">
              Scan the QR code to visit Frontend Mentor and take your coding
              skills to the next level
            </p>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>