forked from CodeYourFuture/HTML-CSS-Module-Project
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·143 lines (121 loc) · 13.5 KB
/
index.html
File metadata and controls
executable file
·143 lines (121 loc) · 13.5 KB
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!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>
<!-- 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 -->
<!-- NAVIGATION -->
<div class="background-for-nav">
<nav class="grid-for-nav">
<a href="index.html">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 216" height="48px" width="48px"
class="favicon-icon">
<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>
</a>
<div class="flex-nav">
<a href="#" class="meet-karma-nav">Meet Karma</a>
<a href="#">How it works</a>
<a href="/level-2/index.html">Store</a>
<a href="#">Blog</a>
<a href="#">Help</a>
<a href="#">Login</a>
</div>
</nav>
</div>
<!-- MAIN IMAGE WITH TEXT & A BUTTON OVERLAYING -->
<main class="picture">
<div class="all-text-container">
<span class="text intro-karma">Introducing Karma</span>
<p class="text product-details">Bring WiFi with you, everywhere you go.</p>
<button class="learn-more-btn">Learn More</button>
</div>
</main>
<h1>Everyone needs a little Karma.</h1>
<!-- SVG VECTOR ICONS ALONG WITH TEXT UNDERNEATH THEM -->
<section class="grid-container-icons">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="8rem">
<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>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="8rem">
<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>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="8rem">
<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="text-under-svg">Internet for all devices</div>
<div class="text-under-svg">Boost your productivity</div>
<div class="text-under-svg">Pay as you go </div>
</div>
</section>
<section class="grid-for-extended">
<img src="/level-2/homepage-feature.png" alt="picture of a woman smiling while on her laptop" class="img-homepage-feature"/>
<div class="flex-text-btn">
<i><div class="text--ext"> Wherever I am, I just don't worry about my connection anymore! </div></i>
<button class="get-karma-today">Get Karma today</button>
</div>
</section>
<div class="horizontal-line"></div>
<!-- FOOTER SECTION -->
<footer class="socials-and-text">
<p class="join-us-text">Join us on</p>
<div class="social-media-icons">
<div class="sm-border icon">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 50 50">
<path
d="M50.063 10.438a20.57 20.57 0 01-5.91 1.62 10.309 10.309 0 004.523-5.687 20.648 20.648 0 01-6.531 2.492 10.258 10.258 0 00-7.504-3.246c-5.68 0-10.286 4.602-10.286 10.281 0 .805.094 1.59.27 2.344-8.547-.43-16.121-4.523-21.195-10.746a10.243 10.243 0 00-1.39 5.172c0 3.566 1.812 6.715 4.573 8.562a10.274 10.274 0 01-4.66-1.289v.13c0 4.984 3.547 9.136 8.246 10.085a10.29 10.29 0 01-4.644.172c1.312 4.082 5.11 7.063 9.605 7.145A20.613 20.613 0 012.39 41.87c-.831 0-1.648-.047-2.449-.144a29.053 29.053 0 0015.762 4.62c18.914 0 29.258-15.667 29.258-29.253 0-.446-.012-.895-.027-1.332a20.904 20.904 0 005.129-5.325zm0 0"
fill="#3498db" />
</svg>
</a>
</div>
<div class="sm-border icon">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 30 30">
<path
d="M12 27V15H8v-4h4V8.852C12 4.785 13.98 3 17.36 3c1.62 0 2.476.121 2.882.176V7h-2.305C16.5 7 16 7.758 16 9.29V11h4.203l-.57 4H16v12zm0 0"
fill="#173f8a" />
</svg>
</a>
</div>
<div class="sm-border icon">
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500" width="18px" height="18px">
<defs>
<radialGradient id="a" cx="332.14" cy="2511.81" r="3263.54" gradientUnits="userSpaceOnUse">
<stop offset=".09" stop-color="#fa8f21" />
<stop offset=".78" stop-color="#d82d7e" />
</radialGradient>
<radialGradient id="b" cx="1516.14" cy="2623.81" r="2572.12" gradientUnits="userSpaceOnUse">
<stop offset=".64" stop-color="#8c3aaa" stop-opacity="0" />
<stop offset="1" stop-color="#8c3aaa" />
</radialGradient>
</defs>
<path
d="M833.4 1250c0-230.11 186.49-416.7 416.6-416.7s416.7 186.59 416.7 416.7-186.59 416.7-416.7 416.7-416.6-186.59-416.6-416.7m-225.26 0c0 354.5 287.36 641.86 641.86 641.86s641.86-287.36 641.86-641.86S1604.5 608.14 1250 608.14 608.14 895.5 608.14 1250m1159.13-667.31a150 150 0 10150.06-149.94h-.06a150.07 150.07 0 00-150 149.94M745 2267.47c-121.87-5.55-188.11-25.85-232.13-43-58.36-22.72-100-49.78-143.78-93.5s-70.88-85.32-93.5-143.68c-17.16-44-37.46-110.26-43-232.13-6.06-131.76-7.27-171.34-7.27-505.15s1.31-373.28 7.27-505.15c5.55-121.87 26-188 43-232.13 22.72-58.36 49.78-100 93.5-143.78s85.32-70.88 143.78-93.5c44-17.16 110.26-37.46 232.13-43 131.76-6.06 171.34-7.27 505-7.27s373.28 1.31 505.15 7.27c121.87 5.55 188 26 232.13 43 58.36 22.62 100 49.78 143.78 93.5s70.78 85.42 93.5 143.78c17.16 44 37.46 110.26 43 232.13 6.06 131.87 7.27 171.34 7.27 505.15s-1.21 373.28-7.27 505.15c-5.55 121.87-25.95 188.11-43 232.13-22.72 58.36-49.78 100-93.5 143.68s-85.42 70.78-143.78 93.5c-44 17.16-110.26 37.46-232.13 43-131.76 6.06-171.34 7.27-505.15 7.27s-373.28-1.21-505-7.27M734.65 7.57c-133.07 6.06-224 27.16-303.41 58.06C349 97.54 279.38 140.35 209.81 209.81S97.54 349 65.63 431.24c-30.9 79.46-52 170.34-58.06 303.41C1.41 867.93 0 910.54 0 1250s1.41 382.07 7.57 515.35c6.06 133.08 27.16 223.95 58.06 303.41 31.91 82.19 74.62 152 144.18 221.43S349 2402.37 431.24 2434.37c79.56 30.9 170.34 52 303.41 58.06C868 2498.49 910.54 2500 1250 2500s382.07-1.41 515.35-7.57c133.08-6.06 223.95-27.16 303.41-58.06 82.19-32 151.86-74.72 221.43-144.18s112.18-139.24 144.18-221.43c30.9-79.46 52.1-170.34 58.06-303.41 6.06-133.38 7.47-175.89 7.47-515.35s-1.41-382.07-7.47-515.35c-6.06-133.08-27.16-224-58.06-303.41-32-82.19-74.72-151.86-144.18-221.43S2150.95 97.54 2068.86 65.63c-79.56-30.9-170.44-52.1-303.41-58.06C1632.17 1.51 1589.56 0 1250.1 0S868 1.41 734.65 7.57"
fill="url(#a)" />
<path
d="M833.4 1250c0-230.11 186.49-416.7 416.6-416.7s416.7 186.59 416.7 416.7-186.59 416.7-416.7 416.7-416.6-186.59-416.6-416.7m-225.26 0c0 354.5 287.36 641.86 641.86 641.86s641.86-287.36 641.86-641.86S1604.5 608.14 1250 608.14 608.14 895.5 608.14 1250m1159.13-667.31a150 150 0 10150.06-149.94h-.06a150.07 150.07 0 00-150 149.94M745 2267.47c-121.87-5.55-188.11-25.85-232.13-43-58.36-22.72-100-49.78-143.78-93.5s-70.88-85.32-93.5-143.68c-17.16-44-37.46-110.26-43-232.13-6.06-131.76-7.27-171.34-7.27-505.15s1.31-373.28 7.27-505.15c5.55-121.87 26-188 43-232.13 22.72-58.36 49.78-100 93.5-143.78s85.32-70.88 143.78-93.5c44-17.16 110.26-37.46 232.13-43 131.76-6.06 171.34-7.27 505-7.27s373.28 1.31 505.15 7.27c121.87 5.55 188 26 232.13 43 58.36 22.62 100 49.78 143.78 93.5s70.78 85.42 93.5 143.78c17.16 44 37.46 110.26 43 232.13 6.06 131.87 7.27 171.34 7.27 505.15s-1.21 373.28-7.27 505.15c-5.55 121.87-25.95 188.11-43 232.13-22.72 58.36-49.78 100-93.5 143.68s-85.42 70.78-143.78 93.5c-44 17.16-110.26 37.46-232.13 43-131.76 6.06-171.34 7.27-505.15 7.27s-373.28-1.21-505-7.27M734.65 7.57c-133.07 6.06-224 27.16-303.41 58.06C349 97.54 279.38 140.35 209.81 209.81S97.54 349 65.63 431.24c-30.9 79.46-52 170.34-58.06 303.41C1.41 867.93 0 910.54 0 1250s1.41 382.07 7.57 515.35c6.06 133.08 27.16 223.95 58.06 303.41 31.91 82.19 74.62 152 144.18 221.43S349 2402.37 431.24 2434.37c79.56 30.9 170.34 52 303.41 58.06C868 2498.49 910.54 2500 1250 2500s382.07-1.41 515.35-7.57c133.08-6.06 223.95-27.16 303.41-58.06 82.19-32 151.86-74.72 221.43-144.18s112.18-139.24 144.18-221.43c30.9-79.46 52.1-170.34 58.06-303.41 6.06-133.38 7.47-175.89 7.47-515.35s-1.41-382.07-7.47-515.35c-6.06-133.08-27.16-224-58.06-303.41-32-82.19-74.72-151.86-144.18-221.43S2150.95 97.54 2068.86 65.63c-79.56-30.9-170.44-52.1-303.41-58.06C1632.17 1.51 1589.56 0 1250.1 0S868 1.41 734.65 7.57"
fill="url(#b)" />
</svg>
</a>
</div>
</footer>
<p class="copyright-stamp">© Karma Mobility, Inc.</p>
</body>
</html>