From 38a3cd4d022ca5e3dfa85fcee88fdd4e06400977 Mon Sep 17 00:00:00 2001
From: JSriwongsa <sriwongsa.jtp@gmail.com>
Date: Wed, 28 Jun 2023 14:31:14 -0500
Subject: [PATCH] added video section

---
 ecommerce/fashion_website/index.html | 452 ++++++++++++++++++++++++---
 ecommerce/fashion_website/main.js    |   5 +-
 ecommerce/fashion_website/style.css  | 128 +++++++-
 3 files changed, 540 insertions(+), 45 deletions(-)

diff --git a/ecommerce/fashion_website/index.html b/ecommerce/fashion_website/index.html
index 5a3c6c0..adbb92e 100644
--- a/ecommerce/fashion_website/index.html
+++ b/ecommerce/fashion_website/index.html
@@ -208,8 +208,8 @@
                     </div>
                 </div>
             </div>
-
         </header>
+
         <main>
             <div class="hero">
                 <div class="container">
@@ -282,36 +282,6 @@
                             <div class="swiper-wrapper">
                                 <div class="swiper-slide">
                                     <div class="product object-cover">
-                                        <div class="list">
-                                            <div class="product-thumb">
-                                                <div class="thumbnail">
-                                                    <a href="#">
-                                                        <div class="image">
-                                                            <img src="images/top/new1.jpg" alt="">
-                                                        </div>
-                                                        <div class="image hover-image">
-                                                            <img src="images/top/new1-1.jpg" alt="">
-                                                        </div>
-                                                    </a>
-                                                </div>
-                                                <div class="icons-act">
-                                                    <ul>
-                                                        <li><a href="#"><i class='bx bx-heart'></i></a></li>
-                                                        <li><a href="#"><i class='bx bx-share-alt'></i></a></li>
-                                                        <li><a href="#"><i class='bx bx-store'></i></a></li>
-                                                    </ul>
-                                                </div>
-                                            </div>
-                                            <div class="product-info">
-                                                <div class="colors">
-                                                    <a href="#" class="color-1 active"></a>
-                                                </div>
-                                                <h2><a href="#">Onyx Dress with Embroidery</a></h2>
-                                                <div class="price">
-                                                    <span class="current">$129.00</span>
-                                                </div>
-                                            </div>
-                                        </div>
                                         <div class="list">
                                             <div class="product-thumb">
                                                 <div class="thumbnail">
@@ -442,10 +412,71 @@
                                                 <div class="thumbnail">
                                                     <a href="#">
                                                         <div class="image">
-                                                            <img src="images/top/new6.jpg" alt="">
+                                                            <img src="images/top/new7.jpg" alt="">
                                                         </div>
                                                         <div class="image hover-image">
-                                                            <img src="images/top/new6-1.jpg" alt="">
+                                                            <img src="images/top/new7-1.jpg" alt="">
+                                                        </div>
+                                                    </a>
+                                                </div>
+                                                <div class="icons-act">
+                                                    <ul>
+                                                        <li><a href="#"><i class='bx bx-heart'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-share-alt'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-store'></i></a></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="product-info">
+                                                <div class="colors">
+                                                    <a href="#" class="color-13 active"></a>
+                                                </div>
+                                                <h2><a href="#">Snow Lace Trim Shirt</a></h2>
+                                                <div class="price">
+                                                    <span class="current">$135.00</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="list">
+                                            <div class="product-thumb">
+                                                <div class="thumbnail">
+                                                    <a href="#">
+                                                        <div class="image">
+                                                            <img src="images/top/new8.jpg" alt="">
+                                                        </div>
+                                                        <div class="image hover-image">
+                                                            <img src="images/top/new8-1.jpg" alt="">
+                                                        </div>
+                                                    </a>
+                                                </div>
+                                                <div class="icons-act">
+                                                    <ul>
+                                                        <li><a href="#"><i class='bx bx-heart'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-share-alt'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-store'></i></a></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="product-info">
+                                                <div class="colors">
+                                                    <a href="#" class="color-15 active"></a>
+                                                    <a href="#" class="color-16"></a>
+                                                </div>
+                                                <h2><a href="#">Block Heel Shoes</a></h2>
+                                                <div class="price">
+                                                    <span class="current">$169.00</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="list">
+                                            <div class="product-thumb">
+                                                <div class="thumbnail">
+                                                    <a href="#">
+                                                        <div class="image">
+                                                            <img src="images/top/new9.jpg" alt="">
+                                                        </div>
+                                                        <div class="image hover-image">
+                                                            <img src="images/top/new9-1.jpg" alt="">
                                                         </div>
                                                     </a>
                                                 </div>
@@ -460,12 +491,100 @@
                                             <div class="product-info">
                                                 <div class="colors">
                                                     <a href="#" class="color-1 active"></a>
-                                                    <a href="#" class="color-10"></a>
-                                                    <a href="#" class="color-5"></a>
                                                 </div>
-                                                <h2><a href="#">Villie Wide-leg Shorts</a></h2>
+                                                <h2><a href="#">Jester Loafers</a></h2>
                                                 <div class="price">
-                                                    <span class="current">$75.00</span>
+                                                    <span class="current">$149.00</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="list">
+                                            <div class="product-thumb">
+                                                <div class="thumbnail">
+                                                    <a href="#">
+                                                        <div class="image">
+                                                            <img src="images/top/new10.jpg" alt="">
+                                                        </div>
+                                                        <div class="image hover-image">
+                                                            <img src="images/top/new10-1.jpg" alt="">
+                                                        </div>
+                                                    </a>
+                                                </div>
+                                                <div class="icons-act">
+                                                    <ul>
+                                                        <li><a href="#"><i class='bx bx-heart'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-share-alt'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-store'></i></a></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="product-info">
+                                                <div class="colors">
+                                                    <a href="#" class="color-15 active"></a>
+                                                </div>
+                                                <h2><a href="#">Woven Bag</a></h2>
+                                                <div class="price">
+                                                    <span class="current">$85.00</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="list">
+                                            <div class="product-thumb">
+                                                <div class="thumbnail">
+                                                    <a href="#">
+                                                        <div class="image">
+                                                            <img src="images/top/new11.jpg" alt="">
+                                                        </div>
+                                                        <div class="image hover-image">
+                                                            <img src="images/top/new11-1.jpg" alt="">
+                                                        </div>
+                                                    </a>
+                                                </div>
+                                                <div class="icons-act">
+                                                    <ul>
+                                                        <li><a href="#"><i class='bx bx-heart'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-share-alt'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-store'></i></a></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="product-info">
+                                                <div class="colors">
+                                                    <a href="#" class="color-13 active"></a>
+                                                </div>
+                                                <h2><a href="#">Oval Sunglasses</a></h2>
+                                                <div class="price">
+                                                    <span class="current">$59.00</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="list">
+                                            <div class="product-thumb">
+                                                <div class="thumbnail">
+                                                    <a href="#">
+                                                        <div class="image">
+                                                            <img src="images/top/new12.jpg" alt="">
+                                                        </div>
+                                                        <div class="image hover-image">
+                                                            <img src="images/top/new12-1.jpg" alt="">
+                                                        </div>
+                                                    </a>
+                                                </div>
+                                                <div class="icons-act">
+                                                    <ul>
+                                                        <li><a href="#"><i class='bx bx-heart'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-share-alt'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-store'></i></a></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="product-info">
+                                                <div class="colors">
+                                                    <a href="#" class="color-17 active"></a>
+                                                </div>
+                                                <h2><a href="#">Golden Daisy Earrings</a></h2>
+                                                <div class="price">
+                                                    <span class="current">$49.00</span>
                                                 </div>
                                             </div>
                                         </div>
@@ -612,7 +731,106 @@
                                                 </div>
                                             </div>
                                         </div>
-
+                                        <div class="list">
+                                            <div class="product-thumb">
+                                                <span class="label">20% OFF</span>
+                                                <div class="thumbnail">
+                                                    <a href="#">
+                                                        <div class="image">
+                                                            <img src="images/top/top1.jpg" alt="">
+                                                        </div>
+                                                        <div class="image hover-image">
+                                                            <img src="images/top/top1-1.jpg" alt="">
+                                                        </div>
+                                                    </a>
+                                                </div>
+                                                <div class="icons-act">
+                                                    <ul>
+                                                        <li><a href="#"><i class='bx bx-heart'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-share-alt'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-store'></i></a></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="product-info">
+                                                <div class="colors">
+                                                    <a href="#" class="color-18 active"></a>
+                                                    <a href="#" class="color-14"></a>
+                                                </div>
+                                                <h2><a href="#">Castleton Green Halterneck Top</a></h2>
+                                                <div class="price">
+                                                    <span class="before">$279.00</span>
+                                                    <span class="current">$223.00</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="list">
+                                            <div class="product-thumb">
+                                                <span class="label">25% OFF</span>
+                                                <div class="thumbnail">
+                                                    <a href="#">
+                                                        <div class="image">
+                                                            <img src="images/top/top3.jpg" alt="">
+                                                        </div>
+                                                        <div class="image hover-image">
+                                                            <img src="images/top/top3-1.jpg" alt="">
+                                                        </div>
+                                                    </a>
+                                                </div>
+                                                <div class="icons-act">
+                                                    <ul>
+                                                        <li><a href="#"><i class='bx bx-heart'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-share-alt'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-store'></i></a></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="product-info">
+                                                <div class="colors">
+                                                    <a href="#" class="color-15 active"></a>
+                                                    <a href="#" class="color-13"></a>
+                                                    <a href="#" class="color-1"></a>
+                                                </div>
+                                                <h2><a href="#">Scoop-neck T-shirt</a></h2>
+                                                <div class="price">
+                                                    <span class="before">$99.00</span>
+                                                    <span class="current">$74.00</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="list">
+                                            <div class="product-thumb">
+                                                <span class="label">25% OFF</span>
+                                                <div class="thumbnail">
+                                                    <a href="#">
+                                                        <div class="image">
+                                                            <img src="images/top/top2.jpg" alt="">
+                                                        </div>
+                                                        <div class="image hover-image">
+                                                            <img src="images/top/top2-1.jpg" alt="">
+                                                        </div>
+                                                    </a>
+                                                </div>
+                                                <div class="icons-act">
+                                                    <ul>
+                                                        <li><a href="#"><i class='bx bx-heart'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-share-alt'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-store'></i></a></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="product-info">
+                                                <div class="colors">
+                                                    <a href="#" class="color-8 active"></a>
+                                                </div>
+                                                <h2><a href="#">Crayola Lemon Thong Bodysuit</a></h2>
+                                                <div class="price">
+                                                    <span class="before">$125.00</span>
+                                                    <span class="current">$93.00</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        
                                     </div>
                                 </div>
 
@@ -679,8 +897,127 @@
                                                 </div>
                                             </div>
                                         </div>
+                                        <div class="list">
+                                            <div class="product-thumb">
+                                                <div class="thumbnail">
+                                                    <a href="#">
+                                                        <div class="image">
+                                                            <img src="images/top/best3.jpg" alt="">
+                                                        </div>
+                                                        <div class="image hover-image">
+                                                            <img src="images/top/best3-1.jpg" alt="">
+                                                        </div>
+                                                    </a>
+                                                </div>
+                                                <div class="icons-act">
+                                                    <ul>
+                                                        <li><a href="#"><i class='bx bx-heart'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-share-alt'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-store'></i></a></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="product-info">
+                                                <div class="colors">
+                                                    <a href="#" class="color-18 active"></a>
+                                                </div>
+                                                <h2><a href="#">Embroidered Semi-Sheer Blouse</a></h2>
+                                                <div class="price">
+                                                    <span class="current">$145.00</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="list">
+                                            <div class="product-thumb">
+                                                <div class="thumbnail">
+                                                    <a href="#">
+                                                        <div class="image">
+                                                            <img src="images/top/best4.jpg" alt="">
+                                                        </div>
+                                                        <div class="image hover-image">
+                                                            <img src="images/top/best4-1.jpg" alt="">
+                                                        </div>
+                                                    </a>
+                                                </div>
+                                                <div class="icons-act">
+                                                    <ul>
+                                                        <li><a href="#"><i class='bx bx-heart'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-share-alt'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-store'></i></a></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="product-info">
+                                                <div class="colors">
+                                                    <a href="#" class="color-13 active"></a>
+                                                </div>
+                                                <h2><a href="#">Double-breasted Jacket</a></h2>
+                                                <div class="price">
+                                                    <span class="current">$259.00</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="list">
+                                            <div class="product-thumb">
+                                                <div class="thumbnail">
+                                                    <a href="#">
+                                                        <div class="image">
+                                                            <img src="images/top/new1.jpg" alt="">
+                                                        </div>
+                                                        <div class="image hover-image">
+                                                            <img src="images/top/new1-1.jpg" alt="">
+                                                        </div>
+                                                    </a>
+                                                </div>
+                                                <div class="icons-act">
+                                                    <ul>
+                                                        <li><a href="#"><i class='bx bx-heart'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-share-alt'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-store'></i></a></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="product-info">
+                                                <div class="colors">
+                                                    <a href="#" class="color-1 active"></a>
+                                                </div>
+                                                <h2><a href="#">Onyx Dress with Embroidery</a></h2>
+                                                <div class="price">
+                                                    <span class="current">$129.00</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="list">
+                                            <div class="product-thumb">
+                                                <div class="thumbnail">
+                                                    <a href="#">
+                                                        <div class="image">
+                                                            <img src="images/top/new6.jpg" alt="">
+                                                        </div>
+                                                        <div class="image hover-image">
+                                                            <img src="images/top/new6-1.jpg" alt="">
+                                                        </div>
+                                                    </a>
+                                                </div>
+                                                <div class="icons-act">
+                                                    <ul>
+                                                        <li><a href="#"><i class='bx bx-heart'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-share-alt'></i></a></li>
+                                                        <li><a href="#"><i class='bx bx-store'></i></a></li>
+                                                    </ul>
+                                                </div>
+                                            </div>
+                                            <div class="product-info">
+                                                <div class="colors">
+                                                    <a href="#" class="color-1 active"></a>
+                                                </div>
+                                                <h2><a href="#">Zebra Halterneck Thong Bodysuit</a></h2>
+                                                <div class="price">
+                                                    <span class="current">$85.00</span>
+                                                </div>
+                                            </div>
+                                        </div>
                                         
-
                                     </div>
                                 </div>
                             </div>
@@ -688,9 +1025,27 @@
                     </div>
                 </div>
             </div>
-        </main>
-        <footer>
 
+            <div class="video">
+                <div class="container">
+                    <div class="wrap">
+                        <div class="video-box object-cover" data-open-btn>
+                            <div class="image">
+                                <img src="images/video.jpg" alt="">
+                            </div>
+                            <div class="video-play">
+                                <i class='bx bx-play' ></i>
+                                <h3>Our Designers</h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            
+        </main>
+
+        <footer>
         </footer>
         <div class="overlay" data-overlay></div>
 
@@ -759,6 +1114,21 @@
                 </div>
             </div>
         </div>
+
+        <div class="youtube" data-show>
+            <div class="wrap">
+                <div class="inner">
+                    <div class="item">
+                        <a href="#0" class="close-toggle" data-close-btn><i class='bx bx-x'></i></a>
+                        <div class="outer">
+                            <div class="control">
+                                <iframe src="https://www.youtube.com/embed/8sZb8Rv6Oqw?autoplay=1" frameborder="0" allowfullscreen></iframe>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
 
diff --git a/ecommerce/fashion_website/main.js b/ecommerce/fashion_website/main.js
index e3f5fcf..4bbedbd 100644
--- a/ecommerce/fashion_website/main.js
+++ b/ecommerce/fashion_website/main.js
@@ -33,11 +33,12 @@ var tabbedNav = new Swiper('.tabs',{
     slidesPerGroup: false,
     spaceBetween: 20,
 });
+
 var theTab = new Swiper('.tabs-box',{
     slidePerView: 1,
     autoHeight: true,
     thumbs: {
         swiper: tabbedNav
     },
-    
-})
+
+});
diff --git a/ecommerce/fashion_website/style.css b/ecommerce/fashion_website/style.css
index 7777c8d..5812984 100644
--- a/ecommerce/fashion_website/style.css
+++ b/ecommerce/fashion_website/style.css
@@ -628,8 +628,132 @@ main > div{
 .product .colors .color-14{
     background-color: #13274F;
 }
-
-
+.product .colors .color-15{
+    background-color:  #dac292;
+}
+.product .colors .color-16{
+    background-color: #A52A2A;
+}
+.product .colors .color-17{
+    background-color: goldenrod;
+}
+.product .colors .color-18{
+    background-color: #00563B;
+}
+/*----- video -----*/
+.video-box{
+    position: relative;
+    height: 500px;
+    max-width: 900px;
+    overflow: hidden;
+    margin: 0 auto;
+}
+.video-box .video-play{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--white-color);
+    cursor: pointer;
+}
+.video-box .video-play i{
+    font-size: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    line-height: 80px;
+    border: 2px solid var(--white-color);
+    border-radius: 50%;
+    margin-bottom: 30px;
+}
+.video-box .video-play h3{
+    font-size: 40px;
+    font-weight: 600;
+}
+.video-box:hover img{
+    transform: scale(1.1);
+}
+/*---video-play-from-youtube---*/
+.youtube{
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: var(--dark-color);
+    z-index: 1000;
+    visibility: hidden;
+    opacity: 0;
+}
+.youtube.active{
+    visibility: visible;
+    opacity: 1;
+}
+.youtube, .youtube :where(.wrap, .inner , iframe){
+    width: 100%;
+    height: 100%;
+}
+.youtube .wrap{
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+    max-height: 100%;
+}
+.youtube .inner, .youtube iframe{
+    position: absolute;
+    top: 0;
+    left: 0;
+    white-space: nowrap;
+}
+.youtube .item{
+    display: inline-block;
+    text-align: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+.youtube .item::before{
+    content: '';
+    display: inline-block;
+    height: 50%;
+    width: 1px;
+    margin-right: -1px;
+}
+.youtube .outer{
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 800px;
+    max-height: 100%;
+    width: 100%;
+    padding: 0 5px;
+}
+.youtube .control{
+    width: 100%;
+    height: 0;
+    padding-bottom: 56%;
+    overflow: hidden;
+    position: relative;
+}
+.youtube iframe{
+    display: inline-block;
+    transform: scale3d(0.5, 0.5, 0.5);
+    transition: transform 0.3s;
+    transform-origin: 50% 50%;
+}
+.youtube.active iframe{
+    transform: scale3d(1, 1, 1);
+}
+.youtube .item > a{
+    color: var(--white-color);
+    float: right;
+}