Skip to content

Commit d0e0516

Browse files
Bedi06Bedi06
committed
added some styling
1 parent 2eafd55 commit d0e0516

File tree

2 files changed

+136
-15
lines changed

2 files changed

+136
-15
lines changed

‎css/style.css‎

Lines changed: 81 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
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 {
5-
font-family: 'Roboto', sans-serif;
6-
-webkit-font-smoothing: antialiased;
4+
font-family: "Roboto", sans-serif;
5+
-webkit-font-smoothing: antialiased;
76
}
87

98
/**
@@ -16,4 +15,82 @@ body {
1615
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
1716
*/
1817

18+
header {
19+
display: flex;
20+
justify-content: space-around;
21+
align-items: center;
22+
background-color: #ffffff;
23+
padding: 10px;
24+
border-bottom: 1px solid #e5e5e5;
25+
}
26+
27+
.karma {
28+
float: left;
29+
height: 60px;
30+
width: auto;
31+
padding-left: 2%;
32+
overflow: hidden;
33+
margin-top: -6px;
34+
}
35+
36+
/* /* .navbar {
37+
display: flex;
38+
flex-direction: row;
39+
align-items: flex-end;
40+
width: 100%;
41+
margin-left: 20px;
42+
padding: 0;
43+
} */
44+
45+
.navbar-nav {
46+
display: flex;
47+
flex-direction: row;
48+
justify-content: space-evenly;
49+
margin: 0;
50+
padding: 0;
51+
}
52+
53+
.nav-item {
54+
display: block;
55+
margin: 0;
56+
}
1957

58+
.nav-link {
59+
display: block;
60+
padding: 10px;
61+
color: #4d4d4d;
62+
text-decoration: none;
63+
}
64+
65+
.nav-link:hover {
66+
color: #0099ff;
67+
}
68+
69+
.first-background {
70+
height: 100%;
71+
width: 100%;
72+
position: relative;
73+
display: flex;
74+
flex-direction: column;
75+
justify-content: center;
76+
align-items: center;
77+
line-height: 20px;
78+
79+
}
80+
.first-background h1,
81+
.first-background p {
82+
position: absolute;
83+
color: #ffffff;
84+
font-size: 20px;
85+
line-height: 20px;
86+
margin: 0;
87+
padding:0;
88+
white-space: normal;
89+
text-align: center;
90+
}
91+
.main-img {
92+
display: block;
93+
width: 100%;
94+
height: 100%;
95+
margin: 0;
96+
}

‎index.html‎

Lines changed: 55 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,63 @@
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+
</head>
19+
<body>
1420
<!-- Add your HTML markup here -->
1521
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
1622
<!-- All the images you need are in the 'img' folder -->
23+
<header>
24+
<div class="logo-container">
25+
<img src="img/karma-logo.svg" alt="karma logo" class="karma" />
26+
</div>
27+
<nav class="navbar">
28+
<ul class="navbar-nav">
29+
<li class="nav-item">
30+
<a class="nav-link" href="/html/">Meet Karma</a>
31+
</li>
32+
<li class="nav-item">
33+
<a class="nav-link" href="//">How it works</a>
34+
</li>
35+
<li class="nav-item">
36+
<a class="nav-link" href="//">Store</a>
37+
</li>
38+
<li class="nav-item">
39+
<a class="nav-link" href="//">Blog</a>
40+
</li>
41+
<li class="nav-item">
42+
<a class="nav-link" href="//">Help</a>
43+
</li>
44+
<li class="nav-item">
45+
<a class="nav-link" href="/">Login</a>
46+
</li>
47+
</ul>
48+
</nav>
49+
</header>
50+
<main>
51+
<div class="first-background">
52+
<img
53+
src="img/first-background.jpg"
54+
alt="a person with a laptop"
55+
class="main-img"
56+
/>
1757

18-
</body>
58+
<h1>Introducing Karma</h1>
59+
<p>Bring WiFi with you,everywhere you go .</p>
60+
</div>
61+
</main>
62+
</body>
1963
</html>

0 commit comments

Comments
 (0)