뇌 채우기 공간

[깃허브 예제] 하단 card부분 본문

무작정 따라하기/패스트캠프(프론트)

[깃허브 예제] 하단 card부분

자바칩 프라푸치노 2021. 4. 22. 08:16 

/* pricing card */
.section--pricing{
    background: linear-gradient(#f5f5f5, #fff);
}
.section--pricing .inner{
    padding: 80px 0 ;
}
.section--pricing .card{
    display: flex;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-sizing: border-box;
}
.section--pricing .card .cell{
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section--pricing .card .cell1 btn{
    height: 50px;
    font-size: 16px;
}
.section--pricing .card .cell2{
    /* cell2부분이 늘어나거나 줄어들 수 있도록 */
    font-size: 22px;
    font-weight: 300;
    line-height: 1.5;
    flex: 1;
    border-left: 1px solid #e5e5e5;
}
<section class="section section--pricing">
        <div class="inner">
            <div class="card">
                <div class="cell cell1">
                    <a href="#" class="btn btn--primary">Sign up for a GitHub</a>
                </div>
                <div class="cell cell2">
                    Public projects are always free. Work together across unlimited private repositories for $7 / month.
                </div>
            </div>
        </div>
    </section>
728x90
저작자표시 비영리 변경금지 (새창열림)

'무작정 따라하기 > 패스트캠프(프론트)' 카테고리의 다른 글

[깃허브 예제] 미디어 쿼리 / @media / 미디어 타입/ 미디어 특성/ max-width정의/ float 해제/ toggle버튼 생성  (0) 2021.04.22
[깃허브 예제] footer / svg로 로고 넣기 /배치를 바꾸지 않으면서 svg로 이미지 가운데로 배치하기  (0) 2021.04.22
[깃허브 예제] feature 섹션 만들기/ video넣기[깃허브 예제] feature 섹션 만들기/ video넣기  (0) 2021.04.22
[깃허브 예제] &nbsp;로 자연스럽게 글자 줄바꾸는 법 / 깃허브 visual section 우측 input박스와 sign up 버튼 만들기  (0) 2021.04.21
[깃허브 예제] 배경이미지 조금 어둡게 만들기/ 화면 축소해도 배경 이미지 안짤리게 만들기  (0) 2021.04.21
'무작정 따라하기/패스트캠프(프론트)' Related Articles more