Add files via upload

KhujamovCodes · Mar 20, 2024 · 9fb415d · 9fb415d
commit 9fb415d
Show file tree

Hide file tree

Showing 4 changed files with 241 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+    <meta charset="utf-8">
+    <title>vision</title>
+    <link rel="stylesheet" href="./style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
+    <script src="./script.js" defer></script>
+</head>
+
+<body>
+    <div class="section-tuw">
+        <div class="section_3">
+            <div class="wrappers__card">
+                <div class="wrapper"><i class="fa-solid fa-angle-left" id="left"></i>
+                    <div class="carousel"><img
+                            src="https://images01.nicepage.com/a1389d7bc73adea1e1c1fb7e/d766366df65b5455939b5b0e/pexels---12089085.jpg"
+                            alt="img" draggable="false"><img
+                            src="https://images01.nicepage.com/a1389d7bc73adea1e1c1fb7e/001897d9812a55229f28f3d4/pexels-vladimir-konoplev-12088587.jpg"
+                            alt="img" draggable="false"><img
+                            src="https://images01.nicepage.com/a1389d7bc73adea1e1c1fb7e/c5ace43d8b0352a68fbc29ee/pexels-reyna-montgomery-12093797.jpg"
+                            alt="img" draggable="false"><img
+                            src="https://images01.nicepage.com/a1389d7bc73adea1e1c1fb7e/628c1cad65355c5eb1702a62/pexels-andrea-piacquadio-774909.jpg"
+                            alt="img" draggable="false"><img
+                            src="https://images01.nicepage.com/a1389d7bc73adea1e1c1fb7e/ad7c4b0259075c5e84364529/pexels-vladimir-konoplev-12088590-Copy.jpg"
+                            alt="img" draggable="false"><img
+                            src="https://capp.nicepage.com/7e7f6ee71a15e9b9cedb4830754ce105c1a40811/images/default-image.jpg"
+                            alt="img" draggable="false"></div><i class="fa-solid fa-angle-right" id="right"></i>
+                </div>
+            </div>
+            <div class="container__texts">
+                <div class="container__texts__card1">
+                    <p>Article evident arrived express highest men did boy. Mistress sensible entirely am so. Quick can
+                        manor smart money hopes worth too. Comfort produce husband boy her had hearing. Law others
+                        theirs passed but wishes. You day real less till dear read. Considered use dispatched melancholy
+                        sympathize discretion led. Oh feel if up to till like. He an thing rapid these after going drawn
+                        or.</p>
+                </div>
+                <div class="container__texts__card2"><img src="./whatsap.png" alt="" width="60px">
+                    <div class="chat">
+                        <p> Chat Now</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,66 @@
+const carousel = document.querySelector(".carousel"),
+firstImg = carousel.querySelectorAll("img")[0],
+arrowIcons = document.querySelectorAll(".wrapper i");
+
+let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
+
+const showHideIcons = () => {
+    let scrollWidth = carousel.scrollWidth - carousel.clientWidth; 
+    arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
+    arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
+}
+
+arrowIcons.forEach(icon => {
+    icon.addEventListener("click", () => {
+        let firstImgWidth = firstImg.clientWidth + 14;
+        carousel.scrollLeft += icon.id == "left" ? -firstImgWidth : firstImgWidth;
+        setTimeout(() => showHideIcons(), 60); 
+    });
+});
+
+const autoSlide = () => {
+    if(carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
+
+    positionDiff = Math.abs(positionDiff); 
+    let firstImgWidth = firstImg.clientWidth + 14;
+    let valDifference = firstImgWidth - positionDiff;
+
+    if(carousel.scrollLeft > prevScrollLeft) { 
+        return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+    }
+    carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
+}
+
+const dragStart = (e) => {
+    isDragStart = true;
+    prevPageX = e.pageX || e.touches[0].pageX;
+    prevScrollLeft = carousel.scrollLeft;
+}
+
+const dragging = (e) => {
+    if(!isDragStart) return;
+    e.preventDefault();
+    isDragging = true;
+    carousel.classList.add("dragging");
+    positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
+    carousel.scrollLeft = prevScrollLeft - positionDiff;
+    showHideIcons();
+}
+
+const dragStop = () => {
+    isDragStart = false;
+    carousel.classList.remove("dragging");
+
+    if(!isDragging) return;
+    isDragging = false;
+    autoSlide();
+}
+
+carousel.addEventListener("mousedown", dragStart);
+carousel.addEventListener("touchstart", dragStart);
+
+document.addEventListener("mousemove", dragging);
+carousel.addEventListener("touchmove", dragging);
+
+document.addEventListener("mouseup", dragStop);
+carousel.addEventListener("touchend", dragStop);
diff --git a/style.css b/style.css
@@ -0,0 +1,124 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+.section-tuw {
+  width: 100%;
+  background: #2fbe85;
+  padding: 50px;
+}
+.section-tuw .wrappers__card {
+  display: flex;
+  padding: 0 35px;
+  align-items: center;
+  justify-content: center;
+}
+
+.wrapper {
+  display: flex;
+  max-width: 1200px;
+  position: relative;
+}
+.wrapper i {
+  top: 50%;
+  height: 44px;
+  width: 44px;
+  color: #343F4F;
+  cursor: pointer;
+  font-size: 1.15rem;
+  position: absolute;
+  text-align: center;
+  line-height: 44px;
+  background: #fff;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.1s linear;
+}
+.wrapper i:active {
+  transform: translateY(-50%) scale(0.9);
+}
+.wrapper i:hover {
+  background: #f2f2f2;
+}
+.wrapper i:first-child {
+  left: -22px;
+  display: none;
+}
+.wrapper i:last-child {
+  right: -22px;
+}
+.wrapper .carousel {
+  font-size: 0;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  scroll-behavior: smooth;
+}
+.wrapper .carousel.dragging {
+  cursor: grab;
+  scroll-behavior: auto;
+}
+.wrapper .carousel.dragging img {
+  pointer-events: none;
+}
+.wrapper .carousel img {
+  width: 250px;
+  height: 360px;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.wrapper .carousel img:first-child {
+  margin-left: 0px;
+}
+@media screen and (max-width: 1200px) {
+  .wrapper .carousel img {
+    width: 40%;
+  }
+}
+@media screen and (max-width: 900px) {
+  .wrapper .carousel img {
+    width: 50%;
+  }
+}
+@media screen and (max-width: 550px) {
+  .wrapper .carousel img {
+    width: 100%;
+  }
+}
+
+.container__texts {
+  display: grid;
+  justify-content: center;
+  grid-template-columns: 59% auto;
+  color: #fff;
+}
+.container__texts__card1 {
+  font-size: 1.125rem;
+  font-weight: 400;
+  margin-top: 65px;
+}
+.container__texts__card2 {
+  font-weight: bold;
+  font-size: 40px;
+  justify-content: end;
+  align-items: center;
+  color: #fff;
+  display: flex;
+}
+
+.chat p:hover {
+  color: #f1c50e;
+}
+
+@media only screen and (max-width: 600px) {
+  .container__texts {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}/*# sourceMappingURL=style.css.map */
diff --git a/whatsap.png b/whatsap.png