-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (129 loc) · 4.63 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple Store Redesign Kit</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;400&display=swap" rel="stylesheet">
</head>
<body>
<h1>Apple Store Redesign Kit</h1>
<div class="container">
<div class="special-hours rounded shadow">
<div class="special__details">
<h3 class="special__title txt-thin txt-gray">Nearby store <span class="special__title--point">+1</span></h3>
<div class="special-info">
<div>
<p class="special__store txt-bg">Apple Boise Towne Square</p>
<p>
<span class="special__label txt-gray">1.5 km</span> <span class="special__label txt-gray">6 min</span>
</p>
</div>
<svg class="icon icon--gray">
<use xlink:href="sprite.svg#icon-cheveron-right"></use>
</svg>
</div>
</div>
<a href="#" class="special__link">
Other stores
<svg class="icon icon--cheveron">
<use xlink:href="sprite.svg#icon-cheveron-right"></use>
</svg>
</a>
</div>
<div class="items rounded shadow">
<div class="item rounded item--selected">
<p class="item__details">
<span class="item__length">40 mm</span>
<span class="item__description txt-thin txt-gray">Band fits 130 - 180mm wrists</span>
</p>
<p class="item__price txt-md">$799</p>
</div>
<div class="item rounded">
<p class="item__details">
<span class="item__length">44 mm</span>
<span class="item__description txt-thin txt-gray">Band fits 150 - 200mm wrists</span>
</p>
<p class="item__price txt-md">$849</p>
</div>
<button class="item__button rounded txt-thin">
<span class="txt-md">Continue</span>
<svg class="icon--sm icon--white">
<use xlink:href="sprite.svg#icon-cheveron-right"></use>
</svg>
</button>
</div>
<div class="location rounded shadow">
<div class="location__time bdr-btm">
<p>
<span>10:00 A.M. - 9:00 P.M.</span>
<span class="txt-thin txt-gray">Monday - Saturday</span>
</p>
<p class="location__special">Special Hours</p>
</div>
<div class="location__address bdr-btm">
<p>4872 King George Hwy #4986</p>
<p>
<span class="special__label txt-gray">1.5 km</span>
<span class="special__label txt-gray">6 min</span>
</p>
</div>
<a href="#" class="location__button rounded txt-md txt-thin">
<span>Contact</span>
<span>|</span>
<span>Navigation</span>
</a>
</div>
<div class="payment rounded shadow">
<div class="payment__price">
<p class="txt-md">Total price</p>
<p class="payment__price--amount txt-bg">$799.00</p>
</div>
<p class="bdr-btm payment__delivery txt-thin txt-gray">
<span>Free Delivery</span>
<span>3 days</span>
</p>
<div class="payment__buttons">
<button class="btn btn--outline rounded">Other</button>
<button class="btn payment__btn rounded">Apple Pay</button>
</div>
</div>
<div class="pods rounded shadow">
<img src="images/airpods.png" alt="Air pods illustration">
<div class="pods__body">
<div class="pods__title">
<div>
<p class="txt-bg">AirPods</p>
<div class="pods__rating">
<svg class="icon icon--sm icon--gold">
<use xlink:href="sprite.svg#icon-star" />
</svg>
<svg class="icon icon--sm icon--gold">
<use xlink:href="sprite.svg#icon-star" />
</svg>
<svg class="icon icon--sm icon--gold">
<use xlink:href="sprite.svg#icon-star" />
</svg>
<svg class="icon icon--sm icon--gold">
<use xlink:href="sprite.svg#icon-star" />
</svg>
<svg class="icon icon--sm icon--gray">
<use xlink:href="sprite.svg#icon-star" />
</svg>
</div>
</div>
<svg class="icon icon--purple">
<use xlink:href="sprite.svg#icon-heart-outlined" />
</svg>
</div>
<p class="pods__price txt-bg txt--purple">
$159.00
</p>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>