-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
193 lines (188 loc) · 11.2 KB
/
index.html
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
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Choose Your Best Player</title>
<!-- favicon -->
<link rel="icon" type="image/x-icon" href="/images/icons8-soccer-ball-48.png">
<!-- fonts link -->
<link href='https://fonts.googleapis.com/css?family=Berkshire Swash' rel='stylesheet'>
<!-- external css -->
<link rel="stylesheet" href="style.css">
<!-- tailwind cdn -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- daisyUI cdn -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@2.24.0/dist/full.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header class="bg-black">
<section class="grid grid-cols-4 gap-4 items-center">
<div>
<img class="hidden md:block" src="images/Group 12.png" alt="">
</div>
<div class="col-span-2 content-center">
<div class="flex flex-col items-end">
<h1 class="text-2xl sm:text-4xl lg:text-7xl text-orange-600 fonts pr-12">Choose Your Best Five</h1>
<img src="images/Line Marker.png" alt="">
</div>
<p class="text-white w-3/4 mx-auto text-center">Quickly create your football team, plan for your favorite team, football tactic board - Arrange the position of the
player and make a football tactic board.</p>
</div>
<div class="flex flex-col justify-between items-end">
<img class="w-2/4 hidden md:block" src="images/Card-psg.png" alt="">
<img class="w-1/4" src="images/ball.png" alt="">
</div>
</section>
</header>
<main>
<section class="w-3/4 mx-auto pt-12 pb-12">
<div class="grid grid-cols-1 sm:grid-cols-4 gap-6">
<div class="col-span-3 text-white">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<!-- card-1 -->
<div class="card card-compact bg-black shadow-xl">
<figure><img class="w-full" src="images/Neymar.png" alt="Shoes" /></figure>
<div class="card-body text-center">
<h2 class="text-xl font-extrabold">Neymar Jr</h2>
<p class="text-gray-500 ">74 Goals - 52 Assist</p>
<div class="card-actions justify-center">
<button class="btn bg-cyan-600 px-24 select-btn">Select</button>
</div>
</div>
</div>
<!-- card-2 -->
<div class="card card-compact bg-black shadow-xl">
<figure><img class="w-full" src="images/Messi.png" alt="Shoes" /></figure>
<div class="card-body text-center">
<h2 class="text-xl font-extrabold">Lionel Messi</h2>
<p class="text-gray-500 ">86 Goals - 49 Assist</p>
<div class="card-actions justify-center">
<button class="btn bg-cyan-600 px-24 select-btn">Select</button>
</div>
</div>
</div>
<!-- card-3 -->
<div class="card card-compact bg-black shadow-xl">
<figure><img class="w-full" src="images/Vítor Machado.png" alt="Shoes" /></figure>
<div class="card-body text-center">
<h2 class="text-xl font-extrabold">Vítor Machado</h2>
<p class="text-gray-500 ">36 Goals - 22 Assist</p>
<div class="card-actions justify-center">
<button class="btn bg-cyan-600 px-24 select-btn">Select</button>
</div>
</div>
</div>
<!-- card-4 -->
<div class="card card-compact bg-black shadow-xl">
<figure><img class="w-full" src="images/CristianoRonaldo.jpg" alt="Shoes" /></figure>
<div class="card-body text-center">
<h2 class="text-xl font-extrabold">Crisitano Ronaldo</h2>
<p class="text-gray-500 ">117 Goals - 41 Assist</p>
<div class="card-actions justify-center">
<button class="btn bg-cyan-600 px-24 select-btn">Select</button>
</div>
</div>
</div>
<!-- card-5 -->
<div class="card card-compact bg-black shadow-xl">
<figure><img class="w-full" src="images/mohammad-salah264x204.jpg" alt="Shoes" /></figure>
<div class="card-body text-center">
<h2 class="text-xl font-extrabold">Mohammad Salah</h2>
<p class="text-gray-500 ">45 Goals - 21 Assist</p>
<div class="card-actions justify-center">
<button class="btn bg-cyan-600 px-24 select-btn">Select</button>
</div>
</div>
</div>
<!-- card-6 -->
<div class="card card-compact bg-black shadow-xl">
<figure><img class="w-full" src="images/coutinho264x204.jpg" alt="Shoes" /></figure>
<div class="card-body text-center">
<h2 class="text-xl font-extrabold">Coutinho</h2>
<p class="text-gray-500 ">42 Goals - 33 Assist</p>
<div class="card-actions justify-center">
<button class="btn bg-cyan-600 px-24 select-btn">Select</button>
</div>
</div>
</div>
<!-- card-7 -->
<div class="card card-compact bg-black shadow-xl">
<figure><img class="w-full" src="images/Karim-Benzema.jpg" alt="Shoes" /></figure>
<div class="card-body text-center">
<h2 class="text-xl font-extrabold">Karim Benzema</h2>
<p class="text-gray-500 ">67 Goals - 53 Assist</p>
<div class="card-actions justify-center">
<button class="btn bg-cyan-600 px-24 select-btn">Select</button>
</div>
</div>
</div>
<!-- card-8 -->
<div class="card card-compact bg-black shadow-xl">
<figure><img class="w-full" src="images/Miroslav-Klose264x204.jpg" alt="Shoes" /></figure>
<div class="card-body text-center">
<h2 class="text-xl font-extrabold">Miroslav Klose</h2>
<p class="text-gray-500 ">71 Goals - 30 Assist</p>
<div class="card-actions justify-center">
<button class="btn bg-cyan-600 px-24 select-btn">Select</button>
</div>
</div>
</div>
<!-- card-9 -->
<div class="card card-compact bg-black shadow-xl">
<figure><img class="w-full" src="images/KylianMbapp264x204.jpg" alt="Shoes" /></figure>
<div class="card-body text-center">
<h2 class="text-xl font-extrabold">Kylian Mbappe</h2>
<p class="text-gray-500 ">57 Goals - 24 Assist</p>
<div class="card-actions justify-center">
<button class="btn bg-cyan-600 px-24 select-btn">Select</button>
</div>
</div>
</div>
</div>
</div>
<div>
<!-- selected-V -->
<div class="card w-full mx-auto lg:h-96 bg-black text-primary-content mb-6">
<div class="card-body">
<h3 class="text-2xl text-center font-semibold">Selected-V</h3>
<img class="w-3/4 mx-auto mb-4" src="images/Ureg-Ureg Marker.png" alt="">
<div id="selected-player">
<!-- selected player added here -->
</div>
</div>
</div>
<!-- budget -->
<div class="card w-full mx-auto bg-black text-primary-content">
<div class="card-body">
<h3 class="text-2xl text-center font-semibold">Budget</h3>
<img class="w-3/4 mx-auto mb-4" src="images/Ureg-Ureg Marker.png" alt="">
<div>
<p class="mb-4 flex justify-between">Per Player: <input id="player-cost" class="w-2/4 bg-black border ml-2 px-2 rounded" type="text"></p>
<button id="player-cost-btn" class="btn bg-cyan-600 px-10 text-center ml-4 mb-6">Calculate</button>
<p>Player Expenses: $<span id="total-player-cost">0</span></p>
<p class="my-4 flex justify-between">Manager: <input id="manager-cost" class="w-2/4 bg-black border ml-2 px-2 rounded" type="text"></p>
<p class="my-4 flex justify-between">Coach: <input id="coach-cost" class="w-2/4 bg-black border ml-2 px-2 rounded" type="text"></p>
<button id="total-cost-btn" class="btn bg-cyan-600 px-10 text-center ml-4 mb-6">Calculate</button>
<div class="flex">
<p>Total</p>
<p class="text-orange-600">$<span id="total-cost" >0</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="">
<hr class="border-gray-400">
<div class="text-center py-12">
<p class="text-white text-center">Copyright © 2022 - All right reserved</p>
</div>
</footer>
<script src="js/display.js"></script>
<script src="js/calculate.js"></script>
</body>
</html>