-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (109 loc) · 11.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta property="og:title" content="Alex in Wonderland" />
<meta property="og:image" content="wonderland.gif" />
<meta
property="og:description"
content="Alex in Wonderland is an Alice in Wonderland inspired interactive JavaScript and CSS demo."
/>
<meta
property="og:url"
content="https://alexandria-wong.com/wonderland/"
/>
<link rel="icon" href="./src/assets/favicon.png" type="image/png">
<link rel="stylesheet" href="./dist/main.css" />
<script src="https://kit.fontawesome.com/ade2e65c5e.js" crossorigin="anonymous"></script>
<script src="./dist/main.js"></script>
<title>Alex in Wonderland</title>
</head>
<body>
<header>
<div class="dark-btn-container">
<i class="fas fa-sun"></i>
<button class="switch" id="dark-mode-switch"></button>
<i class="fas fa-moon"></i>
</div>
<div class="header-right">
<a href="https://alexandria-wong.com/" target="_blank"><i class="fas fa-address-card"></i></a>
<a href="https://github.com/alexawhy/wonderland" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/alexandria-hy-wong/" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="https://angel.co/u/alexandria-wong" target="_blank"><i class="fab fa-angellist"></i></a>
</div>
</header>
<section class="parallax">
<h1 id="title">Alex in Wonderland</h1>
<div
class="plus"
id="plus-parallax"
data-descr="You found the first description: JS Parallax effect! And this description is purely HTML and CSS">
</div>
<img src="src/assets/parallax/cloud1.svg" class="cloud" id="cloud1">
<img src="src/assets/parallax/cloud2.svg" class="cloud" id="cloud2">
<img src="src/assets/parallax/cloud3.svg" class="cloud" id="cloud3">
<img src="src/assets/parallax/star.svg" class="star" id="star1">
<img src="src/assets/parallax/star.svg" class="star" id="star2" >
<img src="src/assets/parallax/star.svg" class="star" id="star3">
<img src="src/assets/parallax/star.svg" class="star" id="star4">
<div
class="plus"
id="plus-star"
data-descr="CSS transform and transitions with page scrolling and mouse hovering">
</div>
<img src="src/assets/parallax/rabbithole.svg" id="rabbithole">
<img src="src/assets/parallax/bush1.svg" id="bush1">
<img src="src/assets/parallax/bush2.svg" id="bush2">
</section>
<section class="intro">
<div class="intro-card-container">
<div
class="plus"
id="plus-typed"
data-descr="Typewriter effect by Typed.js and glassmorphism UI">
</div>
<div id="intro-card">
<div id="typed-strings">
<p>
Alex in Wonderland is an <strong>Alice in Wonderland</strong> inspired interactive JavaScript and CSS demo.
</p>
<p>
Please feel free to play around!
</p>
</div>
<span id="typed"></span>
</div>
</div>
<div class="cheshire-cat">
<svg id="cheshire-cat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 1000"><defs><style>.cls-1{fill:#ffa3a1;}.cls-2{fill:#d16e6b;}.cls-3{fill:#e5ba63;}.cls-4{fill:#f9dc9b;}.cls-5{fill:#b24747;}.cls-6{fill:#fff;}.cls-7{fill:none;stroke:#914141;stroke-linecap:round;stroke-miterlimit:10;stroke-width:6px;}.cls-8{fill:#1c0a0a;}.cls-9{fill:#5b4040;}</style></defs><title>cheshirecat</title><g id="body"><path class="cls-1" d="M1156,407c-1.75,31.72-6.41,116.33-66,173-58.88,56-139.87,54.73-264,51-131.21-4-134-26.44-242-31-205.16-8.67-269.06,69.38-341,19-74.1-51.88-82.68-188.14-48-281,25.78-69,64.92-121.37,114-141,77.07-30.83,193.77-87.42,312.49-125.31q21.93-7,43.87-13.06c17.9-4.93,35.74-9.3,53.39-13,2.75-.58,5.51-1.13,8.25-1.67a649.89,649.89,0,0,1,67.56-9.87A411.16,411.16,0,0,1,855.37,33a314.62,314.62,0,0,1,75.75,13.79C950.78,52.8,969.1,60.24,988,68q2.34,1,4.62,1.93a289.26,289.26,0,0,1,52.61,28.9c59,41.4,75.44,91,88.77,117.17C1151.65,250.66,1160.51,325.16,1156,407Z" transform="translate(-40 -32.32)"/><path class="cls-1" d="M181,528S32,725,261,736c0,0,87-8,11-69,0,0,52-19-4-60,0,0,42-24,4-49S181,528,181,528Z" transform="translate(-40 -32.32)"/><path class="cls-2" d="M713,446s3,174-283,240c0,0,5,32-36,52,0,0-59,33-71-12,0,0-52-12-22-54,0,0-73-19-15-68s102-55,102-55L583,419S686,373,713,446Z" transform="translate(-40 -32.32)"/><path class="cls-1" d="M704,441s3,174-283,240c0,0,5,32-36,52,0,0-46,34-58-11,0,0-48-10-18-52,0,0-73-18-15-67s85-59,85-59L574,414S677,368,704,441Z" transform="translate(-40 -32.32)"/><path class="cls-2" d="M278,613" transform="translate(-40 -32.32)"/><path class="cls-2" d="M742,315c-7.94,2.27-21.11-44.53-81-166-14.89-30.21-28.12-55.8-39.51-77.31q21.93-7,43.87-13.06A441,441,0,0,1,694,104C748.27,203.22,753.71,311.65,742,315Z" transform="translate(-40 -32.32)"/><path class="cls-2" d="M919,334c-4.77-.36,3.51-47.32-12-134-14.16-79.14-38.52-137.52-48-159q-1.8-4.08-3.63-8a314.62,314.62,0,0,1,75.75,13.79C982.72,183.34,927.62,334.65,919,334Z" transform="translate(-40 -32.32)"/><path class="cls-2" d="M859,305c-3.81,29.13-12.82,67.31-21,67-9.33-.35-9.59-50.48-31-143-15.73-68-27.48-92.3-33-103-12.67-24.57-15-21-53-77l-2.25-3.33c2.75-.58,5.51-1.13,8.25-1.67a649.89,649.89,0,0,1,67.56-9.87A517.37,517.37,0,0,1,832,116C846.85,157.56,869.64,223.61,859,305Z" transform="translate(-40 -32.32)"/><path class="cls-2" d="M1023,318c-9.44-.7-1-80.32-20-195-3.06-18.42-6.56-36.12-10.38-53.07a289.26,289.26,0,0,1,52.61,28.9c1.92,9.15,3.53,18.54,4.77,28.17C1062.78,226,1033.27,318.76,1023,318Z" transform="translate(-40 -32.32)"/></g><g id="tail"><g id="tail-2" data-name="tail"><path class="cls-2" d="M942,893c-212,101-362-1-362-42,0-30.35,185.48,69.26,226-106,2.47-10.69,6.9-39.47,8-42,8.64-19.84,1.74-46.11,3.24-62.6,1.3-14.33,2.9-30.33,10-53.11,2.28-7.34,5.14-15.38,8.75-24.29q2.63-6.48,5.42-12.63a327.44,327.44,0,0,1,31.49-54.53,385.8,385.8,0,0,1,36.31-43.51c9.23-9.62,18-18,25.78-25.33l6.69-6.33c49.82-47,84.4-77.83,126.31-73.67,59.3,5.88,100.63,78.59,116,125C1228.12,605.26,1093.05,821,942,893Z" transform="translate(-40 -32.32)"/><path class="cls-1" d="M942,915c-212,101-362-23-362-64,0-30.35,119.06,50.9,206.52-99.26,5.52-9.48,10.92-19.88,16.15-31.3q1.68-3.65,3.33-7.44c8.64-19.84,9.74-34.11,11.24-50.6,1.3-14.33,2.9-30.33,10-53.11,2.28-7.34,5.14-15.38,8.75-24.29q2.63-6.48,5.42-12.63a327.44,327.44,0,0,1,31.49-54.53,385.8,385.8,0,0,1,36.31-43.51c9.23-9.62,18-18,25.78-25.33l6.69-6.33c49.82-47,84.4-77.83,126.31-73.67,59.3,5.88,100.63,78.59,116,125C1228.12,627.26,1093.05,843,942,915Z" transform="translate(-40 -32.32)"/><path class="cls-2" d="M1064,596c-6.33,9.19-85.41-14.35-131-77a183.59,183.59,0,0,1-23.78-44.67c9.23-9.62,18-18,25.78-25.33l6.69-6.33c7.1,12.82,15.15,26,24.31,39.33C1016.76,555.86,1069.61,587.86,1064,596Z" transform="translate(-40 -32.32)"/><path class="cls-2" d="M1028,716c-4.57,7.15-71.1-17.46-126-69-17.37-16.3-45.1-42.33-60.58-74.63a327.44,327.44,0,0,1,31.49-54.53A374.28,374.28,0,0,0,916,601C968.12,676.36,1032.65,708.72,1028,716Z" transform="translate(-40 -32.32)"/><path class="cls-2" d="M997,822c-5.3,8.3-79.92-12.8-131-71-24.36-27.76-39.7-59.77-48.76-88.6,1.3-14.33,2.9-30.33,10-53.11C838.4,633.18,856.47,669.19,888,710,946.24,785.39,1001.86,814.38,997,822Z" transform="translate(-40 -32.32)"/><path class="cls-2" d="M887,848c-4.45,5-49.34-16.5-79-57a175.59,175.59,0,0,1-21.48-39.26c5.52-9.48,10.92-19.88,16.15-31.3A440.18,440.18,0,0,0,830,770C862.24,820.56,890.9,843.58,887,848Z" transform="translate(-40 -32.32)"/></g></g><g id="head"><path class="cls-2" d="M330,570c129.5,0,186.61-40.32,222-83,34-41,62-42,62-42-14-1-31-22-31-22,17,4,30-11,30-11-15-3-29-17-29-17,25-2,28-21,28-21-42-34-46-123-49-158-2.17-25.32,12.93-75.25,21.45-100.92,3-9-10-21.07-19.45-22.08-63.49-6.78-124,44-124,44-53.5-20.5-111-20-111-20s-67.5,2.5-121,23c0,0-57.5-51.33-121-44.54a14.94,14.94,0,0,0-12.46,19.61C84.06,140.74,99.17,190.67,97,216c-3,35-3.5,118.5-47.5,162.5,0,0,5.5,7.5,30.5,9.5,0,0-16,26-31,29a120.93,120.93,0,0,0,32-3s-7.5,23.5-27,29c0,0,19,1,54,44S203,575,330,570Z" transform="translate(-40 -32.32)"/><path class="cls-1" d="M321,567c129.5,0,187-40,222-83s56-41,56-41c-19.5-5.5-24-25-24-25,17,4,27-4,27-4-15-3-28-22-28-22,25-2,27.5-16.5,27.5-16.5C557.5,331.5,557,248,554,213c-2.17-25.32,12.93-75.25,21.45-100.92A15,15,0,0,0,563,92.46C499.49,85.67,432,134,432,134c-53.5-20.5-111-20-111-20s-57.5-.5-111,20c0,0-67.5-48.33-131-41.54a14.94,14.94,0,0,0-12.46,19.61C75.06,137.74,90.17,187.67,88,213c-3,35-3.5,118.5-47.5,162.5,0,0,2.5,14.5,27.5,16.5,0,0-13,19-28,22,0,0,10,8,27,4,0,0-4.5,19.5-24,25,0,0,21-2,56,41S191.5,567,321,567Z" transform="translate(-40 -32.32)"/><path class="cls-2" d="M167,158s-27,7-51,34c0,0-10-53-15-66S136,114,167,158Z" transform="translate(-40 -32.32)"/><path class="cls-2" d="M477,158s27,7,51,34c0,0,10-53,15-66S508,114,477,158Z" transform="translate(-40 -32.32)"/><ellipse class="cls-3" cx="188.5" cy="275.18" rx="48.5" ry="53.5"/><ellipse class="cls-4" cx="184.5" cy="275.18" rx="48.5" ry="53.5"/><path class="cls-2" d="M237.78,233.67c3,1.45,24.73,12,31.72,6.26,5.62-4.61.74-18.94-10.15-26.09-15-9.83-40.63-5.7-43.14,1C213.59,221.93,235.88,232.74,237.78,233.67Z" transform="translate(-40 -32.32)"/><ellipse class="cls-3" cx="379.5" cy="275.18" rx="48.5" ry="53.5"/><ellipse class="cls-4" cx="375.5" cy="275.18" rx="48.5" ry="53.5"/><path class="cls-2" d="M406.22,233.67c-3,1.45-24.73,12-31.72,6.26-5.62-4.61-.74-18.94,10.15-26.09,15-9.83,40.63-5.7,43.14,1C430.41,221.93,408.12,232.74,406.22,233.67Z" transform="translate(-40 -32.32)"/><path class="cls-5" d="M409,455s-12.77,22.76-45.74,34.36c-38.07-30.19-67.34-11.3-80.16.8C248.37,478.84,235,455,235,455c60,9,87-34,87-34S349,464,409,455Z" transform="translate(-40 -32.32)"/><path class="cls-6" d="M221,434" transform="translate(-40 -32.32)"/><path class="cls-1" d="M213,447c78,31,109-28,109-28h0s30.08,59.47,108.55,29.69V408H213Z" transform="translate(-40 -32.32)"/><path class="cls-7" d="M430.54,448.7C352.07,478.48,322,419,322,419h0s-31,59-109,28" transform="translate(-40 -32.32)"/><path class="cls-8" d="M322,419c-25,0-38.78-22.73-36-38,2-11,36-12,36-12s34,1,36,12C360.78,396.27,347,419,322,419Z" transform="translate(-40 -32.32)"/><path class="cls-9" d="M322,414c-25,0-38.78-20.73-36-36,2-11,36-12,36-12s34,1,36,12C360.78,393.27,347,414,322,414Z" transform="translate(-40 -32.32)"/><path class="cls-7" d="M225.12,427.84s-2,26.85-37,22.21" transform="translate(-40 -32.32)"/><path class="cls-7" d="M418.88,427.84s2,26.85,36.95,22.21" transform="translate(-40 -32.32)"/><path class="cls-2" d="M363.26,489.36a132,132,0,0,1-80.16.8C295.92,478.06,325.19,459.17,363.26,489.36Z" transform="translate(-40 -32.32)"/></g><g id="eyes"><ellipse class="eye" id="eye2" cx="184.5" cy="275.18" rx="17.5" ry="21.5"/><ellipse class="eye" id="eye1" cx="375.5" cy="275.18" rx="17.5" ry="21.5"/></g></svg>
<div
class="plus"
id="plus-eyes"
data-descr="JS mousemove event listener for eyes movement and CSS animation for tail movement">
</div>
</div>
</section>
<section class="drag-and-drop">
<div class="inner">
<div class="shrink">
<img class="draggable" draggable="true" src="src/assets/drag-and-drop/potion-4.svg">
<p>Drink Me!</p>
</div>
<div class="alex">
<img src="src/assets/drag-and-drop/alex.svg">
</div>
<div class="enlarge">
<img class="draggable" draggable="true" src="src/assets/drag-and-drop/cookie-4.svg">
<p>Eat Me!</p>
</div>
<div
class="plus"
id="plus-dd"
data-descr="Vanilla JS drag and drop demo. Feed the potion or cookie to Alex!">
</div>
</div>
</section>
</body>
</html>