add materialbox

Author: solygambas

photo-ninja/index.html

@@ -44,7 +44,59 @@
       </nav>
     </header>
     <!-- photo / grid -->
-
+    <section class="container section" id="photos">
+      <div class="row">
+        <div class="col s12 l4">
+          <img
+            src="https://i.ibb.co/YTgNpZT/portrait-min.jpg"
+            alt=""
+            class="responsive-img materialboxed"
+          />
+        </div>
+        <div class="col s12 l6 offset-l1">
+          <h2 class="indigo-text text-darken-4">Portraits</h2>
+          <p>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti,
+            quia laboriosam amet alias quasi excepturi voluptatem quas! Iure,
+            doloribus sapiente.
+          </p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col s12 l4 push-l7 offset-l1">
+          <img
+            src="https://i.ibb.co/QCR4WFg/city-min.jpg"
+            alt=""
+            class="responsive-img materialboxed"
+          />
+        </div>
+        <div class="col s12 l6 pull-l5 right-align offset-l1">
+          <h2 class="indigo-text text-darken-4">Cityscapes</h2>
+          <p>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti,
+            quia laboriosam amet alias quasi excepturi voluptatem quas! Iure,
+            doloribus sapiente.
+          </p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col s12 l4">
+          <img
+            src="https://i.ibb.co/wKFkLhJ/nature-min.jpg"
+            alt=""
+            class="responsive-img materialboxed"
+          />
+        </div>
+        <div class="col s12 l6 offset-l1">
+          <h2 class="indigo-text text-darken-4">Nature</h2>
+          <p>
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti,
+            quia laboriosam amet alias quasi excepturi voluptatem quas! Iure,
+            doloribus sapiente.
+          </p>
+        </div>
+      </div>
+    </section>
     <!-- parallax -->
 
     <!-- services / tabs -->

photo-ninja/index.js

@@ -1,2 +1,5 @@
 const sidenav = document.querySelector(".sidenav");
+const lightboxes = document.querySelectorAll(".materialboxed");
+
 M.Sidenav.init(sidenav);
+M.Materialbox.init(lightboxes);

photo-ninja/style.css

@@ -3,6 +3,10 @@ header {
   min-height: 100vh;
 }
 
+.section {
+  padding: 4vw 0;
+}
+
 @media screen and (max-width: 670px) {
   header {
     min-height: 50vh;