-
Notifications
You must be signed in to change notification settings - Fork 0
/
Index.html
176 lines (163 loc) · 9.63 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
<!DOCTYPE html>
<html lang="en" class="bg-white">
<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">
<!-- font awesome icon CDN -->
<script src="https://kit.fontawesome.com/a5ec7145ca.js" crossorigin="anonymous"></script>
<!-- Google Font Link -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Source+Sans+Pro&display=swap" rel="stylesheet">
<!-- Tailwind Css CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- DaisyUI CDN -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@2.20.0/dist/full.css" rel="stylesheet" type="text/css" />
<!-- Customizing Tailwind Css configuration -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#000000',
secondary:'#151515',
"base-100" : "#FFFFFF"
}
}
}
}
</script>
<!-- Google Font css -->
<style>
body {
font-family: 'Poppins', sans-serif;
}
</style>
<link rel="stylesheet" href="style.css">
<title>Soccer League</title>
</head>
<!-- body starts here -->
<body class="bg-secondary text-white">
<!-- header section -->
<div class="hero h-fit bg-primary" style="background-image: url(Images/Final_cover.png);">
<div class=""></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md py-28">
<h1 class="mb-5 text-5xl font-bold text-orange-600">Soccer League</h1>
<p class="mb-5">The United Soccer League (USL) is the largest and fastest-growing professional soccer organization in North America.</p>
</div>
</div>
</div>
<!-- Main Section Starts Here -->
<main class="w-11/12 lg:w-10/12 mx-auto">
<!-- Course Section -->
<section class=" pt-14">
<div class=" sm:flex block ">
<!-- Player Card Container -->
<div class="grid xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-10 my-5 lg:w-75 mx-auto">
<div class="card w-72 card-compact bg-base-100 shadow-xl rounded">
<img class="w-72 h-72 object-cover" src="Images/images.jpg" alt="Shoes" />
<div class="card-body bg-primary">
<h2 class="name text-2xl text-white text-center">Lionel Messi</h2>
<p class="mx-auto"><span class="mx-3">36 Goals</span> . <span class="mx-3">120 Assist</span></p>
<button class="select-button py-4 btn rounded-none bg-blue-900 focus:bg-blue-800 hover:bg-blue-800 ">Select</button>
</div>
</div>
<div class="card w-72 card-compact bg-base-100 shadow-xl rounded">
<img class="w-72 h-72 object-cover" src="Images/Cristiano_Ronaldo_2018.jpg"
alt="Shoes" />
<div class="card-body bg-primary">
<h2 class="name text-2xl text-white text-center">Cristiano Ronaldo</h2>
<p class="mx-auto"><span class="mx-3">36 Goals</span> . <span class="mx-3">120 Assist</span></p>
<button class="select-button py-4 btn rounded-none bg-blue-900 focus:bg-blue-800 hover:bg-blue-800">Select</button>
</div>
</div>
<div class="card w-72 card-compact bg-base-100 shadow-xl rounded">
<img class="w-72 h-72 object-cover" src="Images/Harry Kane.jpg" alt="Shoes" />
<div class="card-body bg-primary">
<h2 class="name text-2xl text-white text-center">Harry Cane</h2>
<p class="mx-auto"><span class="mx-3">36 Goals</span> . <span class="mx-3">120 Assist</span></p>
<button class="select-button py-4 btn rounded-none bg-blue-900 focus:bg-blue-800 hover:bg-blue-800">Select</button>
</div>
</div>
<div class="card w-72 card-compact bg-base-100 shadow-xl rounded">
<img class="w-72 h-72 object-cover" src="Images/Mohammad Salah.jpg" alt="Shoes" />
<div class="card-body bg-primary">
<h2 class="name text-2xl text-white text-center">Mohammad Salah</h2>
<p class="mx-auto"><span class="mx-3">36 Goals</span> . <span class="mx-3">120 Assist</span></p>
<button class="select-button py-4 btn rounded-none bg-blue-900 focus:bg-blue-800 hover:bg-blue-800">Select</button>
</div>
</div>
<div class="card w-72 card-compact bg-base-100 shadow-xl rounded">
<img class="w-72 h-72 object-cover" src="Images/Neymar_PSG.jpg" alt="Shoes" />
<div class="card-body bg-primary">
<h2 class="name text-2xl text-white text-center">Neymar</h2>
<p class="mx-auto"><span class="mx-3">36 Goals</span> . <span class="mx-3">120 Assist</span></p>
<button class="select-button py-4 btn rounded-none bg-blue-900 focus:bg-blue-800 hover:bg-blue-800">Select</button>
</div>
</div>
<div class="card w-72 card-compact bg-base-100 shadow-xl rounded">
<img class="w-72 h-72 object-cover" src="Images/Robert Lewandowski.jpg" alt="Shoes" />
<div class="card-body bg-primary">
<h2 class="name text-2xl text-white text-center">Robert Lewandowski</h2>
<p class="mx-auto"><span class="mx-3">36 Goals</span> . <span class="mx-3">120 Assist</span></p>
<button class="select-button py-4 btn rounded-none bg-blue-900 focus:bg-blue-800 hover:bg-blue-800">Select</button>
</div>
</div>
</div>
<!-- Cart -->
<div class="lg:w-25">
<!-- Selection Part -->
<div class="select-5 bg-primary p-5 w-72 my-5">
<h1 class="text-2xl text-orange-600">Selected-V</h1>
<ol class="show-names list-decimal p-5">
</ol>
</div>
<!-- Calculation Part -->
<div class="select-5 bg-primary p-5 w-72 my-5">
<h1 class="text-2xl text-center text-orange-600">Budget</h1>
<div class="flex my-5 justify-center items-center">
<h1 class="w-1/2">Per Player</h1>
<input id="per-player" value="0" class="w-1/2 p-2 border-2 bg-primary focus:outline-none" type="
number">
</div>
<button id="calculate" class="py-4 btn rounded-none bg-blue-900 focus:bg-blue-900 hover:bg-blue-800 w-full">Calculate</button>
<div class="flex my-5 justify-center items-center">
<h1 class="w-1/2">Player Expenses</h1>
<p class="w-1/2">$ <span id="player-expences">0</span> </p>
</div>
<div class="flex my-5 justify-center items-center">
<h1 class="w-1/2">Manager</h1>
<input id="manager-cost" value="0" class="w-1/2 p-2 border-2 bg-primary focus:outline-none" type="
number">
</div>
<div class="flex my-5 justify-center items-center">
<h1 class="w-1/2">Coach</h1>
<input id="coach-cost" value="0" class="w-1/2 p-2 border-2 bg-primary focus:outline-none" type="
number">
</div>
<button id="calculate-total" class="py-4 btn rounded-none bg-blue-900 focus:bg-blue-900 hover:bg-blue-800 w-full ">Calculate Total</button>
<div class="flex my-5 justify-center items-center">
<h1 class="w-1/2">Total</h1>
<p class="w-1/2 text-orange-600">$ <span id="total">0</span></p>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer Section -->
<footer class=" text-center bg-black py-10 ">
<h1 class="text-white text-3xl my-3 text-orange-600">Soccer league</h1>
<p>Copyright @ 2022 All Rights Reserved.</p>
<div class="social-icon my-5 text-white ">
<a class="mx-2 text-2xl hover:text-blue-900 focus:text-blue-900 focus:outline-none" href="https://www.facebook.com"><i class="fa-brands fa-facebook"></i></a>
<a class="mx-2 text-2xl hover:text-blue-900 focus:text-blue-900 focus:outline-none" href="https://www.instagram.com"><i class="fa-brands fa-instagram"></i></a>
<a class="mx-2 text-2xl hover:text-blue-900 focus:text-blue-900 focus:outline-none" href="https://www.twitter.com"><i class="fa-brands fa-twitter"></i></a>
</div>
</footer>
<!-- Javascript File -->
<script src="js/script.js"></script>
</body>
</html>