Merged origin/main into main

.well-known/pki-validation/317CB3E2BD805E2F90DC61E376CA9275.txt

@@ -0,0 +1 @@
+59D242C303E7E2EB23CAB4BB01ACE38CE196203CA59614994176B74598A90EAF comodoca.com 6740e2cf51d19

README.md

@@ -0,0 +1,42 @@
+# Fumez - Web Designs
+
+Welcome to Fumez - Web Designs! This project showcases a professional portfolio website, featuring services, testimonials, pricing packages, FAQs, and contact information. It is built with HTML, CSS, and JavaScript, optimized for smooth scrolling, responsive design, and modern web interactivity.
+
+## Table of Contents
+- [About](#about)
+- [Features](#features)
+- [Technologies](#technologies)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contact](#contact)
+
+## About
+Fumez - Web Designs is a web design portfolio for Arik, the founder. It aims to empower brands through beautifully crafted websites. The website provides visitors with information on available services, pricing, testimonials, and an easy way to get in touch.
+
+## Features
+- **Smooth Scrolling**: Navigates smoothly across different sections of the website.
+- **Responsive Design**: Optimized for mobile and desktop viewing.
+- **Dynamic Interactivity**: Includes features like a dynamic FAQ, contact form, and pricing options.
+- **Contact Form**: Simple form integration with Formspree for direct messages.
+- **SEO Optimization**: Basic SEO-friendly structure.
+
+## Technologies
+- **HTML5**: Markup structure.
+- **CSS3**: Styling and responsiveness.
+- **JavaScript**: Interactivity and smooth scrolling.
+- **Formspree**: For handling contact form submissions.
+
+## Installation
+1. Clone the repository: `git clone https://github.com/Fumez-DEV/fumez-web-designs.git`
+2. Open the project folder: `cd fumez-web-designs`
+3. Open `index.html` in a browser to view the website locally.
+
+## Usage
+- **View the website**: Navigate through the sections to explore services, testimonials, and contact options.
+- **Contact**: Use the contact form for inquiries, or connect via social links in the footer.
+
+## Contact
+For more information, feel free to reach out via email at arikmelku3@gmail.com or visit our Fiverr profile at [Fiverr](https://www.fiverr.com/fumezarik).
+
+---
+© 2024 Fumez - Web Designs. All Rights Reserved.

index.html

@@ -275,6 +275,7 @@ <h3>Select Language</h3>
     </div>
 </div>
 
+<<<<<<< HEAD
 <div class="whatsapp-bubble">
     <a href="https://wa.link/26imc5" target="_blank" aria-label="Chat with us on WhatsApp">
         <span class="cta-message">Click here to chat with us!</span>
@@ -284,6 +285,8 @@ <h3>Select Language</h3>
 
 <div id="transition-overlay"></div>
 
+=======
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
     <script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.10.0/dist/ffmpeg.min.js"></script>
     <script src="script.js"></script>    
 </body>

meta.json

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 {
     "projectName": "Fumez - Web Designs",
     "author": "Arik Melku",
@@ -9,4 +10,17 @@
         "linkedin": "https://www.linkedin.com/in/fumezam",
         "fiverr": "https://www.fiverr.com/fumezarik"
     }
+=======
+{
+    "projectName": "Fumez - Web Designs",
+    "author": "Arik Melku",
+    "description": "A portfolio of custom web design projects",
+    "version": "1.0.0",
+    "contactEmail": "arikmelku3@gmail.com",
+    "socialLinks": {
+        "instagram": "https://www.instagram.com/fumez.websites/",
+        "linkedin": "https://www.linkedin.com/in/fumezam",
+        "fiverr": "https://www.fiverr.com/fumezarik"
+    }
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
 }

style.css

@@ -89,15 +89,25 @@ header {
 /* Toggle Button Styling for Mobile */
 .toggle-button {
     display: none;
+<<<<<<< HEAD
     position: absolute;
     top: 15px;
     right: 20px;
+=======
+    position: fixed; /* Stick the button to a fixed position */
+    top: 15px; /* Position it near the top */
+    right: 20px; /* Align it to the right side */
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
     background: none;
     border: none;
     font-size: 2rem;
     color: #fff;
     cursor: pointer;
+<<<<<<< HEAD
     z-index: 1500;
+=======
+    z-index: 1500; /* Ensure it appears above other elements */
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
     transition: color 0.3s ease;
 }
 
@@ -140,7 +150,11 @@ nav ul li a.active {
 .nav-icon {
     width: 20px;
     height: 20px;
+<<<<<<< HEAD
     filter: invert(100%);
+=======
+    filter: invert(100%); /* Ensures SVG icon colors match the white text */
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
     transition: transform 0.3s;
 }
 
@@ -150,15 +164,28 @@ nav ul li a:hover .nav-icon {
 
 /* Navbar: Mobile Styling */
 @media (max-width: 768px) {
+    /* Toggle Button */
     .toggle-button {
         display: block;
+        background: none;
+        border: none;
+        font-size: 2rem;
+        color: #fff;
+        cursor: pointer;
+        z-index: 1500;
+        transition: color 0.3s ease;
     }
 
+    /* Navigation Menu */
     nav ul {
-        display: none;
+        display: flex;
         flex-direction: column;
         align-items: flex-start;
+<<<<<<< HEAD
         background-color: rgba(51, 51, 51, 0.95);
+=======
+        background-color: rgba(51, 51, 51, 0.95); /* Semi-transparent background */
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
         position: fixed;
         top: 0;
         right: 0;
@@ -175,12 +202,19 @@ nav ul li a:hover .nav-icon {
     }
 
     nav ul.show {
+<<<<<<< HEAD
         display: flex;
+=======
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
         visibility: visible;
         opacity: 1;
         transform: translateX(0);
     }
 
+<<<<<<< HEAD
+=======
+    /* Navigation Links */
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
     nav ul li {
         width: 100%;
         margin: 20px 0;
@@ -204,6 +238,10 @@ nav ul li a:hover .nav-icon {
         color: #f4f4f4;
     }
 
+<<<<<<< HEAD
+=======
+    /* Icon Styling */
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
     .nav-icon {
         width: 24px;
         height: 24px;
@@ -218,6 +256,14 @@ nav ul li a:hover .nav-icon {
 }
 
 
+<<<<<<< HEAD
+=======
+
+/* Smooth Scroll on Link Click */
+nav ul li a {
+    scroll-behavior: smooth;
+}
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
 
 /* Section Styling */
 section {
@@ -265,6 +311,7 @@ section.visible {
     z-index: 1;
 }
 
+<<<<<<< HEAD
 /* Hero Section Styling */
 #home {
     background-image: url('./images/hero.png'); /* Hero image */
@@ -296,6 +343,8 @@ section.visible {
     z-index: 1;
 }
 
+=======
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
 /* Ensure content appears above overlay */
 #home h1,
 #home p,
@@ -320,11 +369,18 @@ section.visible {
     font-size: 1.8rem; /* Slightly larger font for readability */
     margin-bottom: 30px;
     max-width: 800px;
+<<<<<<< HEAD
     text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6); /* Improved shadow for visibility */
     line-height: 1.7; /* Increased line height for better readability */
     font-family: 'Roboto', sans-serif; /* Complementary font for subheading */
     color: #dddddd; /* Slightly lighter color to distinguish from the heading */
     animation: fadeInUp 1s ease-out forwards; /* Smooth entrance animation */
+=======
+    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* Subtle text shadow */
+    line-height: 1.6;
+    font-family: 'Roboto', sans-serif;
+    animation: fadeInUp 1s ease-out forwards; /* Add entrance animation */
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
 }
 
 /* Call-to-Action (CTA) Button Styling */
@@ -336,14 +392,22 @@ section.visible {
     text-decoration: none;
     border-radius: 5px;
     transition: transform 0.3s ease, background-color 0.3s ease;
+<<<<<<< HEAD
     box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3); /* Subtle shadow */
+=======
+    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3); /* Subtle shadow for focus */
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
     animation: fadeIn 1.5s ease-out forwards; /* Add entrance animation */
 }
 
 #home .cta-button:hover {
     background-color: #0056b3; /* Slightly darker color on hover */
     transform: scale(1.05); /* Slight scale effect */
+<<<<<<< HEAD
     box-shadow: 0 10px 20px rgba(0, 123, 255, 0.5); /* Prominent shadow on hover */
+=======
+    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.5); /* More prominent shadow on hover */
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
 }
 
 /* Keyframes for Fade-In Animation */
@@ -1152,6 +1216,7 @@ form.visible, #contact h2.visible, #contact p.visible {
     height: auto;
 }
 
+<<<<<<< HEAD
 /* WhatsApp Bubble Styling */
 .whatsapp-bubble {
     position: fixed;
@@ -1232,6 +1297,8 @@ form.visible, #contact h2.visible, #contact p.visible {
         left: 50px;
     }
 }
+=======
+>>>>>>> bd2259babb3889d15c1e355054c47e7e712de6ab
 
 /* Footer Styling */
 footer {