Section 11

31202 단어 CSSudemyweb developerCSS

Udemy Web Developer Bootcamp Section 11

Pricing Panel Project

Part. 1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Price Tiers</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700">
    <link rel="stylesheet" href="app.css">
</head>

<body>
    <div class="panel pricing-table">

        <div class="pricing-plan">
            <img src="icons/icon1.png" alt="" class="pricing-img">
            <h2 class="pricing-header">Personal</h2>
            <ul class="pricing-features">
                <li class="pricing-features-item">Custom domains</li>
                <li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
            </ul>
            <span class="pricing-price">Free</span>
            <a href="#/" class="pricing-button">Sign up</a>
        </div>

        <div class="pricing-plan">
            <img src="icons/icon2.png" alt="" class="pricing-img">
            <h2 class="pricing-header">Small team</h2>
            <ul class="pricing-features">
                <li class="pricing-features-item">Never sleeps</li>
                <li class="pricing-features-item">Multiple workers for more powerful apps</li>
            </ul>
            <span class="pricing-price">$150</span>
            <a href="#/" class="pricing-button is-featured">Free trial</a>
        </div>

        <div class="pricing-plan">
            <img src="icons/icon3.png" alt="" class="pricing-img">
            <h2 class="pricing-header">Enterprise</h2>
            <ul class="pricing-features">
                <li class="pricing-features-item">Dedicated</li>
                <li class="pricing-features-item">Simple horizontal scalability</li>
            </ul>
            <span class="pricing-price">$400</span>
            <a href="#/" class="pricing-button">Free trial</a>
        </div>

    </div>

</body>

</html>



Part. 2

https://meyerweb.com/eric/tools/css/reset/
에서 CSS reset한 다음에 수정하는 걸 추천하지만, 난 그렇게하지 않았다..

html {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

body {
    background-color: #60a9ff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.panel {
    background-color: white;
    border-radius: 10px;
    padding: 15px 25px;
    width: 100%;
    max-width: 960px;
}



Part. 3

Design the site mobile first, meaning to create the mobile layout as the default and then on larger screen sizes will change it to be row beased instead of column based.

.panel {
	...
    display: flex;
    flex-direction: column;
    text-align: center;
    text-transform: uppercase;
}

.pricing-plan {
    border-bottom: 1px solid #e1f1ff;
}

.pricing-plan:last-child {
    border-bottom: none;
}

.pricing-img {
    margin-bottom: 25px;
    max-width: 100%;
}



Part. 4

ol, ul {
	list-style: none;
    padding: 0
}

.pricing-header { /* h2 */
    color: #888;
    font-weight: 600;
    letter-spacing: 1px;
}

.pricing-features { /* ul */
    margin: 50px 0 25px;
    color: #016ff9;
}

.pricing-features-item { /* li */
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 12px;
    line-height: 1.5;
    padding: 15px 0;
    border-top: 1px solid #e1f1ff;
}

.pricing-features-item:last-child {
    border-bottom: 1px solid #e1f1ff;  
}

.pricing-price {
    color: #016ff9;
    display: block;
    font-size: 32px;
    font-weight: 700;
}



Part. 5

.pricing-button {
    border: 1px solid #9dd1ff;
    border-radius: 10px;
    color: #348efe;
    display: inline-block;
    padding: 15px 35px;
    text-decoration: none;
    margin: 25px 0;
    transition: background-color 200ms ease-in-out;
}

.pricing-button:hover, .pricing-button:focus {
    background-color: #e1f1ff;
}

.pricing-button.is-featured {
    background-color: #48aaff;
    color: white;
}

.pricing-button.is-featured:hover, .pricing-button.is-featured:focus {
    background-color: #269aff;
    color: white;
}



Part. 6

@media (min-width: 900px) {
    .panel {
        flex-direction: row;
    }
    .pricing-plan {
        border-bottom: none;
        border-right: 1px solid #e1f1ff;
        padding: 25px 50px;
    }
    .pricing-plan:last-child {
        border-right: none;
    }
}

모바일 버전 먼저 만들고 @media로 수정하는데 생각보다 복잡하지 않아서 조금 놀랐음...

178. Modules
웹개발 종합반 5주차 개발일지

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage