michelle-portfolio1/index.html at main · Migreen06/michelle-portfolio1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Green Scorpion Web Development</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* Custom Scorpion Glow Gradient */
        .bg-scorpion-gradient {
            background: radial-gradient(circle at top right, #064e3b, #022c22, #000000);
        }

        .nav-link {
            position: relative;
            transition: color 0.3s ease;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #10b981;
            transition: width 0.3s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }
    </style>
</head>

<body class="bg-scorpion-gradient min-h-screen">

    <header class="border-b border-emerald-900/50 backdrop-blur-md sticky top-0 z-50">
        <div class="group">
            <div class="w-10">
                <span class="text-black">GS</span>
            </div>

            <h1> Green Scorpion
                <span class="web">Web Development</span>
            </h1>
        </div>
        <nav>
            <ul>
                <li><a href="#about" class="nav-link hover:text-emerald-400">About Us</a></li>
                <li><a href="#services" class="nav-link hover:text-emerald-400">Services</a></li>
                <li><a href="#portfolio" class="nav-link hover:text-emerald-400">Portfolio</a></li>
            </ul>

        </nav>
    </header>

    <main class="py-24">
        <h2
            class="text-5xl md:text-7xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-b from-white to-emerald-500">
            Precision Coding. <br />Stinging Results.
        </h2>
        <p class="text-gray-400 max-w-2xl mx-auto text-lg mb-10">
            We build high-performance digital ecosystems for global brands using a code-first philosophy.
        </p>
        <a href="#portfolio"
            class="bg-emerald-600 hover:bg-emerald-500 text-white px-8 py-3 rounded-full font-bold transition-all shadow-lg hover:shadow-emerald-500/20">
            View Our Work
        </a>
    </main>

</body>

</html>