Repository navigation
Expand file tree
/
Copy pathLuckkysk
More file actions
150 lines (150 loc) · 4.79 KB
/
Copy pathLuckkysk
File metadata and controls
150 lines (150 loc) · 4.79 KB
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>
Fantasy Game
</title>
<script src="https://cdn.tailwindcss.com">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"/>
</head>
<body class="bg-gray-900 text-white font-roboto">
<header class="bg-gray-800 p-4">
<div class="container mx-auto flex justify-between items-center">
<h1 class="text-3xl font-bold">
Fantasy Game
</h1>
<nav>
<ul class="flex space-x-4">
<li>
<a class="hover:text-gray-400" href="#">
Home
</a>
</li>
<li>
<a class="hover:text-gray-400" href="#">
About
</a>
</li>
<li>
<a class="hover:text-gray-400" href="#">
Features
</a>
</li>
<li>
<a class="hover:text-gray-400" href="#">
Contact
</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="container mx-auto p-4">
<section class="text-center my-8">
<h2 class="text-4xl font-bold mb-4">
Welcome to the Fantasy World
</h2>
<p class="text-lg mb-8">
Embark on an epic adventure in a world full of magic and mystery.
</p>
<img alt="A detailed fantasy landscape with mountains, forests, and a castle in the distance" class="mx-auto rounded-lg shadow-lg" src="https://placehold.co/800x400"/>
</section>
<section class="my-8">
<h3 class="text-3xl font-bold mb-4">
Characters
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-800 p-4 rounded-lg shadow-lg">
<img alt="A brave knight in shining armor with a sword and shield" class="w-full h-48 object-cover rounded-lg mb-4" src="https://placehold.co/300x300"/>
<h4 class="text-2xl font-bold mb-2">
Knight
</h4>
<p>
A valiant warrior with unmatched bravery and strength.
</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow-lg">
<img alt="A wise wizard with a long beard and a staff" class="w-full h-48 object-cover rounded-lg mb-4" src="https://placehold.co/300x300"/>
<h4 class="text-2xl font-bold mb-2">
Wizard
</h4>
<p>
A master of arcane arts with powerful spells at their disposal.
</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow-lg">
<img alt="A stealthy rogue with daggers and a hooded cloak" class="w-full h-48 object-cover rounded-lg mb-4" src="https://placehold.co/300x300"/>
<h4 class="text-2xl font-bold mb-2">
Rogue
</h4>
<p>
A cunning and agile character skilled in stealth and deception.
</p>
</div>
</div>
</section>
<section class="my-8">
<h3 class="text-3xl font-bold mb-4">
Latest News
</h3>
<div class="space-y-4">
<div class="bg-gray-800 p-4 rounded-lg shadow-lg flex items-center">
<img alt="A news icon representing the latest updates" class="w-24 h-24 object-cover rounded-lg mr-4" src="https://placehold.co/100x100"/>
<div>
<h4 class="text-2xl font-bold mb-2">
New Expansion Released
</h4>
<p>
Explore new lands and face new challenges in the latest expansion.
</p>
</div>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow-lg flex items-center">
<img alt="A news icon representing the latest updates" class="w-24 h-24 object-cover rounded-lg mr-4" src="https://placehold.co/100x100"/>
<div>
<h4 class="text-2xl font-bold mb-2">
Character Balancing Update
</h4>
<p>
We've made significant changes to character abilities for better balance.
</p>
</div>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow-lg flex items-center">
<img alt="A news icon representing the latest updates" class="w-24 h-24 object-cover rounded-lg mr-4" src="https://placehold.co/100x100"/>
<div>
<h4 class="text-2xl font-bold mb-2">
Community Event
</h4>
<p>
Join us for a special in-game event with exclusive rewards.
</p>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-gray-800 p-4 text-center">
<p>
© 2023 Fantasy Game. All rights reserved.
</p>
<div class="flex justify-center space-x-4 mt-2">
<a class="hover:text-gray-400" href="#">
<i class="fab fa-facebook-f">
</i>
</a>
<a class="hover:text-gray-400" href="#">
<i class="fab fa-twitter">
</i>
</a>
<a class="hover:text-gray-400" href="#">
<i class="fab fa-instagram">
</i>
</a>
</div>
</footer>
</body>
</html>