-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmy-list.html
178 lines (161 loc) · 6.74 KB
/
my-list.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
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="cnbilgin.com">
<title>HW1 - cnbilgin</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Roboto+Slab" rel="stylesheet">
<link rel="stylesheet" href="css/my-list-style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#slider > .tools > ul > li").click(function() {
var index = $(this).index();
scrollTo(index);
});
var isScrolling = false;
function scrollTo(index) {
var currentIndex = $("#slider > .tools > ul > li.active").index();
if(index !== currentIndex && !isScrolling) {
isScrolling = true;
var $li = $("#slider > .tools > ul > li").eq(index);
$li
.addClass("active")
.siblings()
.removeClass("active");
var $sliderCont = $("#slider > .cont");
var $currentSlide = $sliderCont.children().eq(currentIndex);
var $slide = $sliderCont.children().eq(index);
let inClass = "slideUpIn";
let outClass = "slideUpOut";
if(index < currentIndex) {
inClass = "slideDownIn";
outClass = "slideDownOut";
}
$sliderCont.children().removeClass("active");
$currentSlide.addClass(outClass);
$slide.addClass(inClass).addClass("active");
setTimeout(() => {
$currentSlide.removeClass(outClass);
$slide.removeClass(inClass).addClass("active");
$currentSlide.find(".animated").removeClass("animated listItemIn");
isScrolling = false;
}, 1000);
setTimeout(() => {
$slide.children(".panel").addClass("listItemIn animated");
}, 500);
}
}
$(window).bind('wheel mousewheel', function(event) {
var currentIndex = $("#slider > .tools > ul > li.active").index();
var totalSlides = $("#slider > .tools > ul > li").length;
if (event.originalEvent.deltaY >= 0) {//scroll down
if(totalSlides - 1 !== currentIndex) {
scrollTo(currentIndex + 1);
}
}
else {//scroll up
if(currentIndex !== 0) {
scrollTo(currentIndex - 1);
}
}
});
$("#slider > .tools").addClass("pagerIn");
$("#slider > .cont > .item:first-child").addClass("pageIn active");
setTimeout(() => {
$("#slider > .cont > .item:first-child > .panel").addClass("listItemIn animated");
}, 500);
setTimeout(() => {
$("#slider > .cont > .item:first-child").removeClass("pageIn");
}, 1000);
});
</script>
</head>
<body>
<div id="slider">
<div class="tools">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="cont">
<div class="item blue">
<div class="panel">
<div class="number">1</div>
<div class="head">
<div class="title">
<h2>Italian soda at Bytes</h2>
<a href="https://goo.gl/maps/EjneHBEPksw">350 Serra Mall, Stanford, CA</a>
</div>
<div class="cont">
<p>When's the last time you've had an Italian soda? It had been a while for me, but I wanted to join my friend for a non-caffeinated beverage at Bytes and I became reaquainted with the combination of fizzy water and artificial fruit syrup. Italian sodas are not so sweet as a normal soda and not so boring as a flavored carbonated water. The Italian sodas at Bytes also have no cream in them (or maybe they do if you ask; I haven't tried), which makes it a nice coffee shop alternative for the times when you're feeling a refreshing drink that doesn't have caffeine or milk.</p>
<p><strong>Recommendation:</strong> Raspberry Italian soda</p>
</div>
</div>
<div class="img">
<img src="images/italian-soda.jpg" />
</div>
</div>
</div>
<div class="item red">
<div class="panel">
<div class="number">2</div>
<div class="head">
<div class="title">
<h2>Bubble tea at Pop Tea Bar</h2>
<a href="https://goo.gl/maps/3jHRC2umZCy">456 Cambridge Ave, Palo Alto, CA</a>
</div>
<div class="cont">
<p>When your boba craving strikes, head over to Pop Tea Bar, a cute little bubble tea shop on Cambridge Avenue. The menu is your standard bubble tea fare with nothing too adventurous on the menu -- no bubble tea floats, for example -- but the tapioca is fresh, the service is fast, and the tea is smooth and delicious! They have little bites to eat too, like popcorn chicken and eggrolls, in perfect snack-size portions. There's not too much seating, but there's a cute outdoor area in the back for warmer days.</p>
<p>Pop Tea Bar isn't exactly on campus, but the Marguerite has got you covered. Ride the 1050A to California and El Camino and it's a short walk from there. (11 minutes total from the Gates Computer Science Building!)</p>
<p><strong>Recommendation:</strong> Classic Milk Tea with tapioca + an order of popcorn chicken.</p>
</div>
</div>
<div class="img">
<img src="images/boba.jpg" />
</div>
</div>
</div>
<div class="item green">
<div class="panel">
<div class="number">3</div>
<div class="head">
<div class="title">
<h2>Latte at CoHo</h2>
<a href="https://goo.gl/maps/jaov5FhK5852">459 Lagunita Dr, Stanford, CA</a>
</div>
<div class="cont">
<p>I can't tell you whether CoHo has a particularly amazing Vanilla Bean Latte, only because CoHo is the only place I've ever ordered a Vanilla Bean Latte from. I'm not even totally sure I know what a Vanilla Bean Latte is supposed to taste like. What I do know is the Vanilla Bean Latte I ordered on a whim from CoHo was delicious.</p>
<p><strong>Recommendation:</strong> Vanilla Bean Latte</p>
</div>
</div>
<div class="img">
<img src="images/coho-coffee.jpg" />
</div>
</div>
</div>
<div class="item purple">
<div class="panel">
<div class="number">4</div>
<div class="head">
<div class="title">
<h2>Agua Fresca at Nexus Cafe</h2>
<a href="https://goo.gl/maps/WzJZx183auA2">318 Campus Drive, Stanford, CA</a>
</div>
<div class="cont">
<p>things packed into its cafeteria space, including agua fresca! Grab a cup of this fresh and fruity beverage before you head to the check out line. Nexus Cafe has plenty of indoor and outdoor seating, too, so on the next sunny day, take a break on the patio with a cup of agua fresca, and maybe a burrito.</p>
<p><strong>Recommendation:</strong> Agua Fresca</p>
</div>
</div>
<div class="img">
<img src="images/nexus-cafe.jpg" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>