forked from KhoiAndPhil/Khoi-Phil_project4
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (137 loc) · 6.12 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
160
161
162
163
164
165
166
167
168
169
170
<!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">
<title>Horizons Inc</title>
<link rel="shortcut icon" type="image/png" href="assets/logo-arrow-black.png">
<!-- FONTAWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<!-- GOOGLE FONT -->
<link href="https://fonts.googleapis.com/css?family=Lora|Roboto" rel="stylesheet">
<!-- FLICKITY -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- CSS STYLING -->
<link rel="stylesheet" href="./public/styles/styles.css">
</head>
<body>
<div class="background wrapper-prim">
<!-- WELCOME SECTION -->
<header class="welcome">
<div class="welcome__content wrapper-sec">
<div class="welcome__logo-container">
<img src="./assets/logo-arrow.png" alt="Horizon Inc logo" class="welcome__logo-container__logo">
</div>
<h1 class="welcome__header">Horizon Inc.</h1>
<p class="welcome__message">When leaving home for any period of time, choosing a destination can be a difficult
task.
At Horizon Inc. we aim to make one of your most important decisions an informed one.
</p>
<h4>© 2018: <a href="http://khoipham.net">Khoi Pham</a> &
<a href="http://philbourassa.ca">Phil Bourassa</a>
</h4>
<button class="welcome__button btn">Get Started</button>
</div>
</header>
<!-- PURPOSE SECTION -->
<section class="purpose-section wrapper-prim">
<div class="wrapper-sec purpose-container">
<h2 class="purpose-header">What is your purpose for traveling?</h2>
<form action="" class="travel-form">
<input type="radio" name="restriction" class="travel-form__button" id="button-vacation">
<label class="travel-form__button-container draw-border" for="button-vacation">
<h3>Vacation</h3>
<i aria="hidden">
<div class="icon-image-container">
<img class="svg" src="./assets/vacation.svg" alt="">
</div>
</i>
</label>
<input type="radio" name="restriction" class="travel-form__button" id="button-education">
<label class="travel-form__button-container" for="button-education">
<h3>Education</h3>
<i aria="hidden">
<div class="icon-image-container">
<img class="svg education" src="./assets/education.svg" alt="">
</div>
</i>
</label>
<input type="radio" name="restriction" class="travel-form__button" id="button-visit-visa">
<label class="travel-form__button-container" for="button-visit-visa">
<h3>Visitor Visa</h3>
<i aria="hidden">
<div class="icon-image-container">
<img preserveAspectRatio="none" class="svg" src="./assets/visitor-visa.svg" alt="">
</div>
</i>
</label>
<input type="radio" name="restriction" class="travel-form__button" id="button-work-holiday">
<label class="travel-form__button-container" for="button-work-holiday">
<h3>Working Holiday</h3>
<i aria="hidden">
<div class="icon-image-container">
<img class="svg" src="./assets/working-holiday.svg" alt="">
</div>
</i>
</label>
<input type="radio" name="restriction" class="travel-form__button" id="button-perm-solo">
<label class="travel-form__button-container" for="button-perm-solo">
<h3>Permanent
<br>(Individual)</h3>
<i aria="hidden">
<div class="icon-image-container">
<img class="svg" src="./assets/perm-solo.svg" alt="">
</div>
</i>
</label>
<input type="radio" name="restriction" class="travel-form__button" id="button-perm-couple">
<label class="travel-form__button-container" for="button-perm-couple">
<h3>Permanent
<br>(Couple)</h3>
<i aria="hidden">
<div class="icon-image-container">
<img class="svg" src="./assets/perm-couple.svg" alt="">
</div>
</i>
</label>
<input type="radio" name="restriction" class="travel-form__button" id="button-perm-family">
<label class="travel-form__button-container" for="button-perm-family">
<h3>Permanent
<br>(Family)</h3>
<i aria="hidden">
<div class="icon-image-container">
<img class="svg" src="./assets/perm-family.svg" alt="">
</div>
</i>
</label>
</form>
</div>
</section>
<!-- CRITERIA SECTIONS -->
<section class="criterias wrapper-prim" id="criterias">
<div class="wrapper-sec criterias-container">
<h2 class="criteria-header"></h2>
<div class="choices-list-container">
<ul class="choices sortable"></ul>
</div>
</div>
</section>
<!-- RESULTS SECTION -->
<section class="results wrapper-prim"></section>
</div>
<!-- FOR REGULAR JQUERY -->
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js "></script>
<!-- FOR JQUERY UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js "></script>
<!-- FOR TOUCH ENABLING ON MOBILE FOR SORTABLE -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<!--FOR IMAGE LOAD-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.waitforimages/1.5.0/jquery.waitforimages.min.js"></script>
<!-- FOR FLICKITY-->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<!-- FOR JS SCRIPT -->
<script src="./public/scripts/main.js "></script>
</body>
</html>