Movie List Sidebar

Component #1

                    
                      <!-- movie List Sidebar -->
                      <section>
                        <div class="d-flex align-items-center justify-content-between mb-5">
                            <h5 class="font-size-24 font-weight-medium font-secondary text-lh-1dot25 mb-0">Upcoming <br> Movies</h5>
                            <div class="border-top col p-0 mx-3 border-gray-3600"></div>
                            <a href="#" class="h-g-primary font-size-1 font-weight-medium font-secondary">VIEW ALL</a>
                        </div>
                        <ul class="list-unstyled">
                            <li class="product_title font-size-17 font-weight-semi-bold font-secondary d-flex align-items-center text-lh-1dot25 mb-2 pb-1">
                                <div class="border rounded-circle d-flex align-items-center justify-content-center w-34rem h-34rem mr-2">1</div>
                                <a href="#" class="ml-1">Dark Night</a>
                            </li>
                            <li class="product_title font-size-17 font-weight-semi-bold font-secondary d-flex align-items-center text-lh-1dot25 mb-2 pb-1">
                                <div class="border rounded-circle d-flex align-items-center justify-content-center w-34rem h-34rem mr-2">2</div>
                                <a href="#" class="ml-1">Martin Absence Affects </a>
                            </li>
                           <li class="product_title font-size-17 font-weight-semi-bold font-secondary d-flex align-items-center text-lh-1dot25 mb-2 pb-1">
                                <div class="border rounded-circle d-flex align-items-center justify-content-center w-34rem h-34rem mr-2">3</div>
                                <a href="#" class="ml-1">Possible Callback</a>
                            </li>
                            <li class="product_title font-size-17 font-weight-semi-bold font-secondary d-flex align-items-center text-lh-1dot25 mb-2 pb-1">
                                <div class="border rounded-circle d-flex align-items-center justify-content-center w-34rem h-34rem mr-2">4</div>
                                <a href="#" class="ml-1">Uncharted Creator’s Characters</a>
                            </li>
                            <li class="product_title font-size-17 font-weight-semi-bold font-secondary d-flex align-items-center text-lh-1dot25 mb-2 pb-1">
                                <div class="border rounded-circle d-flex align-items-center justify-content-center w-34rem h-34rem mr-2">5</div>
                                <a href="#" class="ml-1">Switch Weekly Recap</a>
                            </li>
                            <li class="product_title font-size-17 font-weight-semi-bold font-secondary d-flex align-items-center text-lh-1dot25 mb-2 pb-1">
                                <div class="border rounded-circle d-flex align-items-center justify-content-center w-34rem h-34rem mr-2">6</div>
                                <a href="#" class="ml-1">Bad Actors On Intflix Shows</a>
                            </li>
                            <li class="product_title font-size-17 font-weight-semi-bold font-secondary d-flex align-items-center text-lh-1dot25 mb-2 pb-1">
                                <div class="border rounded-circle d-flex align-items-center justify-content-center w-34rem h-34rem mr-2">7</div>
                                <a href="#" class="ml-1">Great Movies in 2020</a>
                            </li>
                            <li class="product_title font-size-17 font-weight-semi-bold font-secondary d-flex align-items-center text-lh-1dot25 mb-2 pb-1">
                                <div class="border rounded-circle d-flex align-items-center justify-content-center w-34rem h-34rem mr-2">8</div>
                                <a href="#" class="ml-1">Mission Completed :Begining</a>
                            </li>
                            <li class="product_title font-size-17 font-weight-semi-bold font-secondary d-flex align-items-center text-lh-1dot25 mb-2 pb-1">
                                <div class="border rounded-circle d-flex align-items-center justify-content-center w-34rem h-34rem mr-2">9</div>
                                <a href="#" class="ml-1">Me Too 2</a>
                            </li>
                            <li class="product_title font-size-17 font-weight-semi-bold font-secondary d-flex align-items-center text-lh-1dot25 mb-0">
                                <div class="border rounded-circle d-flex align-items-center justify-content-center w-34rem h-34rem mr-2">10</div>
                                <a href="#" class="ml-1">After The Fall Of Atlantis</a>
                            </li>
                        </ul>
                      </section>
                      <!-- End movie List Sidebar -->