Repository navigation
Expand file tree
/
Copy pathAss oct.html
More file actions
184 lines (167 loc) · 10.6 KB
/
Copy pathAss oct.html
File metadata and controls
184 lines (167 loc) · 10.6 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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html>
<head>
<title>Ass oct</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 font-sans">
<header class="bg-gradient-to-r from-gray-800 to-gray-900 text-white py-12 shadow-lg">
<h1 class="text-5xl font-bold" x-data="{ hover: false }" @mouseenter="hover = true" @mouseleave="hover = false" :class="{ 'text-green-400': hover }">Cristiano Ronaldo</h1>
</header>
<div class="container mx-auto px-4 py-8 max-w-4xl">
<div class="space-y-8">
<section x-data="{ show: true }" class="bg-white rounded-lg shadow-md p-6 transition-all duration-300 hover:shadow-xl">
<h2 class="text-3xl font-bold mb-4 text-gray-800">Bio</h2>
<p class="text-lg text-gray-600 leading-relaxed">Cristiano Ronaldo dos Santos Aveiro known as CR7, is a Portuguese professional footballer who plays as a forward.</p>
<img src="image/5clubs.jpg" class="w-full h-auto rounded-lg mt-4 transition-transform duration-300 hover:scale-105" alt="Cristiano Ronaldo">
</section>
<section class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-3xl font-bold mb-4 text-gray-800">Stats</h2>
<table class="w-full">
<thead>
<tr class="bg-gradient-to-r from-yellow-400 to-yellow-500">
<th class="py-3 px-4 text-left text-white">Category</th>
<th class="py-3 px-4 text-left text-white">Value</th>
</tr>
</thead>
<tbody>
<tr class="border-b hover:bg-gray-50">
<td class="py-3 px-4">Goals</td>
<td class="py-3 px-4">755</td>
</tr>
<tr class="border-b hover:bg-gray-50">
<td class="py-3 px-4">Assist</td>
<td class="py-3 px-4">225</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="py-3 px-4">Trophies</td>
<td class="py-3 px-4">27</td>
</tr>
</tbody>
</table>
</section>
<section x-data="{ selected: null }" class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-3xl font-bold mb-4 text-gray-800">Career</h2>
<ul class="space-y-2">
<template x-for="(club, index) in [
'Sporting CP (2002-2003)',
'Manchester United (2003-2009)',
'Real Madrid (2009-2018)',
'Juventus (2018-2022)',
'Al Nassr (2022-present)'
]">
<li x-text="club" class="py-2 px-4 rounded hover:bg-gray-100 cursor-pointer transition-colors"
:class="{ 'bg-gray-100': selected === index }"
@click="selected = index"></li>
</template>
</ul>
</section>
<section class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-3xl font-bold mb-4 text-gray-800">Achievements</h2>
<ol class="list-decimal ml-6 space-y-2">
<li class="text-lg text-gray-700 hover:text-gray-900">5 Golden ball awards</li>
<li class="text-lg text-gray-700 hover:text-gray-900">4 UEFA Champions League titles</li>
<li class="text-lg text-gray-700 hover:text-gray-900">1 UEFA European Championship</li>
</ol>
</section>
<section class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-3xl font-bold mb-4 text-gray-800">Watch Highlights</h2>
<div class="aspect-w-16 aspect-h-9">
<iframe class="w-full h-[315px] rounded-lg" src="https://www.uefa.com"
title="Cristian Ronaldo Highlights"
frameborder="0" allowfullscreen></iframe>
</div>
</section>
<section class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-3xl font-bold mb-4 text-gray-800">Follow Cristiano Ronaldo</h2>
<div class="space-y-4">
<a href="https://www.twitter.com" target="_blank" class="block px-6 py-3 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition-colors text-center">Twitter</a>
<a href="https://www.instagram.com" target="_blank" class="block px-6 py-3 bg-pink-500 text-white rounded-lg hover:bg-pink-600 transition-colors text-center">Instagram</a>
<a href="https://m.facebook.com" target="_blank" class="block px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-center">Facebook</a>
</div>
</section>
<section class="bg-white rounded-lg shadow-md p-6 mt-8">
<form x-data="{
formData: {
fname: '',
lname: '',
email: '',
password: '',
confirmPassword: '',
address: '',
gender: '',
telephone: '',
certificate: 'None'
},
submitForm() {
console.log(this.formData);
}
}" @submit.prevent="submitForm" class="space-y-6">
<h2 class="text-3xl font-bold text-center text-gray-800">Employment Form</h2>
<div class="space-y-4">
<div class="flex flex-col">
<label class="text-gray-700 mb-2">First name:</label>
<input type="text" x-model="formData.fname" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="Calabar Mala" required>
</div>
<div class="flex flex-col">
<label class="text-gray-700 mb-2">Last name:</label>
<input type="text" x-model="formData.lname" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="Franck" required>
</div>
<div class="flex flex-col">
<label class="text-gray-700 mb-2">Email:</label>
<input type="email" x-model="formData.email" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="example@gmail.com" required>
</div>
<div class="flex flex-col">
<label class="text-gray-700 mb-2">Password:</label>
<input type="password" x-model="formData.password" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="Enter password" required>
</div>
<div class="flex flex-col">
<label class="text-gray-700 mb-2">Confirm password:</label>
<input type="password" x-model="formData.confirmPassword" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="Confirm password" required>
</div>
<div class="flex flex-col">
<label class="text-gray-700 mb-2">Address:</label>
<input type="text" x-model="formData.address" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="Bonaberi, Douala" required>
</div>
<div class="flex items-center space-x-4">
<label class="text-gray-700">Gender:</label>
<label class="inline-flex items-center">
<input type="radio" x-model="formData.gender" value="male" class="form-radio text-blue-500">
<span class="ml-2">Male</span>
</label>
<label class="inline-flex items-center">
<input type="radio" x-model="formData.gender" value="female" class="form-radio text-blue-500">
<span class="ml-2">Female</span>
</label>
<label class="inline-flex items-center">
<input type="radio" x-model="formData.gender" value="other" class="form-radio text-blue-500">
<span class="ml-2">Other</span>
</label>
</div>
<div class="flex flex-col">
<label class="text-gray-700 mb-2">Telephone:</label>
<input type="tel" x-model="formData.telephone" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="+237">
</div>
<div class="flex flex-col">
<label class="text-gray-700 mb-2">Highest Certificate:</label>
<select x-model="formData.certificate" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
<option>None</option>
<option>Common Entrance</option>
<option>Ordinary Level</option>
<option>Advanced Level</option>
<option>HND</option>
<option>Bachelors Degree</option>
<option>Masters Degree</option>
<option>Doctorate Degree</option>
<option>Professor</option>
</select>
</div>
</div>
<button type="submit" class="w-full bg-blue-500 text-white py-3 rounded-lg hover:bg-blue-600 transition-colors">Submit</button>
</form>
</section>
</div>
</div>
</body>
</html>