Create productcarousel.css

blocks/productcarousel/productcarousel.css

@@ -0,0 +1,194 @@
+/* Basic styles */
+
+* {
+    box-sizing: border-box;
+  }
+
+  header {
+    text-align: center;
+  }
+
+  .bg-red {
+    background-color: #ff5252 !important;
+  }
+
+  .container {
+    max-width: 40vw;
+    /* margin-right: 5rem;
+    margin-left: 5rem; */
+  }
+
+  /* Slider styles */
+
+  .slider-container {
+    padding: 2rem 2rem 2rem 2rem;
+    /* background-color: #2196f3; */
+    border-right: 2px solid #d2d2d2;
+    max-height: 100vh;
+  }
+
+  .slides-wrapper {
+    margin: auto;
+    overflow: hidden;
+  }
+
+  .slides-container {
+    padding: 0 10px;
+  }
+
+  .slider-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    overflow: hidden;
+    transition: 1s;
+    /* max-height: 20vh; */
+    width: 100%;
+  }
+
+  .slider-list ul {
+    width: 100%;
+  }
+
+  .slider-item {
+    background-color: #bdbdbd;
+    margin: 0 16px -4px 0;
+    min-height: 50px;
+  }
+
+  .slider-item img {
+    width: 100%;
+    height: auto;
+  }
+
+  .slider-arrows {
+    display: flex;
+    justify-content: space-between;
+    height: 60px;
+    padding: 0 10px;
+    margin-top: 10px;
+  }
+
+  .slider-arrow-prev,
+  .slider-arrow-next {
+    border: none;
+    background-color: #ffffff;
+    color: #212121;
+    font-size: 16px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .slider-arrow-prev:hover,
+  .slider-arrow-next:hover {
+    background-color: #eeeeee;
+  }
+
+  .main-product-container {
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center; /* Center child horizontally */
+    align-items: center; /* Center child vertically */
+  }
+  .main-product {
+    width: 90%;
+    height: 70%;
+    margin-bottom: 2rem;
+  }
+
+  .product-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    border-radius: 1rem;
+    background-color: #f2f2f2;
+    /* margin: 0 5rem 0 5rem; */
+  }
+
+  .product-details {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 300px;
+    padding: 2rem 2rem 2rem 2rem;
+  }
+
+  /* Card */
+  .card-container {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 1rem;
+    /* justify-content: center; */
+  }
+
+  .card {
+    width: 60px;
+    height: 60px;
+    margin-right: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    overflow: hidden;
+  }
+
+  .card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  /* Card End */
+
+  #colorPicker {
+    width: 100px;
+    height: 50px;
+  }
+
+  #s7smartcropvideo_div.s7smartcropvideoviewer{
+    width:100%; 
+    height:auto;
+    /* max-height: 20vh; */
+}
+
+  @media (max-width: 768px) {
+    .card {
+        max-width: 13vw;
+    }
+    .product-container {
+      flex-direction: column; /* Stack items vertically */
+      margin: 0 1rem 0 1rem;
+    }
+    .container {
+      width: 100%;
+      max-width: 100vw;
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    .product-details {
+      margin-top: 0px; /* Add space between product image and details */
+      padding-top: 0px;
+    }
+
+    .slider-container {
+      border-right: 0px solid #d2d2d2;
+      border-bottom: 2px solid #d2d2d2;
+    }
+
+    .main-product {
+      height: 300px;
+    }
+  }
+
+  @media (max-width: 576px) {
+    .product-image,
+    .product-details {
+      flex: 1 1 100%; /* Full width on small screens */
+      margin-right: 0; /* Remove margin */
+    }
+
+    .product-image {
+      margin-bottom: 20px; /* Add space between product image and details */
+    }
+  }
+