├── .gitignore
├── logo.png
├── .gitattributes
├── pattern.png
├── qatar-word.png
├── readme
    ├── header.png
    ├── groups-1.png
    ├── groups-2.png
    ├── matches-1.png
    ├── matches-2.png
    └── matches-3.png
├── readme.md
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yarob50/World-Cup-2022-Website/HEAD/logo.png


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/pattern.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yarob50/World-Cup-2022-Website/HEAD/pattern.png


--------------------------------------------------------------------------------
/qatar-word.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yarob50/World-Cup-2022-Website/HEAD/qatar-word.png


--------------------------------------------------------------------------------
/readme/header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yarob50/World-Cup-2022-Website/HEAD/readme/header.png


--------------------------------------------------------------------------------
/readme/groups-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yarob50/World-Cup-2022-Website/HEAD/readme/groups-1.png


--------------------------------------------------------------------------------
/readme/groups-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yarob50/World-Cup-2022-Website/HEAD/readme/groups-2.png


--------------------------------------------------------------------------------
/readme/matches-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yarob50/World-Cup-2022-Website/HEAD/readme/matches-1.png


--------------------------------------------------------------------------------
/readme/matches-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yarob50/World-Cup-2022-Website/HEAD/readme/matches-2.png


--------------------------------------------------------------------------------
/readme/matches-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Yarob50/World-Cup-2022-Website/HEAD/readme/matches-3.png


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # **موقع كأس العالم 2022**
 2 | ![alt text](./readme/header.png)
 3 | 
 4 | **هذا المشروع يحتوي على الأكواد الكاملة لبناء موقع كأس العالم من خلال استخدام:
 5 | html - css - javascript - bootstrap
 6 | و الهدف منه تعليمي حيث أنه تابع لدرس:**
 7 | 
 8 | **[(إنشاء موقع كأس العالم)](https://www.youtube.com/watch?v=i190vlA7gE0&t=6067s&ab_channel=%D8%A3%D9%83%D8%A7%D8%AF%D9%8A%D9%85%D9%8A%D8%A9%D8%AA%D8%B1%D9%85%D9%8A%D8%B2)** 
 9 | 
10 | 
11 | **في قناة**
12 | 
13 | **[(أكاديمية ترميز على اليوتيوب)](https://www.youtube.com/@user-py5qp1ez4y)** 
14 | 
15 | 
16 | # محتويات الموقع
17 | 
18 | ## المجموعات
19 | ![alt text](./readme/groups-1.png)
20 | 
21 | ![alt text](./readme/groups-2.png)
22 | 
23 | 
24 | 
25 | 
26 | ## المباريات
27 | ![alt text](./readme/matches-1.png)
28 | 
29 | ![alt text](./readme/matches-2.png)
30 | 
31 | ![alt text](./readme/matches-3.png)
32 | 
33 | ## *ملاحظة:*
34 | عند البدء باستخدام الـ API ستواجهك مشكلة الـ CORS و قد قمت بشرح ما هي و كيف يمكن تخطيها في فترة التطوير و ذلك عند الدقيقة: **1:39:50** 
35 | في 
36 | **[المقطع الأساسي](https://www.youtube.com/watch?v=i190vlA7gE0&t=6067s&ab_channel=%D8%A3%D9%83%D8%A7%D8%AF%D9%8A%D9%85%D9%8A%D8%A9%D8%AA%D8%B1%D9%85%D9%8A%D8%B2)**  


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | <head>
   4 |     <meta charset="UTF-8">
   5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
   6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7 |     <title>Document</title>
   8 | 
   9 |     <!-- LIBRARIES -->
  10 |         <!-- BOOTSTRAP -->        
  11 |         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
  12 |         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  13 |         <!--// BOOTSTRAP //-->  
  14 |         
  15 |         <!-- GOOGLE FONTS -->
  16 |         <link rel="preconnect" href="https://fonts.googleapis.com">
  17 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  18 |         <link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap" rel="stylesheet">
  19 |         <!--// GOOGLE FONTS //-->
  20 | 
  21 | 
  22 |         <style>
  23 |             body {
  24 |                 font-family: 'Almarai', sans-serif;
  25 |             }
  26 | 
  27 |             .bg-primary {
  28 |                 background: #811538 !important;
  29 |                 color: white;
  30 |             }
  31 | 
  32 |             .bg-secondary {
  33 |                 background: #5b0d25 !important;
  34 |                 color: white;
  35 |             }
  36 | 
  37 |             #header-background {
  38 |                 background-image: url("pattern.png");
  39 |             }
  40 | 
  41 |             #header {
  42 |                 clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);
  43 |                 border-bottom: solid 20px #5b0d25;
  44 |             }
  45 | 
  46 |             #logo-header {
  47 |                 position: absolute;
  48 |                 z-index: 999;
  49 |                 left: 100px;
  50 |                 top: 60px;
  51 |             }
  52 | 
  53 |             #logo-img {
  54 |                 height: 300px;
  55 |                 -webkit-filter: drop-shadow(5px 5px 30px #222);
  56 |                 filter: drop-shadow(5px 5px 30px #222);
  57 |             }
  58 |         </style>
  59 | </head>
  60 | <body>
  61 |     
  62 |     <!-- LOGO HEADER -->
  63 |     <div id="logo-header">
  64 |         <img id="logo-img" src="logo.png" alt="">
  65 |     </div>
  66 |     <!-- LOGO HEADER -->
  67 | 
  68 | 
  69 |     <!-- HEADER -->
  70 |     <div id="header" style="height: 20rem;" class="bg-primary">
  71 |         <div id="header-background" style="width: 100%; height: 100%;">
  72 | 
  73 |             <div class="p-5" style="direction: rtl; font-size: 50px; margin-right: 100px; color: white">
  74 |                 <h1 style="font-size: 70px; font-weight: 800;">كأس</h1>
  75 |                 <h1 style="font-size: 90px; font-weight: 800">العالم</h1>
  76 |             </div>
  77 |         </div>
  78 |     </div>
  79 |     <!--// HEADER //-->
  80 | 
  81 | 
  82 |     <!-- QATAR WORD -->
  83 |     <div class="d-flex justify-content-center" style="margin-top: 30px;">
  84 |         <img src="qatar-word.png" alt="" style="width: 400px">
  85 |     </div>
  86 |     <!--// QATAR WORD //-->
  87 | 
  88 | 
  89 |     <!-- MAIN CONTENT -->
  90 |     <div class="container" style="margin-top: 50px">
  91 | 
  92 |         <!-- STANDINGS -->
  93 |         <div class="p-5 mt-1">
  94 | 
  95 |             <!-- TITLE ROW -->
  96 |             <div class="row" style="direction: rtl;">
  97 |                 <h1>
  98 |                     <b>
  99 |                     المجموعات
 100 |                     </b>
 101 |                 </h1>
 102 |                 <hr>
 103 |             </div>
 104 |             <!--// TITLE ROW //-->
 105 | 
 106 |             <!-- STANDINGS ROW -->
 107 |             <div class="row" id="standings">
 108 | 
 109 | 
 110 |                 <!-- STANDING COL -->
 111 |                 <div class="col-sm-6 mb-4">
 112 |                     <div class="card shadow border-none">
 113 |                         <div class="card-header bg-primary" style="text-align: center;">
 114 |                             <b>Group (A)</b>
 115 |                         </div>
 116 | 
 117 |                         <div class="row m-0 bg-secondary">
 118 |                             <div class="col-sm-4" style="text-align: center;">
 119 |                                 team
 120 |                             </div> 
 121 |                             
 122 |                             <div class="col-sm-2" style="text-align: center;">
 123 |                                 W
 124 |                             </div>
 125 |                             
 126 |                             <div class="col-sm-2" style="text-align: center;">
 127 |                                 L
 128 |                             </div>
 129 | 
 130 |                             <div class="col-sm-2" style="text-align: center;">
 131 |                                 D
 132 |                             </div>
 133 | 
 134 |                             <div class="col-sm-2" style="text-align: center;">
 135 |                                 Pts
 136 |                             </div>
 137 |                         </div>
 138 | 
 139 |                         <!-- TEAMS -->
 140 |                         <ul class="list-group list-group-flush">
 141 | 
 142 |                             <!-- TEAM -->
 143 |                             <li class="list-group-item">
 144 |                                 <div class="row">
 145 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 146 |                                         <span class="flag">
 147 |                                             <img 
 148 |                                                 style="width: 40px; height: 40px"
 149 |                                                 class="rounded-circle"
 150 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 151 |                                             >
 152 |                                         </span>
 153 | 
 154 |                                         <h5 style="margin: auto 4px">
 155 |                                             <b>KSA</b>
 156 |                                         </h5>
 157 |                                     </div> 
 158 |                                     
 159 |                                     <div class="col-sm-2" style="text-align: center;">
 160 |                                         2
 161 |                                     </div>
 162 |                                     
 163 |                                     <div class="col-sm-2" style="text-align: center;">
 164 |                                         1
 165 |                                     </div>
 166 |         
 167 |                                     <div class="col-sm-2" style="text-align: center;">
 168 |                                         0
 169 |                                     </div>
 170 |         
 171 |                                     <div class="col-sm-2" style="text-align: center;">
 172 |                                         <b>7</b>
 173 |                                     </div>
 174 |                                 </div>
 175 |                             </li>
 176 |                             <!--// TEAM //-->
 177 | 
 178 |                             <!-- TEAM -->
 179 |                             <li class="list-group-item">
 180 |                                 <div class="row">
 181 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 182 |                                         <span class="flag">
 183 |                                             <img 
 184 |                                                 style="width: 40px; height: 40px"
 185 |                                                 class="rounded-circle"
 186 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 187 |                                             >
 188 |                                         </span>
 189 | 
 190 |                                         <h5 style="margin: auto 4px">
 191 |                                             <b>KSA</b>
 192 |                                         </h5>
 193 |                                     </div> 
 194 |                                     
 195 |                                     <div class="col-sm-2" style="text-align: center;">
 196 |                                         2
 197 |                                     </div>
 198 |                                     
 199 |                                     <div class="col-sm-2" style="text-align: center;">
 200 |                                         1
 201 |                                     </div>
 202 |         
 203 |                                     <div class="col-sm-2" style="text-align: center;">
 204 |                                         0
 205 |                                     </div>
 206 |         
 207 |                                     <div class="col-sm-2" style="text-align: center;">
 208 |                                         <b>7</b>
 209 |                                     </div>
 210 |                                 </div>
 211 |                             </li>
 212 |                             <!--// TEAM //-->
 213 | 
 214 |                             <!-- TEAM -->
 215 |                             <li class="list-group-item">
 216 |                                 <div class="row">
 217 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 218 |                                         <span class="flag">
 219 |                                             <img 
 220 |                                                 style="width: 40px; height: 40px"
 221 |                                                 class="rounded-circle"
 222 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 223 |                                             >
 224 |                                         </span>
 225 | 
 226 |                                         <h5 style="margin: auto 4px">
 227 |                                             <b>KSA</b>
 228 |                                         </h5>
 229 |                                     </div> 
 230 |                                     
 231 |                                     <div class="col-sm-2" style="text-align: center;">
 232 |                                         2
 233 |                                     </div>
 234 |                                     
 235 |                                     <div class="col-sm-2" style="text-align: center;">
 236 |                                         1
 237 |                                     </div>
 238 |         
 239 |                                     <div class="col-sm-2" style="text-align: center;">
 240 |                                         0
 241 |                                     </div>
 242 |         
 243 |                                     <div class="col-sm-2" style="text-align: center;">
 244 |                                         <b>7</b>
 245 |                                     </div>
 246 |                                 </div>
 247 |                             </li>
 248 |                             <!--// TEAM //-->
 249 | 
 250 |                             <!-- TEAM -->
 251 |                             <li class="list-group-item">
 252 |                                 <div class="row">
 253 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 254 |                                         <span class="flag">
 255 |                                             <img 
 256 |                                                 style="width: 40px; height: 40px"
 257 |                                                 class="rounded-circle"
 258 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 259 |                                             >
 260 |                                         </span>
 261 | 
 262 |                                         <h5 style="margin: auto 4px">
 263 |                                             <b>KSA</b>
 264 |                                         </h5>
 265 |                                     </div> 
 266 |                                     
 267 |                                     <div class="col-sm-2" style="text-align: center;">
 268 |                                         2
 269 |                                     </div>
 270 |                                     
 271 |                                     <div class="col-sm-2" style="text-align: center;">
 272 |                                         1
 273 |                                     </div>
 274 |         
 275 |                                     <div class="col-sm-2" style="text-align: center;">
 276 |                                         0
 277 |                                     </div>
 278 |         
 279 |                                     <div class="col-sm-2" style="text-align: center;">
 280 |                                         <b>7</b>
 281 |                                     </div>
 282 |                                 </div>
 283 |                             </li>
 284 |                             <!--// TEAM //-->
 285 |                         </ul>
 286 |                         <!--// TEAMS //-->
 287 |                     </div>
 288 |                 </div>
 289 |                 <!--// STANDING COL //-->
 290 | 
 291 |                 <!-- STANDING COL -->
 292 |                 <div class="col-sm-6 mb-4">
 293 |                     <div class="card shadow border-none">
 294 |                         <div class="card-header bg-primary" style="text-align: center;">
 295 |                             <b>Group (A)</b>
 296 |                         </div>
 297 | 
 298 |                         <div class="row m-0 bg-secondary">
 299 |                             <div class="col-sm-4" style="text-align: center;">
 300 |                                 team
 301 |                             </div> 
 302 |                             
 303 |                             <div class="col-sm-2" style="text-align: center;">
 304 |                                 W
 305 |                             </div>
 306 |                             
 307 |                             <div class="col-sm-2" style="text-align: center;">
 308 |                                 L
 309 |                             </div>
 310 | 
 311 |                             <div class="col-sm-2" style="text-align: center;">
 312 |                                 D
 313 |                             </div>
 314 | 
 315 |                             <div class="col-sm-2" style="text-align: center;">
 316 |                                 Pts
 317 |                             </div>
 318 |                         </div>
 319 | 
 320 |                         <!-- TEAMS -->
 321 |                         <ul class="list-group list-group-flush">
 322 | 
 323 |                             <!-- TEAM -->
 324 |                             <li class="list-group-item">
 325 |                                 <div class="row">
 326 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 327 |                                         <span class="flag">
 328 |                                             <img 
 329 |                                                 style="width: 40px; height: 40px"
 330 |                                                 class="rounded-circle"
 331 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 332 |                                             >
 333 |                                         </span>
 334 | 
 335 |                                         <h5 style="margin: auto 4px">
 336 |                                             <b>KSA</b>
 337 |                                         </h5>
 338 |                                     </div> 
 339 |                                     
 340 |                                     <div class="col-sm-2" style="text-align: center;">
 341 |                                         2
 342 |                                     </div>
 343 |                                     
 344 |                                     <div class="col-sm-2" style="text-align: center;">
 345 |                                         1
 346 |                                     </div>
 347 |         
 348 |                                     <div class="col-sm-2" style="text-align: center;">
 349 |                                         0
 350 |                                     </div>
 351 |         
 352 |                                     <div class="col-sm-2" style="text-align: center;">
 353 |                                         <b>7</b>
 354 |                                     </div>
 355 |                                 </div>
 356 |                             </li>
 357 |                             <!--// TEAM //-->
 358 | 
 359 |                             <!-- TEAM -->
 360 |                             <li class="list-group-item">
 361 |                                 <div class="row">
 362 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 363 |                                         <span class="flag">
 364 |                                             <img 
 365 |                                                 style="width: 40px; height: 40px"
 366 |                                                 class="rounded-circle"
 367 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 368 |                                             >
 369 |                                         </span>
 370 | 
 371 |                                         <h5 style="margin: auto 4px">
 372 |                                             <b>KSA</b>
 373 |                                         </h5>
 374 |                                     </div> 
 375 |                                     
 376 |                                     <div class="col-sm-2" style="text-align: center;">
 377 |                                         2
 378 |                                     </div>
 379 |                                     
 380 |                                     <div class="col-sm-2" style="text-align: center;">
 381 |                                         1
 382 |                                     </div>
 383 |         
 384 |                                     <div class="col-sm-2" style="text-align: center;">
 385 |                                         0
 386 |                                     </div>
 387 |         
 388 |                                     <div class="col-sm-2" style="text-align: center;">
 389 |                                         <b>7</b>
 390 |                                     </div>
 391 |                                 </div>
 392 |                             </li>
 393 |                             <!--// TEAM //-->
 394 | 
 395 |                             <!-- TEAM -->
 396 |                             <li class="list-group-item">
 397 |                                 <div class="row">
 398 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 399 |                                         <span class="flag">
 400 |                                             <img 
 401 |                                                 style="width: 40px; height: 40px"
 402 |                                                 class="rounded-circle"
 403 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 404 |                                             >
 405 |                                         </span>
 406 | 
 407 |                                         <h5 style="margin: auto 4px">
 408 |                                             <b>KSA</b>
 409 |                                         </h5>
 410 |                                     </div> 
 411 |                                     
 412 |                                     <div class="col-sm-2" style="text-align: center;">
 413 |                                         2
 414 |                                     </div>
 415 |                                     
 416 |                                     <div class="col-sm-2" style="text-align: center;">
 417 |                                         1
 418 |                                     </div>
 419 |         
 420 |                                     <div class="col-sm-2" style="text-align: center;">
 421 |                                         0
 422 |                                     </div>
 423 |         
 424 |                                     <div class="col-sm-2" style="text-align: center;">
 425 |                                         <b>7</b>
 426 |                                     </div>
 427 |                                 </div>
 428 |                             </li>
 429 |                             <!--// TEAM //-->
 430 | 
 431 |                             <!-- TEAM -->
 432 |                             <li class="list-group-item">
 433 |                                 <div class="row">
 434 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 435 |                                         <span class="flag">
 436 |                                             <img 
 437 |                                                 style="width: 40px; height: 40px"
 438 |                                                 class="rounded-circle"
 439 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 440 |                                             >
 441 |                                         </span>
 442 | 
 443 |                                         <h5 style="margin: auto 4px">
 444 |                                             <b>KSA</b>
 445 |                                         </h5>
 446 |                                     </div> 
 447 |                                     
 448 |                                     <div class="col-sm-2" style="text-align: center;">
 449 |                                         2
 450 |                                     </div>
 451 |                                     
 452 |                                     <div class="col-sm-2" style="text-align: center;">
 453 |                                         1
 454 |                                     </div>
 455 |         
 456 |                                     <div class="col-sm-2" style="text-align: center;">
 457 |                                         0
 458 |                                     </div>
 459 |         
 460 |                                     <div class="col-sm-2" style="text-align: center;">
 461 |                                         <b>7</b>
 462 |                                     </div>
 463 |                                 </div>
 464 |                             </li>
 465 |                             <!--// TEAM //-->
 466 |                         </ul>
 467 |                         <!--// TEAMS //-->
 468 |                     </div>
 469 |                 </div>
 470 |                 <!--// STANDING COL //-->
 471 | 
 472 |                 <!-- STANDING COL -->
 473 |                 <div class="col-sm-6 mb-4">
 474 |                     <div class="card shadow border-none">
 475 |                         <div class="card-header bg-primary" style="text-align: center;">
 476 |                             <b>Group (A)</b>
 477 |                         </div>
 478 | 
 479 |                         <div class="row m-0 bg-secondary">
 480 |                             <div class="col-sm-4" style="text-align: center;">
 481 |                                 team
 482 |                             </div> 
 483 |                             
 484 |                             <div class="col-sm-2" style="text-align: center;">
 485 |                                 W
 486 |                             </div>
 487 |                             
 488 |                             <div class="col-sm-2" style="text-align: center;">
 489 |                                 L
 490 |                             </div>
 491 | 
 492 |                             <div class="col-sm-2" style="text-align: center;">
 493 |                                 D
 494 |                             </div>
 495 | 
 496 |                             <div class="col-sm-2" style="text-align: center;">
 497 |                                 Pts
 498 |                             </div>
 499 |                         </div>
 500 | 
 501 |                         <!-- TEAMS -->
 502 |                         <ul class="list-group list-group-flush">
 503 | 
 504 |                             <!-- TEAM -->
 505 |                             <li class="list-group-item">
 506 |                                 <div class="row">
 507 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 508 |                                         <span class="flag">
 509 |                                             <img 
 510 |                                                 style="width: 40px; height: 40px"
 511 |                                                 class="rounded-circle"
 512 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 513 |                                             >
 514 |                                         </span>
 515 | 
 516 |                                         <h5 style="margin: auto 4px">
 517 |                                             <b>KSA</b>
 518 |                                         </h5>
 519 |                                     </div> 
 520 |                                     
 521 |                                     <div class="col-sm-2" style="text-align: center;">
 522 |                                         2
 523 |                                     </div>
 524 |                                     
 525 |                                     <div class="col-sm-2" style="text-align: center;">
 526 |                                         1
 527 |                                     </div>
 528 |         
 529 |                                     <div class="col-sm-2" style="text-align: center;">
 530 |                                         0
 531 |                                     </div>
 532 |         
 533 |                                     <div class="col-sm-2" style="text-align: center;">
 534 |                                         <b>7</b>
 535 |                                     </div>
 536 |                                 </div>
 537 |                             </li>
 538 |                             <!--// TEAM //-->
 539 | 
 540 |                             <!-- TEAM -->
 541 |                             <li class="list-group-item">
 542 |                                 <div class="row">
 543 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 544 |                                         <span class="flag">
 545 |                                             <img 
 546 |                                                 style="width: 40px; height: 40px"
 547 |                                                 class="rounded-circle"
 548 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 549 |                                             >
 550 |                                         </span>
 551 | 
 552 |                                         <h5 style="margin: auto 4px">
 553 |                                             <b>KSA</b>
 554 |                                         </h5>
 555 |                                     </div> 
 556 |                                     
 557 |                                     <div class="col-sm-2" style="text-align: center;">
 558 |                                         2
 559 |                                     </div>
 560 |                                     
 561 |                                     <div class="col-sm-2" style="text-align: center;">
 562 |                                         1
 563 |                                     </div>
 564 |         
 565 |                                     <div class="col-sm-2" style="text-align: center;">
 566 |                                         0
 567 |                                     </div>
 568 |         
 569 |                                     <div class="col-sm-2" style="text-align: center;">
 570 |                                         <b>7</b>
 571 |                                     </div>
 572 |                                 </div>
 573 |                             </li>
 574 |                             <!--// TEAM //-->
 575 | 
 576 |                             <!-- TEAM -->
 577 |                             <li class="list-group-item">
 578 |                                 <div class="row">
 579 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 580 |                                         <span class="flag">
 581 |                                             <img 
 582 |                                                 style="width: 40px; height: 40px"
 583 |                                                 class="rounded-circle"
 584 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 585 |                                             >
 586 |                                         </span>
 587 | 
 588 |                                         <h5 style="margin: auto 4px">
 589 |                                             <b>KSA</b>
 590 |                                         </h5>
 591 |                                     </div> 
 592 |                                     
 593 |                                     <div class="col-sm-2" style="text-align: center;">
 594 |                                         2
 595 |                                     </div>
 596 |                                     
 597 |                                     <div class="col-sm-2" style="text-align: center;">
 598 |                                         1
 599 |                                     </div>
 600 |         
 601 |                                     <div class="col-sm-2" style="text-align: center;">
 602 |                                         0
 603 |                                     </div>
 604 |         
 605 |                                     <div class="col-sm-2" style="text-align: center;">
 606 |                                         <b>7</b>
 607 |                                     </div>
 608 |                                 </div>
 609 |                             </li>
 610 |                             <!--// TEAM //-->
 611 | 
 612 |                             <!-- TEAM -->
 613 |                             <li class="list-group-item">
 614 |                                 <div class="row">
 615 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 616 |                                         <span class="flag">
 617 |                                             <img 
 618 |                                                 style="width: 40px; height: 40px"
 619 |                                                 class="rounded-circle"
 620 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 621 |                                             >
 622 |                                         </span>
 623 | 
 624 |                                         <h5 style="margin: auto 4px">
 625 |                                             <b>KSA</b>
 626 |                                         </h5>
 627 |                                     </div> 
 628 |                                     
 629 |                                     <div class="col-sm-2" style="text-align: center;">
 630 |                                         2
 631 |                                     </div>
 632 |                                     
 633 |                                     <div class="col-sm-2" style="text-align: center;">
 634 |                                         1
 635 |                                     </div>
 636 |         
 637 |                                     <div class="col-sm-2" style="text-align: center;">
 638 |                                         0
 639 |                                     </div>
 640 |         
 641 |                                     <div class="col-sm-2" style="text-align: center;">
 642 |                                         <b>7</b>
 643 |                                     </div>
 644 |                                 </div>
 645 |                             </li>
 646 |                             <!--// TEAM //-->
 647 |                         </ul>
 648 |                         <!--// TEAMS //-->
 649 |                     </div>
 650 |                 </div>
 651 |                 <!--// STANDING COL //-->
 652 |                 <!-- STANDING COL -->
 653 |                 <div class="col-sm-6 mb-4">
 654 |                     <div class="card shadow border-none">
 655 |                         <div class="card-header bg-primary" style="text-align: center;">
 656 |                             <b>Group (A)</b>
 657 |                         </div>
 658 | 
 659 |                         <div class="row m-0 bg-secondary">
 660 |                             <div class="col-sm-4" style="text-align: center;">
 661 |                                 team
 662 |                             </div> 
 663 |                             
 664 |                             <div class="col-sm-2" style="text-align: center;">
 665 |                                 W
 666 |                             </div>
 667 |                             
 668 |                             <div class="col-sm-2" style="text-align: center;">
 669 |                                 L
 670 |                             </div>
 671 | 
 672 |                             <div class="col-sm-2" style="text-align: center;">
 673 |                                 D
 674 |                             </div>
 675 | 
 676 |                             <div class="col-sm-2" style="text-align: center;">
 677 |                                 Pts
 678 |                             </div>
 679 |                         </div>
 680 | 
 681 |                         <!-- TEAMS -->
 682 |                         <ul class="list-group list-group-flush">
 683 | 
 684 |                             <!-- TEAM -->
 685 |                             <li class="list-group-item">
 686 |                                 <div class="row">
 687 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 688 |                                         <span class="flag">
 689 |                                             <img 
 690 |                                                 style="width: 40px; height: 40px"
 691 |                                                 class="rounded-circle"
 692 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 693 |                                             >
 694 |                                         </span>
 695 | 
 696 |                                         <h5 style="margin: auto 4px">
 697 |                                             <b>KSA</b>
 698 |                                         </h5>
 699 |                                     </div> 
 700 |                                     
 701 |                                     <div class="col-sm-2" style="text-align: center;">
 702 |                                         2
 703 |                                     </div>
 704 |                                     
 705 |                                     <div class="col-sm-2" style="text-align: center;">
 706 |                                         1
 707 |                                     </div>
 708 |         
 709 |                                     <div class="col-sm-2" style="text-align: center;">
 710 |                                         0
 711 |                                     </div>
 712 |         
 713 |                                     <div class="col-sm-2" style="text-align: center;">
 714 |                                         <b>7</b>
 715 |                                     </div>
 716 |                                 </div>
 717 |                             </li>
 718 |                             <!--// TEAM //-->
 719 | 
 720 |                             <!-- TEAM -->
 721 |                             <li class="list-group-item">
 722 |                                 <div class="row">
 723 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 724 |                                         <span class="flag">
 725 |                                             <img 
 726 |                                                 style="width: 40px; height: 40px"
 727 |                                                 class="rounded-circle"
 728 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 729 |                                             >
 730 |                                         </span>
 731 | 
 732 |                                         <h5 style="margin: auto 4px">
 733 |                                             <b>KSA</b>
 734 |                                         </h5>
 735 |                                     </div> 
 736 |                                     
 737 |                                     <div class="col-sm-2" style="text-align: center;">
 738 |                                         2
 739 |                                     </div>
 740 |                                     
 741 |                                     <div class="col-sm-2" style="text-align: center;">
 742 |                                         1
 743 |                                     </div>
 744 |         
 745 |                                     <div class="col-sm-2" style="text-align: center;">
 746 |                                         0
 747 |                                     </div>
 748 |         
 749 |                                     <div class="col-sm-2" style="text-align: center;">
 750 |                                         <b>7</b>
 751 |                                     </div>
 752 |                                 </div>
 753 |                             </li>
 754 |                             <!--// TEAM //-->
 755 | 
 756 |                             <!-- TEAM -->
 757 |                             <li class="list-group-item">
 758 |                                 <div class="row">
 759 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 760 |                                         <span class="flag">
 761 |                                             <img 
 762 |                                                 style="width: 40px; height: 40px"
 763 |                                                 class="rounded-circle"
 764 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 765 |                                             >
 766 |                                         </span>
 767 | 
 768 |                                         <h5 style="margin: auto 4px">
 769 |                                             <b>KSA</b>
 770 |                                         </h5>
 771 |                                     </div> 
 772 |                                     
 773 |                                     <div class="col-sm-2" style="text-align: center;">
 774 |                                         2
 775 |                                     </div>
 776 |                                     
 777 |                                     <div class="col-sm-2" style="text-align: center;">
 778 |                                         1
 779 |                                     </div>
 780 |         
 781 |                                     <div class="col-sm-2" style="text-align: center;">
 782 |                                         0
 783 |                                     </div>
 784 |         
 785 |                                     <div class="col-sm-2" style="text-align: center;">
 786 |                                         <b>7</b>
 787 |                                     </div>
 788 |                                 </div>
 789 |                             </li>
 790 |                             <!--// TEAM //-->
 791 | 
 792 |                             <!-- TEAM -->
 793 |                             <li class="list-group-item">
 794 |                                 <div class="row">
 795 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 796 |                                         <span class="flag">
 797 |                                             <img 
 798 |                                                 style="width: 40px; height: 40px"
 799 |                                                 class="rounded-circle"
 800 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 801 |                                             >
 802 |                                         </span>
 803 | 
 804 |                                         <h5 style="margin: auto 4px">
 805 |                                             <b>KSA</b>
 806 |                                         </h5>
 807 |                                     </div> 
 808 |                                     
 809 |                                     <div class="col-sm-2" style="text-align: center;">
 810 |                                         2
 811 |                                     </div>
 812 |                                     
 813 |                                     <div class="col-sm-2" style="text-align: center;">
 814 |                                         1
 815 |                                     </div>
 816 |         
 817 |                                     <div class="col-sm-2" style="text-align: center;">
 818 |                                         0
 819 |                                     </div>
 820 |         
 821 |                                     <div class="col-sm-2" style="text-align: center;">
 822 |                                         <b>7</b>
 823 |                                     </div>
 824 |                                 </div>
 825 |                             </li>
 826 |                             <!--// TEAM //-->
 827 |                         </ul>
 828 |                         <!--// TEAMS //-->
 829 |                     </div>
 830 |                 </div>
 831 |                 <!--// STANDING COL //-->
 832 | 
 833 |                 <!-- STANDING COL -->
 834 |                 <div class="col-sm-6 mb-4">
 835 |                     <div class="card shadow border-none">
 836 |                         <div class="card-header bg-primary" style="text-align: center;">
 837 |                             <b>Group (A)</b>
 838 |                         </div>
 839 | 
 840 |                         <div class="row m-0 bg-secondary">
 841 |                             <div class="col-sm-4" style="text-align: center;">
 842 |                                 team
 843 |                             </div> 
 844 |                             
 845 |                             <div class="col-sm-2" style="text-align: center;">
 846 |                                 W
 847 |                             </div>
 848 |                             
 849 |                             <div class="col-sm-2" style="text-align: center;">
 850 |                                 L
 851 |                             </div>
 852 | 
 853 |                             <div class="col-sm-2" style="text-align: center;">
 854 |                                 D
 855 |                             </div>
 856 | 
 857 |                             <div class="col-sm-2" style="text-align: center;">
 858 |                                 Pts
 859 |                             </div>
 860 |                         </div>
 861 | 
 862 |                         <!-- TEAMS -->
 863 |                         <ul class="list-group list-group-flush">
 864 | 
 865 |                             <!-- TEAM -->
 866 |                             <li class="list-group-item">
 867 |                                 <div class="row">
 868 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 869 |                                         <span class="flag">
 870 |                                             <img 
 871 |                                                 style="width: 40px; height: 40px"
 872 |                                                 class="rounded-circle"
 873 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 874 |                                             >
 875 |                                         </span>
 876 | 
 877 |                                         <h5 style="margin: auto 4px">
 878 |                                             <b>KSA</b>
 879 |                                         </h5>
 880 |                                     </div> 
 881 |                                     
 882 |                                     <div class="col-sm-2" style="text-align: center;">
 883 |                                         2
 884 |                                     </div>
 885 |                                     
 886 |                                     <div class="col-sm-2" style="text-align: center;">
 887 |                                         1
 888 |                                     </div>
 889 |         
 890 |                                     <div class="col-sm-2" style="text-align: center;">
 891 |                                         0
 892 |                                     </div>
 893 |         
 894 |                                     <div class="col-sm-2" style="text-align: center;">
 895 |                                         <b>7</b>
 896 |                                     </div>
 897 |                                 </div>
 898 |                             </li>
 899 |                             <!--// TEAM //-->
 900 | 
 901 |                             <!-- TEAM -->
 902 |                             <li class="list-group-item">
 903 |                                 <div class="row">
 904 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 905 |                                         <span class="flag">
 906 |                                             <img 
 907 |                                                 style="width: 40px; height: 40px"
 908 |                                                 class="rounded-circle"
 909 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 910 |                                             >
 911 |                                         </span>
 912 | 
 913 |                                         <h5 style="margin: auto 4px">
 914 |                                             <b>KSA</b>
 915 |                                         </h5>
 916 |                                     </div> 
 917 |                                     
 918 |                                     <div class="col-sm-2" style="text-align: center;">
 919 |                                         2
 920 |                                     </div>
 921 |                                     
 922 |                                     <div class="col-sm-2" style="text-align: center;">
 923 |                                         1
 924 |                                     </div>
 925 |         
 926 |                                     <div class="col-sm-2" style="text-align: center;">
 927 |                                         0
 928 |                                     </div>
 929 |         
 930 |                                     <div class="col-sm-2" style="text-align: center;">
 931 |                                         <b>7</b>
 932 |                                     </div>
 933 |                                 </div>
 934 |                             </li>
 935 |                             <!--// TEAM //-->
 936 | 
 937 |                             <!-- TEAM -->
 938 |                             <li class="list-group-item">
 939 |                                 <div class="row">
 940 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 941 |                                         <span class="flag">
 942 |                                             <img 
 943 |                                                 style="width: 40px; height: 40px"
 944 |                                                 class="rounded-circle"
 945 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 946 |                                             >
 947 |                                         </span>
 948 | 
 949 |                                         <h5 style="margin: auto 4px">
 950 |                                             <b>KSA</b>
 951 |                                         </h5>
 952 |                                     </div> 
 953 |                                     
 954 |                                     <div class="col-sm-2" style="text-align: center;">
 955 |                                         2
 956 |                                     </div>
 957 |                                     
 958 |                                     <div class="col-sm-2" style="text-align: center;">
 959 |                                         1
 960 |                                     </div>
 961 |         
 962 |                                     <div class="col-sm-2" style="text-align: center;">
 963 |                                         0
 964 |                                     </div>
 965 |         
 966 |                                     <div class="col-sm-2" style="text-align: center;">
 967 |                                         <b>7</b>
 968 |                                     </div>
 969 |                                 </div>
 970 |                             </li>
 971 |                             <!--// TEAM //-->
 972 | 
 973 |                             <!-- TEAM -->
 974 |                             <li class="list-group-item">
 975 |                                 <div class="row">
 976 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
 977 |                                         <span class="flag">
 978 |                                             <img 
 979 |                                                 style="width: 40px; height: 40px"
 980 |                                                 class="rounded-circle"
 981 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
 982 |                                             >
 983 |                                         </span>
 984 | 
 985 |                                         <h5 style="margin: auto 4px">
 986 |                                             <b>KSA</b>
 987 |                                         </h5>
 988 |                                     </div> 
 989 |                                     
 990 |                                     <div class="col-sm-2" style="text-align: center;">
 991 |                                         2
 992 |                                     </div>
 993 |                                     
 994 |                                     <div class="col-sm-2" style="text-align: center;">
 995 |                                         1
 996 |                                     </div>
 997 |         
 998 |                                     <div class="col-sm-2" style="text-align: center;">
 999 |                                         0
1000 |                                     </div>
1001 |         
1002 |                                     <div class="col-sm-2" style="text-align: center;">
1003 |                                         <b>7</b>
1004 |                                     </div>
1005 |                                 </div>
1006 |                             </li>
1007 |                             <!--// TEAM //-->
1008 |                         </ul>
1009 |                         <!--// TEAMS //-->
1010 |                     </div>
1011 |                 </div>
1012 |                 <!--// STANDING COL //-->
1013 | 
1014 |                 <!-- STANDING COL -->
1015 |                 <div class="col-sm-6 mb-4">
1016 |                     <div class="card shadow border-none">
1017 |                         <div class="card-header bg-primary" style="text-align: center;">
1018 |                             <b>Group (A)</b>
1019 |                         </div>
1020 | 
1021 |                         <div class="row m-0 bg-secondary">
1022 |                             <div class="col-sm-4" style="text-align: center;">
1023 |                                 team
1024 |                             </div> 
1025 |                             
1026 |                             <div class="col-sm-2" style="text-align: center;">
1027 |                                 W
1028 |                             </div>
1029 |                             
1030 |                             <div class="col-sm-2" style="text-align: center;">
1031 |                                 L
1032 |                             </div>
1033 | 
1034 |                             <div class="col-sm-2" style="text-align: center;">
1035 |                                 D
1036 |                             </div>
1037 | 
1038 |                             <div class="col-sm-2" style="text-align: center;">
1039 |                                 Pts
1040 |                             </div>
1041 |                         </div>
1042 | 
1043 |                         <!-- TEAMS -->
1044 |                         <ul class="list-group list-group-flush">
1045 | 
1046 |                             <!-- TEAM -->
1047 |                             <li class="list-group-item">
1048 |                                 <div class="row">
1049 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
1050 |                                         <span class="flag">
1051 |                                             <img 
1052 |                                                 style="width: 40px; height: 40px"
1053 |                                                 class="rounded-circle"
1054 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1055 |                                             >
1056 |                                         </span>
1057 | 
1058 |                                         <h5 style="margin: auto 4px">
1059 |                                             <b>KSA</b>
1060 |                                         </h5>
1061 |                                     </div> 
1062 |                                     
1063 |                                     <div class="col-sm-2" style="text-align: center;">
1064 |                                         2
1065 |                                     </div>
1066 |                                     
1067 |                                     <div class="col-sm-2" style="text-align: center;">
1068 |                                         1
1069 |                                     </div>
1070 |         
1071 |                                     <div class="col-sm-2" style="text-align: center;">
1072 |                                         0
1073 |                                     </div>
1074 |         
1075 |                                     <div class="col-sm-2" style="text-align: center;">
1076 |                                         <b>7</b>
1077 |                                     </div>
1078 |                                 </div>
1079 |                             </li>
1080 |                             <!--// TEAM //-->
1081 | 
1082 |                             <!-- TEAM -->
1083 |                             <li class="list-group-item">
1084 |                                 <div class="row">
1085 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
1086 |                                         <span class="flag">
1087 |                                             <img 
1088 |                                                 style="width: 40px; height: 40px"
1089 |                                                 class="rounded-circle"
1090 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1091 |                                             >
1092 |                                         </span>
1093 | 
1094 |                                         <h5 style="margin: auto 4px">
1095 |                                             <b>KSA</b>
1096 |                                         </h5>
1097 |                                     </div> 
1098 |                                     
1099 |                                     <div class="col-sm-2" style="text-align: center;">
1100 |                                         2
1101 |                                     </div>
1102 |                                     
1103 |                                     <div class="col-sm-2" style="text-align: center;">
1104 |                                         1
1105 |                                     </div>
1106 |         
1107 |                                     <div class="col-sm-2" style="text-align: center;">
1108 |                                         0
1109 |                                     </div>
1110 |         
1111 |                                     <div class="col-sm-2" style="text-align: center;">
1112 |                                         <b>7</b>
1113 |                                     </div>
1114 |                                 </div>
1115 |                             </li>
1116 |                             <!--// TEAM //-->
1117 | 
1118 |                             <!-- TEAM -->
1119 |                             <li class="list-group-item">
1120 |                                 <div class="row">
1121 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
1122 |                                         <span class="flag">
1123 |                                             <img 
1124 |                                                 style="width: 40px; height: 40px"
1125 |                                                 class="rounded-circle"
1126 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1127 |                                             >
1128 |                                         </span>
1129 | 
1130 |                                         <h5 style="margin: auto 4px">
1131 |                                             <b>KSA</b>
1132 |                                         </h5>
1133 |                                     </div> 
1134 |                                     
1135 |                                     <div class="col-sm-2" style="text-align: center;">
1136 |                                         2
1137 |                                     </div>
1138 |                                     
1139 |                                     <div class="col-sm-2" style="text-align: center;">
1140 |                                         1
1141 |                                     </div>
1142 |         
1143 |                                     <div class="col-sm-2" style="text-align: center;">
1144 |                                         0
1145 |                                     </div>
1146 |         
1147 |                                     <div class="col-sm-2" style="text-align: center;">
1148 |                                         <b>7</b>
1149 |                                     </div>
1150 |                                 </div>
1151 |                             </li>
1152 |                             <!--// TEAM //-->
1153 | 
1154 |                             <!-- TEAM -->
1155 |                             <li class="list-group-item">
1156 |                                 <div class="row">
1157 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
1158 |                                         <span class="flag">
1159 |                                             <img 
1160 |                                                 style="width: 40px; height: 40px"
1161 |                                                 class="rounded-circle"
1162 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1163 |                                             >
1164 |                                         </span>
1165 | 
1166 |                                         <h5 style="margin: auto 4px">
1167 |                                             <b>KSA</b>
1168 |                                         </h5>
1169 |                                     </div> 
1170 |                                     
1171 |                                     <div class="col-sm-2" style="text-align: center;">
1172 |                                         2
1173 |                                     </div>
1174 |                                     
1175 |                                     <div class="col-sm-2" style="text-align: center;">
1176 |                                         1
1177 |                                     </div>
1178 |         
1179 |                                     <div class="col-sm-2" style="text-align: center;">
1180 |                                         0
1181 |                                     </div>
1182 |         
1183 |                                     <div class="col-sm-2" style="text-align: center;">
1184 |                                         <b>7</b>
1185 |                                     </div>
1186 |                                 </div>
1187 |                             </li>
1188 |                             <!--// TEAM //-->
1189 |                         </ul>
1190 |                         <!--// TEAMS //-->
1191 |                     </div>
1192 |                 </div>
1193 |                 <!--// STANDING COL //-->
1194 |                 <!-- STANDING COL -->
1195 |                 <div class="col-sm-6 mb-4">
1196 |                     <div class="card shadow border-none">
1197 |                         <div class="card-header bg-primary" style="text-align: center;">
1198 |                             <b>Group (A)</b>
1199 |                         </div>
1200 | 
1201 |                         <div class="row m-0 bg-secondary">
1202 |                             <div class="col-sm-4" style="text-align: center;">
1203 |                                 team
1204 |                             </div> 
1205 |                             
1206 |                             <div class="col-sm-2" style="text-align: center;">
1207 |                                 W
1208 |                             </div>
1209 |                             
1210 |                             <div class="col-sm-2" style="text-align: center;">
1211 |                                 L
1212 |                             </div>
1213 | 
1214 |                             <div class="col-sm-2" style="text-align: center;">
1215 |                                 D
1216 |                             </div>
1217 | 
1218 |                             <div class="col-sm-2" style="text-align: center;">
1219 |                                 Pts
1220 |                             </div>
1221 |                         </div>
1222 | 
1223 |                         <!-- TEAMS -->
1224 |                         <ul class="list-group list-group-flush">
1225 | 
1226 |                             <!-- TEAM -->
1227 |                             <li class="list-group-item">
1228 |                                 <div class="row">
1229 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
1230 |                                         <span class="flag">
1231 |                                             <img 
1232 |                                                 style="width: 40px; height: 40px"
1233 |                                                 class="rounded-circle"
1234 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1235 |                                             >
1236 |                                         </span>
1237 | 
1238 |                                         <h5 style="margin: auto 4px">
1239 |                                             <b>KSA</b>
1240 |                                         </h5>
1241 |                                     </div> 
1242 |                                     
1243 |                                     <div class="col-sm-2" style="text-align: center;">
1244 |                                         2
1245 |                                     </div>
1246 |                                     
1247 |                                     <div class="col-sm-2" style="text-align: center;">
1248 |                                         1
1249 |                                     </div>
1250 |         
1251 |                                     <div class="col-sm-2" style="text-align: center;">
1252 |                                         0
1253 |                                     </div>
1254 |         
1255 |                                     <div class="col-sm-2" style="text-align: center;">
1256 |                                         <b>7</b>
1257 |                                     </div>
1258 |                                 </div>
1259 |                             </li>
1260 |                             <!--// TEAM //-->
1261 | 
1262 |                             <!-- TEAM -->
1263 |                             <li class="list-group-item">
1264 |                                 <div class="row">
1265 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
1266 |                                         <span class="flag">
1267 |                                             <img 
1268 |                                                 style="width: 40px; height: 40px"
1269 |                                                 class="rounded-circle"
1270 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1271 |                                             >
1272 |                                         </span>
1273 | 
1274 |                                         <h5 style="margin: auto 4px">
1275 |                                             <b>KSA</b>
1276 |                                         </h5>
1277 |                                     </div> 
1278 |                                     
1279 |                                     <div class="col-sm-2" style="text-align: center;">
1280 |                                         2
1281 |                                     </div>
1282 |                                     
1283 |                                     <div class="col-sm-2" style="text-align: center;">
1284 |                                         1
1285 |                                     </div>
1286 |         
1287 |                                     <div class="col-sm-2" style="text-align: center;">
1288 |                                         0
1289 |                                     </div>
1290 |         
1291 |                                     <div class="col-sm-2" style="text-align: center;">
1292 |                                         <b>7</b>
1293 |                                     </div>
1294 |                                 </div>
1295 |                             </li>
1296 |                             <!--// TEAM //-->
1297 | 
1298 |                             <!-- TEAM -->
1299 |                             <li class="list-group-item">
1300 |                                 <div class="row">
1301 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
1302 |                                         <span class="flag">
1303 |                                             <img 
1304 |                                                 style="width: 40px; height: 40px"
1305 |                                                 class="rounded-circle"
1306 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1307 |                                             >
1308 |                                         </span>
1309 | 
1310 |                                         <h5 style="margin: auto 4px">
1311 |                                             <b>KSA</b>
1312 |                                         </h5>
1313 |                                     </div> 
1314 |                                     
1315 |                                     <div class="col-sm-2" style="text-align: center;">
1316 |                                         2
1317 |                                     </div>
1318 |                                     
1319 |                                     <div class="col-sm-2" style="text-align: center;">
1320 |                                         1
1321 |                                     </div>
1322 |         
1323 |                                     <div class="col-sm-2" style="text-align: center;">
1324 |                                         0
1325 |                                     </div>
1326 |         
1327 |                                     <div class="col-sm-2" style="text-align: center;">
1328 |                                         <b>7</b>
1329 |                                     </div>
1330 |                                 </div>
1331 |                             </li>
1332 |                             <!--// TEAM //-->
1333 | 
1334 |                             <!-- TEAM -->
1335 |                             <li class="list-group-item">
1336 |                                 <div class="row">
1337 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
1338 |                                         <span class="flag">
1339 |                                             <img 
1340 |                                                 style="width: 40px; height: 40px"
1341 |                                                 class="rounded-circle"
1342 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1343 |                                             >
1344 |                                         </span>
1345 | 
1346 |                                         <h5 style="margin: auto 4px">
1347 |                                             <b>KSA</b>
1348 |                                         </h5>
1349 |                                     </div> 
1350 |                                     
1351 |                                     <div class="col-sm-2" style="text-align: center;">
1352 |                                         2
1353 |                                     </div>
1354 |                                     
1355 |                                     <div class="col-sm-2" style="text-align: center;">
1356 |                                         1
1357 |                                     </div>
1358 |         
1359 |                                     <div class="col-sm-2" style="text-align: center;">
1360 |                                         0
1361 |                                     </div>
1362 |         
1363 |                                     <div class="col-sm-2" style="text-align: center;">
1364 |                                         <b>7</b>
1365 |                                     </div>
1366 |                                 </div>
1367 |                             </li>
1368 |                             <!--// TEAM //-->
1369 |                         </ul>
1370 |                         <!--// TEAMS //-->
1371 |                     </div>
1372 |                 </div>
1373 |                 <!--// STANDING COL //-->
1374 |                 <!-- STANDING COL -->
1375 |                 <div class="col-sm-6 mb-4">
1376 |                     <div class="card shadow border-none">
1377 |                         <div class="card-header bg-primary" style="text-align: center;">
1378 |                             <b>Group (A)</b>
1379 |                         </div>
1380 | 
1381 |                         <div class="row m-0 bg-secondary">
1382 |                             <div class="col-sm-4" style="text-align: center;">
1383 |                                 team
1384 |                             </div> 
1385 |                             
1386 |                             <div class="col-sm-2" style="text-align: center;">
1387 |                                 W
1388 |                             </div>
1389 |                             
1390 |                             <div class="col-sm-2" style="text-align: center;">
1391 |                                 L
1392 |                             </div>
1393 | 
1394 |                             <div class="col-sm-2" style="text-align: center;">
1395 |                                 D
1396 |                             </div>
1397 | 
1398 |                             <div class="col-sm-2" style="text-align: center;">
1399 |                                 Pts
1400 |                             </div>
1401 |                         </div>
1402 | 
1403 |                         <!-- TEAMS -->
1404 |                         <ul class="list-group list-group-flush">
1405 | 
1406 |                             <!-- TEAM -->
1407 |                             <li class="list-group-item">
1408 |                                 <div class="row">
1409 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
1410 |                                         <span class="flag">
1411 |                                             <img 
1412 |                                                 style="width: 40px; height: 40px"
1413 |                                                 class="rounded-circle"
1414 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1415 |                                             >
1416 |                                         </span>
1417 | 
1418 |                                         <h5 style="margin: auto 4px">
1419 |                                             <b>KSA</b>
1420 |                                         </h5>
1421 |                                     </div> 
1422 |                                     
1423 |                                     <div class="col-sm-2" style="text-align: center;">
1424 |                                         2
1425 |                                     </div>
1426 |                                     
1427 |                                     <div class="col-sm-2" style="text-align: center;">
1428 |                                         1
1429 |                                     </div>
1430 |         
1431 |                                     <div class="col-sm-2" style="text-align: center;">
1432 |                                         0
1433 |                                     </div>
1434 |         
1435 |                                     <div class="col-sm-2" style="text-align: center;">
1436 |                                         <b>7</b>
1437 |                                     </div>
1438 |                                 </div>
1439 |                             </li>
1440 |                             <!--// TEAM //-->
1441 | 
1442 |                             <!-- TEAM -->
1443 |                             <li class="list-group-item">
1444 |                                 <div class="row">
1445 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
1446 |                                         <span class="flag">
1447 |                                             <img 
1448 |                                                 style="width: 40px; height: 40px"
1449 |                                                 class="rounded-circle"
1450 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1451 |                                             >
1452 |                                         </span>
1453 | 
1454 |                                         <h5 style="margin: auto 4px">
1455 |                                             <b>KSA</b>
1456 |                                         </h5>
1457 |                                     </div> 
1458 |                                     
1459 |                                     <div class="col-sm-2" style="text-align: center;">
1460 |                                         2
1461 |                                     </div>
1462 |                                     
1463 |                                     <div class="col-sm-2" style="text-align: center;">
1464 |                                         1
1465 |                                     </div>
1466 |         
1467 |                                     <div class="col-sm-2" style="text-align: center;">
1468 |                                         0
1469 |                                     </div>
1470 |         
1471 |                                     <div class="col-sm-2" style="text-align: center;">
1472 |                                         <b>7</b>
1473 |                                     </div>
1474 |                                 </div>
1475 |                             </li>
1476 |                             <!--// TEAM //-->
1477 | 
1478 |                             <!-- TEAM -->
1479 |                             <li class="list-group-item">
1480 |                                 <div class="row">
1481 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
1482 |                                         <span class="flag">
1483 |                                             <img 
1484 |                                                 style="width: 40px; height: 40px"
1485 |                                                 class="rounded-circle"
1486 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1487 |                                             >
1488 |                                         </span>
1489 | 
1490 |                                         <h5 style="margin: auto 4px">
1491 |                                             <b>KSA</b>
1492 |                                         </h5>
1493 |                                     </div> 
1494 |                                     
1495 |                                     <div class="col-sm-2" style="text-align: center;">
1496 |                                         2
1497 |                                     </div>
1498 |                                     
1499 |                                     <div class="col-sm-2" style="text-align: center;">
1500 |                                         1
1501 |                                     </div>
1502 |         
1503 |                                     <div class="col-sm-2" style="text-align: center;">
1504 |                                         0
1505 |                                     </div>
1506 |         
1507 |                                     <div class="col-sm-2" style="text-align: center;">
1508 |                                         <b>7</b>
1509 |                                     </div>
1510 |                                 </div>
1511 |                             </li>
1512 |                             <!--// TEAM //-->
1513 | 
1514 |                             <!-- TEAM -->
1515 |                             <li class="list-group-item">
1516 |                                 <div class="row">
1517 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
1518 |                                         <span class="flag">
1519 |                                             <img 
1520 |                                                 style="width: 40px; height: 40px"
1521 |                                                 class="rounded-circle"
1522 |                                                 src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1523 |                                             >
1524 |                                         </span>
1525 | 
1526 |                                         <h5 style="margin: auto 4px">
1527 |                                             <b>KSA</b>
1528 |                                         </h5>
1529 |                                     </div> 
1530 |                                     
1531 |                                     <div class="col-sm-2" style="text-align: center;">
1532 |                                         2
1533 |                                     </div>
1534 |                                     
1535 |                                     <div class="col-sm-2" style="text-align: center;">
1536 |                                         1
1537 |                                     </div>
1538 |         
1539 |                                     <div class="col-sm-2" style="text-align: center;">
1540 |                                         0
1541 |                                     </div>
1542 |         
1543 |                                     <div class="col-sm-2" style="text-align: center;">
1544 |                                         <b>7</b>
1545 |                                     </div>
1546 |                                 </div>
1547 |                             </li>
1548 |                             <!--// TEAM //-->
1549 |                         </ul>
1550 |                         <!--// TEAMS //-->
1551 |                     </div>
1552 |                 </div>
1553 |                 <!--// STANDING COL //-->
1554 | 
1555 | 
1556 |                 
1557 | 
1558 |                 
1559 |             </div>
1560 |             <!--// STANDINGS ROW //-->
1561 |         </div>
1562 |         <!--// STANDINGS //-->
1563 | 
1564 | 
1565 |         <!-- MATCHES -->
1566 |         <div>
1567 | 
1568 |             <!-- TITLE ROW -->
1569 |             <div class="row" style="direction: rtl;">
1570 |                 <h1>
1571 |                     <b>
1572 |                     المباريات
1573 |                     </b>
1574 |                 </h1>
1575 |                 <hr>
1576 |             </div>
1577 |             <!--// TITLE ROW //-->
1578 | 
1579 | 
1580 |             <!-- MATCHES ROW -->
1581 |             <div class="row" id="matches">
1582 | 
1583 |                 <!-- MATCH COL -->
1584 |                 <div class="col-sm-12">
1585 | 
1586 |                     <div class="card shadow rounded-pill" style="overflow: hidden;">
1587 |                         <div class="card-body p-0">
1588 |                             <div class="row" style="height: 120px;">
1589 | 
1590 |                                 <!-- FIRST TEAM COL -->
1591 |                                 <div 
1592 |                                     class="col-sm-3 bg-primary d-flex flex-direction-column justify-content-center align-itmes-center"
1593 |                                     style="border-right: solid 5px #5b0d25; "
1594 |                                 >
1595 | 
1596 |                                     <div class="d-flex align-items-center justify-content-center" >
1597 |                                         <!-- IMAGE AND TEAM NAME DIV -->
1598 |                                         <div>
1599 |                                             <div class="flag">
1600 |                                                 <img 
1601 |                                                     style="width: 40px; height: 40px"
1602 |                                                     class="rounded-circle"
1603 |                                                     src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1604 |                                                 >
1605 |                                             </div>
1606 | 
1607 |                                             <h5 style="margin: auto 4px">
1608 |                                                 <b>KSA</b>
1609 |                                             </h5>
1610 |                                         </div>
1611 |                                         <!--// IMAGE AND TEAM NAME DIV// -->
1612 |                                     </div>
1613 |                                 </div>
1614 |                                 <!--// FIRST TEAM COL //-->
1615 | 
1616 |                                 <!-- MATCH INFO COL -->
1617 |                                 <div class="col-sm-6" style="text-align: center;">
1618 |                                     <h6>Group (A)</h6>
1619 |                                     <h1>X</h1>
1620 |                                     <h6>18:30</h6>
1621 |                                 </div>
1622 |                                 <!--// MATCH INFO COL //-->
1623 | 
1624 | 
1625 |                                 <!-- SECOND TEAM COL -->
1626 |                                 <div 
1627 |                                     class="col-sm-3 bg-primary d-flex flex-direction-column justify-content-center align-itmes-center"
1628 |                                     style="border-left: solid 5px #5b0d25; "
1629 |                                 >
1630 | 
1631 |                                     <div class="d-flex align-items-center justify-content-center" >
1632 |                                         <!-- IMAGE AND TEAM NAME DIV -->
1633 |                                         <div>
1634 |                                             <div class="flag">
1635 |                                                 <img 
1636 |                                                     style="width: 40px; height: 40px"
1637 |                                                     class="rounded-circle"
1638 |                                                     src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Flag_of_Saudi_Arabia_%28type_1%29.svg/1200px-Flag_of_Saudi_Arabia_%28type_1%29.svg.png" alt=""
1639 |                                                 >
1640 |                                             </div>
1641 | 
1642 |                                             <h5 style="margin: auto 4px">
1643 |                                                 <b>KSA</b>
1644 |                                             </h5>
1645 |                                         </div>
1646 |                                         <!--// IMAGE AND TEAM NAME DIV// -->
1647 |                                     </div>
1648 |                                 </div>
1649 |                                 <!--// SECOND TEAM COL //-->
1650 |                             </div>
1651 |                         </div>
1652 |                     </div>
1653 |                 </div>
1654 |                 <!--// MATCH COL //-->
1655 |             </div>
1656 |             <!--// MATCHES ROW //-->
1657 | 
1658 |         </div>
1659 |         <!--// MATCHES //-->
1660 |     </div>
1661 |     <!-- // MAIN CONTENT // -->
1662 | 
1663 | </body>
1664 | 
1665 | <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js"></script>
1666 | <script>
1667 |     const token = "1f03d446703e470ba3bc872d47f6787c"
1668 |     const baseUrl = "https://api.football-data.org/v4/competitions/2000"
1669 | 
1670 |     function getStandings()
1671 |     {
1672 |         const url = `${baseUrl}/standings`
1673 | 
1674 |         axios.get(url, {
1675 |             headers: {
1676 |                 "X-Auth-Token": token
1677 |             }
1678 |         })
1679 |         .then((response) => {
1680 |             
1681 |             const standings = response.data.standings
1682 |             
1683 |             document.getElementById("standings").innerHTML = ""
1684 |             for(standing of standings)
1685 |             {
1686 |                 let tableContent = ""
1687 | 
1688 |                 for(row of standing.table){
1689 | 
1690 |                     tableContent+= `
1691 |                     <!-- TEAM -->
1692 |                             <li class="list-group-item">
1693 |                                 <div class="row">
1694 |                                     <div class="col-sm-4 d-flex justify-content-center align-itmes-center" style="text-align: center;">
1695 |                                         <span class="flag">
1696 |                                             <img 
1697 |                                                 style="width: 40px; height: 40px; object-fit: cover"
1698 |                                                 class="rounded-circle border border-2"
1699 |                                                 src="${row.team.crest}" alt=""
1700 |                                             >
1701 |                                         </span>
1702 | 
1703 |                                         <h5 style="margin: auto 4px">
1704 |                                             <b>${row.team.tla}</b>
1705 |                                         </h5>
1706 |                                     </div> 
1707 |                                     
1708 |                                     <div class="col-sm-2" style="text-align: center;">
1709 |                                         ${row.won}
1710 |                                     </div>
1711 |                                     
1712 |                                     <div class="col-sm-2" style="text-align: center;">
1713 |                                         ${row.lost}
1714 |                                     </div>
1715 |         
1716 |                                     <div class="col-sm-2" style="text-align: center;">
1717 |                                         ${row.draw}
1718 |                                     </div>
1719 |         
1720 |                                     <div class="col-sm-2" style="text-align: center;">
1721 |                                         <b>${row.points}</b>
1722 |                                     </div>
1723 |                                 </div>
1724 |                             </li>
1725 |                             <!--// TEAM //-->
1726 |                     `                    
1727 |                 }
1728 |             
1729 |                 const content = `
1730 | 
1731 |                         <!-- STANDING COL -->
1732 |                         <div class="col-sm-6 mb-4">
1733 |                             <div class="card shadow border-none">
1734 |                                 <div class="card-header bg-primary" style="text-align: center;">
1735 |                                     <b>${standing.group}</b>
1736 |                                 </div>
1737 | 
1738 |                                 <div class="row m-0 bg-secondary">
1739 |                                     <div class="col-sm-4" style="text-align: center;">
1740 |                                         team
1741 |                                     </div> 
1742 |                                     
1743 |                                     <div class="col-sm-2" style="text-align: center;">
1744 |                                         W
1745 |                                     </div>
1746 |                                     
1747 |                                     <div class="col-sm-2" style="text-align: center;">
1748 |                                         L
1749 |                                     </div>
1750 | 
1751 |                                     <div class="col-sm-2" style="text-align: center;">
1752 |                                         D
1753 |                                     </div>
1754 | 
1755 |                                     <div class="col-sm-2" style="text-align: center;">
1756 |                                         Pts
1757 |                                     </div>
1758 |                                 </div>
1759 | 
1760 |                                 <!-- TEAMS -->
1761 |                                 <ul class="list-group list-group-flush">
1762 | 
1763 |                                     ${tableContent}
1764 |                                 </ul>
1765 |                                 <!--// TEAMS //-->
1766 |                             </div>
1767 |                         </div>
1768 |                         <!--// STANDING COL //-->
1769 | 
1770 |                 `
1771 |                         
1772 |                 document.getElementById("standings").innerHTML += content
1773 |             }
1774 |         })
1775 |     }
1776 | 
1777 |     function getMatches()
1778 |     {
1779 |         const url = `${baseUrl}/matches`
1780 | 
1781 |         axios.get(url, {
1782 |             headers: {
1783 |                 "X-Auth-Token": token
1784 |             }
1785 |         })
1786 |         .then((response) => {
1787 |             console.log(response.data)
1788 | 
1789 |             const matches = response.data.matches
1790 | 
1791 |             
1792 |             document.getElementById("matches").innerHTML = ""
1793 | 
1794 |             for(match of matches)
1795 |             {
1796 |                 const homeTeam = match.homeTeam
1797 |                 const awayTeam = match.awayTeam
1798 | 
1799 |                 const utcDate = match.utcDate
1800 |                 const matchTime = new Date(utcDate)
1801 |                 const dateString = matchTime.getUTCFullYear() + " / " + (matchTime.getUTCMonth()+1) + " / " + matchTime.getUTCDate() + " " + matchTime.getUTCHours() + ":" + matchTime.getUTCMinutes()
1802 | 
1803 |                 if(homeTeam.name == null)
1804 |                 {
1805 |                     continue
1806 |                 }
1807 |                 const content = `
1808 |                 <div class="col-sm-12">
1809 | 
1810 |                     <div class="card shadow rounded-pill mt-5" style="overflow: hidden;">
1811 |                         <div class="card-body p-0">
1812 |                             <div class="row" style="height: 120px;">
1813 | 
1814 |                                 <!-- FIRST TEAM COL -->
1815 |                                 <div 
1816 |                                     class="col-sm-3 bg-primary d-flex flex-direction-column justify-content-center align-itmes-center"
1817 |                                     style="border-right: solid 5px #5b0d25; "
1818 |                                 >
1819 | 
1820 |                                     <div class="d-flex align-items-center justify-content-center" >
1821 |                                         <!-- IMAGE AND TEAM NAME DIV -->
1822 |                                         <div>
1823 |                                             <div class="flag">
1824 |                                                 <img 
1825 |                                                     style="width: 40px; height: 40px; object-fit: cover"
1826 |                                                     class="rounded-circle"
1827 |                                                     src="${homeTeam.crest}" alt=""
1828 |                                                 >
1829 |                                             </div>
1830 | 
1831 |                                             <h5 style="margin: auto 4px">
1832 |                                                 <b>${homeTeam.tla}</b>
1833 |                                             </h5>
1834 |                                         </div>
1835 |                                         <!--// IMAGE AND TEAM NAME DIV// -->
1836 |                                     </div>
1837 |                                 </div>
1838 |                                 <!--// FIRST TEAM COL //-->
1839 | 
1840 |                                 <!-- MATCH INFO COL -->
1841 |                                 <div class="col-sm-6" style="text-align: center;">
1842 |                                     <div class="row">
1843 |                                         <div class="col-sm-4" style="margin: auto 0px">
1844 |                                             <h3>
1845 |                                                 ${match.score.fullTime.home ?? "-"}
1846 |                                             </h3>
1847 |                                         </div>
1848 | 
1849 |                                         <div class="col-sm-4" style="margin: auto 0px">
1850 |                                             <h6>${match.group}</h6>
1851 |                                             <h1>X</h1>
1852 |                                             <h6>${dateString}</h6>
1853 |                                         </div>
1854 | 
1855 |                                         <div class="col-sm-4" style="margin: auto 0px">
1856 |                                             <h3>
1857 |                                                 ${match.score.fullTime.away ?? "-"}
1858 |                                             </h3>
1859 |                                         </div>
1860 |                                     </div>
1861 |                                     
1862 |                                 </div>
1863 |                                 <!--// MATCH INFO COL //-->
1864 | 
1865 | 
1866 |                                 <!-- SECOND TEAM COL -->
1867 |                                 <div 
1868 |                                     class="col-sm-3 bg-primary d-flex flex-direction-column justify-content-center align-itmes-center"
1869 |                                     style="border-left: solid 5px #5b0d25; "
1870 |                                 >
1871 | 
1872 |                                     <div class="d-flex align-items-center justify-content-center" >
1873 |                                         <!-- IMAGE AND TEAM NAME DIV -->
1874 |                                         <div>
1875 |                                             <div class="flag">
1876 |                                                 <img 
1877 |                                                     style="width: 40px; height: 40px; object-fit: cover"
1878 |                                                     class="rounded-circle"
1879 |                                                     src="${awayTeam.crest}" alt=""
1880 |                                                 >
1881 |                                             </div>
1882 | 
1883 |                                             <h5 style="margin: auto 4px">
1884 |                                                 <b>${awayTeam.tla}</b>
1885 |                                             </h5>
1886 |                                         </div>
1887 |                                         <!--// IMAGE AND TEAM NAME DIV// -->
1888 |                                     </div>
1889 |                                 </div>
1890 |                                 <!--// SECOND TEAM COL //-->
1891 |                             </div>
1892 |                         </div>
1893 |                     </div>
1894 |                 </div>
1895 |                 `
1896 |                 
1897 |                 document.getElementById("matches").innerHTML += content
1898 |             }
1899 |          })
1900 |     }
1901 |     
1902 |     getStandings()
1903 |     getMatches()
1904 | </script>
1905 | </html>


--------------------------------------------------------------------------------