├── images
    ├── Mask Group-5.png
    ├── blog-1.png
    ├── blog-2.png
    ├── blog-3.png
    ├── course-1.png
    ├── course-2.png
    ├── course-3.png
    ├── logo.png
    ├── player-1.png
    ├── player-2.png
    ├── player-3.png
    ├── player-4.png
    ├── player-5.png
    ├── player-6.png
    └── profile.png
└── index.html


/images/Mask Group-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/Mask Group-5.png


--------------------------------------------------------------------------------
/images/blog-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/blog-1.png


--------------------------------------------------------------------------------
/images/blog-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/blog-2.png


--------------------------------------------------------------------------------
/images/blog-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/blog-3.png


--------------------------------------------------------------------------------
/images/course-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/course-1.png


--------------------------------------------------------------------------------
/images/course-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/course-2.png


--------------------------------------------------------------------------------
/images/course-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/course-3.png


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/logo.png


--------------------------------------------------------------------------------
/images/player-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/player-1.png


--------------------------------------------------------------------------------
/images/player-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/player-2.png


--------------------------------------------------------------------------------
/images/player-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/player-3.png


--------------------------------------------------------------------------------
/images/player-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/player-4.png


--------------------------------------------------------------------------------
/images/player-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/player-5.png


--------------------------------------------------------------------------------
/images/player-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/player-6.png


--------------------------------------------------------------------------------
/images/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/leader-board-bootstrap/d76a9e9173b8a86232d08f82d73c7f042c4202a4/images/profile.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Leader Board</title>
  8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  9 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
 10 | 
 11 | </head>
 12 | 
 13 | <body class="bg-light">
 14 |     <!-- Navbar -->
 15 |     <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
 16 |         <div class="container">
 17 |             <a class="navbar-brand d-flex" href="#">
 18 |                 <img src="images/logo.png" width="40" alt="Idea">
 19 |                 <h3 class="ms-3">Idea</h3>
 20 |             </a>
 21 |             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
 22 |                 data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
 23 |                 aria-label="Toggle navigation">
 24 |                 <span class="navbar-toggler-icon"></span>
 25 |             </button>
 26 |             <div class="collapse navbar-collapse" id="navbarSupportedContent">
 27 |                 <ul class="navbar-nav ms-auto align-items-center mb-2 mb-lg-0">
 28 |                     <li class="nav-item">
 29 |                         <a class="nav-link active" aria-current="page" href="#">Home</a>
 30 |                     </li>
 31 |                     <li class="nav-item">
 32 |                         <a class="nav-link" href="#">About</a>
 33 |                     </li>
 34 |                     <li class="nav-item">
 35 |                         <a class="nav-link" href="#">Works</a>
 36 |                     </li>
 37 |                     <li class="nav-item">
 38 |                         <a class="nav-link" href="#">
 39 |                             <img src="images/profile.png" alt="">
 40 |                         </a>
 41 |                     </li>
 42 |                 </ul>
 43 |             </div>
 44 |         </div>
 45 |     </nav>
 46 |     <!-- ./Navbar -->
 47 | 
 48 |     <main class="container">
 49 |         <!-- Top section -->
 50 |         <section class="bg-white p-4 rounded my-4">
 51 |             <!-- Leader Board section -->
 52 |             <div class="pb-5 mb-5 border-bottom">
 53 |                 <h3 class="text-primary mb-5">Top Player</h3>
 54 |                 <div class="row gy-4">
 55 |                     <div class="col-md-4 col-sm-6 d-flex align-items-center">
 56 |                         <img width="50" src="images/player-1.png" alt="John Smith">
 57 |                         <h5 class="ms-3">John Smith</h5>
 58 |                     </div>
 59 | 
 60 |                     <div class="col-md-4 col-sm-6 d-flex align-items-center">
 61 |                         <img width="50" src="images/player-2.png" alt="John Smith">
 62 |                         <h5 class="ms-3">John Smith</h5>
 63 |                     </div>
 64 | 
 65 |                     <div class="col-md-4 col-sm-6 d-flex align-items-center">
 66 |                         <img width="50" src="images/player-3.png" alt="John Smith">
 67 |                         <h5 class="ms-3">John Smith</h5>
 68 |                     </div>
 69 | 
 70 |                     <div class="col-md-4 col-sm-6 d-flex align-items-center">
 71 |                         <img width="50" src="images/player-4.png" alt="John Smith">
 72 |                         <h5 class="ms-3">John Smith</h5>
 73 |                     </div>
 74 | 
 75 |                     <div class="col-md-4 col-sm-6 d-flex align-items-center">
 76 |                         <img width="50" src="images/player-5.png" alt="John Smith">
 77 |                         <h5 class="ms-3">John Smith</h5>
 78 |                     </div>
 79 | 
 80 |                     <div class="col-md-4 col-sm-6 d-flex align-items-center">
 81 |                         <img width="50" src="images/player-6.png" alt="John Smith">
 82 |                         <h5 class="ms-3">John Smith</h5>
 83 |                     </div>
 84 | 
 85 |                 </div>
 86 |             </div>
 87 |             <!-- ./Leader Board section -->
 88 | 
 89 |             <!-- blog section -->
 90 |             <div>
 91 |                 <h3 class="text-primary mb-4">Top Blog</h3>
 92 |                 <div class="row">
 93 |                     <article class="col-lg-6 row gy-3 gx-0 gx-sm-3">
 94 |                         <div class="col-sm-6">
 95 |                             <img class="img-fluid" src="images/blog-1.png" alt="">
 96 |                         </div>
 97 |                         <div class="col-sm-6">
 98 |                             <h4>13 of My Favorite UI/UX Goodies</h4>
 99 |                             <p class="text-secondary mt-3">By <a class="text-decoration-none" href="#">Danny Sapio</a>
100 |                             </p>
101 |                         </div>
102 |                     </article>
103 | 
104 |                     <article class="col-lg-6 row gy-3 gx-0 gx-sm-3">
105 |                         <div class="col-sm-6">
106 |                             <img class="img-fluid" src="images/blog-2.png" alt="">
107 |                         </div>
108 |                         <div class="col-sm-6">
109 |                             <h4>UI cheat sheet: list vs grids</h4>
110 |                             <p class="text-secondary mt-3">By <a class="text-decoration-none" href="#">Danny Sapio</a>
111 |                             </p>
112 |                         </div>
113 |                     </article>
114 | 
115 |                     <article class="col-lg-6 row gy-3 gx-0 gx-sm-3">
116 |                         <div class="col-sm-6">
117 |                             <img class="img-fluid" src="images/blog-1.png" alt="">
118 |                         </div>
119 |                         <div class="col-sm-6">
120 |                             <h4>7 typography tips for interface design</h4>
121 |                             <p class="text-secondary mt-3">By <a class="text-decoration-none" href="#">Danny Sapio</a>
122 |                             </p>
123 |                         </div>
124 |                     </article>
125 | 
126 |                     <article class="col-lg-6 row gy-3 gx-0 gx-sm-3">
127 |                         <div class="col-sm-6">
128 |                             <img class="img-fluid" src="images/blog-3.png" alt="">
129 |                         </div>
130 |                         <div class="col-sm-6">
131 |                             <h4>Your logo is copied</h4>
132 |                             <p class="text-secondary mt-3">By <a class="text-decoration-none" href="#">Danny Sapio</a>
133 |                             </p>
134 |                         </div>
135 |                     </article>
136 |                 </div>
137 |             </div>
138 |             <!-- ./blog section -->
139 |         </section>
140 |         <!-- ./Top section -->
141 | 
142 |         <!-- Course Section -->
143 |         <section class="bg-white rounded p-4 mb-5">
144 |             <h3 class="text-primary mb-4">Lates Courses</h3>
145 |             <div class="row g-4">
146 |                 <!-- single course -->
147 |                 <div class="col-md-6 col-lg-4">
148 |                     <div class="shadow-sm rounded p-3">
149 |                         <img class="img-fluid" src="images/course-1.png" alt="">
150 |                         <div class="my-3">
151 |                             <h4>The Complete JavaScript Course 2021</h4>
152 |                             <a href="#" class="text-danger text-decoration-none">Reed Krakoff</a>
153 |                         </div>
154 |                         <div class="d-flex justify-content-between align-items-center">
155 |                             <div class="d-flex">
156 |                                 <div>
157 |                                     <i class="fas fa-star text-warning"></i>
158 |                                     <i class="fas fa-star text-warning"></i>
159 |                                     <i class="fas fa-star text-warning"></i>
160 |                                     <i class="fas fa-star text-warning"></i>
161 |                                     <i class="fas fa-star text-secondary"></i>
162 |                                 </div>
163 |                                 <p class="ms-2 text-secondary">4.5</p>
164 |                             </div>
165 |                             <div class="badge rounded-pill bg-light text-danger py-2">
166 |                                 <i class="far fa-clock"></i>
167 |                                 <span>01:30 hr</span>
168 |                             </div>
169 |                         </div>
170 |                     </div>
171 |                 </div>
172 |                 <!-- ./single course -->
173 | 
174 |                 <!-- single course -->
175 |                 <div class="col-md-6 col-lg-4">
176 |                     <div class="shadow-sm rounded p-3">
177 |                         <img class="img-fluid" src="images/course-2.png" alt="">
178 |                         <div class="my-3">
179 |                             <h4>The Complete JavaScript Course 2021</h4>
180 |                             <a href="#" class="text-danger text-decoration-none">Reed Krakoff</a>
181 |                         </div>
182 |                         <div class="d-flex justify-content-between align-items-center">
183 |                             <div class="d-flex">
184 |                                 <div>
185 |                                     <i class="fas fa-star text-warning"></i>
186 |                                     <i class="fas fa-star text-warning"></i>
187 |                                     <i class="fas fa-star text-warning"></i>
188 |                                     <i class="fas fa-star text-warning"></i>
189 |                                     <i class="fas fa-star text-secondary"></i>
190 |                                 </div>
191 |                                 <p class="ms-2 text-secondary">4.5</p>
192 |                             </div>
193 |                             <div class="badge rounded-pill bg-light text-danger py-2">
194 |                                 <i class="far fa-clock"></i>
195 |                                 <span>01:30 hr</span>
196 |                             </div>
197 |                         </div>
198 |                     </div>
199 |                 </div>
200 |                 <!-- ./single course -->
201 | 
202 |                 <!-- single course -->
203 |                 <div class="col-md-6 col-lg-4">
204 |                     <div class="shadow-sm rounded p-3">
205 |                         <img class="img-fluid" src="images/course-3.png" alt="">
206 |                         <div class="my-3">
207 |                             <h4>The Complete JavaScript Course 2021</h4>
208 |                             <a href="#" class="text-danger text-decoration-none">Reed Krakoff</a>
209 |                         </div>
210 |                         <div class="d-flex justify-content-between align-items-center">
211 |                             <div class="d-flex">
212 |                                 <div>
213 |                                     <i class="fas fa-star text-warning"></i>
214 |                                     <i class="fas fa-star text-warning"></i>
215 |                                     <i class="fas fa-star text-warning"></i>
216 |                                     <i class="fas fa-star text-warning"></i>
217 |                                     <i class="fas fa-star text-secondary"></i>
218 |                                 </div>
219 |                                 <p class="ms-2 text-secondary">4.5</p>
220 |                             </div>
221 |                             <div class="badge rounded-pill bg-light text-danger py-2">
222 |                                 <i class="far fa-clock"></i>
223 |                                 <span>01:30 hr</span>
224 |                             </div>
225 |                         </div>
226 |                     </div>
227 |                 </div>
228 |                 <!-- ./single course -->
229 | 
230 |             </div>
231 |         </section>
232 |         <!-- ./Course Section -->
233 | 
234 |     </main>
235 |     <!-- Scripts -->
236 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
237 | </body>
238 | 
239 | </html>


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