Design template dengan header image

Kali pastinya sangat senang sekali, karna kita akan membuat template dengan header image, dan nantinya di akhir dari semua inti dari template ini, kita akan cover juga sedikit nantinya tentang responsive.

Baik, sekarang kita akan mulai dari membuat 1 folder dengan nama website, kemudian didalamnya buat 2 file yaitu index.html dan style.css. Dan pastinya anda sudah persiapkan image untuk header nya didalam folder tersebut, pastikan image tersebut berukuran 2048 x 1100. Dan juga saya akan merekomendasikan anda untuk memakai extensi jpeg, bukan png, bisa sih, hanya karna jika png nantinya image tersebut terlalu bersar kapasitasnya dibanding dengan jpeg.

Sekaran Kita bisa buka index.html dan saya akan sangat menyuruh anda untuk mengetik (bukan mengkopi) markup dibawah.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="navigation">
        <div class="container">
            <ul>
                <li class="navigation-brand"><a href="">Parsinta</a></li>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Gallery</a></li>
                <li><a href="">Notes</a></li>
                <li><a href="">Contact</a></li>
        </ul>
        </div>
    </div>
    <div class="header center">
        <div class="container">
            <h1>PARSINTA</h1>
            <p>Web Development Tutorial</p>
        </div>
    </div>

    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eveniet, commodi fugiat saepe cum quam distinctio labore dolorem, illo s repudiandae dignissimos veritatis facere perferendis dolor quae perspiciatis sunt!</p>
        <p>Tempore quaerat dolorum la ab eius, distinctio ipsa necessitatibus voluptas velit blanditiis reprehenderit id nesciunt? Nihil recusa praesentium voluptas et libero, eum, aliquam ad voluptatibus ex quaerat! Magnam perferendis rerum ex iure officia eos dolorem, numquam, maiores fuga, molestias iusto veniam natus? Quod tempore sequi iste architecto culpa.</p>
    </div>
</body>
</html>

Pastikan anda telah menyisipkan style.css seperti markup diatas tepat dibawah title tag. Nah jika sudah untuk index.html kita sudah selesai, sekarang buka file cssnya dan kita akan memulai design disini.

Baik, jika anda lihat pada markup tersebut, kita mempunyai beberapa class disana, antara lain adalah.

  • container
  • navigation
  • navigation-brand
  • header
  • center

Hanya itu saja! Nah kita akan memulai ini dengan import font dari google, yang mana itu akan terlihat smooth nantinya. Jika anda malas melihatnya di google fonts, buka file cssnya dan anda bisa copy dan paste import dibawah.

@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,700');

Simple. Kita hanya akan bekerja dalam 1 fonts saja. By the way, hanya itu saja yang boleh anda copy dan paste, selanjutnya nanti anda saya sangat rekomendasikan untuk menulisnya, dan juga pastikan ketika saya memberi style baru, anda bisa lihat pada browser.

Baik jika sudah kita akab prefix browser agar kita tidak terganggu dengan setting style default dari browser yang kita pakai saat ini.

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Nah jika sudah, sekarang saya akan mengatur body nya, seperti font, warna, seperti dibawah.

body {
    font-size: 1em;
    font-family: 'Raleway', sans-serif;
    color: #444;
}

Seperti yang anda lihat kita akan memakai Raleway font disini, dan saya sudah memasukkannya ya seperti diatas. Baik sekarang kita bergerak ke class container.

.container {
    width: 80%;
    margin: 0 auto;
    padding: 0 15px;
}

Simple saja, saya hanya ingin content tersebut prefix ke tengah, dengan membuat margin (kanan dan kiri) menjadi auto. Nah sekarang kita bisa memberi style untuk menunya ya. Disini sangat panjang sekali walaupun ini bukanlah intinya, tetapi ini sangat lah penting untuk kita dalam membuat website.

.navigation {
    text-align: right;
    padding: 0;
    margin: 0;
    background-color: #1abc9c;
}

.navigation li {
    display: inline-block;
    margin-right: -4px;
}

.navigation li:hover {
    background-color: #16a085;
}

.navigation .navigation-brand {
    float: left;
    font-size: 1.8em;
    font-weight: 700;
    line-height: 0.7;
}

.navigation .navigation-brand:hover {
    background-color: transparent;
}

.navigation li a {
    color: white;
    text-decoration: none;
    padding: 30px 15px;
    display: block;
}

.navigation li a:hover {
    text-decoration: none;
    color: white;
}

Nah sekarang anda lihat itu panjang, padahal tidak sama sekali, saran saya perhatikan baik baik dalam anda menulisnya, karna jika saja salah 1 huruf, maka style tersebut tidak akan berhasil, nanti jadinya tutorial ini yang disalahkan :D.

Baik sekarang kita akan belajar tentang topik kita yaitu, template dengan image. Nah kita akan beri style pada header tersebut dengan sekalian membuat backgroundnya jadi image yang telah anda sediakan seperti yang saya suruh tadi.

.header {
    background-image: url('header.jpg');
    padding: 15em 0;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    margin-bottom: 30px;
    color: white;
}

Simple kok, tidak ada yang susah disini, semua dapat dipahami dengan baik. Selanjutnya jika anda perhatikan markup nya pastinya didalam ada h1 dan p, dan juga pada tag header ada juga class center. Nah untuk style itu lihat stylesheet dibawah.

.header h1 {
    font-weight: 100;
    font-size: 10em;
}

.header p {
    font-size: 2em;
    font-weight: 100;
}

.center {
    text-align: center;
}

Terakhir untuk paragraph kita akan rapikan seperti dibawah.

p {
    margin-bottom: 30px;
    line-height: 1.5;
}

Selesai, adapun tambahannya dibawah, itu hanyalah opsional bagi anda, tapi saya sangat merekomendasikannya karna ini adalah responsive, yang mana itu sangat di rekomendasikan untuk setiap website. silahkan ikuti cara style dibawah jika anda mau.


@media (max-width: 768px) {
    .container {
        width: 100%;
    }
    .navigation {
        text-align: left;
    }
    .navigation .container {
        padding: 0;
    }
    .navigation li {
        display: block;
        width: 100%;
    }
    .navigation li a {
        padding: 10px;
    }
    .navigation .navigation-brand {
        margin-bottom: 20px;
        float: none;
    }
    .navigation .navigation-brand:hover {
        background-color: transparent;
    }
}

Jika sudah sekarang kita done. Semua done. Yep. Nothin' else. Jika anda suka tutorial ini, saya sangat senang sekali. Thanks for reading and see you next time :)



Generic placeholder image
By Irsyad A. Panjaitan
I am error

Comments

Please login to leave a comment!