AI_Universe_Hub_assignment/index.html at main · FarhanFardid/AI_Universe_Hub_assignment · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <!-- <link rel="stylesheet" href="https://kit.fontawesome.com/f86ce01018.css" crossorigin="anonymous"> -->
    <title>AI Universe Hub Assignment</title>
</head>
<body>
    <!-- header section -->
    <section>
    <div class="container-fluid text-center ">
        <h2 class="fw-bolder p-2 m-1 pb-2">AI Universe Hub</h2>
        <button class="btn btn-danger text-white py-2 px-2 rounded-3 border  fw-bolder mx-auto ">Sort by Date</button>
    </div>
</section>

<!-- card section -->
<section>
    <div class="container-fluid p-3 m-2">
        <div class="row row-cols-1 row-cols-md-3 g-4 " id="info_container">


          </div>

    </div>
</section>
<!-- show more button -->
<div class="text-center p-3 m-1 " id="show_btn">

</div>

<!-- modal section -->

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg p-3">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="btn-close position-absolute bg-danger rounded-circle d-inline-block end-0 top-0 border border-2 " data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

          <div class="card-group">
            <div class="card m-1 " id="mCard-1">

            </div>
            <div class="card m-1 " id="mCard-2">
              <button class="inline d-none" id="card2_btn"> </button>
            </div>

          </div>


        </div>

      </div>
    </div>
  </div>


<!-- loader section -->

<section class="d-none" id="loader">
    <div style=" height: 300px;"class="d-flex justify-content-center align-items-center">
        <div class="spinner-border text-success" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
      </div>
</section>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/f86ce01018.js" crossorigin="anonymous"></script>
    <script src="api.js"></script>
</body>
</html>