Skip to content

Commit 7f634c9

Browse files
hanakisuhanakisu
committed
COMPLETED TASK
1 parent 2eafd55 commit 7f634c9

File tree

3 files changed

+261
-13
lines changed

3 files changed

+261
-13
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎css/style.css‎

Lines changed: 134 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
2-
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
1+
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
32

43
body {
54
font-family: 'Roboto', sans-serif;
65
-webkit-font-smoothing: antialiased;
76
}
7+
8+
89

910
/**
1011
* Add your custom styles below
@@ -15,5 +16,136 @@ body {
1516
*
1617
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
1718
*/
19+
/* body */
20+
body {
21+
margin: 0;
22+
}
23+
/* header */
24+
.header {
25+
display: flex;
26+
align-items: center;
27+
justify-content: space-around;
28+
height: 5rem;
29+
width: 100%;
30+
}
31+
/* log */
32+
.logo {
33+
max-height: 90px;
34+
width: auto;
35+
36+
}
37+
/* Nav */
38+
nav {
39+
margin-left: 300px;
40+
}
41+
.nav-list {
42+
display: flex;
43+
list-style: none;
44+
}
45+
.nav-item {
46+
padding: 0.5rem 0;
47+
48+
}
49+
.nav-link {
50+
color: rgb(182, 172, 172);
51+
font-weight: 600;
52+
text-decoration: none;
53+
padding: 0 1em;
54+
margin-right: 10px;
55+
transition: opacity 0.15s;
56+
}
57+
.nav-link:hover {
58+
color: #c86f49;
59+
}
60+
#onlink {
61+
color: black;
62+
}
63+
/* main */
64+
.main {
65+
display: flex;
66+
justify-content: space-around;
67+
}
68+
69+
.image {
70+
position: relative;
71+
72+
}
73+
.overlay {
74+
position: absolute;
75+
align-items: center;
76+
justify-content: center;
77+
color: white;
78+
top: 275px;
79+
}
80+
.text {
81+
text-align: center;
82+
}
83+
.text h1 {
84+
font-size: 3.5rem;
85+
font-weight: 100;
86+
}
87+
.text h3 {
88+
font-size: 2rem;
89+
font-weight: 300;
90+
}
91+
/* button */
92+
.button {
93+
background-color: #c05326;
94+
color: white;
95+
border: none;
96+
border-radius: 3px;
97+
padding: 15px 32px;
98+
text-decoration: none;
99+
font-size: 1.25rem;
100+
cursor: pointer;
101+
margin-top: 1.5rem;
102+
103+
}
104+
105+
/* article */
106+
107+
.commercial-header h2 {
108+
margin-top: 100px;
109+
margin-bottom: 30px;
110+
font-size: 3rem;
111+
font-weight: 100;
112+
text-align: center;
113+
114+
}
115+
.commercial {
116+
display: flex;
117+
justify-content: space-evenly;
118+
width: 70%;
119+
margin: auto;
120+
margin-bottom: 6rem;
121+
}
122+
.article img {
123+
width: 150px;
124+
margin-bottom: 20px;
125+
}
18126

19127

128+
/* footer */
129+
footer {
130+
margin-bottom: 4rem;
131+
}
132+
.footer-p {
133+
text-align: center;
134+
font-size: 1em;
135+
margin: 0.67em 0;
136+
margin-top: 5px;
137+
margin-bottom: 30px;
138+
}
139+
.icons-wrapper {
140+
text-align: center;
141+
}
142+
.icons {
143+
display: inline-block;
144+
text-align: center;
145+
justify-content: center;
146+
opacity: 0.6;
147+
margin-bottom: 5px;
148+
padding: 15px;
149+
border: 2px solid #eaebec;
150+
border-radius: 100%;
151+
}

‎index.html‎

Lines changed: 124 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,132 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
69
<title>Karma</title>
7-
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
8-
<link rel="stylesheet" href="css/normalize.css">
9-
<link rel="stylesheet" href="css/style.css">
10-
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
11-
</head>
12-
<body>
13-
10+
<link
11+
href="https://fonts.googleapis.com/css?family=Roboto:400,500,300"
12+
rel="stylesheet"
13+
type="text/css"
14+
/>
15+
<link rel="stylesheet" href="css/normalize.css" />
16+
<link rel="stylesheet" href="css/style.css" />
17+
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
18+
<link
19+
rel="stylesheet"
20+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
21+
/>
22+
</head>
23+
<body>
1424
<!-- Add your HTML markup here -->
1525
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
1626
<!-- All the images you need are in the 'img' folder -->
1727

18-
</body>
28+
<header class="header">
29+
<img src="img/karma-logo.svg" alt="Karma logo" width="40" height="40" />
30+
<nav>
31+
<ul class="nav-list">
32+
<ls class="nav-item"
33+
><a id="onlink" class="nav-link" href="index.html"
34+
>Meet Karma</a
35+
></ls
36+
>
37+
<ls class="nav-item"
38+
><a class="nav-link" href="#">How it works</a></ls
39+
>
40+
<ls class="nav-item"
41+
><a class="nav-link" href="store.html">Store</a></ls
42+
>
43+
<ls class="nav-item"><a class="nav-link" href="#">Blog</a></ls>
44+
<ls class="nav-item"><a class="nav-link" href="#">Help</a></ls>
45+
<ls class="nav-item"><a class="nav-link" href="#">Login</a></ls>
46+
</ul>
47+
</nav>
48+
</header>
49+
<main>
50+
<section class="main">
51+
<div class="image">
52+
<img src="./img/first-background.jpg" alt="" />
53+
</div>
54+
<div class="overlay">
55+
<div class="text">
56+
<h1>Introducing Karma</h1>
57+
<h3>Bring WiFi With you, everywhere you go</h3>
58+
<button class="button">Learn More</button>
59+
</div>
60+
</div>
61+
</section>
62+
63+
<div class="commercial-header">
64+
<h2>Everyone needs a little Karma</h2>
65+
</div>
66+
67+
<section class="commercial">
68+
<article class="article">
69+
<a href="#"><img src="img/icon-devices.svg" alt="" /></a>
70+
71+
<p>Internet for all devices</p>
72+
</article>
73+
<article class="article">
74+
<a href="#"><img src="img/icon-coffee.svg" alt="" /></a>
75+
76+
<p>Boost your productivity</p>
77+
</article>
78+
<article class="article">
79+
<a href="#"><img src="img/icon-refill.svg" alt="" /></a>
80+
81+
<p>Pay as You go</p>
82+
</article>
83+
</section>
84+
</main>
85+
<footer>
86+
<hr />
87+
88+
<div class="footer-p">
89+
<p>Join us on</p>
90+
</div>
91+
92+
<div class="icons-wrapper">
93+
<div class="icons">
94+
<a href="https://twitter.com/?lang=en"
95+
><img
96+
src="img/twitter-icon.svg"
97+
alt="twitter"
98+
width="25pt"
99+
height="25pt"
100+
/></a>
101+
</div>
102+
<div class="icons">
103+
<a href="https://en-gb.facebook.com/"
104+
><img
105+
src="img/facebook-icon.svg"
106+
alt="facebook"
107+
width="25pt"
108+
height="25pt"
109+
/></a>
110+
</div>
111+
<div class="icons">
112+
<a href="https://www.instagram.com/"
113+
><img
114+
src="img/instagram-icon.svg"
115+
alt="instagram"
116+
width="25pt"
117+
height="25"
118+
/></a>
119+
</div>
120+
<p style="opacity: 0.4">&copy;Karma Mobile.Inc</p>
121+
</div>
122+
</footer>
123+
</body>
19124
</html>
125+
126+
127+
128+
129+
130+
131+
132+

0 commit comments

Comments
 (0)