georgebrata · annuaicoder · Sep 1, 2024 · Sep 2, 2024 · Sep 2, 2024 · Sep 2, 2024
diff --git a/101-dashing-Ecommerce/index.html b/101-dashing-Ecommerce/index.html
@@ -0,0 +1,151 @@
+
+<!DOCTYPE html>
+<html lang="en">
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <!-- Character encoding -->
+        <meta charset="UTF-8">
+
+        <!-- Viewport settings for responsive design -->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <!-- Title of the webpage -->
+        <title>Cool E-commerce Website - Shop for the Latest Products</title>
+
+        <!-- Meta description for search engines -->
+        <meta name="description" content="CoolShop is your one-stop shop for all the latest products, offering amazing deals and excellent customer service. Shop now and get fast delivery!">
+
+        <!-- Meta keywords for search engines -->
+        <meta name="keywords" content="e-commerce, shopping, cool products, online store, fashion, gadgets, electronics">
+
+        <!-- Author information -->
+        <meta name="author" content="Your Name">
+
+        <!-- Open Graph tags for social media sharing -->
+        <meta property="og:title" content="CoolShop - The Best Products at the Best Prices">
+        <meta property="og:description" content="Discover amazing products at CoolShop. Shop now and get great deals!">
+        <meta property="og:image" content="https://yourwebsite.com/images/hero-bg.jpg">
+        <meta property="og:url" content="https://yourwebsite.com">
+        <meta property="og:type" content="website">
+
+        <!-- Twitter Card data for social media sharing -->
+        <meta name="twitter:card" content="summary_large_image">
+        <meta name="twitter:title" content="CoolShop - Best Products Online">
+        <meta name="twitter:description" content="Check out CoolShop's awesome product range and enjoy fast delivery.">
+        <meta name="twitter:image" content="https://yourwebsite.com/images/hero-bg.jpg">
+
+        <!-- Favicon -->
+        <link rel="icon" href="https://yourwebsite.com/favicon.ico" type="image/x-icon">
+
+        <!-- CSS stylesheets -->
+        <link rel="stylesheet" href="styles/reset.css">
+        <link rel="stylesheet" href="styles/grid.css">
+        <link rel="stylesheet" href="styles/header.css">
+        <link rel="stylesheet" href="styles/hero.css">
+        <link rel="stylesheet" href="styles/products.css">
+        <link rel="stylesheet" href="styles/testimonials.css">
+        <link rel="stylesheet" href="styles/newsletter.css">
+        <link rel="stylesheet" href="styles/footer.css">
+        <link rel="stylesheet" href="styles/responsive.css">
+        <link rel="stylesheet" href="styles/animations.css">
+
+        <!-- Bootstrap CSS -->
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+
+        <!-- Scripts -->
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+        <script src="scripts/slider.js" async></script>
+        <script src="scripts/navbar.js"></script>
+        <script src="scripts/main.js"></script>
+        <script src="scripts/year.js"></script>
+    </head>
+
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="logo">CoolShop</div>
+            <nav class="navbar">
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#">Shop</a></li>
+                    <li><a href="#">About</a></li>
+                    <li><a href="#">Contact</a></li>
+                </ul>
+            </nav>
+            <div class="cart">
+                <a href="#">Cart (0)</a>
+            </div>
+        </div>
+    </header>
+
+    <section class="hero">
+        <div class="container">
+            <h1>Welcome to CoolShop</h1>
+            <p>Your one-stop shop for all things cool!</p>
+            <a href="#" class="btn">Shop Now</a>
+        </div>
+    </section>
+
+    <section class="products">
+        <div class="container">
+            <h2>Featured Products</h2>
+            <div class="product-grid">
+                <div class="product-card">
+                    <img src="https://placehold.co/600x400/EEE/31343C" alt="Product 1">
+                    <h3>Product 1</h3>
+                    <p>$19.99</p>
+                </div>
+                <div class="product-card">
+                    <img src="https://placehold.co/600x400/EEE/31343C" alt="Product 2">
+                    <h3>Product 2</h3>
+                    <p>$29.99</p>
+                </div>
+                <div class="product-card">
+                    <img src="https://placehold.co/600x400/EEE/31343C" alt="Product 3">
+                    <h3>Product 3</h3>
+                    <p>$39.99</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="testimonials">
+        <div class="container">
+            <h2>What Our Customers Say</h2>
+            <div class="testimonial-slider">
+                <div class="testimonial">
+                    <p>"This is the best shop ever!"</p>
+                    <h3>- Happy Customer</h3>
+                </div>
+                <div class="testimonial">
+                    <p>"Amazing products and great service."</p>
+                    <h3>- Satisfied Client</h3>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <h1 align="center">Contact Us!</h1>
+    <hr/>
+
+    <section class="newsletter">
+        <div class="container">
+            <h2>Subscribe to our Newsletter</h2>
+            <form action="https://formsubmit.co/your-email@example.com" method="POST">
+                <input type="email" name="email" placeholder="Enter your email" required>
+                <input type="hidden" name="_next" value="https://yourwebsite.com/thank-you">
+                <button type="submit">Subscribe</button>
+            </form>
+        </div>
+    </section>
+
+
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; <span id="year"></span> CoolShop. All rights reserved. Work And Design By Your Name.</p>
+        </div>
+    </footer>
+
+</body>
+</html>
diff --git a/101-dashing-Ecommerce/scripts/main.js b/101-dashing-Ecommerce/scripts/main.js
@@ -0,0 +1,4 @@
+/* main.js */
+document.addEventListener("DOMContentLoaded", () => {
+    console.log("Cool E-commerce Website Loaded!");
+});
diff --git a/101-dashing-Ecommerce/scripts/navbar.js b/101-dashing-Ecommerce/scripts/navbar.js
@@ -0,0 +1,9 @@
+/* navbar.js */
+document.addEventListener("DOMContentLoaded", () => {
+    const navbarToggle = document.querySelector(".navbar-toggle");
+
+    navbarToggle.addEventListener("click", () => {
+        const navbarMenu = document.querySelector(".navbar ul");
+        navbarMenu.classList.toggle("show");
+    });
+});
diff --git a/101-dashing-Ecommerce/scripts/slider.js b/101-dashing-Ecommerce/scripts/slider.js
@@ -0,0 +1,18 @@
+/* slider.js */
+document.addEventListener("DOMContentLoaded", () => {
+    const testimonials = document.querySelectorAll(".testimonial");
+    let currentIndex = 0;
+
+    function showTestimonial(index) {
+        testimonials.forEach((testimonial, i) => {
+            testimonial.style.display = i === index ? "block" : "none";
+        });
+    }
+
+    showTestimonial(currentIndex);
+
+    setInterval(() => {
+        currentIndex = (currentIndex + 1) % testimonials.length;
+        showTestimonial(currentIndex);
+    }, 3000);
+});
diff --git a/101-dashing-Ecommerce/scripts/year.js b/101-dashing-Ecommerce/scripts/year.js
@@ -0,0 +1,6 @@
+// Set the current year automatically
+document.addEventListener('DOMContentLoaded', function() {
+    const yearElement = document.getElementById('year');
+    const currentYear = new Date().getFullYear();
+    yearElement.textContent = currentYear;
+});
diff --git a/101-dashing-Ecommerce/styles/animations.css b/101-dashing-Ecommerce/styles/animations.css
@@ -0,0 +1,15 @@
+/* animations.css */
+.hero h1 {
+    animation: fadeInDown 1s ease-in-out;
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translateY(-50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
diff --git a/101-dashing-Ecommerce/styles/footer.css b/101-dashing-Ecommerce/styles/footer.css
@@ -0,0 +1,12 @@
+/* footer.css */
+.footer {
+    background: #333;
+    color: #fff;
+    padding: 20px 0;
+    text-align: center;
+}
+
+.footer p {
+    margin: 0;
+    font-size: 14px;
+}
diff --git a/101-dashing-Ecommerce/styles/grid.css b/101-dashing-Ecommerce/styles/grid.css
@@ -0,0 +1,18 @@
+/* grid.css */
+.container {
+    width: 90%;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.product-grid {
+    display: flex;
+    gap: 20px;
+}
+
+.product-card {
+    flex: 1;
+    background: #f4f4f4;
+    padding: 20px;
+    text-align: center;
+}
diff --git a/101-dashing-Ecommerce/styles/header.css b/101-dashing-Ecommerce/styles/header.css
@@ -0,0 +1,30 @@
+/* header.css */
+.header {
+    background: #333;
+    color: #fff;
+    padding: 20px 0;
+}
+
+.logo {
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.navbar ul {
+    display: flex;
+    list-style: none;
+}
+
+.navbar ul li {
+    margin-left: 20px;
+}
+
+.navbar ul li a {
+    color: #fff;
+    text-decoration: none;
+}
+
+.cart {
+    margin-left: auto;
+    color: #fff;
+}
diff --git a/101-dashing-Ecommerce/styles/hero.css b/101-dashing-Ecommerce/styles/hero.css
@@ -0,0 +1,38 @@
+/* hero.css */
+
+:root {
+    --background-image: url('hero-bg.jpg');
+    --text-color: black;
+    --padding-y: 100px;
+    --h1-font-size: 48px;
+    --p-font-size: 24px;
+    --btn-bg-color: #ff6f61;
+    --btn-text-color: #fff;
+    --btn-padding: 10px 20px;
+    --btn-font-size: 18px;
+}
+
+.hero {
+    background: var(--background-image) no-repeat center center/cover;
+    color: var(--text-color);
+    padding: var(--padding-y) 0;
+    text-align: center;
+}
+
+.hero h1 {
+    font-size: var(--h1-font-size);
+    margin-bottom: 20px;
+}
+
+.hero p {
+    font-size: var(--p-font-size);
+    margin-bottom: 40px;
+}
+
+.hero .btn {
+    padding: var(--btn-padding);
+    background: var(--btn-bg-color);
+    color: var(--btn-text-color);
+    text-decoration: none;
+    font-size: var(--btn-font-size);
+}
diff --git a/101-dashing-Ecommerce/styles/newsletter.css b/101-dashing-Ecommerce/styles/newsletter.css
@@ -0,0 +1,35 @@
+/* newsletter.css */
+.newsletter {
+    background: #ff6f61;
+    color: #fff;
+    padding: 40px 0;
+    text-align: center;
+}
+
+.newsletter h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+}
+
+.newsletter form {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+
+.newsletter input[type="email"] {
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+.newsletter button {
+    padding: 10px 20px;
+    background: #333;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+}
diff --git a/101-dashing-Ecommerce/styles/products.css b/101-dashing-Ecommerce/styles/products.css
@@ -0,0 +1,21 @@
+/* products.css */
+.products h2 {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.product-card img {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 20px;
+}
+
+.product-card h3 {
+    font-size: 20px;
+    margin-bottom: 10px;
+}
+
+.product-card p {
+    font-size: 18px;
+    color: #ff6f61;
+}
diff --git a/101-dashing-Ecommerce/styles/reset.css b/101-dashing-Ecommerce/styles/reset.css
@@ -0,0 +1,10 @@
+/* reset.css */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
+}
diff --git a/101-dashing-Ecommerce/styles/responsive.css b/101-dashing-Ecommerce/styles/responsive.css
@@ -0,0 +1,14 @@
+/* responsive.css */
+@media (max-width: 768px) {
+    .navbar ul {
+        flex-direction: column;
+    }
+
+    .product-grid {
+        flex-direction: column;
+    }
+
+    .testimonial-slider {
+        flex-direction: column;
+    }
+}