Php(Index and Associative Array)

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

    <?php

       $mobile = [
           'image' => 'Image/mobile.jpg',
           'Name' => 'Oppo A5',
           'Price' => '20000 tk',
           'Colors' => array('Blue','Black','Read','gray')
       ];
    ?>

     <div class="container card bg-primary text-white">
       <div class="row  mx-auto">
          <div class="col-md-6">
            <div class="media">
              <img style="float: left;" src=" <?php echo $mobile['image'] ?> " weight='300' height='300'>
              <div style="float: left;" class="media-body">
                <h3>Name: <?php echo $mobile['Name'] ?> </h3>
                <h3>Price: <?php echo $mobile['Price'] ?> </h3>
                <h3>Color: </h3>
                 <ul class="list">
                    <li> <?php echo $mobile['Colors'][0]; ?> </li>
                    <li> <?php echo $mobile['Colors'][1]; ?> </li>
                    <li> <?php echo $mobile['Colors'][2]; ?> </li>
                    <li> <?php echo $mobile['Colors'][3]; ?> </li>
                 </ul>
              </div>
            </div>
          </div>
       </div>
     </div>

     <!-- <div class="card bg-info">
       <h3>Name: <?php //echo $mobile['Name'] ?> </h3>
       <h3>Price: <?php //echo $mobile['Price'] ?> </h3>
       <h3>Color: </h3>
         <ul class="list">
            <li> <?php //echo $mobile['Colors'][0]; ?> </li>
            <li> <?php //echo $mobile['Colors'][1]; ?> </li>
            <li> <?php //echo $mobile['Colors'][2]; ?> </li>
            <li> <?php //echo $mobile['Colors'][3]; ?> </li>
         </ul>
     </div> -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  </body>
</html>