Added workflow and dockerfile

.gitea/workflows/docker.yml

@@ -0,0 +1,34 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest  # Use Ubuntu as the runner environment
+    
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v3  # Checkout the repository's code
+
+    - name: Log in to Docker Hub
+      uses: docker/login-action@v2
+      with:
+        username: ${{ secrets.DOCKER_USERNAME }}  # Docker Hub username from GitHub Secrets
+        password: ${{ secrets.DOCKER_PASSWORD }}  # Docker Hub password from GitHub Secrets
+
+    - name: Build Docker image
+      run: |
+        # Build the Docker image from the Dockerfile in the repo
+        docker build -t ${{ secrets.DOCKER_USERNAME }}/divine-couture.co.uk:latest .
+
+    - name: Push Docker image to Docker Hub
+      run: |
+        # Push the Docker image to Docker Hub
+        docker push ${{ secrets.DOCKER_USERNAME }}/divine-couture.co.uk:latest
+
+    - name: Logout from Docker Hub
+      run: docker logout

Dockerfile

@@ -0,0 +1,18 @@
+# Use the official Nginx image from Docker Hub
+FROM nginx:alpine
+
+# Set the working directory in the container
+WORKDIR /usr/share/nginx/html
+
+# Remove the default Nginx welcome page
+RUN rm -rf /usr/share/nginx/html/*
+
+# Copy your static website files (e.g., HTML, CSS, JS) into the container
+# Assuming the website files are in the `./website` directory on your host machine
+COPY ./ /usr/share/nginx/html
+
+# Expose port 80 for the web server
+EXPOSE 80
+
+# Start Nginx in the foreground when the container runs
+CMD ["nginx", "-g", "daemon off;"]

index.html

@@ -35,6 +35,9 @@
         }
 
         .video-container {
+            display: flex;
+            align-items: center;
+            justify-content: center;
             position: fixed;
             top: 0;
             left: 0;
@@ -42,20 +45,22 @@
             height: 100%;
             overflow: hidden;
             z-index: 9999;
+            background-color: #1e1e1e;
+            opacity: 0.95;
         }
 
         .video-container video {
-            width: 100%;
+            width: 50%;
-            height: 100%;
+            height: 50%;
             object-fit: cover;
         }
 
         .video-container.fade-out {
-            animation: fadeOut 500ms forwards;
+            animation: fadeOut 1000ms forwards;
         }
 
         @keyframes fadeOut {
-            0% { opacity: 1; }
+            0% { opacity: 0.95; }
             100% { opacity: 0; visibility: hidden; }
         }
 
@@ -149,6 +154,13 @@
                 display: block; /* Show mobile element on small screens */
             }
 
+            .video-container video {
+                width: 70%;
+                height: 70%;
+                object-fit: cover;
+            }
+
+            
             .contact {
                 position: relative;
                 flex-direction: column;
@@ -168,7 +180,7 @@
     <div class="desktop-element">
         <div class="video-container" id="videoContainerDesk">
             <video id="introVideoDesk" autoplay muted playsinline>
-                <source src="Full HD.mp4" type="video/mp4">
+                <source src="assets/vid/Full HD.mp4" type="video/mp4">
                 Your browser does not support the video tag.
             </video>
         </div>
@@ -177,7 +189,7 @@
     <div class="mobile-element">
         <div class="video-container" id="videoContainerMob">
             <video id="introVideoMob" autoplay muted playsinline>
-                <source src="Full HD vertical.mp4" type="video/mp4">
+                <source src="assets/vid/Full HD vertical.mp4" type="video/mp4">
                 Your browser does not support the video tag.
             </video>
         </div>
@@ -186,16 +198,16 @@
     <!-- Main Content -->
     <div class="container" id="mainContent">
         <div class="logo">
-            <img src="divine couture-no background.svg" alt="Company Logo">
+            <img src="assets/img/divine-couture.svg" alt="Company Logo">
         </div>
         <div class="accent-line"></div>
         <p>Our website is on its way. Stay tuned for something special as we look to deliver style, for every occasion. We can't wait to share more.</p>
     </div>
 
     <div class="contact">
-        <div><img src="email-icon.png" alt="Email Icon"><a href="mailto:contact@divine-couture.co.uk">contact@divine-couture.co.uk</a></div>
+        <div><img src="assets/img/email-icon.png" alt="Email Icon"><a href="mailto:contact@divine-couture.co.uk">contact@divine-couture.co.uk</a></div>
-        <div><img src="phone-icon.png" alt="Phone Icon"><a href="tel:+447713133027">+44 (0) 77 13 13 30 27</a></div>
+        <div><img src="assets/img/phone-icon.png" alt="Phone Icon"><a href="tel:+447713133027">+44 (0) 77 13 13 30 27</a></div>
-        <div><img src="tiktok-icon.png" alt="TikTok Icon"><a href="https://www.tiktok.com/@divinecoutureee">divinecoutureee</a></div>
+        <div><img src="assets/img/tiktok-icon.png" alt="TikTok Icon"><a href="https://www.tiktok.com/@divinecoutureee">divinecoutureee</a></div>
     </div>
 
     <script>
@@ -207,7 +219,7 @@
             videoContainerDesk.classList.add('fade-out');
             setTimeout(() => {
                 videoContainerDesk.style.display = 'none';
-            }, 500); // Wait for the fade-out animation to finish
+            }, 1000); // Wait for the fade-out animation to finish
         });
 
         const videoMob = document.getElementById('introVideoMob');
@@ -217,7 +229,7 @@
             videoContainerMob.classList.add('fade-out');
             setTimeout(() => {
                 videoContainerMob.style.display = 'none';
-            }, 500); // Wait for the fade-out animation to finish
+            }, 1000); // Wait for the fade-out animation to finish
         });
     </script>
 </body>