Skip to content

Commit 1da94e7

Browse files
iggajewskiiggajewski
authored
Merge pull request #2 from iggajewski/week-2
Week 2
2 parents 1752c69 + 0dd6ecf commit 1da94e7

6 files changed

+249
-18
lines changed

‎week2/1-flexbox-froggy/Screenshot_2020-05-20 Flexbox Froggy.png

384 KB
Loading

‎week2/2-website/css/style.css

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,174 @@ body {
1717
*/
1818

1919

20+
/*navbar CSS */
21+
.navbar {
22+
position: fixed;
23+
top: 0px;
24+
background-color: #fff;
25+
height: 4.375rem;
26+
width: 100%;
27+
border-bottom: 1px solid #ddd;
28+
display: flex;
29+
justify-content: center;
30+
}
31+
32+
nav > .content {
33+
height: 100%;
34+
width: 60%;
35+
display: flex;
36+
justify-content: space-between;
37+
align-items: center;
38+
}
39+
.logo {
40+
width: 26px;
41+
}
42+
43+
.navbar ul {
44+
display: flex;
45+
align-items: center;
46+
list-style: none;
47+
}
48+
49+
.navbar ul li {
50+
margin-left: 1.563rem;
51+
}
52+
53+
.navbar ul li a {
54+
color: #000;
55+
text-decoration: none;
56+
}
57+
58+
/*TODO: MAKE THE ACTIVE LINK WORK */
59+
#active a {
60+
color: #4c5058;
61+
font-weight: bold;
62+
}
63+
64+
/* Header CSS */
65+
header {
66+
height: 46rem;
67+
background-image: url("../img/first-background.jpg");
68+
background-position: center bottom;
69+
background-repeat: no-repeat;
70+
background-size: cover;
71+
display: flex;
72+
justify-content: center;
73+
align-items: center;
74+
}
75+
76+
header > .content {
77+
color: #fff;
78+
text-align: center;
79+
}
80+
81+
h1 {
82+
font-weight: 300;
83+
font-size: 3rem;
84+
}
85+
86+
h3 {
87+
font-weight: 300;
88+
font-size: 1.375rem;
89+
}
90+
91+
#header-button {
92+
background-color: #f15a29;
93+
font-size: 1.125rem;
94+
padding: 1rem 1.5rem;
95+
border-style: none;
96+
border-radius: 4px;
97+
}
98+
99+
#header-button:hover {
100+
background-color: #d9400e;
101+
}
102+
103+
/* Features section CSS */
104+
#section-1 {
105+
display:flex;
106+
justify-content: center;
107+
padding-top: 5rem;
108+
padding-bottom: 5rem;
109+
}
110+
111+
h2 {
112+
font-size: 2.5rem;
113+
font-weight: 300;
114+
}
115+
116+
#section-1 > .content {
117+
text-align: center;
118+
width: 60%;
119+
}
120+
121+
.features {
122+
display: flex;
123+
justify-content: center;
124+
}
125+
126+
.features > figure {
127+
width: 33.33%;
128+
font-size: 1.375rem;
129+
font-weight: 400;
130+
}
131+
132+
.feature-img {
133+
width: 127px;
134+
height: 127px;
135+
margin-bottom: 2.5rem;
136+
}
137+
138+
/* footer CSS */
139+
footer
140+
{
141+
display: flex;
142+
flex-direction: column;
143+
align-items: center;
144+
}
145+
146+
footer > .content {
147+
display: flex;
148+
flex-direction: column;
149+
align-items: center;
150+
padding-bottom: 9.25rem;
151+
}
152+
153+
#horizontal {
154+
width: 60%;
155+
border: 0;
156+
border-top: 1px solid #eaebec;
157+
margin: 1.313rem 0;
158+
159+
}
160+
161+
h4 {
162+
font-weight: 300;
163+
font-size: 1rem;
164+
}
165+
166+
.social {
167+
display: flex;
168+
}
169+
170+
.social > a {
171+
display: flex;
172+
justify-content: center;
173+
align-items: center;
174+
width: 2.5rem;
175+
height: 2.5rem;
176+
border: 1px solid #eaebec;
177+
border-radius: 1.25rem;
178+
margin-left: 5px;
179+
margin-right: 5px;
180+
}
181+
182+
.social > a > img {
183+
width: 16px;
184+
height: 16px;
185+
}
186+
187+
.copyright {
188+
font-size: 0.875rem;
189+
color: #a9adb5;
190+
}

‎week2/2-website/img/iconfinder_1_Facebook2_colored_svg_5296500.svg

Lines changed: 1 addition & 0 deletions
Loading

‎week2/2-website/img/iconfinder_1_Instagram_colored_svg_1_5296765.svg

Lines changed: 1 addition & 0 deletions
Loading

‎week2/2-website/img/iconfinder_1_Twitter_colored_svg_5296514.svg

Lines changed: 1 addition & 0 deletions
Loading

‎week2/2-website/index.html

Lines changed: 75 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,78 @@
11
<!DOCTYPE html>
2+
23
<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">
6-
<title>Karma</title>
7-
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
8-
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
9-
<link rel="stylesheet" href="css/normalize.css">
10-
<!-- Add a link to your CSS file here (use the line above to guide you) -->
11-
<link rel="stylesheet" href="css/style.css">
12-
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
13-
</head>
14-
<body>
15-
16-
<!-- Add your HTML markup here -->
17-
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
18-
<!-- All the images you need are in the 'img' folder -->
19-
20-
</body>
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<title>Karma</title>
8+
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
9+
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
10+
<link rel="stylesheet" href="css/normalize.css">
11+
<link rel="stylesheet" href="css/style.css">
12+
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
13+
</head>
14+
15+
<body>
16+
17+
<!-- Add your HTML markup here -->
18+
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
19+
<!-- All the images you need are in the 'img' folder -->
20+
21+
<nav class="navbar">
22+
<div class="content">
23+
<img class="logo" src="img/karma-logo.svg" alt="karma logo" width="26"/> <!--TODO: move width to CSS-->
24+
<ul>
25+
<li id="active"><a href=#>Meet Karma</a></li>
26+
<li><a href=#>How it Works</a></li>
27+
<li><a href=#>Store</a></li>
28+
<li><a href=#>Blog</a></li>
29+
<li><a href=#>Help</a></li>
30+
<li><a href=#>Login</a></li>
31+
</ul>
32+
</div>
33+
</nav>
34+
35+
<header>
36+
<div class="content">
37+
<h1>Introducing Karma</h1>
38+
<h3>Bring WiFi with you, everywhere you go.</h3>
39+
<button id="header-button">Learn More</button>
40+
</div>
41+
42+
</header>
43+
44+
<section id="section-1">
45+
<div class="content">
46+
<h2>Everyone needs a little Karma.</h2>
47+
<div class="features">
48+
<figure>
49+
<img class="feature-img" src="img/icon-devices.svg" alt="Internet for all devices image">
50+
<figcaption>Internet for all devices</figcaption>
51+
</figure>
52+
<figure>
53+
<img class="feature-img" src="img/icon-coffee.svg" alt="Boost your productivity image">
54+
<figcaption>Boost your productivity</figcaption>
55+
</figure>
56+
<figure>
57+
<img class="feature-img" src="img/icon-refill.svg" alt="Pay as You Go image">
58+
<figcaption>Pay as You Go</figcaption>
59+
</figure>
60+
</div>
61+
</div>
62+
</section>
63+
64+
<footer>
65+
<hr id="horizontal">
66+
<div class="content">
67+
<h4>Join us on</h4>
68+
<div class="social">
69+
<a class="twitter"><img class="social-logo" src="img/iconfinder_1_Twitter_colored_svg_5296514.svg" alt="twitter"></a>
70+
<a class="facebook"><img class="social-logo" src="img/iconfinder_1_Facebook2_colored_svg_5296500.svg" alt="facebook"></a>
71+
<a class="instagram"><img class="social-logo" src="img/iconfinder_1_Instagram_colored_svg_1_5296765.svg" alt="instagram"></a>
72+
</div>
73+
<p class="copyright">© Karma Mobility, Inc.</p>
74+
</div>
75+
</footer>
76+
77+
</body>
2178
</html>

0 commit comments

Comments
 (0)