HTML-CSS-Module-Project/index.html at master · kayali436/HTML-CSS-Module-Project · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Karma</title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,500,300"
      rel="stylesheet"
      type="text/css"
    />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <!-- NAV-BAR -->

    <header class="nav-background">
      <nav class="nav-grid">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 144 216"
          height="47px"
          width="47px"
          class="logo"
        >
          <path
            fill="#F15B2A"
            d="M126.1 212.9c4.1 4.1 10.7 4.1 14.8 0 4.1-4.1 4.1-10.7 0-14.8l-28.6-28.6 18.1-18.1c8.4-8.4 13.6-20 13.6-32.9C144 92.8 123.2 72 97.5 72S51 92.8 51 118.5c0 12.8 5.2 24.5 13.6 32.9l18.1 18.1-18.1 18.1c-4.6 4.6-11 7.5-18.1 7.5-14.1 0-25.6-11.5-25.6-25.6v-159C20.9 4.7 16.2 0 10.5 0 4.7 0 0 4.7 0 10.5v159C0 195.2 20.8 216 46.5 216c12.8 0 24.5-5.2 32.9-13.6l18.1-18.1 28.6 28.6zm-46.7-76.3c-4.6-4.6-7.5-11-7.5-18.1 0-14.1 11.5-25.6 25.6-25.6 14.1 0 25.6 11.5 25.6 25.6 0 7.1-2.9 13.5-7.5 18.1l-18.1 18.1-18.1-18.1z"
          />
        </svg>

        <div class="main-nav">
          <a href="#" class="meet-karma">Meet Karma</a>
          <a href="#">How it works</a>
          <a href="#">Store</a>
          <a href="#">Blog</a>
          <a href="#">Help</a>
          <a href="#">Login</a>
        </div>
      </nav>
    </header>

    <!-- MAIN IMAGE AND TEXT -->

    <div class="main-picture">
      <div class="text-container">
        <span class="intro-karma">Introducing Karma</span>
        <p class="product-details">Bring WiFi with you, everywhere you go.</p>
        <button class="learn-btn">Learn More</button>
      </div>
    </div>

    <h1>Everyone needs a little Karma.</h1>

    <!-- LOGO SECTION WITH TEXT -->

    <section class="main-logo">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 128 128"
        width="7.5rem"
      >
        <path
          fill="#F05A29"
          d="M122 66.463h-1.106v-48.41c0-3.033-2.468-5.5-5.5-5.5H13.521a5.506 5.506 0 00-5.5 5.5v38.126h-2.02a5.506 5.506 0 00-5.5 5.5v51.996c0 3.032 2.467 5.5 5.5 5.5h35.546c3.033 0 5.5-2.468 5.5-5.5V90.627H57.69v10.04h-5.422a1.5 1.5 0 100 3H81.5a1.5 1.5 0 000-3h-5.421v-10.04h23.944v16.562c0 3.032 2.468 5.5 5.5 5.5H122c3.032 0 5.5-2.468 5.5-5.5V71.963c0-3.033-2.468-5.5-5.5-5.5zm-77.953 47.212c0 1.379-1.122 2.5-2.5 2.5H6.001a2.503 2.503 0 01-2.5-2.5v-4.286h40.546v4.286zm0-7.286H3.501v-44.71c0-1.378 1.122-2.5 2.5-2.5l35.546-.001c1.378 0 2.5 1.122 2.5 2.5v44.711zm29.032-5.722h-12.39v-10.04h12.39v10.04zm-26.032-13.04v-9.548h52.976v9.548H47.047zm52.976-15.664v3.116H47.047V61.678c0-3.033-2.467-5.5-5.5-5.5l-30.525.001V18.053c0-1.378 1.122-2.5 2.5-2.5h101.873c1.379 0 2.5 1.122 2.5 2.5v48.41h-12.371a5.507 5.507 0 00-5.501 5.5zm24.477 35.226c0 1.379-1.121 2.5-2.5 2.5h-16.477a2.502 2.502 0 01-2.5-2.5v-4.08H124.5v4.08zm0-7.08h-21.477V71.963c0-1.379 1.121-2.5 2.5-2.5H122c1.379 0 2.5 1.121 2.5 2.5v28.146z"
        />
      </svg>
      <div class="logo-text">Internet for all devices</div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 128 128"
        width="7.5rem"
      >
        <path
          fill="#F05A29"
          d="M117.37 60.607h-7.385v-8.1a1.5 1.5 0 00-1.5-1.5H2a1.5 1.5 0 00-1.5 1.5v16.639c0 30.186 24.558 54.744 54.742 54.744 26.217 0 48.178-18.529 53.502-43.176v.146h8.626c5.586 0 10.13-4.542 10.13-10.125 0-5.585-4.544-10.128-10.13-10.128zm-62.128 60.284c-27.676 0-50.344-21.843-51.678-49.195H106.92c-1.333 27.352-24.001 49.195-51.678 49.195zm51.743-52.196H3.5V54.008h103.485v14.687zm10.385 9.165h-8.086c.456-2.839.701-5.748.701-8.714v-5.539h7.385c3.932 0 7.13 3.197 7.13 7.128 0 3.929-3.198 7.125-7.13 7.125zM30.883 41.137c-5.583 0-10.126-4.543-10.126-10.127 0-5.583 4.543-10.125 10.126-10.125 3.93 0 7.127-3.198 7.127-7.128a7.135 7.135 0 00-7.127-7.127 1.5 1.5 0 110-3c5.584 0 10.127 4.543 10.127 10.127 0 5.584-4.543 10.128-10.127 10.128-3.93 0-7.126 3.196-7.126 7.125 0 3.93 3.196 7.127 7.126 7.127a1.5 1.5 0 110 3zM56.767 41.137c-5.584 0-10.128-4.543-10.129-10.126.001-5.583 4.545-10.125 10.129-10.125 3.928 0 7.124-3.198 7.124-7.128s-3.196-7.127-7.124-7.127a1.5 1.5 0 110-3c5.582 0 10.124 4.543 10.124 10.127 0 5.584-4.542 10.128-10.124 10.128-3.93 0-7.128 3.196-7.129 7.125.001 3.929 3.199 7.126 7.129 7.126a1.5 1.5 0 110 3zM82.646 41.137c-5.583 0-10.126-4.543-10.127-10.126.001-5.583 4.544-10.125 10.127-10.125 3.931 0 7.128-3.198 7.128-7.128s-3.197-7.127-7.128-7.127a1.5 1.5 0 110-3c5.585 0 10.128 4.543 10.128 10.127 0 5.584-4.543 10.128-10.128 10.128-3.929 0-7.126 3.196-7.127 7.125.001 3.929 3.198 7.126 7.127 7.126a1.5 1.5 0 110 3z"
        />
      </svg>
      <div class="logo-text">Boost your productivity</div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 128 128"
        width="7.5rem"
      >
        <path
          fill="#F05A29"
          d="M52.154 51.104H12.621a1.5 1.5 0 01-1.5-1.5v-30.5a1.5 1.5 0 011.5-1.5h39.533a1.5 1.5 0 011.5 1.5v30.5a1.5 1.5 0 01-1.5 1.5zm-38.033-3h36.533v-27.5H14.121v27.5z"
        />
        <path
          fill="#F05A29"
          d="M126.654 50.874a11.336 11.336 0 00-8.061-3.34h-.001a11.324 11.324 0 00-8.059 3.34l-3.285 3.327a6.904 6.904 0 00-3.873-1.187c-3.885 0-7.045 3.198-7.045 7.129 0 .31.026.615.064.915-2.691 2.086-4.43 5.344-4.43 9.004 0 6.287 5.114 11.402 11.4 11.402 10.093 0 18.305 8.212 18.305 18.305 0 10.314-8.392 18.705-18.697 18.705a18.57 18.57 0 01-13.189-5.561 18.584 18.584 0 01-5.395-13.263 1.499 1.499 0 00-.179-.721l-.208-.386V59.451c0-6.289-5.116-11.404-11.404-11.404h-8.401V14.026c0-4.136-3.364-7.5-7.5-7.5H8.406c-4.136 0-7.5 3.364-7.5 7.5V118.92a1.5 1.5 0 001.5 1.5h60.29a1.5 1.5 0 001.5-1.5V51.047h8.401c4.634 0 8.404 3.77 8.404 8.404v39.471c0 .248.062.492.179.711l.209.388a21.552 21.552 0 006.259 15c4.073 4.126 9.51 6.418 15.315 6.453 11.969 0 21.706-9.737 21.706-21.705 0-11.747-9.558-21.305-21.305-21.305-4.632 0-8.4-3.77-8.4-8.402 0-2.346.968-4.469 2.522-5.994 1.261 1.949 3.427 3.241 5.888 3.241 3.874 0 7.026-3.215 7.026-7.166a7.145 7.145 0 00-1.077-3.775l3.331-3.373a8.334 8.334 0 015.937-2.461c2.243 0 4.353.875 5.941 2.462a1.5 1.5 0 002.122-2.122zM8.406 9.526h48.29c2.482 0 4.5 2.019 4.5 4.5V117.42H3.906V14.026c0-2.481 2.019-4.5 4.5-4.5zm94.969 54.783c-2.23 0-4.045-1.869-4.045-4.166 0-2.277 1.814-4.129 4.045-4.129 2.22 0 4.026 1.852 4.026 4.129 0 2.297-1.806 4.166-4.026 4.166z"
        />
      </svg>
      <div class="logo-text">Pay as you go</div>
    </section>

    <div class="horizontal-line"></div>

    <!-- FOOTER SECTION -->

    <!-- Add your HTML markup here -->
    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
    <!-- All the images you need are in the 'img' folder -->
  </body>
</html>