include some counters

web/index.html

@@ -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.
+                        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,
                         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>
+                    </p>
-                        <br>
+                    <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>
+                    </p>
-                        <br>
+                    <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>
+                    </p>
-                        <br>
+                    <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>
+                    </p>
-                        <br>
+                    <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>
+                    </p>
-                        <br>
+                    <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>

web/style.css

@@ -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%;
+    overflow: hidden;
-    max-width: 30%;
-    flex-grow: 1;
 }
 
-
 @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-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%;