added pictures

wondernest · Feb 24, 2024 · 40c3abb · 40c3abb
1 parent 65abe74
commit 40c3abb
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 2 deletions.
diff --git a/Images/IMG_1.jpg b/Images/IMG_1.jpg
diff --git a/Images/Malik.png b/Images/Malik.png
diff --git a/Images/PXL_2.jpg b/Images/PXL_2.jpg
diff --git a/Images/PXL_3.jpg b/Images/PXL_3.jpg
diff --git a/Images/PXL_4jpeg.jpeg b/Images/PXL_4jpeg.jpeg
diff --git a/Images/Vitor.png b/Images/Vitor.png
diff --git a/Images/lilly.jpg b/Images/lilly.jpg
diff --git a/about.html b/about.html
@@ -51,6 +51,11 @@ <h4> What we've done so far:</h4>
     </section>  
 
 
+  <div class="image-container">
+    <img src="Images/PXL_3.jpg">
+    <img src="Images/PXL_4jpeg.jpeg">
+  </div>
+
   <footer>
     <div class="container"> 
     <p>&copy; 2024 Wondernest.net. All rights reserved.</p>

diff --git a/contact.html b/contact.html
@@ -51,6 +51,11 @@ <h4> What we've done so far:</h4>
          </div>
     </section>  
 
+  <div class="image-container">
+    <img src="Images/lilly.jpg">
+    <img src="Images/Malik.png">
+    <img src="Images/Vitor.png">
+  </div>
 
   <footer>
     <div class="container"> 

diff --git a/index.html b/index.html
@@ -39,17 +39,21 @@ <h2> What we do:</h2>
         </article>
 
         <article>
-            <h3> Why we do it:</h3>
+            <h2> Why we do it:</h2>
             <p>Wondernest: Host, organize, and attend small in-person events focused on genuine connections, enhancing social lives in big cities</p>
             </article>
 
             <article>
-                <h4> What we've done so far:</h4>
+                <h2> What we've done so far:</h2>
                 <p>Our Users as well as our Team has hosted 20 diverent types of get togethers all over Europe.</p>
                 </article>
          </div>
     </section>  
 
+  <div class="image-container">
+    <img src="Images/IMG_1.jpg">
+    <img src="Images/PXL_2.jpg">
+  </div>
 
   <footer>
     <div class="container"> 

diff --git a/style.css b/style.css
@@ -28,6 +28,18 @@ header {
   padding: 20px 0;
 }
 
+h1 {
+  font-size: 36px; /* Adjust the font size as needed */
+  font-weight: bold; /* Make the font bold */
+  color: olive; /* Set the color of the heading */
+  text-align: center; /* Center align the heading */
+  text-transform: uppercase; /* Transform text to uppercase */
+  letter-spacing: 2px; /* Add space between letters */
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
+  /* You can add more styles like font-family, line-height, etc. as per your design */
+}
+
+
 button {
   text-decoration: none;
   background-color:olive; /* Dark background */
@@ -46,6 +58,42 @@ button:hover {
   margin: 0 auto;
 }
 
+.image-container {
+  display: flex;
+  justify-content: center; /* Center the images horizontally */
+  align-items: center; /* Center the images vertically */
+  margin-bottom: 20px; /* Add space below the images */
+  margin-top: 20px; /* Add space below the images */
+  flex-direction: row; /* Default: images are displayed in a row */
+}
+
+.image-container img {
+  width: 200px; /* Adjust width as needed */
+  height: 200px; /* Adjust height as needed */
+  border-radius: 50%;
+  object-fit: cover;
+  margin: 0 10px;  /* Add space between images */
+  padding: 0 10px;
+}
+
+
+@media (max-width: 768px) {
+  .image-container {
+    flex-direction: column; /* Change to column layout for smaller screens */
+  }
+  .image-container img {
+    width: 200px; /* adjust width for smaller screens */
+    height: 200px; /* adjust height for smaller screens */
+  }
+}
+
+@media (max-width: 480px) {
+  .image-container img {
+    width: 160px; /* adjust width for even smaller screens */
+    height: 160px; /* adjust height for even smaller screens */
+  }
+}
+
 
 footer {
   background-color: oldlace;