Blooger Website) 6. footer 섹션 만들기

 

 

 

페이지의 제일 말단부분을 작성한다. 

 

4개의 영역으로 나누고, about-us, newsletter, follow, instagram을 각각 설정한 후, 

하단부분에 copyright부분과 오른쪽중앙부분에 top버튼을 작성하여 클릭시 페이지의 상단부분으로 이동하도록 설정한다. 

 

 

 

 

1. index. html

<!---------------------Footer-------------------->

    <footer class="footer">
        <div class="container">
            <div class="about-us">
                <h2>About us</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, ullam sit at consectetur deserunt quae doloribus. Velit officia libero suscipit!</p>    
            </div>
           <div class="newsletter">
            <h2>Newsletter</h2>
            <p>Stay update with our latest</p>
            <div class="form-element">
                <input type="text" placeholder="Email"><span><i class="fas fa-chevron-right"></i></span>
            </div>
           </div>
            <div class="instagram">
                <h2>Instagram</h2>
                <div class="flex-row">
                    <img src="./assets/instagram/thumb-card3.png" alt="insta1">
                    <img src="./assets/instagram/thumb-card4.png" alt="insta2">
                    <img src="./assets/instagram/thumb-card5.png" alt="insta3">
                </div>
                <div class="flex-row">
                    <img src="./assets/instagram/thumb-card6.png" alt="insta4">
                    <img src="./assets/instagram/thumb-card7.png" alt="insta5">
                    <img src="./assets/instagram/thumb-card8.png" alt="insta6">
                </div>
            </div>
            <div class="follow">
                <h2>Follow us</h2>
                <p>Let us be Social</p>
                <div>
                    <i class="fab fa-facebook-f"></i>
                    <i class="fab fa-twitter"></i>
                    <i class="fab fa-instagram"></i>
                    <i class="fab fa-youtube"></i>
                </div>
            </div>
        </div>
        <div class="rights flex-row">
            <h4 class="text-gray">
                Copyright 2020 All rights reserved | 
                <a href="www. youtube.com" target="_black">Daily Tuition <i class="fab fa-youtube"></i>Channel</a>
            </h4>
        </div>
        <div class="move-up">
            <span><i class="fas fa-arrow-circle-up fa-2x"></i></span>
        </div>
    </footer>
    <!------------x--------Footer----------x--------->

 

 

 

2.style.css

/*---------------------Footer-------------------*/

footer.footer{
    height: 100%;
    background: var(--bg-color);
    position: relative;
}

footer.footer .container{
    display: grid;
    grid-template-columns: repeat(4,1fr);


}

footer.footer .container > div{
    flex-grow: 1;
    flex-basis: 0;
    padding: 3rem .9rem;

}
footer.footer .container h2{
    color: var(--white);
}
footer.footer .container .newsletter .form-element{
    background: black;
    display: inline-block;

}

footer.footer .newsletter .form-element input{
    padding: .5rem .7rem;
    border: none;
    background: transparent;
    color:white;
    font-family: var(--Josefin);
    font-size: 1rem;
    width: 74%;

}
footer.footer .newsletter .form-element span{
    background: var(--peach);
    padding: .5rem .7rem;
    cursor: pointer;
}
footer.footer .instagram div >img{
    display: inline-block;
    width: 25%;
    height: 50%;
    margin: .3rem .4rem;
}

footer.footer .follow div i{
    color:white;
    padding: 0 .4rem;

}

footer.footer .rights{
    justify-content: center;
    font-family: var(--Abel);

}
footer.footer .rights h4 a{
    color: white;
}

footer.footer .move-up{
    position: absolute;
    right:6%;
    top: 50%;
}

footer.footer .move-up span{
    color: var(--midnight);
}

footer.footer .move-up span:hover{
    color: white;
    cursor: pointer;
}


/*--------x------------Footer-------x-----------*/

 

 

 

3. main.js

jquery를 이용하여 버튼을 클릭시 홈페이지 상단부분으로 이동하도록 설정

    //click to scroll top
    $('.move-up span').click(function(){
        $('html, body').animate({
            scrollTop:0
        },1000);
    })

 

 

 

 

이제 홈페이지 구성은 모두 완성되었다.

사진으로 확인하면, 

 

전체적인 footer의 모습

 

 

마우스를 가져다 대면 색이 변하고,

 

클릭시 페이지의 상단부분으로 이동한다.