Skip to content

Commit 509eb68

Browse files
GryRgrsGryRgrs
committed
latest version
1 parent 2eafd55 commit 509eb68

3 files changed

Lines changed: 305 additions & 26 deletions

File tree

‎css/style.css‎

Lines changed: 163 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,169 @@
1+
.header {
2+
display: flex;
3+
width: 100%;
4+
justify-content: space-between;
5+
align-items: center;
6+
}
7+
8+
.header-nav {
9+
width: 15px;
10+
height: 10px;
11+
padding: left;
12+
margin:10px;
13+
}
14+
15+
.logo {
16+
width: 15px;
17+
height: 10px;
18+
padding: left;
19+
margin-top: 10px;
20+
}
21+
22+
.main {
23+
width: 15px;
24+
height: 10px;
25+
padding: left;
26+
margin-top: 10px;
27+
}
28+
29+
.first-child {
30+
display: block;
31+
margin-left:20px;
32+
margin-right: 20px;
33+
width: 10%;
34+
}
35+
36+
.second-child {
37+
display: block;
38+
margin-left: 20px;
39+
margin-right: 20px;
40+
width: 10%;
41+
}
42+
43+
.footer {
44+
position: fixed;
45+
left: auto;
46+
bottom: auto;
47+
width: 200%;
48+
background-color: white;
49+
color: white;
50+
text-align: center;
51+
}
52+
53+
.span {
54+
position: absolute;
55+
text-align: center;
56+
padding-bottom: 20px;
57+
}
58+
59+
.header-nav {
60+
position: absolute;
61+
width: 1448px;
62+
height: 96px;
63+
left: -3px;
64+
top: 0px;
65+
}
66+
67+
.legend {
68+
position: absolute;
69+
width: 521px;
70+
height: 118px;
71+
left: 123px;
72+
top: 214px;
73+
74+
font-family: 'Roboto';
75+
font-style: normal;
76+
font-weight: 500;
77+
font-size: 50px;
78+
line-height: 59px;
79+
80+
color: #DE6E49;
81+
}
82+
83+
.first-name {
84+
position: absolute;
85+
visibility: hidden;
86+
width: 32.17px;
87+
height: 32.01px;
88+
left: 1051.83px;
89+
top: 52.56px;
90+
91+
transform: matrix(0.98, -0.17, 0.17, 0.98, 0, 0);
92+
}
93+
94+
.last-name {
95+
position: absolute;
96+
width: 128px;
97+
height: 25px;
98+
left: 384px;
99+
top: 414px;
100+
101+
font-family: 'Roboto';
102+
font-style: normal;
103+
font-weight: 500;
104+
font-size: 21px;
105+
line-height: 25px;
106+
color: #666666;
107+
}
108+
109+
.mobile-img {
110+
position: absolute;
111+
width: 701px;
112+
height: 1235px;
113+
left: 739px;
114+
top: 98px;
115+
}
116+
117+
118+
.mobile-nav {
119+
position: absolute;
120+
width: 1440px;
121+
height: 77px;
122+
left: 0px;
123+
top: 20px;
1124

2-
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
125+
background: url(.png);
126+
}
127+
128+
.mobile-main {
129+
position: absolute;
130+
width: 1318px;
131+
height: 1235px;
132+
left: 122px;
133+
top: 98px;
134+
}
3135

4-
body {
5-
font-family: 'Roboto', sans-serif;
6-
-webkit-font-smoothing: antialiased;
136+
.mobile-heading {
137+
position: absolute;
138+
width: 521px;
139+
height: 118px;
140+
left: 123px;
141+
top: 214px;
142+
143+
font-family: 'Roboto';
144+
font-style: normal;
145+
font-weight: 500;
146+
font-size: 50px;
147+
line-height: 59px;
148+
149+
color: #DE6E49;
7150
}
8151

9-
/**
10-
* Add your custom styles below
11-
*
12-
* Remember:
13-
* - Be organised, use comments and separate your styles into meaningful chunks
14-
* for example: General styles, Navigation styles, Hero styles, Footer etc.
15-
*
16-
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
17-
*/
152+
.mobile-form {
153+
position: absolute;
154+
width: 501px;
155+
height: 849px;
156+
left: 122px;
157+
top: 414px;
158+
}
18159

19160

161+
.mobile-footer {
162+
position: absolute;
163+
width: 1434px;
164+
height: 370px;
165+
left: 4px;
166+
top: 1264px;
167+
168+
background: url(.png
169+
}

‎index.html‎

Lines changed: 58 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,64 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html lang="en">
3+
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
34
<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='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">
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Karma Project</title>
9+
<link rel="stylesheet" href="style.css">
1110
</head>
12-
<body>
11+
12+
<body class="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">
15+
<img src="img/karma-logo.svg" alt="Karma Logo" class="logo" />
16+
<nav class="header-nav">
17+
<a href="" class="header-nav-link">Meet Karma</a>
18+
<a href="" class="header-nav-link">How It works</a>
19+
<a href="" class="header-nav-link">Store</a>
20+
<a href="" class="header-nav-link">Blog</a>
21+
<a href="" class="header-nav-link">Help</a>
22+
<a href="" class="header-nav-link">Login</a>
23+
</nav>
24+
</header>
1725

18-
</body>
26+
<main class="main">
27+
<section class="first-child">
28+
<img src="img/first-background.jpg" alt="introducing karma bring wi-fi with you everywhere you go" class="first-background" />
29+
<h1 class="section1-title">Introducing Karma</h1>
30+
<h2 class="section1-text">Bring WiFi with you, everywhere you go.</h2>
31+
</section>
32+
<section class="second-child">
33+
<h1 class="karma-title">Everyone needs a little Karma.</h1>
34+
<div class="karma-title">
35+
<img src="img/icon-devices.svg" alt="An image of a phone, a tablet and a computer desktop" />
36+
37+
<h2 class="karma-heading2">Internet for all devices</h2>
38+
<img src="img/icon-coffee.svg" alt="An Image of a Cup of Coffee" />
39+
<h2 class="karma-heading3">Boost your productivity</h2>
40+
<img src="img/icon-refill.svg" alt="An Image of a Petrol Pump" />
41+
<h2 class="karma-heading4">Pay as You Go</h2>
42+
43+
</div>
44+
</section>
45+
</main>
46+
47+
<footer class="footer">
48+
<p class="footer-text">Join us on</p>
49+
<div class="social-media-buttons">
50+
<a href="#"><img src="img/twitter-icon.svg" alt="twitter icon" class="footer-link" /></a>
51+
<a href="#"><img src="img/facebook-icon.svg" alt="facebook icon" class="footer-link" /></a>
52+
<a href="#"><img src="img/instagram-icon.svg" alt="instagram icon" class="footer-link" /></a>
53+
</div>
54+
<span class="span"> © Karma Mobility, Inc.</span>
55+
</footer>
56+
57+
58+
</body>
1959
</html>
60+
61+
62+
63+
64+

‎store.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<main>
12+
<main class="mobile-main">
13+
14+
<header class="store-header">
15+
<img src="img/karma-logo.svg" alt="Karma Logo" class="logo" />
16+
<nav class="header-nav">
17+
<a href="" class="header-nav-link">Meet Karma</a>
18+
<a href="" class="header-nav-link">How It works</a>
19+
<a href="" class="header-nav-link">Store</a>
20+
<a href="" class="header-nav-link">Blog</a>
21+
<a href="" class="header-nav-link">Help</a>
22+
<a href="" class="header-nav-link">Login</a>
23+
</nav>
24+
</header>
25+
26+
<form action="/action_page.php">
27+
<fieldset>
28+
<h2 id="mobile-heading">Order Your Karma Wifi Device Today!</h2>
29+
<br>
30+
<br>
31+
<br>
32+
<div>
33+
<label for="first-name">First Name*</label><br><br>
34+
<input type="text" id="first-name" name="first-name"><br><br>
35+
<label for="last-name">Last Name*</label><br><br>
36+
<input type="text" id="last-name" name="last-name"><br><br>
37+
<label for="address">Address*</label><br><br>
38+
<input type="text" id="address" name="address"><br><br>
39+
<label for="address2">Address 2</label><br><br>
40+
<input type="text" id="address2" name="address2"><br><br>
41+
<label for="city">City</label><br><br>
42+
<input type="city" id="city" name="city"><br><br>
43+
<label for="postcode">Postcode</label><br><br>
44+
<input type="postcode" id="postcode" name="postcode"><br><br>
45+
</fieldset>
46+
</div>
47+
48+
<div>
49+
<fieldset>
50+
<legend>Select a Colour</legend>
51+
52+
<input id="colour1" type="radio" name="colour1" value="orange" />
53+
<label for="colour1">Karma Orange</label>
54+
<input id="colour2" type="radio" name="colour2" value="grey" checked />
55+
<label for="colour2">Space Grey</label>
56+
<br><br><br><br>
57+
</fieldset>
58+
</div>
59+
60+
<input type="image" class="mobile-img" img src="https://c.pxhere.com/photos/aa/f6/photo-1393211.jpg!d" alt="Woman at Desk" class="photo" />
61+
62+
63+
64+
<input id="agreement" type="checkbox" name="agreement" />
65+
<label for="agreement">By placing your order you agree to Karma's terms and conditions</label>
66+
<br>
67+
<br>
68+
<button>Place my Order</button>
69+
</fieldset>
70+
</form>
71+
72+
<footer class="footer">
73+
<p class="mobile-footer">Join us on</p>
74+
<div class="social-media-buttons">
75+
<a href="#"><img src="img/twitter-icon.svg" alt="twitter icon" class="footer-link" /></a>
76+
<a href="#"><img src="img/facebook-icon.svg" alt="facebook icon" class="footer-link" /></a>
77+
<a href="#"><img src="img/instagram-icon.svg" alt="instagram icon" class="footer-link" /></a>
78+
</div>
79+
<span class="span"> © Karma Mobility, Inc.</span>
80+
</footer>
81+
82+
83+
</main>
84+
</html>

0 commit comments

Comments
 (0)