앞 강좌에 이어서 우측 화면의 내용에 관련된 내용을 정리 하겠습니다.

index.php

        <!-- contact -->
        <section id="section_6" class="contact pb-0">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <h4 class="under-bar text-center">CONTACT US</h4> 
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-sm-12 col-md-6 order-2 order-sm-2 order-md-1">
                        <?php echo do_shortcode( '[contact-form-7 404 "Not Found"]' ); ?>
                    </div>
                    <div class="col-sm-12 col-md-6 order-1 order-sm-1 order-md-2">
                        <div class="contact-wrap">
                            <figure>
                                <img src="/wp-content/uploads/2017/11/icon-contact-address.svg" alt="address">
                            </figure>
                            <div class="desc">
                                <h6>ADDRESS</h6>
                                <p>Coludfolder 2F, 19-12, Dosan-daero 89-gil, Gangnam-gu, Seoul, Republic of Korea</p>
                            </div>
                        </div>
                        <div class="contact-wrap">
                            <figure>
                                <img src="/wp-content/uploads/2017/11/icon-contact-email.svg" alt="email">
                            </figure>
                            <div class="desc">
                                <h6>E-MAIL</h6>
                                <p>zeein81@gmail.com</p>
                            </div>
                        </div>
                        <div class="contact-wrap">
                            <figure>
                                <img src="/wp-content/uploads/2017/11/icon-contact-phone.svg" alt="phone">
                            </figure>
                            <div class="desc">
                                <h6>PHONE</h6>
                                <p>010-2738-1110</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

main.css

/* contact */
.contact {
    background-color: #FBD04B; }
    .contact .contact-wrap {
        display: inline-block;
        width: 100%; margin-bottom: 1rem; }
        .contact .contact-wrap figure, .contact .contact-wrap .desc {
            float: left; }
        .contact .contact-wrap figure {
            width: 50px; }
            .contact .contact-wrap figure img {
                width: 100%; }
        .contact .contact-wrap .desc {
            width: calc(100% - 50px);
            padding-left: 1rem; }
        .contact .contact-wrap .desc h6 {
            margin-bottom: 0.4rem; }
        .contact .contact-wrap .desc p {
            margin-top: 0; }	

html과 css 내용이 대부분이여서 오타 없이 따라만 하시면 정리 된 화면을 보실 수 있습니다.