Untitled

avatar
unknown
plain_text
9 months ago
2.6 kB
9
Indexable
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="site-header">
        <div class="brand">
            <img src="7.jpg" alt="logo" class="brand-logo">
            <h1 class="brand-title">Microweber</h1>
        </div>

        <nav class="main-nav">
            <ul>
                <li><a href="#">My Website</a></li>
                <li><a href="#">Templates</a></li>
                <li><a href="#">Price</a></li>
                <li><a href="#">Solution</a></li>
                <li><a href="#">White Label</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </nav>

        <button class="btn primary-btn">LOGIN</button>
    </header>

    <main>
        <section class="hero">
            <div class="hero-info">
                <h1>MAKE YOUR <span id="type-text"></span> SITE IN MINUTES...</h1>
                <button class="btn primary-btn">Get Started</button>
            </div>

            <div class="hero-media">
                <img src="7.jpg" alt="Product showcase image">
            </div>
        </section>
    </main>

    <script>
        const words = ["E-COMMERCE", "PORTFOLIO", "BUSINESS", "DROPSHIPPING", "DIGITAL"];
        let wordIndex = 0;
        let charIndex = 0;
        let currentWord = "";
        let isDeleting = false;

        function typeEffect() {
            currentWord = words[wordIndex];

            if (!isDeleting) {
                // type forward
                document.getElementById("type-text").textContent = currentWord.substring(0, charIndex++);
            } else {
                // delete backward
                document.getElementById("type-text").textContent = currentWord.substring(0, charIndex--);
            }

            // if word is finished typing
            if (charIndex === currentWord.length + 1) {
                isDeleting = true; // start deleting
                setTimeout(typeEffect, 1000); // WAIT 1 second before deleting
                return;
            }

            // if done deleting word
            if (isDeleting && charIndex === 0) {
                isDeleting = false;
                wordIndex = (wordIndex + 1) % words.length; // next word
            }

            setTimeout(typeEffect, isDeleting ? 50 : 300); // slower typing, faster deleting
        }

        typeEffect();
    </script>
</body>
</html>
Editor is loading...
Leave a Comment