-
Notifications
You must be signed in to change notification settings - Fork 0
/
chanhassen-theatre.html
132 lines (123 loc) · 5.04 KB
/
chanhassen-theatre.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Google Site Verification -->
<meta name="google-site-verification" content="21wYjxpY8yGpiG1SOOvvwkrM7WdH0MlWTJrLukLZABw" />
<!-- CSS -->
<link rel="stylesheet" href="assets/styles/main.css" />
<!-- Animate on scroll library -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<title>Alexandra Hionis - Projects - Chanhassen Dinner Theatres Weddings & Events</title>
<link rel="icon" type="image/x-icon" href="assets/images/favicon.png" />
<meta
name="description"
content="My Portfolio Projects - Chanhassen Dinner Theatres Weddings & Events"
/>
</head>
<body class="project-pages cdt-weddings">
<section class="container projects">
<div class="container__inner">
<section class="topbar__back">
<a href="/home.html#projects">
<img
class="back-arrow"
src="assets/images/arrow-left-solid.svg"
alt="back arrow"
/>
<h2>back</h2>
</a>
<div class="marquee">
<h1>Chanhassen Dinner Theatres</h1>
</div>
</section>
<!-- start projects section -->
<section>
<div class="projects__container">
<div class="projects__column">
<h1>Web <br />Development</h1>
<p>Front-End coding work:</p>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
<p>Elementor Builder</p>
<a class="button" target="_blank" href="https://chanhassendt.com/weddings-events/">Visit Site</a>
</div>
<div class="projects__column">
<div class="projects__image-container">
<img
class="projects__image"
src="assets/images/chanhassen-dinner-theatre-scrollable.jpg"
alt="chanhassen dinner theatres weddings and events website full image"
/>
</div>
<h2 style="text-align: center">Scroll down image to see more!</h2>
</div>
</div>
<!-- start design -->
<div class="design" data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true">
<div class="design__column">
<h1>Web<br />Design</h1>
</div>
<div class="design__column">
<p>Revamp design</p>
<p>New color scheme</p>
<p>Copy and image updates</p>
</div>
</div>
<div><hr size="2" color="black" />
<!-- Color Pallete -->
<div class="color-pallete">
<h2>Color Pallete</h2>
<ul class="color-pallete">
<li data-aos="fade-down"
data-aos-easing="linear"
data-aos-duration="500" data-aos-delay="300" data-aos-once="true"></li>
<li data-aos="fade-down"
data-aos-easing="linear"
data-aos-duration="700" data-aos-delay="400" data-aos-once="true"></li>
<li data-aos="fade-down"
data-aos-easing="linear"
data-aos-duration="900" data-aos-delay="500" data-aos-once="true"></li>
</ul>
</div>
<p data-aos="fade"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true">The goal here was to elevate the previous design to a more light, airy, and minimalistic theme. New assets, mixed with old, to highlight what CDT has to offer. I added animated scroll effects and animations so the user's eye travel down the page, being constantly engaged</p>
<!-- end design -->
<!-- transformation before and after -->
<div class="before-after" data-aos="fade"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="500"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="true">
<h1>the transformation</h1>
<div class="before-after__image-container"> <img src="assets/images/cdt-before-after.png" alt="chanhassen dinner theatre before and after" /></div>
</div>
</section>
<!-- end projects section -->
</div>
</section>
<!-- Accessibility -->
<script type="text/javascript" src="node_modules/accessibility/dist/main.bundle.js"></script>
<script>window.addEventListener('load', function() { new Accessibility(); }, false);</script>
<!-- Animate on scroll -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>