Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
diff --git a/assets/css/style.css b/assets/css/style.css
index 2195349..43f0f0b 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -679,7 +679,7 @@ main {
pointer-events: all;
}
-.testimonials-modal {
+.modal {
background: var(--eerie-black-2);
position: relative;
padding: 15px;
@@ -693,11 +693,31 @@ main {
z-index: 2;
}
-.modal-container.active .testimonials-modal {
+.modal-container.active .modal {
transform: scale(1);
opacity: 1;
}
+.photos-modal {
+ display: flex;
+ justify-content: flex-start;
+ align-items: stretch;
+ flex-direction: column;
+ gap: 25px;
+ padding: 30px;
+ border-radius: 20px;
+ height: 100%;
+ width: 100%;
+}
+
+.photos-modal .modal-img {
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ height: 100%;
+ width: 100%;
+}
+
.modal-close-btn {
position: absolute;
top: 15px;
@@ -975,7 +995,10 @@ main {
100% { transform: scale(1); }
}
-.select-grid-item > a { width: 100%; }
+.select-grid-item > a, .select-grid-item > div {
+ width: 100%;
+ cursor: pointer;
+}
.select-grid-item-img {
position: relative;
@@ -998,7 +1021,7 @@ main {
transition: var(--transition-1);
}
-.select-grid-item > a:hover .select-grid-item-img::before { background: hsla(0, 0%, 0%, 0.5); }
+.select-grid-item > a:hover .select-grid-item-img::before, .select-grid-item > div:hover .select-grid-item-img::before { background: hsla(0, 0%, 0%, 0.5); }
.select-grid-item-icon-box {
--scale: 0.8;
@@ -1017,7 +1040,7 @@ main {
transition: var(--transition-1);
}
-.select-grid-item > a:hover .select-grid-item-icon-box {
+.select-grid-item > a:hover .select-grid-item-icon-box, .select-grid-item > div:hover .select-grid-item-icon-box {
--scale: 1;
opacity: 1;
}
@@ -1031,7 +1054,7 @@ main {
transition: var(--transition-1);
}
-.select-grid-item > a:hover img { transform: scale(1.1); }
+.select-grid-item > a:hover img, .select-grid-item > div:hover img { transform: scale(1.1); }
.select-grid-item-title,
.select-grid-item-description { margin-left: 10px; }
@@ -1066,93 +1089,6 @@ main {
}
-/*-----------------------------------*\
- #BLOG
-\*-----------------------------------*/
-
-.blog-posts { margin-bottom: 10px; }
-
-.blog-posts-list {
- display: grid;
- grid-template-columns: 1fr;
- gap: 20px;
-}
-
-.blog-post-item > a {
- position: relative;
- background: var(--border-gradient-onyx);
- height: 100%;
- box-shadow: var(--shadow-4);
- border-radius: 16px;
- z-index: 1;
-}
-
-.blog-post-item > a::before {
- content: "";
- position: absolute;
- inset: 1px;
- border-radius: inherit;
- background: var(--eerie-black-1);
- z-index: -1;
-}
-
-.blog-banner-box {
- width: 100%;
- height: 200px;
- border-radius: 12px;
- overflow: hidden;
-}
-
-.blog-banner-box img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- transition: var(--transition-1);
-}
-
-.blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); }
-
-.blog-content { padding: 15px; }
-
-.blog-meta {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- gap: 7px;
- margin-bottom: 10px;
-}
-
-.blog-meta :is(.blog-category, time) {
- color: var(--light-gray-70);
- font-size: var(--fs-6);
- font-weight: var(--fw-300);
-}
-
-.blog-meta .dot {
- background: var(--light-gray-70);
- width: 4px;
- height: 4px;
- border-radius: 4px;
-}
-
-.blog-item-title {
- margin-bottom: 10px;
- line-height: 1.3;
- transition: var(--transition-1);
-}
-
-.blog-post-item > a:hover .blog-item-title { color: var(--secondary-color); }
-
-.blog-text {
- color: var(--light-gray);
- font-size: var(--fs-6);
- font-weight: var(--fw-300);
- line-height: 1.6;
-}
-
-
-
-
/*-----------------------------------*\
#CONTACT
@@ -1784,14 +1720,6 @@ textarea.form-input::-webkit-resizer { display: none; }
.select-grid-list { grid-template-columns: repeat(3, 1fr); }
-
-
- /**
- * BLOG
- */
-
- .blog-banner-box { height: 230px; }
-
}
diff --git a/assets/images/blog-1.jpg b/assets/images/blog-1.jpg
deleted file mode 100644
index 8b59c46..0000000
Binary files a/assets/images/blog-1.jpg and /dev/null differ
diff --git a/assets/images/blog-2.jpg b/assets/images/blog-2.jpg
deleted file mode 100644
index 34cd8f4..0000000
Binary files a/assets/images/blog-2.jpg and /dev/null differ
diff --git a/assets/images/blog-3.jpg b/assets/images/blog-3.jpg
deleted file mode 100644
index eef1c2c..0000000
Binary files a/assets/images/blog-3.jpg and /dev/null differ
diff --git a/assets/images/blog-4.jpg b/assets/images/blog-4.jpg
deleted file mode 100644
index 5c8e080..0000000
Binary files a/assets/images/blog-4.jpg and /dev/null differ
diff --git a/assets/images/blog-5.jpg b/assets/images/blog-5.jpg
deleted file mode 100644
index cb49416..0000000
Binary files a/assets/images/blog-5.jpg and /dev/null differ
diff --git a/assets/images/blog-6.jpg b/assets/images/blog-6.jpg
deleted file mode 100644
index 6aefd82..0000000
Binary files a/assets/images/blog-6.jpg and /dev/null differ
diff --git a/assets/images/logo.ico b/assets/images/logo.ico
deleted file mode 100644
index ea99701..0000000
Binary files a/assets/images/logo.ico and /dev/null differ
diff --git a/assets/images/logo.png b/assets/images/logo.png
new file mode 100644
index 0000000..996769c
Binary files /dev/null and b/assets/images/logo.png differ
diff --git a/assets/images/logo.svg b/assets/images/logo.svg
deleted file mode 100644
index bd5b7de..0000000
--- a/assets/images/logo.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
-
-
-
diff --git a/assets/js/photos.js b/assets/js/photos.js
index 6f9e8e5..a3cc3ef 100644
--- a/assets/js/photos.js
+++ b/assets/js/photos.js
@@ -23,7 +23,7 @@ function resizeMasonryItem(item){
* Net height of the implicit row-track = T = G + R
* S = H1 / T
*/
- var rowSpan = Math.ceil((item.querySelector('a').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
+ var rowSpan = Math.ceil((item.querySelector('div').getBoundingClientRect().height+rowGap)/(rowHeight+rowGap));
/* Set the spanning as calculated above (S) */
item.style.gridRowEnd = 'span '+rowSpan;
@@ -76,4 +76,4 @@ masonryEvents.forEach( function(event) {
} );
/* Do a resize once more when all the images finish loading */
-waitForImages();
\ No newline at end of file
+waitForImages();
diff --git a/assets/js/script.js b/assets/js/script.js
index 57962c6..23d9d54 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -22,13 +22,17 @@ const modalContainer = document.querySelector("[data-modal-container]");
const modalCloseBtn = document.querySelector("[data-modal-close-btn]");
const overlay = document.querySelector("[data-overlay]");
+// lightbox variables
+const lightboxItem = document.querySelectorAll("[data-lightbox-item]");
+
// modal variable
const modalImg = document.querySelector("[data-modal-img]");
const modalTitle = document.querySelector("[data-modal-title]");
const modalText = document.querySelector("[data-modal-text]");
+const modalTag = document.querySelector("[data-modal-tag]");
// modal toggle function
-const testimonialsModalFunc = function () {
+const modalFunc = function () {
modalContainer.classList.toggle("active");
overlay.classList.toggle("active");
}
@@ -43,15 +47,31 @@ for (let i = 0; i < testimonialsItem.length; i++) {
modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML;
modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML;
- testimonialsModalFunc();
+ modalFunc();
+
+ });
+
+}
+
+// add click event to all lightbox items
+for (let i = 0; i < lightboxItem.length; i++) {
+
+ lightboxItem[i].addEventListener("click", function () {
+ console.log("Clicked");
+
+ modalImg.style.backgroundImage = "url('" + this.querySelector("[data-lightbox-image]").src + "')";
+ modalTitle.innerHTML = this.querySelector("[data-lightbox-title]").innerHTML;
+ modalText.innerHTML = this.querySelector("[data-lightbox-tag]").innerHTML;
+
+ modalFunc();
});
}
// add click event to modal close button
-if (modalCloseBtn) modalCloseBtn.addEventListener("click", testimonialsModalFunc);
-if (overlay) overlay.addEventListener("click", testimonialsModalFunc);
+if (modalCloseBtn) modalCloseBtn.addEventListener("click", modalFunc);
+if (overlay) overlay.addEventListener("click", modalFunc);
@@ -109,6 +129,10 @@ for (let i = 0; i < filterBtn.length; i++) {
this.classList.add("active");
lastClickedBtn = this;
+ if (resizeAllMasonryItems) {
+ resizeAllMasonryItems();
+ setTimeout(resizeAllMasonryItems, 250);
+ }
});
}
+ 
- 
+