-
-
-
- Ui UX Sepanta
-
-
-
- Ui UX Sepanta
-
-
-
- Ui UX Sepanta
-
-
-
- Ui UX Sepanta
-
-
+ Ui UX Sepanta
-
+ 
+
+
-
+
diff --git a/Gallery/script.js b/Gallery/script.js
index 6508f18..5827c00 100644
--- a/Gallery/script.js
+++ b/Gallery/script.js
@@ -1,13 +1,13 @@
-const panels = document.querySelectorAll(".panel");
-panels.forEach((panel) => {
- panel.addEventListener("click", () => {
- removeActiveClasses();
- panel.classList.add("active");
- });
+// Fancybox Configuration
+$('[data-fancybox="gallery"]').fancybox({
+ buttons: [
+ "slideShow",
+ "thumbs",
+ "zoom",
+ "fullScreen",
+ "share",
+ "close"
+ ],
+ loop: false,
+ protect: true
});
-
-function removeActiveClasses() {
- panels.forEach((panel) => {
- panel.classList.remove("active");
- });
-}
diff --git a/Gallery/style.css b/Gallery/style.css
index abae3f7..93ddb57 100644
--- a/Gallery/style.css
+++ b/Gallery/style.css
@@ -1,77 +1,201 @@
* {
- padding: 0;
margin: 0;
+ padding: 0;
box-sizing: border-box;
- font-family: "Rubik", cursive;
}
body {
+ font-family: "Rubik", sans-serif;
+ color: #343a40;
+ line-height: 1;
+}
+img {
+ height: 400px;
+ border-radius: 10px;
+ transform: scale(1.5);
+ box-shadow: 0 12px 24px rgb(0, 0, 0, 0.5);
+}
+
+.carousel {
+ width: 1600px;
+ margin: 450px auto;
+ background-color: rgb(97, 24, 164);
+ border-radius: 8px;
+ padding: 32px;
+ padding-left: 250px;
display: flex;
+ /* align-items: center; */
+ gap: 180px;
+ position: relative;
+ padding-right: 80px;
align-items: center;
- justify-content: center;
- height: 100vh;
- overflow: hidden;
}
-.container {
- display: flex;
- width: 90vw;
+
+.testimonial-text {
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 1.5;
+ margin-bottom: 32px;
+ color: rgb(208, 199, 211);
+}
+
+.type {
+ font-size: 18px;
+ margin-bottom: 8px;
+ color: rgb(172, 165, 174);
+}
+
+.personality {
+ font-size: 16px;
+ color: rgb(172, 165, 174);
}
-.panel {
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- height: 80vh;
- border-radius: 50px;
+.btn {
+ background-color: aliceblue;
+ border: none;
+ height: 50px;
+ width: 50px;
+ border-radius: 50%;
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
cursor: pointer;
- flex: 0.5;
- margin: 10px;
- position: relative;
- transition: all 700ms ease-in;
}
-.panel h1 {
- font-size: 35px;
+.btn-icon {
+ height: 34px;
+ width: 34px;
+ stroke: blueviolet;
+}
+
+.btn--left {
+ left: 0;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.btn--right {
+ right: 0;
+ top: 50%;
+ transform: translate(50%, -50%);
+}
+
+.dots {
position: absolute;
- bottom: 20px;
- left: 20px;
- margin: 0;
- opacity: 0;
+ left: 50%;
+ bottom: 0;
+ transform: translate(-50%, 98px);
+ display: flex;
+ gap: 15px;
}
-.panel.active {
- flex: 5;
+.dot {
+ height: 12px;
+ width: 12px;
+ background-color: aliceblue;
+ border: 2px solid green;
+ cursor: pointer;
+ border-radius: 50%;
}
-.panel.active h1 {
- opacity: 1;
- transition: opacity 0.3s ease-in 0.4s;
- color: rgb(12, 76, 55);
- background-color: beige;
- padding: 5px;
- border-radius: 10px;
- font-size: 20px;
+.dot--fill {
+ background-color: darkcyan;
}
-@media (max-width: 480px) {
- .container {
- width: 100vw;
- transition: opacity 0.3s ease-in 0.4s;
+/* @media(max-width: 600px){
+ img {
+ height: 100px;
+ border-radius: 10px;
+ transform: scale(1.5);
+ box-shadow: 0 12px 24px rgb(0, 0, 0, 0.5);
}
- .panel {
- background-size: 125%;
- height: 80vh;
- border-radius: 50px;
- cursor: pointer;
- flex: 0.5;
- margin: 10px;
- padding: 5px;
+
+ .carousel {
+ width: 300px;
+ margin: 50px auto;
+ background-color: rgb(97, 24, 164);
+ border-radius: 8px;
+ padding: 22px;
+ padding-left: 150px;
+ display: flex;
+ gap: 20px;
+ position: relative;
+ padding-right: 40px;
+ align-items: center;
}
-
- .panel h1 {
- font-size: 15px;
+
+ .testimonial-text {
+ font-size: 10px;
+ font-weight: 500;
+ line-height: 1.5;
+ margin-bottom: 32px;
+ color: rgb(208, 199, 211);
+ }
+
+ .type {
+ font-size: 8px;
+ margin-bottom: 8px;
+ color: rgb(172, 165, 174);
+ }
+
+ .personality {
+ font-size: 8px;
+ color: rgb(172, 165, 174);
+ }
+
+ .btn {
+ background-color: aliceblue;
+ border: none;
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
position: absolute;
+ display: flex;
align-items: center;
justify-content: center;
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
+ cursor: pointer;
}
-}
+
+ .btn-icon {
+ height: 14px;
+ width: 14px;
+ stroke: blueviolet;
+ }
+
+ .btn--left {
+ left: 0;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ .btn--right {
+ right: 0;
+ top: 50%;
+ transform: translate(50%, -50%);
+ }
+
+ .dots {
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ transform: translate(-50%, 98px);
+ display: flex;
+ gap: 15px;
+ }
+
+ .dot {
+ height: 12px;
+ width: 12px;
+ background-color: aliceblue;
+ border: 2px solid green;
+ cursor: pointer;
+ border-radius: 50%;
+ }
+
+ .dot--fill{
+ background-color: darkcyan;
+ }
+} */
+ ++ + + + + ++ Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur neque, temporibus similique illum aut ut, + excepturi voluptates harum necessitatibus minus ratione error illo. Suscipit aspernatur nisi reiciendis + praesentium, laboriosam enim? +
++ sofa +
++ minimalist +
+
+
+
+
+
+