<div class="page ulasan">
    <div class="title">
        <h2>Ulasan</h2>
    </div>
    <div class="content">
        <section class="card">
            <div class="container pt-2 pb-4">
                <article class="card mt-3">
                    <div class="d-flex justify-content-between align-items-start pt-0">
                        <div class="img">
                            <img src="./assets/img/p1.jpg" >
                        </div>
                        <div class="text">
                            <p class="truncate-2 mb-1">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, repellendus!
                            </p>
                            <div class="d-flex align-items-center mt-1">
                                <span class="badge text-dark border me-1 bg-light">
                                    Merah (XL) 
                                </span>
                            </div>
                        </div>
                    </div>
                </article> 
            </div>
        </section>
        <section class="card mt-2">
            <div class="container py-4">
                <h6 class="mb-2">
                    <strong>Rating</strong>
                </h6>
                <div class="d-flex justify-content-start mb-4">
                    <div class="rate">
                        <input type="radio" id="star5" name="rate" value="5"  />
                        <label for="star5" title="Memuaskan">
                            <i class="fa fa-star"></i>
                        </label>
    
                        <input type="radio" id="star4" name="rate" value="4" />
                        <label for="star4" title="Puas">
                            <i class="fa fa-star"></i>
                        </label>
    
                        <input type="radio" id="star3" name="rate" value="3" />
                        <label for="star3" title="Lumayan">
                            <i class="fa fa-star"></i>
                        </label>
    
                        <input type="radio" id="star2" name="rate" value="2" />
                        <label for="star2" title="Kurang">
                            <i class="fa fa-star"></i>
                        </label>
    
                        <input type="radio" id="star1" name="rate" value="1" />
                        <label for="star1" title="Sangat kurang">
                            <i class="fa fa-star"></i>
                        </label>
                    </div> 
                </div>

                <h6 class="mb-3">
                    <strong>Ulasan</strong>
                </h6>
                <div class="row">
                    <div class="col-sm-6">
                        <textarea name="" class="form-control" placeholder="Tulis ulasan anda" rows="4"></textarea>
                    </div>
                </div>
                <div class="mt-4 pb-5">
                    <button class="btn btn-primary px-4">
                        Kirim Ulasan
                    </button>
                </div>
            </div>
        </section>
    </div>
</div>