<![CDATA[
<div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PqNJ/ac99927bfd0dd8a55c86a7fb33fb3d2eb0d660c1" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PqNJ/ac99927bfd0dd8a55c86a7fb33fb3d2eb0d660c1" data-origin-width="1484" data-origin-height="964"></div><p style="text-align: left;"><span style="color: #333333;" data-ke-size="size18"><!DOCTYPE html><br><html lang="en"<br>      xmlns:th="<a style="color: #333333;" href="http://www.thymeleaf.org" target="_top" class="ke-link">http://www.thymeleaf.org</a>"<br>      xmlns:layout="<a style="color: #333333;" href="http://www.ultraq.net.nz/thymeleaf/layout" target="_top" class="ke-link">http://www.ultraq.net.nz/thymeleaf/layout</a>"<br>      layout:decorate="~{layouts/layout1}"><br><br><th:block layout:fragment="<span style="background-color: #293c40;">css</span>"><br>    <link rel="stylesheet" href="<a style="color: #333333;" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" target="_top" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css</a>" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" /><br>    <style><br>        @media (min-width: 700px){<br>            .content {<br>                width: 700px;<br>            }<br>        }<br>    </style><br></th:block><br><br><div layout:fragment="<span style="background-color: #293c40;">content</span>"><br>    <div class="card bg-light border-0 shadow-lg rounded-4 mt-5"><br>        <div class="card-body"><br>            <!-- Top Row--><br>            <div class="row p-5"><br>                <div class="col-7"><br>                    <h2 class="fw-bold">What others think about the product</h2><br>                </div><br>                <div class="col-5"><br>                    <div class="card"><br>                        <div class="card-body"><br>                            <h3 class="display-5 fw-semibold"><br>                                <i class="fas fa-star text-warning"></i> 4.8<br>                            </h3><br>                            <p class="text-center">Average Rating</p><br>                        </div><br>                    </div><br>                </div><br>            </div><br>            <!-- Search --><br>            <div class="row px-5"><br>                <div class="col-12"><br>                    <div class="input-group input-group-lg"><br>                        <span class="input-group-text rounded-start-5"><br>                            <i class="fas fa-search"></i><br>                        </span><br>                        <input type="text" class="form-control rounded-end-5" placeholder="Search Reviews"><br>                    </div><br>                </div><br>            </div><br>            <!-- Ratings --><br>            <div class="row p-5"><br>                <div class="col-12 vstack gap-2"><br>                    <h5>Reviews</h5><br>                    <div class="d-flex align-items-center gap-1"><br>                        <span>5</span><i class="fas fa-star text-warning"></i><br>                        <div class="progress ms-3" style="height: 10px; width: 100%"><br>                            <div class="progress-bar bg-warning"<br>                                    style="width: 80%"<br>                                    role="progressbar"<br>                                    aria-valuenow="80"<br>                                    aria-valuemin="0"<br>                                    aria-valuemax="100"<br>                            ></div><br>                        </div><br>                    </div><br>                    <div class="d-flex align-items-center gap-1"><br>                        <span>4</span><i class="fas fa-star text-warning"></i><br>                        <div class="progress ms-3" style="height: 10px; width: 100%"><br>                            <div class="progress-bar bg-warning"<br>                                    style="width: 60%"<br>                                    role="progressbar"<br>                                    aria-valuenow="60"<br>                                    aria-valuemin="0"<br>                                    aria-valuemax="100"<br>                            ></div><br>                        </div><br>                    </div><br>                    <div class="d-flex align-items-center gap-1"><br>                        <span>3</span><i class="fas fa-star text-warning"></i><br>                        <div class="progress ms-3" style="height: 10px; width: 100%"><br>                            <div class="progress-bar bg-warning"<br>                                    style="width: 40%"<br>                                    role="progressbar"<br>                                    aria-valuenow="40"<br>                                    aria-valuemin="0"<br>                                    aria-valuemax="100"<br>                            ></div><br>                        </div><br>                    </div><br>                    <div class="d-flex align-items-center gap-1"><br>                        <span>2</span><i class="fas fa-star text-warning"></i><br>                        <div class="progress ms-3" style="height: 10px; width: 100%"><br>                            <div class="progress-bar bg-warning"<br>                                    style="width: 20%"<br>                                    role="progressbar"<br>                                    aria-valuenow="20"<br>                                    aria-valuemin="0"<br>                                    aria-valuemax="100"<br>                            ></div><br>                        </div><br>                    </div><br>                    <div class="d-flex align-items-center gap-1"><br>                        <span>1</span><i class="fas fa-star text-warning"></i><br>                        <div class="progress ms-3" style="height: 10px; width: 100%"><br>                            <div class="progress-bar bg-warning"<br>                                    style="width: 30%"<br>                                    role="progressbar"<br>                                    aria-valuenow="30"<br>                                    aria-valuemin="0"<br>                                    aria-valuemax="100"<br>                            ></div><br>                        </div><br>                    </div><br>                </div><br>            </div><br>            <!-- Button --><br>            <div class="row px-5 pb-4"><br>                <div class="col-12"><br>                    <a href="#" class="btn btn-success btn-lg rounded-5">Write Review</a><br>                </div><br>            </div><br>        </div><br>    </div><br><br><br></div><br></html></span></p><p> </p>
<!-- -->
]]>
카페 게시글
CSS
bootstrap
등급표 만들기
주인장
추천 0
조회 22
24.12.31 15:49
댓글 0
다음검색
