컴포넌트 - 카드 cards

jb kim·2022년 8월 4일
0

부트스트랩

목록 보기
18/49

    <div class="container py-5">

        <!-- CARDS TOP IMAGE-->

        <div class="card">
            <img src="img/slide1.jpg" alt="" class="card-img-top">
            <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus saepe ducimus
                    mollitia magni pariatur enim nemo harum voluptate dicta quaerat.</p>
            </div>
        </div>

        <br><br>
        <hr><br><br>

        <!-- CARDS BOTTOM IMAGE-->

        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus saepe ducimus
                    mollitia magni pariatur enim nemo harum voluptate dicta quaerat.</p>
            </div>
            <img src="img/slide1.jpg" alt="" class="card-img-bottom">
        </div>


        <br><br>
        <hr><br><br>

        <!-- CARDS OVERLAY IMAGE-->

        <div class="card text-white">
            <img src="img/slide3.jpg" alt="" class="card-img">
            <div class="card-img-overlay">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus saepe ducimus
                    mollitia magni pariatur enim nemo harum voluptate dicta quaerat.</p>
            </div>
        </div>

        <br><br>
        <hr><br><br>

        <!-- CARD LINK -->

        <div class="card">
            <img src="img/slide1.jpg" alt="" class="card-img-top">
            <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus saepe ducimus
                    mollitia magni pariatur enim nemo harum voluptate dicta quaerat.</p>
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Card link</a>
                <ui class="list-group list-group-flush">
                    <li class="list-group-item">First item</li>
                    <li class="list-group-item">second item</li>
                    <li class="list-group-item">third item</li>
                </ui>
            </div>
        </div>

        <br><br>
        <hr><br><br>

        <!-- CARD HEADER AND FOOTER -->

        <div class="card">
            <div class="card-header">
                Card Header
            </div>
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum rerum asperiores
                    impedit labore iusto optio distinctio autem, doloremque sint maiores!</p>
            </div>
            <div class="card-footer">
                This is a card footer
            </div>
        </div>

        <br><br>
        <hr><br><br>

        <!-- CARD DANGER -->


        <div class="card bg-danger text-white">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum rerum asperiores
                    impedit labore iusto optio distinctio autem, doloremque sint maiores!</p>
            </div>
        </div>


    </div>
profile
픽서

0개의 댓글