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

[깃허브 예제] 하단 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