Skip to content

Commit 7eeaaf7

Browse files
DiegoJunior0DiegoJunior0
committed
First attempt
Completed first attempt Not sure about use of headers and spacing
1 parent 0fd3caf commit 7eeaaf7

File tree

2 files changed

+212
-4
lines changed

2 files changed

+212
-4
lines changed

‎css/style.css‎

Lines changed: 149 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
11

22
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
33

4-
body {
4+
:root {
5+
--grey-dark: #1D1E21;
6+
--grey-med: #53565C;
7+
--grey-light: #8A8F98;
8+
--orange-dark: #c05326;
9+
}
10+
11+
body, h1, h2, h3, h4 {
512
font-family: 'Roboto', sans-serif;
613
-webkit-font-smoothing: antialiased;
14+
color: var(--grey-dark);
15+
font-weight: lighter;
716
}
817

918
/**
@@ -16,4 +25,143 @@ body {
1625
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
1726
*/
1827

28+
/* headings */
29+
30+
h1 {
31+
margin: 0;
32+
font-size: 4rem;
33+
color: white;
34+
}
35+
36+
h2 {
37+
font-size: 3rem;
38+
}
39+
40+
h3 {
41+
font-size: 2rem;
42+
color: white;
43+
}
44+
45+
h4 {
46+
font-size: 2em;
47+
}
48+
49+
/* main / re-used */
50+
.container {
51+
margin-top: 0.5rem;
52+
margin-bottom: 0.5rem;
53+
}
54+
55+
.flex-col {
56+
display: flex;
57+
flex-direction: column;
58+
}
59+
60+
.flex-row {
61+
display: flex;
62+
flex-direction: row;
63+
}
64+
65+
.bold {
66+
font-weight: bold;
67+
}
68+
69+
/* header */
70+
71+
.header {
72+
margin-left: auto;
73+
margin-right: auto;
74+
height: 60px;
75+
justify-content: space-between;
76+
align-items: center;
77+
padding-left: 7rem;
78+
padding-right: 7rem;
79+
}
80+
81+
.logo img {
82+
height: 40px;
83+
width: auto;
84+
}
85+
86+
.splash {
87+
align-items: center;
88+
justify-content: center;
89+
background-image: url("../img/first-background.jpg");
90+
background-repeat: no-repeat;
91+
background-position: center;
92+
min-height: 70vh;
93+
}
94+
95+
/* navigation */
96+
97+
.navigation {
98+
list-style: none;
99+
}
100+
101+
.nav-item {
102+
margin: 0rem 1rem;
103+
color: var(--grey-light);
104+
}
105+
106+
.nav-current {
107+
color: var(--grey-med);
108+
}
109+
110+
.nav-link {
111+
color: inherit;
112+
text-decoration: none;
113+
}
114+
115+
.nav-item :hover {
116+
color: var(--orange-dark);
117+
}
118+
119+
/* buttons */
120+
121+
button {
122+
background-color: var(--orange-dark);
123+
padding: 1rem 2rem;
124+
color: white;
125+
border: none;
126+
border-radius: 5px;
127+
}
128+
129+
/* selling points */
130+
.sellingpoints {
131+
align-items: center;
132+
justify-content: center;
133+
margin-top: 5rem;
134+
margin-bottom: 5rem;
135+
}
136+
137+
.features {
138+
justify-content: space-evenly;
139+
width: 100%;
140+
}
141+
142+
.feature-item {
143+
144+
}
145+
146+
.features img {
147+
height: 150px;
148+
width: auto;
149+
}
150+
151+
/* footer */
152+
153+
.footer {
154+
min-height: 200px;
155+
align-items: center;
156+
justify-content: space-evenly;
157+
}
158+
159+
.socials {
160+
align-items: center;
161+
}
19162

163+
.socials img {
164+
max-height: 16px;
165+
width: auto;
166+
padding: 0 1rem;
167+
}

‎index.html‎

Lines changed: 63 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,69 @@
1111
</head>
1212
<body>
1313

14-
<!-- Add your HTML markup here -->
15-
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
16-
<!-- All the images you need are in the 'img' folder -->
14+
<header class="header container flex-row">
15+
<logo class="logo">
16+
<img src="img/karma-logo.svg" />
17+
</logo>
18+
<nav>
19+
<ul class="navigation flex-row">
20+
<li class="nav-item nav-current bold">
21+
<a class="nav-link" href="">Meet Karma</a>
22+
</li>
23+
<li class="nav-item">
24+
<a class="nav-link" href="">How it Works</a>
25+
</li>
26+
<li class="nav-item">
27+
<a class="nav-link" href="">Store</a>
28+
</li>
29+
<li class="nav-item">
30+
<a class="nav-link" href="">Blog</a>
31+
</li>
32+
<li class="nav-item">
33+
<a class="nav-link" href="">Help</a>
34+
</li>
35+
<li class="nav-item">
36+
<a class="nav-link" href="">Login</a>
37+
</li>
38+
</ul>
39+
</nav>
40+
</header>
41+
42+
<main class="main container">
43+
<section class="splash flex-col">
44+
<h1>Introducing Karma</h1>
45+
<h3>Bring WiFi with you, everywhere you go.</h3>
46+
<button>Learn More</button>
47+
</section>
48+
<section class="sellingpoints flex-col">
49+
<h2>Everyone needs a little Karma</h2>
50+
<features class="features flex-row">
51+
<featureitem class="feature-item flex-col">
52+
<img src="img/icon-devices.svg"/>
53+
<h4>Internet for all devices</h4>
54+
</featureitem>
55+
<featureitem class="feature-item flex-col">
56+
<img src="img/icon-coffee.svg"/>
57+
<h4>Boost your productivity</h4>
58+
</featureitem>
59+
<featureitem class="feature-item flex-col">
60+
<img src="img/icon-refill.svg"/>
61+
<h4>Pay as You Go</h4>
62+
</featureitem>
63+
</features>
64+
</section>
65+
66+
</main>
67+
68+
<footer class="footer container flex-col">
69+
<p class="bold">Join us on</p>
70+
<socials class="socials flex-row">
71+
<img src="img/twitter-icon.svg" />
72+
<img src="img/facebook-icon.svg" />
73+
<img src="img/instagram-icon.svg" />
74+
</socials>
75+
<p>&copy; Karma Mobility Inc</p>
76+
</footer>
1777

1878
</body>
1979
</html>

0 commit comments

Comments
 (0)