[웹] 인프런메인페이지 구조짜기 - CSS(3)

인프런 메인페이지 구조짜기의 css 과정중 마지막 과정인 footer 부분까지 완성하였다.

 

 

CSS

 

/* footer */

footer {

width:100%;

}

.f-container, .footer-bottom {

border-top:1px solid #cccccc;

padding-top:30px;

margin-top:20px;

}

.f-layout {

max-width: 1170px;

margin:auto;

}

.f-layout.upper {

height:150px;

}

.f-box {

width:33%;

float:left;

box-sizing: border-box;

padding:0 2%;

}

.f-purpose {

font-size:1.1rem;

line-height:160%;

}

.f-purpose strong {

display: block;

margin-bottom:10px;

}

.f-btn a {

display:block;

height:48px;

line-height:48px;

text-align: center;

font-size: 1.2rem;

font-weight:600;

color:white;

}

.f-btn.share {

background:#00bd48;

margin-bottom:10px;

}

.f-btn.customer {

background:#02A1D2;

}

.footer-bottom {

height:100px;

}

.address {

float:left;

font-size:0.8rem;

}

.f-menu {

float:right;

}

.f-menu li {

float:left;

font-weight:600;

font-size:0.8rem;

margin:0 7px;

}

 

 

결과물

 

 

git : https://github.com/kangyongseok/inflearn_main_clone_coding

 

 

code-reading 블로그에 방문해 주셔서 환영합니다.
댓글은 모두 환영하니 많이 달아주세요.