practicesite/practicesite.html at main · woahizmee/practicesite · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Website</title>
    <!-- Tailwind CSS for modern styling -->
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
    </style>
</head>
<body class="bg-gray-100 font-['Inter'] text-gray-800">

    <!-- Website Banner/Header -->
    <nav class="bg-white p-4 shadow-md rounded-b-lg">
        <div class="container mx-auto flex items-center justify-between">
            <a href="#" class="text-2xl font-bold text-gray-900">My Website</a>

            <!-- Navigation Links -->
            <div class="flex space-x-6">
                <a href="#" class="text-gray-600 hover:text-blue-600 font-semibold transition-colors duration-200">Home</a>
                <a href="#" class="text-gray-600 hover:text-blue-600 font-semibold transition-colors duration-200">About</a>
                <a href="#" class="text-gray-600 hover:text-blue-600 font-semibold transition-colors duration-200">Resources</a>
            </div>
        </div>
    </nav>

    <!-- Main Content Section -->
    <main class="container mx-auto mt-8 p-6 bg-white rounded-lg shadow-md">
        <h1 class="text-4xl font-bold mb-4">Welcome to Our Site!</h1>
        <p class="text-gray-700 leading-relaxed">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </main>

</body>
</html>