Skip to content

Commit dbb181b

Browse files
DiegoJunior0DiegoJunior0
committed
Revert "First attempt"
This reverts commit 7eeaaf7.
1 parent 7eeaaf7 commit dbb181b

2 files changed

Lines changed: 4 additions & 212 deletions

File tree

‎css/style.css‎

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

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

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 {
4+
body {
125
font-family: 'Roboto', sans-serif;
136
-webkit-font-smoothing: antialiased;
14-
color: var(--grey-dark);
15-
font-weight: lighter;
167
}
178

189
/**
@@ -25,143 +16,4 @@ body, h1, h2, h3, h4 {
2516
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
2617
*/
2718

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-
}
16219

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

‎index.html‎

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

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>
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 -->
7717

7818
</body>
7919
</html>

0 commit comments

Comments
 (0)