nmaster23.github.io/fantasy.html at main · NMaster23/nmaster23.github.io · 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
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fantasy Realm</title>
    <style>
        body {
            font-family: 'Georgia', serif;
            background-image: url('https://images.unsplash.com/photo-1517400531-2996d99cd5c4?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); /* Enchanted forest or magical landscape */
            background-size: cover;
            background-attachment: fixed;
            color: #e0f2f7; /* Light blue-grey */
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
        }
        .container {
            width: 80%;
            max-width: 1200px;
            background-color: rgba(25, 25, 112, 0.7); /* Semi-transparent midnight blue */
            border: 3px solid #4a90e2; /* Blue border */
            box-shadow: 0 0 30px rgba(74, 144, 226, 0.9); /* Strong blue glow */
            padding: 40px;
            margin: 30px 0;
            border-radius: 20px;
            text-align: center;
        }
        h1, h2 {
            color: #87cefa; /* Light sky blue */
            text-transform: uppercase;
            letter-spacing: 5px;
            margin-bottom: 20px;
            text-shadow: 0 0 12px rgba(135, 206, 250, 1);
        }
        p {
            line-height: 1.6;
            font-size: 1.1em;
            margin-bottom: 15px;
        }
        nav {
            background-color: rgba(72, 61, 139, 0.9); /* Semi-transparent dark slate blue */
            padding: 18px 0;
            width: 100%;
            text-align: center;
            border-bottom: 2px solid #6a5acd; /* Slate blue */
            box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
        }
        nav a {
            color: #e0f2f7; /* Light blue-grey */
            text-decoration: none;
            margin: 0 25px;
            font-size: 1.4em;
            font-weight: bold;
            padding: 10px 18px;
            border-radius: 10px;
            transition: background-color 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
        }
        nav a:hover {
            background-color: #87cefa; /* Light sky blue */
            color: #25256e; /* Darker blue */
            text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
        }
    </style>
</head>
<body>
    <nav>
        <a href="index.html">Sci-Fi Hub</a>
        <a href="steampunk.html">Steampunk Citadel</a>
        <a href="pirate.html">Pirate Cove</a>
        <a href="fantasy.html">Fantasy Realm</a>
    </nav>
    <div class="container">
        <h1>Welcome to the Fantasy Realm</h1>
        <p>Enter a world of ancient magic, mythical creatures, and epic quests. Here, dragons soar, wizards weave potent spells, and brave heroes embark on journeys to save enchanted kingdoms from encroaching darkness.</p>
        <h2>The Echoes of Magic</h2>
        <p>From whispering forests to majestic castles, and from hidden elven cities to the fiery depths of volcanic lairs, the Fantasy Realm is alive with tales of courage, sacrifice, and destiny. Discover artifacts of immense power and confront formidable foes.</p>
        <p>Unravel prophecies, join noble orders, or forge your own path as a solitary adventurer. The boundaries of imagination are the only limits in this boundless world of wonder and peril!</p>
    </div>
</body>
</html>