Skip to content

Commit 896f13e

Browse files
SanaAsafSanaAsaf
committed
Store page
Added a store page
1 parent 4fb2be5 commit 896f13e

3 files changed

Lines changed: 3149 additions & 3 deletions

File tree

‎css/store.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
2+
.store-container {
3+
grid-column: 1 / -1;
4+
display: flex;
5+
flex-direction: row;
6+
justify-content: space-evenly;
7+
}
8+
9+
.form-container {
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
min-width: 40%;
14+
max-width: 65%rem;
15+
padding: 10vw 2rem 0;
16+
margin: 0 auto;
17+
height: 100vh;
18+
}
19+
20+
.store-main-image {
21+
max-width: 50%;
22+
}
23+
24+
25+
.form {
26+
display: flex;
27+
flex-direction: column;
28+
justify-content: flex-start;
29+
margin-left: 45px;
30+
margin-right: 45px;
31+
}
32+
33+
.form > h1 {
34+
color: orangered;
35+
font-weight: 100;
36+
line-height: 2;
37+
}
38+
39+
.field {
40+
display: flex;
41+
flex-direction: column;
42+
padding: 0.5rem;
43+
border-radius: 0.25rem;
44+
color: #737888;
45+
margin-right: 2%;
46+
}
47+
48+
label {
49+
display: block;
50+
margin-top: 0.25em;
51+
margin-bottom: 0.25rem;
52+
}
53+
54+
.req {
55+
color: red;
56+
}
57+
58+
.form-names,
59+
.form-city-postcode {
60+
display: flex;
61+
flex-direction: row;
62+
justify-content: flex-start;
63+
}
64+
65+
.select-a-colour {
66+
display: flex;
67+
flex-direction: row;
68+
margin-top: 0%;
69+
}
70+
71+
.radio-button,
72+
.checkbox {
73+
display: flex;
74+
flex-direction: row;
75+
padding: 0.5rem;
76+
color: #737888;
77+
margin-right: 2%;
78+
cursor: pointer;
79+
}
80+
81+
#karma-orange,
82+
#space-gray {
83+
margin-right: 10px;
84+
}
85+
86+
#checkbox {
87+
margin-left: 10px;
88+
}
89+
90+
.button {
91+
background-color: orangered;
92+
font-size: 0.8rem;
93+
font-weight: 600;
94+
color: #fff;
95+
padding: 1rem;
96+
border-radius: 0.25rem;
97+
border: 0;
98+
outline: 0;
99+
margin-top: 5%;
100+
}
101+
.button:focus-visible {
102+
background-color: #333;
103+
}
104+
105+
106+

‎index.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<a href="#"><strong>Meet Karma</strong></a>
2323
</button>
2424
<button><a href="#">How it Works</a></button>
25-
<button><a href="#">Store</a></button>
25+
<button><a href="store.html">Store</a></button>
2626
<button><a href="#">Blog</a></button>
2727
<button><a href="#">Help</a></button>
2828
<button><a href="#">Login</a></button>
@@ -41,8 +41,7 @@ <h3 style="font-size: 2vw">Bring WiFi with you, everywhere you go.</h3>
4141
<button class="button-orange">Learn More</button>
4242
</div>
4343

44-
<!-- Article Two Starts Here -->
45-
44+
4645
<h1 style="font-size: 3vw">
4746
<center>Everyone needs a little Karma.</center>
4847
</h1>

0 commit comments

Comments
 (0)