Section 11

31469 ワード
CSS udemy web developer テキストリンク

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を再設定して修正することをお勧めしますが、私はそうしていません.
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
Web開発総合クラス5週間開発ログ