Virtual-Closet/DressUp_Sample_Website.html at main · pekcus/Virtual-Closet · GitHub

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
<!---  ***** "DRESS-UP GAME" SAMPLE WEBSITE ***** --->
<!doctype html>
<html lang="en">
<!---  ********** HEAD ********** --->
 <head>
 <meta charset="utf-8">
 <style>
	.draggable {
		position: absolute;
	}
	.draggable img {
		user-select: none;       /* disables highlighting */
		pointer-events: none;    /* disables clicking/dragging */
	}
 </style>
 <title>H&M Dress-Up</title>
 <link href="favicon.ico" rel="shortcut icon"/>
 <link rel="stylesheet" href="styles.css">
 </head>


<!---  ********** BODY ********** --->
 <body class="animated">

	<div class="container">
		<div class="draggable">
			<img src="i/s1.png" width="40%" height="40%"/>
		</div>
		<div class="draggable">
			<img src="i/b1.png" width="60%" height="60%"/>
		</div>
		<div class="draggable">
			<img src="i/b2.png" width="45%" height="45%"/>
		</div>
		<div class="draggable">
			<img src="i/b3.png" width="60%" height="60%"/>
		</div>
		<div class="draggable">
			<img src="i/b4.png" width="40%" height="40%"/>
		</div>
		<div class="draggable">
			<img src="i/d1.png" width="60%" height="60%"/>
		</div>
		<div class="draggable">
			<img src="i/d2.png" width="60%" height="60%"/>
		</div>
		<div class="draggable">
			<img src="i/d3.png" width="60%" height="60%"/>
		</div>
		<div class="draggable">
			<img src="i/d4.png" width="60%" height="60%"/>
		</div>
		<div class="draggable">
			<img src="i/d5.png" width="60%" height="60%"/>
		</div>
		<div class="draggable">
			<img src="i/t1.png" width="55%" height="55%"/>
		</div>
		<div class="draggable">
			<img src="i/t2.png" width="55%" height="55%"/>
		</div>
	</div>
	<nav >
		<img src="icon.png"/ class="icon">
		<div class="animated-2">
			<h1>Drag and drop clothing items to make an outfit!</h1>
		</div>

		<a href='https://www2.hm.com/en_ca/women/seasonal-trending/y2k-fashion.html'>
			<button>Buy Outfit!</button>
		</a>
		 <!-- will be linked to the current clothes put together and will open up the corresponding H&M pages to add the clothing items to cart-->

	</nav>
	<script src="drag_drop.js"></script>
	<!-- The following script would need to be included for dynamic transparent image editing!
	<script type="module" src="libraries/replace-color.js"></script> -->
 </body>

</html>