[HTML,CSS,JS] 섹션 영역 만들기(PortFolio, Contact With Me)

PortFolio Section

<section id="portfolio" class="portfolio">
        <div class = "container">
            <div class = "title">
                <h4>PORTFOLIOBACK</h4>
                <h2>PortFolio</h2>
            </div>
        </div>
        <div class="portfolio-me">
            <div class = "portfolio-inner">
                <img src = "images/mock1.png" alt="샘플이미지">
                <strong>Branding</strong>
                <h3>Package Design</h3>
            </div>
            <div class = "portfolio-inner">
                <img src = "images/mock2.png" alt="샘플이미지">
                <strong>DEVELOPMENT</strong>
                <h3>Tablet App Dev</h3>
            </div>
            <div class = "portfolio-inner">
                <img src = "images/mock3.png" alt="샘플이미지">
                <strong>MARKETING</strong>
                <h3>Coka Cola</h3>
            </div>
            <div class = "portfolio-inner">
                <img src = "images/mock4.png" alt="샘플이미지">
                <strong>APP</strong>
                <h3>FaceBook Clone</h3>
            </div>
            <div class = "portfolio-inner">
                <img src = "images/mock5.png" alt="샘플이미지">
                <strong>APP</strong>
                <h3>Netflix Clone</h3>
            </div>
            <div class = "portfolio-inner">
                <img src = "images/mock6.png" alt="샘플이미지">
                <strong>WEB</strong>
                <h3>FirmBee Web</h3>
            </div>
        </div>
</section>

CSS 코드

section.portfolio .portfolio-inner{
    width:30%;
    margin-right:5%;
    padding:1rem 1rem 1.5rem 1rem;
    float:left;
    background-color:#f8f8f8;
    border:1px solid #ccc;
    margin-bottom:3rem;
}

section.portfolio .portfolio-inner:nth-child(3n){
    margin-right:0px;
}

section.portfolio .portfolio-inner img{
    width:100%;
    display:block;
}

section.portfolio .portfolio-inner strong{
    color:#ff6a6a;
    margin : 0.5rem 0;
    display:block;
}

section.portfolio .portfolio-inner h3{
    font-size:1.75rem;
}

Contact with Me Section

<section id = "contact" class="contact">
        <div class = "container">
            <div class = "title">
                <h4>CONTACT</h4>
                <h2>Contact With Me</h2>
            </div>
            <div class = "contact-me">
                <div class="left">
                    <div class="card">
                        <div class="icon">
                            <i class="fa-solid fa-phone-volume"></i>
                        </div>
                        <div class="info-text">
                            <h3>phone</h3>
                            <p>0101-1111-2222</p>
                        </div>  
                    </div>
                    <div class="card">
                        <div class="icon">
                            <i class="fa-solid fa-envelope"></i>
                        </div>
                        <div class="info-text">
                            <h3>email</h3>
                            <p>Aaron3@naver.com</p>
                        </div>  
                    </div>
                    <div class="card">
                        <div class="icon">
                            <i class="fa-solid fa-location-dot"></i>
                        </div>
                        <div class="info-text">
                            <h3>address</h3>
                            <p>Seoul.Republic of Korea</p>
                        </div>  
                    </div>
                </div>
                <div class="right">
                    <form action="#">
                        <div class = "form-group">
                            <label for="name">name</label>
                            <input type="text" id="name">
                        </div>
                        <div class = "form-group">
                            <label for="email">email</label>
                            <input type="text" id="email">
                        </div>
                        <div class = "form-group">
                            <label for="msg">message</label>
                            <textarea id="msg"></textarea>
                        </div>
                        <button type="submit">send</button>
                    </form>
                </div>
            </div>
        </div>
</section>

CSS 코드

section.contact .contact-me::after{
    content:"";
    display: block;
    clear:both;
}

section.contact .contact-me .left{
    width : 30%;
    float : left;
}

section.contact .contact-me .right{
    width : 65%;
    margin-left : 5%;
    float : left;
}

section.contact .contact-me .left .card{
    border:1px solid #ccc;
    padding : 1rem;
    display : flex;
    align-items : center;
    margin-bottom:1.25rem;
}

section.contact .contact-me .left .card .icon i{
    font-size:2rem;
    margin-right:15px;
}

section.contact .contact-me .right{
    float:left;
    width:65%;
    margin-left : 5%;
    margin-bottom : 2rem;
    border:1px solid #ccc;
    padding:1rem;
}

section.contact .contact-me .right .form-group{
    margin-bottom:1.25rem;
}

/* label(인라인성격)태그에 외부 여백을 적용하기 위해 block으로 변경 */
section.contact .contact-me .right .form-group label{
    display:block;
    margin-bottom:0.85rem;
}

section.contact .contact-me .right .form-group input{
    padding:0.625rem;
    width:100%;
    outline:none;
    border:1px solid #ccc;
    border-radius : 10px;
}

/* input에 커서가 활성화되면 파란 테두리와 그림자 효과 추가 */
section.contact .contact-me .right .form-group input:focus{
    border:1px solid #719ECE;
    box-shadow:0 0 10px #719ECE;
}

section.contact .contact-me .right .form-group textarea{
    height:300px;
    width:100%;
    resize:none;
    border:1px solid #ccc;
    border-radius: 10px;
}

section.contact .contact-me .right .form-group textarea:focus{
    outline:none;
    border:1px solid #719ECE;
    box-shadow:0 0 10px #719ECE;
}

section.contact .contact-me .right button{
    width:100%;
    padding:1rem;
    background-color:#f78b00;
    border:none;
    color:white;
}