Updated inivitation letter

Invitation letter, new css gallery and some new images. Final touch
arungop · Apr 17, 2021 · 6cea1b1 · 6cea1b1
1 parent 6516cab
commit 6cea1b1
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 90 deletions.
diff --git a/assets/img/s1.webp b/assets/img/s1.webp
diff --git a/assets/img/s2.webp b/assets/img/s2.webp
diff --git a/assets/img/s3.webp b/assets/img/s3.webp
diff --git a/assets/img/s4.webp b/assets/img/s4.webp
diff --git a/assets/mp3/music.mp3 b/assets/mp3/music.mp3
diff --git a/assets/pdf/akhi.pdf b/assets/pdf/akhi.pdf
diff --git a/assets/pdf/akhiwedsarya.pdf b/assets/pdf/akhiwedsarya.pdf
diff --git a/assets/todo/todo.txt b/assets/todo/todo.txt
diff --git a/css/style.css b/css/style.css
@@ -599,55 +599,7 @@ a {
 
 
 
-#photos {
-   /* Prevent vertical gaps */
-   line-height: 0;
-
-   -webkit-column-count: 3;
-   -webkit-column-gap:   0px;
-   -moz-column-count:    3;
-   -moz-column-gap:      0px;
-   column-count:         3;
-   column-gap:           0px;
-}
-
-
-
-#photos img {
-  /* Just in case there are inline attributes */
-  width: 100% !important;
-  max-width: 350px !important;
-  height: auto !important;
-}
 
-@media (max-width: 1200px) {
-  #photos {
-  -moz-column-count:    3;
-  -webkit-column-count: 3;
-  column-count:         3;
-  }
-}
-@media (max-width: 1000px) {
-  #photos {
-  -moz-column-count:    3;
-  -webkit-column-count: 3;
-  column-count:         3;
-  }
-}
-@media (max-width: 800px) {
-  #photos {
-  -moz-column-count:    2;
-  -webkit-column-count: 2;
-  column-count:         2;
-  }
-}
-@media (max-width: 400px) {
-  #photos {
-  -moz-column-count:    2;
-  -webkit-column-count: 2;
-  column-count:         2;
-  }
-}
 
 
 
@@ -656,5 +608,34 @@ body {
   padding: 0;
 }
 
+.containerw3 {
 
+	display: flex;
+	overflow: hidden;
+	flex-wrap: wrap;
+	margin: -2.5px;
+}
+.containerw3:after {
+	content: '';
+	flex-grow: 999999999;
+	min-width: 200px;
+	height: 0;
+}
+.containerw3 > * {
+	position: relative;
+	display: block;
+	height: 250px;
+	margin: 2.5px;
+	flex-grow: 1;
+}
+.containerw3 > * > img {
+	height: 250px;
+	object-fit: cover;
+	max-width: 100%;
+	min-width: 100%;
+	vertical-align: bottom;
+}
+.containerw3.containerw3-margin {
+	margin: 2.5px;
+}
 
diff --git a/index.html b/index.html
@@ -80,7 +80,7 @@ <h3>Are getting married</h3>
 
 
 
-        <a href="https://github.com/arungop/erdas_imagine/files/6056325/akhi.pdf" download="Invitation | 24 Apr | Hope to see you there!">
+        <a href="https://github.com/arungop/akhiarya/files/6328859/akhiwedsarya.pdf" download="Invitation | 24 Apr | Hope to see you there!">
           <div class="venue">DOWNLOAD INVITATION CARD</div>
         </a>
       </div>
@@ -105,26 +105,59 @@ <h3>Are getting married</h3>
 
 <!--Image gallery of couples-->
 
-<div>
-<section id="photos">
-  <img src="assets/img/d1.webp" alt="Akhi weds Arya"">
-  <img src="assets/img/d2.webp" alt="Akhi weds Arya"">
-  <img src="assets/img/d3.webp" alt="Akhi weds Arya">
-  <img src="assets/img/d4.webp" alt="Akhi weds Arya">
-  <img src="assets/img/d5.webp" alt="Akhi weds Arya">
-  <img src="assets/img/d6.webp" alt="Akhi weds Arya">
-  <img src="assets/img/d7.webp" alt="Akhi weds Arya">
-  <img src="assets/img/d8.webp" alt="Akhi weds Arya">
-  <img src="assets/img/d9.webp" alt="Akhi weds Arya">
-  <img src="assets/img/d10.webp" alt="Akhi weds Arya">
-  <img src="assets/img/d11.webp" alt="Akhi weds Arya">
-  <img src="assets/img/d12.webp" alt="Akhi weds Arya">
-  <img src="assets/img/d13.webp" alt="Akhi weds Arya">
-
-
-
-</section>
-</div> 
+
+
+
+<div class="containerw3 containerw3-margin">
+            <a href="#">
+                <img src="assets/img/d11.webp" />
+            </a>
+            <a href="#">
+                <img src="assets/img/d12.webp" />
+            </a>
+            <a href="#">
+                <img src="assets/img/d2.webp" />
+            </a>
+            <a href="#">
+                <img src="assets/img/s2.webp" />
+            </a>
+            <a href="#">
+                <img src="assets/img/s1.webp" />
+            </a>
+            <a href="#">
+                <img src="assets/img/s3.webp" />
+            </a>
+            <a href="#">
+                <img src="assets/img/s4.webp" />
+            </a>
+            <a href="#">
+                <img src="assets/img/d1.webp" />
+            </a>
+
+            <a href="#">
+                <img src="assets/img/d3.webp" />
+            </a>
+            <a href="#">
+                <img src="assets/img/d4.webp" />
+            </a>
+
+            <a href="#">
+                <img src="assets/img/d5.webp" />
+            </a>
+
+            <a href="#">
+                <img src="assets/img/d6.webp" />
+            </a>
+
+            <a href="#">
+                <img src="assets/img/d7.webp" />
+            </a>
+            <a href="#">
+                <img src="assets/img/d8.webp" />
+            </a>
+
+
+</div
 
 <!--Background music to enhance the wedding mood-->