[Bootstrap] 웹사이트 만들기 - 연락처 섹션

연락처 섹션 결과물

PC 화면

 

모바일 화면

 

index.html

<!-- 연락처 섹션 -->
    <section class="container overflow-hidden py-5 text-center" id="contact">
        <div class="py-5">
            <h2 class="fw-bold">Contact</h2>
            <p class="lead text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, ad.</p>
        </div>
        <div class="row py-5 gy-3">
            <div class="col-lg-4">
                <div class="shadow p-4 border-bottom border-4 border-warning">
                    <i class="bi bi-envelope fs-5 text-warning"></i>
                    <h5 class="fw-bold py-2">이메일</h5>
                    <hr>
                    <p class="text-muted">아이디@naver.com</p>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="shadow p-4 border-bottom border-4 border-success">
                    <i class="bi bi-telephone-fill fs-5 text-success"></i>
                    <h5 class="fw-bold py-2">전화번호</h5>
                    <hr>
                    <p class="text-muted">010-1234-5678</p>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="shadow p-4 border-bottom border-4 border-warning">
                    <i class="bi bi-house-fill fs-5 text-warning"></i>
                    <h5 class="fw-bold py-2">주소</h5>
                    <hr>
                    <p class="text-muted">서울시 중구 세종대로</p>
                </div>
            </div>
        </div>
    </section>

 

<div>

• shadow : 요소의 테두리에 그림자 적용
• border-bottom : 테두리 아래쪽만 적용