e-commerce.guthub.io

<title> My Shopping Cart</title> <style>

    button{
        margin-bottom:  0px ;
        font-size:16px ;
    }
    .phone{
        height: 350px; 
        width: 265.4px;
        display: inline-block;
        background-color: rgb(174, 174, 188);
    }
    .A{
        height: 250px;
        width: 200px;
        margin-top: 10px; 
    }
  
    .top_03{
        background-color: rgb(214, 214, 39);
        height: 200px;
    }
    .D{
        margin-left: 50px;
        padding-top: 0px;
        padding-bottom: 30px;
        vertical-align: top;
     
       
    }
    .D, .E{
        display:inline-block ;
        vertical-align: top;
    }
    h3{
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
 </style>

Items

Samsung Galaxy A03s

Add to Cart

Huawei Nova Y70

Add to Cart

    </div>
    <div class="phone">
       <center> <img src="Iphone 11.jpeg" alt="Apple Iphone 11 64GB" class="A" />
        <h4>Apple Iphone 11 64GB</h4>
        <button style="background-color: blue; color: white;" >Add to Cart </button> </center>
    </div>
    <div class="phone">
       <center> <img src="Iphone 13.jpeg" alt="Apple Iphone 13 pro 128GB" class="A">
        <h4>Apple Iphone 13 pro 128GB</h4>
        <button style="background-color: blue; color: white;" >Add to Cart </button> </center>

    </div>
    <div class="phone">
    <center> <img src="Iphone SE.jpeg" alt="Apple Iphone SE 3(2022) 64GB" class="A">
        <h4>Apple Iphone SE 3(2022) 64GB</h4>
        <button style="background-color: blue; color: white;" >Add to Cart </button> </center>

    </div>
</div>
<div>
    



</div>




<div class="top_03">
  <div> <h1 style="text-align: center; color: white; ">Cart</h1></div> 
  <div class="E"><img src="shopping-cart.png"  style="width: 100px; height: 100px; margin-bottom: 70px;" ></div>
  
  <div class="D">
    <h3>Items</h3>
    <ol style="margin: 0;padding: 0 ;">
        <li>Samsung galaxy A03s <img src="cross.png" alt="cross_icon" width="20px" height="20px" style="vertical-align: middle;"> </li>
        <li>Apple Iphone 11 64GB <img src="cross.png" alt="cross_icon" width="20px" height="20px " style="vertical-align: middle;"> </li>
    </ol >
  </div>
</div>