XPUB
/
SI24
19
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

include some counters

Browse Source
main
vitrinekast 5 months ago
parent a9957cede5
commit 11852d1333
2 changed files with 228 additions and 184 deletions
Show Stats Download Patch File Download Diff File

349
web/index.html
Unescape Escape View File

@ -32,41 +32,44 @@
<div class="imagedescription">Explore Rotterdam in new ways | photo Person With a Smartphone</div> <div class="imagedescription">Explore Rotterdam in new ways | photo Person With a Smartphone</div>
</div> </div>
<div class="index"> <div class="index">
<h1>Counter Tourist Information</h1> <h1><span class="counter">Counter</span> Tourist Information</h1>
<p> <p>
Welcome to the pop-up Counter-Tourist Information Center! The only place in Rotterdam that offers a unique Welcome to the pop-up <span class="counter">Counter</span>-Tourist Information Center! The only place in
Rotterdam that offers a unique
personalized view of the city. personalized view of the city.
Do you want to experience the city—without being a nuisance to residents—as a local Rotterdammer would? Wait Do you want to experience the city—without being a nuisance to residents—as a local Rotterdammer would? Wait
no more! Drop by the Counter-Tourist Information Center for all things authentic Rotterdam: loitering, no more! Drop by the <span class="counter">Counter</span>-Tourist Information Center for all things
authentic Rotterdam: loitering,
littering and anti model-citizen etiquette. We offer personalized guides and blending-in equipment. littering and anti model-citizen etiquette. We offer personalized guides and blending-in equipment.
<br><br> </p>
<p>
Our personnel is always present to provide advice catered to your interests and concerns. Our personnel is always present to provide advice catered to your interests and concerns.
<br><br> </p>
<address>
Opening Thursday 27th at 19.00h<br> Opening Thursday 27th at 19.00h<br>
27th–30th June<br> 27th–30th June<br>
@ Worm Slash Gallery,<br> @ Worm Slash Gallery,<br>
Boomgaardsstraat 69, 3012 XA Rotterdam Boomgaardsstraat 69, 3012 XA Rotterdam
<br><br> </address>
</p> </p>
</div> </div>
<div class="container" id="surroundings"> <div class="container" id="surroundings">
<section> <section>
<h2>UnDiscover Rotterdam</h2> <h2>UnDiscover Rotterdam</h2>
<p>Our tips for an uneventful stay in Rotterdam</p> <p>Our tips for an uneventful stay in Rotterdam</p>
</section> </section>
<div class="tours"> <div class="tours">
<div class="tourcard"> <div class="tourcard">
<img src="images/breda.JPG" alt=""> <img src="images/breda.JPG" alt="">
<div class="tour-text"> <div class="tour-text">
<b>POINXS [Points of InAccess]</b> <h4>POINXS [Points of InAccess]</h4>
<p>A critical counter map looking at city marketing & planning versus the city living and <p>A critical counter map looking at city marketing & planning versus the city living and
experience. It's a parody on postcard surreality and apps/websites portraying cool and flashy experience. It's a parody on postcard surreality and apps/websites portraying cool and flashy
2D/3D imagery without the complicated dimensions of the city without showing what's behind the 2D/3D imagery without the complicated dimensions of the city without showing what's behind the
scenes. scenes.</p>
<br>
<br> <p> Rotterdam is 'back on the map'. POINXS questions that map and looks at a city that has become
Rotterdam is 'back on the map'. POINXS questions that map and looks at a city that has become
less livable and affordable and reports the bugs from a hill that leads to a dead end pavement, less livable and affordable and reports the bugs from a hill that leads to a dead end pavement,
via private transport to wheelchair inaccessible hotspots with ambitions to become a multi-user via private transport to wheelchair inaccessible hotspots with ambitions to become a multi-user
platform for reporting other people's POINXS. platform for reporting other people's POINXS.
@ -76,7 +79,7 @@
<div class="tourcard"> <div class="tourcard">
<img src="images/breda.JPG" alt=""> <img src="images/breda.JPG" alt="">
<div class="tour-text"> <div class="tour-text">
<b>Fly on the Wall</b> <h4>Fly on the Wall</h4>
<p>This is a device built to counter mosquito devices and prolong possible periods of loitering. <p>This is a device built to counter mosquito devices and prolong possible periods of loitering.
Mosquito devices emit high frequencies and are installed by private companies and individuals to Mosquito devices emit high frequencies and are installed by private companies and individuals to
specifically target and drive away youth from hanging out. They can cause nausea, ear pain and specifically target and drive away youth from hanging out. They can cause nausea, ear pain and
@ -89,14 +92,14 @@
<div class="tourcard"> <div class="tourcard">
<img src="images/breda.JPG" alt=""> <img src="images/breda.JPG" alt="">
<div class="tour-text"> <div class="tour-text">
<b>Ministry of the Infraordinary</b> <h4>Ministry of the Infraordinary</h4>
<p>The Ministry of the Infraordinary invites you to experience the city of Rotterdam in ways you <p>The Ministry of the Infraordinary invites you to experience the city of Rotterdam in ways you
haven't imagined. Let the subjective infrastructure map inspire and guide you and search for haven't imagined. Let the subjective infrastructure map inspire and guide you and search for
views you haven't seen before, look up and under, listen carefully for the subtler sounds of views you haven't seen before, look up and under, listen carefully for the subtler sounds of
life, consider your place and your role in this network of cables, waves and invisible life, consider your place and your role in this network of cables, waves and invisible
connections and contribute to the photo map that aspires to make the city our own. connections and contribute to the photo map that aspires to make the city our own.
<br> </p>
<br> <p>
At the Ministry of the Infraordinary, we are concerned with noticing the subtle fabric that At the Ministry of the Infraordinary, we are concerned with noticing the subtle fabric that
makes up our urban surroundings. Using qualitative and generous methods to interrogate the makes up our urban surroundings. Using qualitative and generous methods to interrogate the
ever-changing ecosphere that constitute our cities. Working in close relation with partners such ever-changing ecosphere that constitute our cities. Working in close relation with partners such
@ -108,7 +111,7 @@
<div class="tourcard"> <div class="tourcard">
<img src="images/breda.JPG" alt=""> <img src="images/breda.JPG" alt="">
<div class="tour-text"> <div class="tour-text">
<b>INTIMACITY</b> <h4>INTIMACITY</h4>
<p>INTIMACITY is an installation art piece that explores the relationship between people and the <p>INTIMACITY is an installation art piece that explores the relationship between people and the
intimacy of the city. It blurs the boundaries and distinction of public and private spaces. intimacy of the city. It blurs the boundaries and distinction of public and private spaces.
The installation is composed of a semi-transparent mesh mosquito net, stitched together with The installation is composed of a semi-transparent mesh mosquito net, stitched together with
@ -124,7 +127,7 @@
<div class="tourcard"> <div class="tourcard">
<img src="images/breda.JPG" alt=""> <img src="images/breda.JPG" alt="">
<div class="tour-text"> <div class="tour-text">
<b>Collective Nearby Diary</b> <h4>Collective Nearby Diary</h4>
<p>A collection of publications includes autoethnography works exploring "why I like loitering" and <p>A collection of publications includes autoethnography works exploring "why I like loitering" and
components that inspire individuals and groups to envision and depict their ideal "nearby". components that inspire individuals and groups to envision and depict their ideal "nearby".
"Nearby" not only refers to geographical proximity but also to the closeness of emotional and "Nearby" not only refers to geographical proximity but also to the closeness of emotional and
@ -136,7 +139,7 @@
<div class="tourcard"> <div class="tourcard">
<img src="images/breda.JPG" alt=""> <img src="images/breda.JPG" alt="">
<div class="tour-text"> <div class="tour-text">
<b>re-secure</b> <h4>re-secure</h4>
<p>In today's cities, surveillance systems are often touted as indispensable elements of urban <p>In today's cities, surveillance systems are often touted as indispensable elements of urban
security. Yet, despite the widespread use of these technologies over the past decades, many security. Yet, despite the widespread use of these technologies over the past decades, many
people, especially women, still feel unsafe in public spaces, particularly at night. people, especially women, still feel unsafe in public spaces, particularly at night.
@ -150,16 +153,16 @@
<div class="tourcard"> <div class="tourcard">
<img src="images/breda.JPG" alt=""> <img src="images/breda.JPG" alt="">
<div class="tour-text"> <div class="tour-text">
<b>Checking point</b> <h4>Checking point</h4>
<p>In games, checking points are saving the player’s state, so they could resume the point if they <p>In games, checking points are saving the player’s state, so they could resume the point if they
fail. fail.
<br> </p>
<br> <p>
Checking point is a map about the camera zones in the city, related to the checking points in Checking point is a map about the camera zones in the city, related to the checking points in
the games, using the camera zone as a checking point to connect the path, also explore the the games, using the camera zone as a checking point to connect the path, also explore the
relationship between the player and the people behind the monitor. relationship between the player and the people behind the monitor.
<br> </p>
<br> <p>
In the map, the path that the player takes will leave no traces, but the camera zones will leave In the map, the path that the player takes will leave no traces, but the camera zones will leave
traces as checkpoints that save the player's status. By accepting cookies, you will navigate traces as checkpoints that save the player's status. By accepting cookies, you will navigate
through various camera zones. You can do this by scanning QR codes or using GPS record settings through various camera zones. You can do this by scanning QR codes or using GPS record settings
@ -171,7 +174,7 @@
<div class="tourcard"> <div class="tourcard">
<img src="images/breda.JPG" alt=""> <img src="images/breda.JPG" alt="">
<div class="tour-text"> <div class="tour-text">
<b>EmoHooHoo</b> <h4>EmoHooHoo</h4>
<p>Specially designed for adults prone to embarrassment. EmoHooHoo supports the outward expression <p>Specially designed for adults prone to embarrassment. EmoHooHoo supports the outward expression
of unspoken emotions in public places; once you wear this device, it clumsily reflects your of unspoken emotions in public places; once you wear this device, it clumsily reflects your
emotional changes, whether you like it or not. 💨💨💨 emotional changes, whether you like it or not. 💨💨💨
@ -185,19 +188,19 @@
<div class="tourcard"> <div class="tourcard">
<img src="images/breda.JPG" alt=""> <img src="images/breda.JPG" alt="">
<div class="tour-text"> <div class="tour-text">
<b>Scripts to Read the City</b> <h4>Scripts to Read the City</h4>
<p>The project imagines an urban environment that can be read, analyzed and criticized as a text. By <p>The project imagines an urban environment that can be read, analyzed and criticized as a text. By
reading the city in this way we find other possible ways of seeing, moving and listening. In a reading the city in this way we find other possible ways of seeing, moving and listening. In a
scripted city, marked by escalating levels of perfection, efficiency and control, the scripted city, marked by escalating levels of perfection, efficiency and control, the
emancipatory aspects of urban life are undermined, allowing little room for anything that emancipatory aspects of urban life are undermined, allowing little room for anything that
doesn't fit the image of the "norm". doesn't fit the image of the "norm".
<br> </p>
<br> <p>
Scripts to Read the City is an attempt to foster diverse experiences and uses of space, similar Scripts to Read the City is an attempt to foster diverse experiences and uses of space, similar
to a theater script interpreted differently by each actor. The tools of navigation are a device to a theater script interpreted differently by each actor. The tools of navigation are a device
indicating which character to play and a guide, including a set of directions and instructions. indicating which character to play and a guide, including a set of directions and instructions.
<br> </p>
<br> <p>
The project explores a relation between scripts and spontaneity, chance and control and how The project explores a relation between scripts and spontaneity, chance and control and how
scripts and unpredictability can enhance each other, stimulating imagination, encouraging us to scripts and unpredictability can enhance each other, stimulating imagination, encouraging us to
engage with space from another perspective. engage with space from another perspective.
@ -208,7 +211,7 @@
<div class="tourcard"> <div class="tourcard">
<img src="images/breda.JPG" alt=""> <img src="images/breda.JPG" alt="">
<div class="tour-text"> <div class="tour-text">
<b>Portable Mosquito</b> <h4>Portable Mosquito</h4>
<p>What if anti-loitering devices such as Mosquitos foregrounded dialogical, rather than monological <p>What if anti-loitering devices such as Mosquitos foregrounded dialogical, rather than monological
interaction? Mosquitos buzz away at the margins of perception: for some people the devices may interaction? Mosquitos buzz away at the margins of perception: for some people the devices may
be inaudible, for others the noise may be incessant. Make a journey to the portable mosquito. It be inaudible, for others the noise may be incessant. Make a journey to the portable mosquito. It
@ -220,168 +223,168 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container reviews"> <div class="container reviews">
<section>
<section> <section>
<section> <h2>We are amazing</h2>
<h2>We are amazing</h2> <p>But, don't listen to us! This is what our visitors said</p>
<p>But, don't listen to us! This is what our visitors said</p>
</section>
</section> </section>
</section>
<div class="review"> <div class="review">
<p>⭑✩✩✩✩</p> <p>⭑✩✩✩✩</p>
<p>The Counter-Tourist Information Center is nothing more than a front. They receive funds from and <p>The Counter-Tourist Information Center is nothing more than a front. They receive funds from and
frequently collaborate with the Tourist Information Center. They aren't invested in helping people frequently collaborate with the Tourist Information Center. They aren't invested in helping people
have a more meaningful connection with the city, they just want to make money off of hype, same as have a more meaningful connection with the city, they just want to make money off of hype, same as
the Tourist Information Center... They're really part of a much larger issue. If you want to support the Tourist Information Center... They're really part of a much larger issue. If you want to support
actual local businesses and not gentrify the area by being a tourist, stay away from this. actual local businesses and not gentrify the area by being a tourist, stay away from this.
</p> </p>
</div> </div>
<div class="review"> <div class="review">
<p>⭑⭑⭑⭑⭑</p> <p>⭑⭑⭑⭑⭑</p>
<p>the counter tourist info center delivers on what it claims to offer: the possibility to go thru the <p>the counter tourist info center delivers on what it claims to offer: the possibility to go thru the
city as a local. no more of people looking at you strangely because your not familiar with the local city as a local. no more of people looking at you strangely because your not familiar with the local
culture and traditions. with this center you not only get to blend in, but experience the city for culture and traditions. with this center you not only get to blend in, but experience the city for
what it is to be!! even if it turn out to be a bit rotten. that's part of every city tho ;)) what it is to be!! even if it turn out to be a bit rotten. that's part of every city tho ;))
</p> </p>
</div> </div>
<div class="review"> <div class="review">
<p>⭑⭑⭑✩✩</p> <p>⭑⭑⭑✩✩</p>
<p>Got in here via a speakeasy. Had to knock 5 times saying "Feyenoord Attentie Sparta Buurtpreventie <p>Got in here via a speakeasy. Had to knock 5 times saying "Feyenoord Attentie Sparta Buurtpreventie
Excelsior". Excelsior".
The person at the door said "What are you talking about?". I said "Why are you asking me that?" Door The person at the door said "What are you talking about?". I said "Why are you asking me that?" Door
person then replied: "Very well then." As soon as I got in, there were 5 shady figures standing in person then replied: "Very well then." As soon as I got in, there were 5 shady figures standing in
line. They all had something to say or ask: line. They all had something to say or ask:
1. "How have you traversed here? Could you name 5 surveillance objects you've seen along your path?" 1. "How have you traversed here? Could you name 5 surveillance objects you've seen along your path?"
2. "How long will you be staying? When are you leaving? Isn't it time for you to go? Don't you have 2. "How long will you be staying? When are you leaving? Isn't it time for you to go? Don't you have
a train toc catch?" a train toc catch?"
3. If you follow the trail of drops, you will be in the humid center of the area. 3. If you follow the trail of drops, you will be in the humid center of the area.
4. Does this place even exist? Are we in a movie? Are we being watched? What are you looking at? 4. Does this place even exist? Are we in a movie? Are we being watched? What are you looking at?
Leave me alone Leave me alone
5. Rambled something about seamless peripheral derivé structurelessness, seemed confused 5. Rambled something about seamless peripheral derivé structurelessness, seemed confused
After those 5 blurbs I went to see if I could get a drink. I saw the bar in the distance and asked
for their brightest cup of water. The waiter looked suspicious and tapped 6 times on the bar. Out of
the blue, 7 gemeentewerkers en 3 bezoekers grabbed me by the shoulders and threw me out. The moment
I realized what happened I took my phone and started typing this rev- [redacted]</p>
</div>
<div class="review">
<p>⭑⭑⭑⭑⭑ </p>
<p> Comfort, Uncompromised Quality
Reviewed in Canada on January 8, 2024
Size: Queen Color: Navy Blue Verified Purchase
I recently acquired the Amazon Basics Light-Weight Microfiber Sheet Set, and it has exceeded my
expectations in more ways than one.
</p>
</div>
<div class="review">
<p>⭑⭑⭑⭑✩</p>
<p>The counter tourist info center offers me a free apple tart and coffee, so nice and friendly! Also,
the person told me about their secret local hotspots in Rotterdam.</p>
</div>
<div class="review"> After those 5 blurbs I went to see if I could get a drink. I saw the bar in the distance and asked
<p>⭑⭑✩✩✩</p> for their brightest cup of water. The waiter looked suspicious and tapped 6 times on the bar. Out of
<p>Offers mid activities that confused me. Why are they based in a bakfiets?!? I just feel disoriented the blue, 7 gemeentewerkers en 3 bezoekers grabbed me by the shoulders and threw me out. The moment
</p> I realized what happened I took my phone and started typing this rev- [redacted]</p>
</div> </div>
<div class="review">
<p>⭑⭑⭑⭑⭑ </p>
<p> Comfort, Uncompromised Quality
Reviewed in Canada on January 8, 2024
Size: Queen Color: Navy Blue Verified Purchase
I recently acquired the Amazon Basics Light-Weight Microfiber Sheet Set, and it has exceeded my
expectations in more ways than one.
</p>
</div>
<div class="review"> <div class="review">
<p>⭑⭑⭑⭑✩</p> <p>⭑⭑⭑⭑✩</p>
<p>Turns out they don't Queensday anymore </p> <p>The counter tourist info center offers me a free apple tart and coffee, so nice and friendly! Also,
</div> the person told me about their secret local hotspots in Rotterdam.</p>
</div>
<div class="review"> <div class="review">
<p>⭑⭑⭑✩✩</p> <p>⭑⭑✩✩✩</p>
<p>The 4-piece set includes a fitted sheet, flat sheet, and pillowcases – all essentials for a well-made <p>Offers mid activities that confused me. Why are they based in a bakfiets?!? I just feel disoriented
bed. The fitted sheet securely stays in place, ensuring a neat appearance and minimizing the hassle </p>
of constant readjustment. The flat sheet and pillowcases complement the ensemble, offering a </div>
cohesive and inviting look to my bed.</p>
</div>
<div class="review"> <div class="review">
<p>⭑⭑⭑⭑⭑</p> <p>⭑⭑⭑⭑✩</p>
<p>The Counter-Tourist Information Center opened my eyes to True Rotterdam. I was so tired of all the <p>Turns out they don't Queensday anymore </p>
other information centers, that promoted the Euromast and the Maritime Museum but tried to hide so </div>
many things that constitute this unique urban experience, but now I am really informed and feel like
a local. More importantly, the Counter-Tourist Information Center changed the way I will look at
cities forever. Thank you Counter-Tourist Information Center! :* </p>
</div>
<div class="review"> <div class="review">
<p>⭑⭑⭑⭑✩ </p> <p>⭑⭑⭑✩✩</p>
<p>They bring noisy devices everywhere thta they claim make 'human music', that only 'civil citizens' <p>The 4-piece set includes a fitted sheet, flat sheet, and pillowcases – all essentials for a well-made
can 'appreciate'. 4 out of 5 stars.</p> bed. The fitted sheet securely stays in place, ensuring a neat appearance and minimizing the hassle
</div> of constant readjustment. The flat sheet and pillowcases complement the ensemble, offering a
cohesive and inviting look to my bed.</p>
</div>
<div class="review"> <div class="review">
<p>⭑⭑⭑⭑⭑</p> <p>⭑⭑⭑⭑⭑</p>
<p>Geachte Contratoeristeninformatiecentrum Rotterdam, wij willen onze dank uitspreken richting Storm <p>The Counter-Tourist Information Center opened my eyes to True Rotterdam. I was so tired of all the
die ons heeft geholpen met het vervangen van oude papieren cadeaubonnen alsmede het vervangen van other information centers, that promoted the Euromast and the Maritime Museum but tried to hide so
een geblokkeerde cadeaukaart. many things that constitute this unique urban experience, but now I am really informed and feel like
Mvgr Jaap-Hendrik van Barendrecht-Doetinchem a local. More importantly, the Counter-Tourist Information Center changed the way I will look at
</p> cities forever. Thank you Counter-Tourist Information Center! :* </p>
</div> </div>
<div class="review"> <div class="review">
<p>⭑⭑⭑✩✩ </p> <p>⭑⭑⭑⭑✩ </p>
<p>Update I showed human music to band practise and they really really like it. I think I will be <p>They bring noisy devices everywhere thta they claim make 'human music', that only 'civil citizens'
promoted from bass to guitar soon. 3 out of 5 stars. can 'appreciate'. 4 out of 5 stars.</p>
</p> </div>
</div>
<div class="review"> <div class="review">
<p>⭑⭑⭑⭑⭑</p> <p>⭑⭑⭑⭑⭑</p>
<p>Tot het Counter-Tourist Information Center op mijn pad kwam, wist ik niet eens dat ik verdwaald was! <p>Geachte Contratoeristeninformatiecentrum Rotterdam, wij willen onze dank uitspreken richting Storm
2 jaar is voorbij gevlogen, merci!</p> die ons heeft geholpen met het vervangen van oude papieren cadeaubonnen alsmede het vervangen van
</div> een geblokkeerde cadeaukaart.
Mvgr Jaap-Hendrik van Barendrecht-Doetinchem
</p>
</div>
<div class="review"> <div class="review">
<p>⭑⭑⭑⭑✩</p> <p>⭑⭑⭑✩✩ </p>
<p>Update I got kicked out of band. Said Im never 'down to hang'. To whom I say well who is ever 'down' <p>Update I showed human music to band practise and they really really like it. I think I will be
to 'hang' nowadays? 'Where'? I ask you this. 4 out of 5 stars.</p> promoted from bass to guitar soon. 3 out of 5 stars.
</div> </p>
</div>
<div class="review"> <div class="review">
<p>⭑⭑⭑⭑✩</p> <p>⭑⭑⭑⭑⭑</p>
<p>Turns out they don't Queensday anymore </p> <p>Tot het Counter-Tourist Information Center op mijn pad kwam, wist ik niet eens dat ik verdwaald was!
</div> 2 jaar is voorbij gevlogen, merci!</p>
</div>
<div class="review">
<p>⭑⭑⭑⭑✩</p>
<p>Update I got kicked out of band. Said Im never 'down to hang'. To whom I say well who is ever 'down'
to 'hang' nowadays? 'Where'? I ask you this. 4 out of 5 stars.</p>
</div> </div>
<div id="events" class="container container--events"> <div class="review">
<h2>Top 10 things to do</h2> <p>⭑⭑⭑⭑✩</p>
<ul class="events"> <p>Turns out they don't Queensday anymore </p>
<li class="event">
<img src="images/breda.JPG" alt="" class="event__img">
<h3 class="event__title">1. The Counter-Tourist Information Center</h3>
</li>
<li class="event">
<img src="images/breda.JPG" alt="" class="event__img">
<h3 class="event__title">1. The Counter-Tourist Information Center</h3>
</li>
<li class="event">
<img src="images/breda.JPG" alt="" class="event__img">
<h3 class="event__title">1. The Counter-Tourist Information Center</h3>
</li>
<li class="event">
<img src="images/breda.JPG" alt="" class="event__img">
<h3 class="event__title">1. The Counter-Tourist Information Center</h3>
</li>
<li class="event">
<img src="images/breda.JPG" alt="" class="event__img">
<h3 class="event__title">1. The Counter-Tourist Information Center</h3>
</li>
</ul>
</div> </div>
<footer class="annoying"> </div>
Do you have our card already?
</footer> <div id="events" class="container container--events">
<h2>Top 10 things to do</h2>
<ul class="events">
<li class="event">
<img src="images/breda.JPG" alt="" class="event__img">
<h3 class="event__title">1. The Counter-Tourist Information Center</h3>
</li>
<li class="event">
<img src="images/breda.JPG" alt="" class="event__img">
<h3 class="event__title">1. The Counter-Tourist Information Center</h3>
</li>
<li class="event">
<img src="images/breda.JPG" alt="" class="event__img">
<h3 class="event__title">1. The Counter-Tourist Information Center</h3>
</li>
<li class="event">
<img src="images/breda.JPG" alt="" class="event__img">
<h3 class="event__title">1. The Counter-Tourist Information Center</h3>
</li>
<li class="event">
<img src="images/breda.JPG" alt="" class="event__img">
<h3 class="event__title">1. The Counter-Tourist Information Center</h3>
</li>
</ul>
</div>
<footer class="annoying">
Do you have our card already?
</footer>
</body> </body>

63
web/style.css
Unescape Escape View File

@ -25,9 +25,11 @@
/* overflow-x: hidden; */ /* overflow-x: hidden; */
box-sizing: border-box; box-sizing: border-box;
} }
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body { body {
font-family: Montserrat; font-family: Montserrat;
color: var(--black); color: var(--black);
@ -48,9 +50,11 @@ body {
padding: .5rem; padding: .5rem;
} }
.nav > * {
.nav>* {
margin: 0 0; margin: 0 0;
} }
.nav a { .nav a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
@ -98,6 +102,7 @@ h3 {
h1 { h1 {
font-size: clamp(1.5rem, 1rem + 9vw, 6rem); font-size: clamp(1.5rem, 1rem + 9vw, 6rem);
margin: 0 0;
} }
h2 { h2 {
@ -107,42 +112,55 @@ h2 {
p { p {
font-size: 18px; font-size: 18px;
margin-bottom: 1rem;
} }
.index { .index {
background: var(--green); background: var(--green);
width: 100%; width: 100%;
padding: 2rem;
display: flex;
justify-content: center;
flex-direction: column;
} }
.index>* { .index>* {
padding: 2%;
max-width: 70ch; max-width: 70ch;
text-align: center; text-align: center;
margin: auto; margin-lefT: auto;
margin-right: auto;
} }
.index:hover > * {
order: -1;
}
.tours { .tours {
display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
margin-top: 50px; margin-top: 50px;
max-width: 2000px; max-width: 2000px;
gap: 2rem; gap: 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content min-content min-content min-content;
grid-auto-rows: 300px;
transition: .2s linear;
} }
.tourcard { .tourcard {
position: relative; position: relative;
flex-basis: 50%; overflow: hidden;
max-width: 30%;
flex-grow: 1;
} }
@media only screen and (max-width: 801px) { @media only screen and (max-width: 801px) {
.tourcard { .tours {
flex-basis: 100%; grid-template-columns: 1fr;
max-width: 100%;
} }
} }
@ -159,8 +177,29 @@ p {
font-family: Montserrat; font-family: Montserrat;
font-size: .7em; font-size: .7em;
background: white; background: white;
max-height: 80%;;
}
.counter {
transform: scaleY(1);
transition: .2s linear;
display: inline-block;
cursor: pointer;
} }
h1:has(.counter):hover .counter, p:has(.counter):hover .counter {
transform: scaleY(-1);
border-color: blue;
}
@media only screen and (max-width: 801px) {
.tourcard {
flex-basis: 100%;
max-width: 100%;
}
}
.reviews { .reviews {
width: var(--container-lg); width: var(--container-lg);
text-wrap: wrap; text-wrap: wrap;
@ -272,11 +311,13 @@ footer.annoying {
padding: 0 0; padding: 0 0;
list-style: none; list-style: none;
} }
.events .event { .events .event {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
min-width: 300px; min-width: 300px;
} }
.event img { .event img {
aspect-ratio: 3/4; aspect-ratio: 3/4;
width: 100%; width: 100%;

Write Preview
Loading…
Cancel
Save