style 'tour cards' for projects

web/index.html

@@ -15,7 +15,7 @@
     <h4>Sutainability</h4>
 </div>
 <div class="landingimage">
-    <div class="imagedescription">Beautiful Breda | photo Victor Utne Stiebrg</div>
+    <div class="imagedescription">Beautiful Breda | photo Person With a Smartphone</div>
 </div>
 <div class="index">
     <h1>Counter Tourist Information</h1>
@@ -29,19 +29,50 @@ Opening Thursday 27th at 19.00h<br>
 27th–30th June<br>
 @ Worm Slash Gallery,<br> 
 Boomgaardsstraat 69, 3012 XA Rotterdam
+<br><br>
     </p></div>
 <div class="tours">
-    <div class="tour1">
-        <h2>Experience somethign</h2>
-        <img src="images/breda.JPG" alt="" width="300px">
+    <div class="tourcard">
+        <img src="images/breda.JPG" alt="">
+        <div class="tour-text">    
+            <b>Experience somethign</b>
+            <p>Visit beautiful Breda, a place like nowhere else, do things, eat food, se stuff. everyhting you expect and more or less…</p>
+        </div>    
+    </div>
+    <div class="tourcard">
+        <img src="images/breda.JPG" alt="">
+        <div class="tour-text">    
+            <b>Project title</b>
+            <p>A lovely project description, that describes the project in question in a proper manner…</p>
+        </div>    
+    </div>
+    <div class="tourcard">
+        <img src="images/breda.JPG" alt="">
+        <div class="tour-text">    
+            <b>Experience somethign</b>
+            <p>Visit beautiful Breda, a place like nowhere else, do things, eat food, se stuff. everyhting you expect and more or less.</p>
+        </div>    
+    </div>
+    <div class="tourcard">
+        <img src="images/breda.JPG" alt="">
+        <div class="tour-text">    
+            <b>Experience somethign</b>
+            <p>Visit beautiful Breda, a place like nowhere else, do things, eat food, se stuff. everyhting you expect and more or less.</p>
+        </div>    
+    </div>
+    <div class="tourcard">
+        <img src="images/breda.JPG" alt="">
+        <div class="tour-text">    
+            <b>Experience somethign</b>
+            <p>Visit beautiful Breda, a place like nowhere else, do things, eat food, se stuff. everyhting you expect and more or less.</p>
+        </div>    
     </div>
-    <div class="tour2">
-        <h2>Experience somethign else</h2>
-        <img src="images/breda.JPG" alt=""width="300px">
+    <div class="tourcard">
+        <img src="images/breda.JPG" alt="">
+        <div class="tour-text">    
+            <b>Experience somethign</b>
+            <p>Visit beautiful Breda, a place like nowhere else, do things, eat food, se stuff. everyhting you expect and more or less.</p>
         </div>    
-    <div class="tour3">
-        <h2>Experience somethign more</h2>
-        <img src="images/breda.JPG" alt=""width="300px">
     </div>
 </div>
 </body>

web/style.css

@@ -23,6 +23,7 @@ body{
 .nav{
 
     width: 80vw;
+    z-index: 9001;
     display: flex;
     background-color: #212529;
     justify-content: space-around;
@@ -45,7 +46,8 @@ body{
 
 .landingimage{
     background: url("images/breda.JPG");
-    background-size: contain;
+    background-size: 100vw 600px;
+    background-repeat: no-repeat;
     width: 100vw;
     height: 600px;
 }
@@ -61,13 +63,18 @@ body{
 }
  h1{
     font-family: VG5000;
+    font-size: 4em;
  }
+
+p{
+    font-size: larger;
+}
+
 .index{
     background: #81d742;
 }
 
 .index>*{
-
     padding: 10px;
     max-width: 50ch;
     text-align: center;
@@ -75,7 +82,34 @@ padding: 10px;
     
 }
 
+
 .tours{
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-around;
+    margin-top: 50px;
+}
+
+.tourcard{
+    position: relative;
+    width: 33%;
+    min-width: 350px;
+    max-width: 500px;
+    margin-bottom: 50px;
+}
+
+.tourcard >img{
+    width: 90%;
 }
+
+.tour-text{
+    position: absolute;
+    bottom:5%;
+    left: 5%;
+    padding: 5%;
+    font-family:Montserrat;
+    font-size: .7em;
+    background: white;
+    width: 70%;
+}
+