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
·138 lines (116 loc) · 3.87 KB
/
index.html
File metadata and controls
executable file
·138 lines (116 loc) · 3.87 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
<!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" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</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 -->
<header class="header">
<img src="img/karma-logo.svg" alt="Karma logo" width="40" height="40" />
<nav>
<ul class="nav-list">
<li class="nav-item"></li>
<a id="onlink" class="nav-link" href="index.html">Meet Karma</a></li>
<li class="nav-item"><a class="nav-link" href="#">How it works</a></li>
<li class="nav-item"><a class="nav-link" href="store.html">Store</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<ls class="nav-item"><a class="nav-link" href="#">Help</a></li>
<ls class="nav-item"><a class="nav-link" href="#">Login</a></li>
</ul>
</nav>
</header>
<main>
<section class="main">
<div class="image">
<img src="./img/first-background.jpg" alt="" />
</div>
<div class="overlay">
<div class="text">
<h1>Introducing Karma</h1>
<h3>Bring WiFi With you, everywhere you go</h3>
<button class="button">Learn More</button>
</div>
</div>
</section>
<div class="commercial-header">
<h2>Everyone needs a little Karma</h2>
</div>
<section class="commercial">
<article class="article">
<a href="#"><img src="img/icon-devices.svg" alt="" /></a>
<p>Internet for all devices</p>
</article>
<article class="article">
<a href="#"><img src="img/icon-coffee.svg" alt="" /></a>
<p>Boost your productivity</p>
</article>
<article class="article">
<a href="#"><img src="img/icon-refill.svg" alt="" /></a>
<p>Pay as You go</p>
</article>
</section>
<div class="text_1">
<img class="level_image" src="./level-2/homepage-feature.png" alt="">
<div class="text_2">
<p>"wherever i am, i just don't<br> worry about my connection <br>anymore!"</p>
<button class="btn_1">Get Karma today</button>
</div>
</div>
</main>
<footer>
<hr />
<div class="footer_p">
<p>Join us on</p>
</div>
<div class="icons-wrapper">
<div class="icons">
<a href="https://twitter.com/?lang=en"
><img
src="img/twitter-icon.svg"
alt="twitter"
width="25pt"
height="25pt"
/></a>
</div>
<div class="icons">
<a href="https://en-gb.facebook.com/"
><img
src="img/facebook-icon.svg"
alt="facebook"
width="25pt"
height="25pt"
/></a>
</div>
<div class="icons">
<a href="https://www.instagram.com/"
><img
src="img/instagram-icon.svg"
alt="instagram"
width="25pt"
height="25"
/></a>
</div>
<p style="opacity: 0.4">©Karma Mobile.Inc</p>
</div>
</footer>
</body>
</html>