-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathplaygroundIndex.html
117 lines (70 loc) · 4.63 KB
/
playgroundIndex.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
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$(".drag-me").draggable();
});
</script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body style="margin: 0;">
<div style="margin: 0 20% 0 20%;">
<h1>Danii the Coding Designer's Code Playground</h1>
<h2>Where Adult Kids Come to Play</h2>
<h3>Credit: <!--Hella Hacks's Vellah Vee0--> @D.theArtist</h3>
</div>
<div style="text-align:center; margin: 0 20% 0 20%; width: 800px;">
<img src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:0 350px 0 350px; width:350px; height:350px">
<img src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:300px 0 300px 0; width:300px; height:300px">
<br>
<img src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:300px 0 0 0; width:300px;">
<img src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:0 100px 0 0; width:250px; height: 200px;">
<br>
<img src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:0 150px 0 150px; width:300px;">
<img src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:0 0 20px 0; width:250px; height:200px">
<br>
<img src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:0 150px 0 150px; width:100px;image-rendering: pixelated; margin-left:90px; height:50px;">
<img src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:150px 0 150px 0; width:100px; image-rendering: pixelated; height:50px;">
<img src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:0 200px 400px 200px; height:50px; width: 250px; image-rendering: pixelated;">
<br>
<img src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:150px 0 150px 0; width:100px; image-rendering: pixelated; height: 50px;">
<img src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:0 150px 0 150px; width:100px;image-rendering: pixelated; margin-right: 165px;height: 50px;">
</div>
<h2>Drag These to make your own art</h2>
<div class="shot">
<div class="drag-me">Drag me around!</div>
</div>
<div style="text-align:center;">
<img class="drag-me" src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:0 200px 0 20px; width:300px;">
<img class="drag-me" src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:300px 0 300px 0; width:300px; height:300px">
<img class="drag-me" src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:20px; width:300px;">
<img class="drag-me" src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:0 150px 0 150px; width:300px;">
<img class="drag-me" src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:0 0 0 300px; width:300px;">
<img class="drag-me" src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:0 300px 300px 0; width:300px;">
<img class="drag-me" src="https://hellahacks.files.wordpress.com/2022/01/pexels-photo-2004161.jpeg" style="border-radius:150px; width:300px;">
</div>
<h2>How To:</h2>
<!-- <p>Hover over each shape to inspect the code for each shape. </p> -->
<!--<p>Tool Tips will help you understand the ways you can interact with this site. </p>-->
<h3>Have Fun!</h3>
Steps:
<ul>
<li>Click & drag the shapes above to create your own geometric design.</li>
<li>Screenshot it. </li>
<li>Share it. </li>
<li>Post to your social media page and tag @d.theartist </li>
</ul>
</div>
<footer style="background: rgba(0, 0, 0, 1.0); width:auto; padding: 5% 10%; color: whitesmoke;">
<h3> I hope you had fun. I hope I land a place on a team that plays with code and desing in boundry pushing ways with great levels of usablity. If not I am happy to code what you request at my rate.</h3>
<p>Added Puzzle Canvas 1.0 to repository</p>
<p>Version 1.0 _ Puzzle Canvas<br>
Drag & Drop Playground Art v1<br>
_ simple layout, simple geometric shapes
_ feature release: drag and drop interaction </p>
</footer>
</body>
</html>