forked from CodeYourFuture/HTML-CSS-Module-Project
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathstore.html
More file actions
143 lines (120 loc) · 5.28 KB
/
store.html
File metadata and controls
143 lines (120 loc) · 5.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="This is the Karma store page" />
<link rel="stylesheet" href="/css/store.css" />
<title>Karma Store</title>
</head>
<body>
<!--HEADER STARTS -->
<header class="header mediaHeader">
<div class="imageLeft mediaImageLeft">
<img class="karmaIcon mediaKarmaIcon" src="/img/karma-logo.svg" alt="" />
</div>
<nav class="navBar mediaNavBar">
<a class="nav1 linkStyle mediaLinkStyle mediaNav1" href="">Meet Karma</a>
<a class="nav2 linkStyle mediaLinkStyle mediaNav2" href="">How It Works</a>
<a class="nav3 linkStyle mediaLinkStyle mediaNav3" href="">Store</a>
<a class="nav4 linkStyle mediaLinkStyle mediaNav4" href="">Blog</a>
<a class="nav5 linkStyle mediaLinkStyle mediaNav5" href="">Help</a>
<a class="nav6 linkStyle mediaLinkStyle mediaNav6" href="">Login</a>
</nav>
</header>
<!-- MAIN FORM LHS -->
<main class="main mediaMain">
<div class="formDiv mediaFormDiv">
<h1 class="formh1">Order your Karma wifi device today!</h1>
<br><br>
<form class="form mediaForm" action="">
<div class="horizontalFlex double mediaHorizontalFlex mediaDouble">
<div class="verticalFlex mediaVerticalFlex">
<label class="labelGap mediaLabelGap" for="firstName">First Name *</label>
<input type="text" id="firstName" name="firstName" placeholder="" required/>
</div>
<br />
<div class="verticalFlex">
<label class="labelGap" for="lastName">Last Name *</label>
<input type="text" id="lastName" name="lastName" placeholder="" required/>
</div>
</div>
<br />
<div class="verticalFlex">
<label class="labelGap" for="address">Address *</label>
<input type="text" id="address1" name="address1" placeholder="" required/>
</div>
<br />
<div class="verticalFlex">
<label class="labelGap" for="address2">Address 2</label>
<input type="text" id="address2" name="address2" placeholder="" />
</div>
<br />
<div class="horizontalFlex double">
<div class="verticalFlex">
<label class="labelGap" for="city">City *</label>
<select id="city" name="city" placeholder="Select your city" required>
<option value="none">Select your city</option>
<option value="sheffield">Sheffield</option>
<option value="manchester">Manchester</option>
<option value="birmingham">Birmingham</option>
<option value="leeds">Leeds</option>
<option value="liverpool">Liverpool</option>
<option value="london"><p class="italic">London</p></option>
</select>
</div>
<br />
<div class="verticalFlex">
<label class="labelGap" for="postCode">Postcode *</label>
<input type="text" id="postcode" name="postcode" placeholder="" required/>
</div>
</div>
<br /> <br>
<div class="verticalFlex">
<fieldset>
<legend class="labelGap">Select a colour *</legend>
<div class="horizontalFlex ">
<input class="accent" id="radio1" name="radio1" type="radio" placeholder="" />
<label for="radio1">Karma Orange</label>
<input checked class="accent" id="radio2" name="radio1" type="radio" placeholder="" />
<label for="radio2">Space Grey</label>
</div>
</fieldset>
</div>
<br /> <br> <br>
<div class="horizontalFlex">
<input class="checkboxxx" id="checkbox" name="checkbox" type="checkbox" placeholder="" />
<label class="labelGap" for="checkbox"
>By placing your order you agree to Karma's
<a href>Terms and Conditions</a> *
</label>
</div>
<br />
<button class="placeOrderButton mediaPlaceOrderButton " type="submit">Place my order</button>
</form>
</div>
<!-- MAIN IMAGE RHS -->
<div class="mainImageDiv medaMainImageDiv">
<img class="mainImage mediaMainImage" src="/level-2/storeImage.jpg" alt="GIRL WORKING" />
</div>
</main>
<!-- FOOTER STARTS -->
<footer class="footer mediaFooter">
<p>Join us on</p>
<div class="footerIconsDiv mediaFooterIconsDiv">
<img class="footerIcons" src="/img/twitter-icon.svg" alt="twitter" />
<img class="footerIcons" src="/img/facebook-icon.svg" alt="fb" />
<img class="footerIcons" src="/img/instagram-icon.svg" alt="insta" />
</div>
<p>© Karma Mobility Inc</p>
</footer>
</body>
</html>
<!-- NOTES -->
<!-- 1. Added for attributes to the labels in line with the ID's
2. wrapped radio buttons around legend and fieldset
3. No media queries - so desktop only
4. Tried changing color of radio/checkbox but cant find the property.
Maybe has to be customised fully
-->