Latihan CSS Dasar

by

Mari kita latihan dengan mengembangkan webpage menjadi lebih informatif dengan teori yang sudah dipelajari dari modul sebelumnya. Disarankan anda mencoba dahulu sebelum mengcopy dari html dan css yang disediakan.

Berikut screen capture hasil akhir dari latihan.

Buka file index.html, ubah bagian <section> kedua menggunakan html berikut

        <section id="plans">
            <h1 class="section-title">Pilih paket langganan</h1>
            <div>
                <article class="plan">
                    <h1 class="plan-title">Programmer</h1>
                    <h2 class="plan-price">$10/month</h2>
                    <h3>Pelajari bahasa standard industri</h3>
                    <ul class="plan-features">
                        <li>Semua Tutorial Programming</li>
                        <li>Certificate Associate</li>
                        <li>Basic Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>
                <article  class="plan plan-highlight">
                    <h1 class="plan-annotation">Recommended</h1>
                    <h1 class="plan-title">Data Science</h1>
                    <h2 class="plan-price">$39/month</h2>
                    <h3>The most sexiest Job</h3>
                    <ul class="plan-features">
                        <li>Semua Modul Data Science</li>
                        <li>Certificate Associate</li>
                        <li>Plus Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>
                <article class="plan">
                    <h1 class="plan-title">Web Developer</h1>
                    <h2 class="plan-price">$29/month</h2>
                    <h3>FUllstack web developer</h3>
                    <ul class="plan-features">
                        <li>Semua modul web development</li>
                        <li>Certificate Associate</li>
                        <li>Basic Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>
            </div>            
        </section>

Untuk css, tambahkan css berikut

.section-title{
    color: teal;
    text-align: center;
}

.plan{
    background: yellowgreen;
    text-align: center;
    padding: 12px;
    margin: 8px;
    display: inline-block;
    width: 30%;
    vertical-align: middle;
}

.plan-highlight{
    background: rgb(45, 173, 45);
    color: white;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.plan-annotation{
    background: white;
    color: black;
    padding: 6px;
    border-radius: 4px;
}

.plan-features{
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan-features li{
    margin: 8px 0;
}

.plan-title{
    color: rgb(0, 79, 143);

}
.plan-price{
    color: rgb(194, 194, 194);
}

Property baru pada modul ini adalah

  • color : rgb( value, value, value) adalah fungsi untuk menentukan warna berdasarkan red, green dan blue.
  • color : rgba( value, value, value, valuealpha), sama seperti rgb, namun transparency ditentukan oleh valuealpha.

Berikut hasil akhir html dan css.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SkillPlus - Tutorial Tekno</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="main-header">
        <nav class="main-nav">
            <ul class="main-nav-items">
                <li class="main-nav-item"><a href="#">Paket</a></li>
                <li class="main-nav-item"><a href="#">Mentor</a></li>
                <li class="main-nav-item main-nav-item-button"><a href="#">Mulai Berlangganan</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="product-title">
            <h1 id="plans">Tutorial Teknologi Informatika di SkillPlus</h1>
        </section>
        <section id="plans">
            <h1 class="section-title">Pilih paket langganan</h1>
            <div>
                <article class="plan">
                    <h1 class="plan-title">Programmer</h1>
                    <h2 class="plan-price">$10/month</h2>
                    <h3>Pelajari bahasa standard industri</h3>
                    <ul class="plan-features">
                        <li>Semua Tutorial Programming</li>
                        <li>Certificate Associate</li>
                        <li>Basic Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>
                <article  class="plan plan-highlight">
                    <h1 class="plan-annotation">Recommended</h1>
                    <h1 class="plan-title">Data Science</h1>
                    <h2 class="plan-price">$39/month</h2>
                    <h3>The most sexiest Job</h3>
                    <ul class="plan-features">
                        <li>Semua Modul Data Science</li>
                        <li>Certificate Associate</li>
                        <li>Plus Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>
                <article class="plan">
                    <h1 class="plan-title">Web Developer</h1>
                    <h2 class="plan-price">$29/month</h2>
                    <h3>FUllstack web developer</h3>
                    <ul class="plan-features">
                        <li>Semua modul web development</li>
                        <li>Certificate Associate</li>
                        <li>Basic Support</li>
                    </ul>
                    <div>
                        <button>CHOOSE PLAN</button>
                    </div>
                </article>
            </div>            
        </section>        
    </main>
</body>
</html>
*{
    box-sizing: border-box;
}

body{
    font-family: 'Nunito', sans-serif;
    margin: 0px;
}

#product-title{
    background: url("https://www.moneyunder30.com/wp-content/uploads/2016/07/171_understanding-student-loan-grace-periods-deferment-and-forbearance-648x364-c-default.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15px;
    width: 100%;
    height: 400px;
}

.section-title{
    color: teal;
    text-align: center;
}

.plan{
    background: yellowgreen;
    text-align: center;
    padding: 12px;
    margin: 8px;
    display: inline-block;
    width: 30%;
    vertical-align: middle;
}

.plan-highlight{
    background: rgb(45, 173, 45);
    color: white;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.plan-annotation{
    background: white;
    color: black;
    padding: 6px;
    border-radius: 4px;
}

.plan-features{
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan-features li{
    margin: 8px 0;
}

.plan-title{
    color: rgb(0, 79, 143);

}
.plan-price{
    color: rgb(194, 194, 194);
}

#product-title h1{
    color: white;
    font-family: 'Roboto', sans-serif;
}

.main-header{
    width: 100%;
    background-color: green;
    padding: 6px;
}

.main-nav-items{
    list-style: none;
}

.main-nav-item{
    display: inline-block;
    margin: 0 10px;
}

.main-nav-item a{
    text-decoration: none;
    color: whitesmoke;
}

.main-nav-item a:hover{
    font-weight: bold;
}

.main-nav-item-button a{
    color: whitesmoke;
    background-color: red;
    padding: 6px 10px;
    border-radius: 4px;
}

.main-nav-item-button a:hover{
    color: red;
    background-color: whitesmoke;
}
Sharing is caring:

Leave a Comment