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

include some counters

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

65
web/index.html
Unescape Escape View File

@ -32,21 +32,25 @@
<div class="imagedescription">Explore Rotterdam in new ways | photo Person With a Smartphone</div>
</div>
<div class="index">
<h1>Counter Tourist Information</h1>
<h1><span class="counter">Counter</span> Tourist Information</h1>
<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.
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.
<br><br>
</p>
<p>
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>
27th–30th June<br>
@ Worm Slash Gallery,<br>
Boomgaardsstraat 69, 3012 XA Rotterdam
<br><br>
</address>
</p>
</div>
@ -59,14 +63,13 @@
<div class="tourcard">
<img src="images/breda.JPG" alt="">
<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
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
scenes.
<br>
<br>
Rotterdam is 'back on the map'. POINXS questions that map and looks at a city that has become
scenes.</p>
<p> 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,
via private transport to wheelchair inaccessible hotspots with ambitions to become a multi-user
platform for reporting other people's POINXS.
@ -76,7 +79,7 @@
<div class="tourcard">
<img src="images/breda.JPG" alt="">
<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.
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
@ -89,14 +92,14 @@
<div class="tourcard">
<img src="images/breda.JPG" alt="">
<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
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
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.
<br>
<br>
</p>
<p>
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
ever-changing ecosphere that constitute our cities. Working in close relation with partners such
@ -108,7 +111,7 @@
<div class="tourcard">
<img src="images/breda.JPG" alt="">
<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
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
@ -124,7 +127,7 @@
<div class="tourcard">
<img src="images/breda.JPG" alt="">
<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
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
@ -136,7 +139,7 @@
<div class="tourcard">
<img src="images/breda.JPG" alt="">
<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
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.
@ -150,16 +153,16 @@
<div class="tourcard">
<img src="images/breda.JPG" alt="">
<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
fail.
<br>
<br>
</p>
<p>
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
relationship between the player and the people behind the monitor.
<br>
<br>
</p>
<p>
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
through various camera zones. You can do this by scanning QR codes or using GPS record settings
@ -171,7 +174,7 @@
<div class="tourcard">
<img src="images/breda.JPG" alt="">
<div class="tour-text">
<b>EmoHooHoo</b>
<h4>EmoHooHoo</h4>
<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
emotional changes, whether you like it or not. 💨💨💨
@ -185,19 +188,19 @@
<div class="tourcard">
<img src="images/breda.JPG" alt="">
<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
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
emancipatory aspects of urban life are undermined, allowing little room for anything that
doesn't fit the image of the "norm".
<br>
<br>
</p>
<p>
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
indicating which character to play and a guide, including a set of directions and instructions.
<br>
<br>
</p>
<p>
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
engage with space from another perspective.
@ -208,7 +211,7 @@
<div class="tourcard">
<img src="images/breda.JPG" alt="">
<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
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
@ -220,7 +223,7 @@
</div>
</div>
</div>
</div>
<div class="container reviews">
<section>

63
web/style.css
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save