-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (148 loc) · 9.95 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<title>Merchandise | CS Society USM</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="logo.png">
</head>
<body>
<div class="banner">
<a href ="index.html"><img src="logo.png"></a>
<div class = "header">
<p>USM CS SOCIETY<br>MERCHANDISE</p>
</div>
<button class="button">
<i class="fa fa-shopping-cart" style="font-size:20px"><b> CART</b></i>
</div>
</div>
<br><br>
<div class="box">
<i class="fa fa-times-circle-o"></i>
<div class="message">
<span>We are <b>not accepting new orders</b> at this time. <br>Thank you for your support!</span>
</div>
</div>
<div class="container">
<h1>Don't miss out on the one and only CS Society Merch.</h1>
<p>Your final chance to grab our limited merchandise!✨</p>
<div class="row">
<div class="column">
<div class="content">
<div class="slider-wrapper">
<div class="slider">
<img id= "slide-1" src="shortsleeve1.jpeg" alt="ss-front">
<img id= "slide-2" src="shortsleeve2.jpeg" alt="ss-back">
</div>
<div class="slider-nav">
<a href="#slide-1"></a>
<a href="#slide-2"></a>
</div>
</div>
<h2>T-Shirt Short Sleeve</h2>
<p>RM26.00</p>
<p>The royal blue microfibre shirt is comfy and stylish at the same time.</p>
<br>
<button class="unavailable">
<iconify-icon icon="gg:unavailable" width="30" height="30"></iconify-icon>
<p>UNAVAILABLE</p>
</button>
</div>
</div>
<div class="column">
<div class="content">
<div class="slider-wrapper">
<div class="slider">
<img id= "slide-3" src="longsleeve1.jpeg" alt="ls-front">
<img id= "slide-4" src="longsleeve2.jpeg" alt="ls-back">
</div>
<div class="slider-nav">
<a href="#slide-3"></a>
<a href="#slide-4"></a>
</div>
</div>
<h2>T-Shirt Long Sleeve</h2>
<p>RM26.00</p>
<p>The royal blue microfibre shirt is comfy and stylish at the same time.</p>
<br>
<button class="unavailable">
<iconify-icon icon="gg:unavailable" width="30" height="30"></iconify-icon>
<p>UNAVAILABLE</p>
</button>
</div>
</div>
<div class="column">
<div class="content">
<div class="slider-wrapper">
<div class="slider">
<img id= "slide-5" src="hoodie1.jpeg" alt="hoodie-front">
<img id= "slide-6" src="hoodie2.jpeg" alt="hoodie-back">
</div>
<div class="slider-nav">
<a href="#slide-5"></a>
<a href="#slide-6"></a>
</div>
</div>
<h2>Hoodie</h2>
<p>RM55.00</p>
<p>Make your presence known with this zip-up hoodie.</p>
<br>
<button class="unavailable">
<iconify-icon icon="gg:unavailable" width="30" height="30"></iconify-icon>
<p>UNAVAILABLE</p>
</button>
</div>
</div>
<div class="column">
<div class="content">
<div class="slider-wrapper">
<div class="slider">
<img src="cap.jpeg" alt="cap" >
</div>
</div>
<h2>Cap</h2>
<p>RM20.00</p>
<p>With a cute but cool little penguin on top, this cotton cap is sure to keep you cool as well on a sunny day.</p>
<br>
<button class="unavailable">
<iconify-icon icon="gg:unavailable" width="30" height="30"></iconify-icon>
<p>UNAVAILABLE</p>
</button>
</div>
</div>
<div class="column">
<div class="content">
<div class="slider-wrapper">
<div class="slider">
<img src="tote-bag.jpeg" alt="bag" >
</div>
</div>
<h2>Canvas Bag</h2>
<p>RM18.00</p>
<p>This canvas bag is perfect for you to show off that you're a computer science student while carrying your daily essentials around.</p>
<br>
<button class="unavailable">
<iconify-icon icon="gg:unavailable" width="30" height="30"></iconify-icon>
<p>UNAVAILABLE</p>
</button>
</div>
</div>
</div>
<p style="font-size:15px;text-align:center;color:gray;">** All pictures shown are for illustration purposes only. Actual product may vary due to product enhancement.</p>
</div>
<br><br>
<footer>
<p>Copyright © 2022 - 2023 Computer Science Society, USM</p>
<div class="icon">
<a href="https://cssocietyusm.com/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="fill-current" width="24" height="24"><path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 21 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"></path></svg></a>
<a href="https://www.instagram.com/cs.usm/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="fill-current" width="24" height="24"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a>
<a href="https://www.linkedin.com/company/cssocietyusm/"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="fill-current" width="24" height="24"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg></a>
<a href="https://www.facebook.com/cs.usm.my/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a>
</div>
</footer>
</body>
</html>