<div id='root'>
  
</div>

body {
    background-color: #ECEDEF;
}
.grid-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
    border-radius: 5px;
 }
 
 .step1 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
    .product-title {
        display: block;
    } 
    .step-title {
        font-weight: 300;
        font-size: 24px;
    }
    .email {
        font-weight: 200;
        font-size: 20px;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 2%;
        background-color: #ACB4BB;
        color: #FFFFFF;
        width: 90%;
        border-radius: 3px;
    }
 }

 .products {
    grid-column-start: 2;
    grid-column-end: 4;
    background-color: #FFFFFF;
    margin-top: 1%;
    .step-title {
        font-weight: 300;
        font-size: 24px;
    }
 }

 .sidebar1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    margin-left: 5%;
    background-color: #ffffff;
    .total-title {
        font-weight: 400;
        font-size: 28px;
    }
 }

 .sidebar2 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
 }
 
 * {box-sizing: border-box;}

.grid-box2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 400px;
    border-radius: 5px;
 }
 
 .step2 {
    grid-column-start: 2;
    grid-column-end: 4;
    border-radius: 10px;
   margin-top: 5%;
    .step-title {
        font-weight: 300;
        font-size: 24px;
    }
}

.box {
    border-radius: 5px;
    padding: 1em;
    color: #000000;
}

@media screen and (max-width: 1000px){
    .step2 {
        grid-column-start: 1;
        grid-column-end: 4;
      margin-top:10%;
        margin-left: 5%;
        margin-right: 5%;
    }
}

@media screen and (max-width: 1000px){
    .grid-box {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 200px;
        border-radius: 5px;
     }
    .sidebar1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
        position: relative;
        z-index: auto;
        margin-left: 5%;
        margin-right: 5%;
        background-color: #ffffff;
        .total-title {
            font-weight: 400;
            font-size: 28px;
        }
     }    

     .step1 {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 4;
        margin-left: 5%;
        margin-right: 5%;
        .product-title {
            display: none;
        } 
     }
    
     .products {
        grid-column-start: 1;
        grid-column-end: 4;
        margin-left: 5%;
        margin-right: 5%;
        background-color: #FFFFFF;
        margin-top: 1%;
       
     }
}

const ShoppingCartForm = () => {
    return (
        <div className = "grid-box2">
            <div className="box step2">
                <div className="step-title">Information:</div>
                <div className="form-group row">
                    <label for="tels" className="col-sm-12 col-form-label">Phone number</label>
                    <div className="col-sm-10">
                        <input type="tels" className="form-control" id="tels" placeholder="Phone number"/>
                    </div>
                </div>
                <div className="form-group row">
                    <label for="user" className="col-sm-12 col-form-label">Name</label>
                    <div className="col-sm-10">
                        <input type="text" className="form-control" id="user" placeholder="Name"/>
                    </div>
                </div>
                <div className="form-group row">
                    <label for="address" className="col-sm-12 col-form-label">Email</label>
                    <div className="col-sm-10">
                        <input type="text" className="form-control" id="address" placeholder="Address"/>
                    </div>
                </div>
                <div className="row">
                    <div class="col-md-10 col-lg-10"></div>
                    <div class="col-md-2 col-lg-2">
                        <button type="button" className="btn btn-secondary" >Send</button>
                    </div>
                </div> 
            </div>  
        </div>
    )
}

const ShoppingCartItem = () => {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-2 col-xs-12 col-lg-2">
                    Food
                </div>
                <div className="col-md-2 col-xs-12 col-lg-2">
                    Noodles
                </div>
                <div className="col-md-1 col-xs-11 col-lg-1">
                    Large
                </div>
                <div className="col-md-1 col-xs-12 col-lg-1">
                    $100
                </div>
                <div className="col-md-4 col-xs-12 col-lg-4">
                    <div className="d-flex justify-content-center">
                        <div className = "number">0</div>
                    </div>  
                </div>
            </div>
        </div>
    )
}

const ShoppingCart = props => {
  return (
    <div>
            <div className="grid-box">
                <div className="box step1">
                    <div className="step-title">Your email: </div>
                    <div className="email">example@mail.com</div>
                    <br/>
                    <div className="step-title">
                        Products you choose:
                    </div>
                    <div className="container product-title">
                        <div className="row">
                            <div className="col-md-2 col-xs-2 col-lg-2"> Category </div>
                            <div className="col-md-2 col-xs-2 col-lg-2"> Name </div>
                            <div className="col-md-1 col-xs-1 col-lg-1"> Size </div>
                            <div className="col-md-1 col-xs-1 col-lg-1"> Prize </div>
                            <div className="col-md-2 col-xs-2 col-lg-2"> Number </div>
                        </div>
                    </div>
                    <div className="box products">
                        <ShoppingCartItem/>
                    </div>
                </div>
                <div className="box sidebar1">
                    <div className="total-title">Total cost</div>
                        <hr/>
                        <div>Products price: $0</div>
                        <hr/>
                        <div>Shipping fee: +0</div>
                        <hr/>
                    <div>Total amount payable: $0</div>
                </div>
            </div>
            <ShoppingCartForm/>
        </div>
  )
};

const app = (
  <div>
    <ShoppingCart />
  </div>
);

ReactDOM.render(app, document.getElementById("root"));