Tugas 2 PWeb

Nethaneel Patricio Linggar

5025201180
PWeb C
Tugas 2 PWeb
Pada tugas ke-2 kelas Pemograman Web, saya telah membuat layout web menggunakan HTML dan CSS.


Source code:
    index.html:

<html>
    <head>
        <title>Patricio News</title>
        <link rel="stylesheet" href="custom.css"/>
    </head>
    <body>
        <div class="header">
            <div class="jarak">
                <h2>Patricio News</h2>
            </div>
        </div>
    <div class="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    </div>
    <div class="content">
        <div class="jarak">
        <!-- kiri -->
            <div class="kiri">
            <!-- blog -->
                <div class="border">
                    <div class="jarak">
                        <h3>Gaya Putin Pantau Langsung Latihan Militer Rusia-China</h3>
                        <p>Rusia - Presiden Rusia Vladimir Putin menghadiri latihan militer skala besar yang melibatkan pasukan China dan Rusia. Latihan juga melibatkan beberapa negara sekutu.</p>
                        <button class="btn">Read More...</button>
                    </div>
                </div>
            <!-- end blog -->
            <!-- blog -->
                <div class="border">
                    <div class="jarak">
                        <h3>4 Tips Membuat Anak Aman dan Nyaman di Rumah</h3>
                        <p>Jakarta - Tak sedikit orang tua yang merasa khawatir ketika anaknya bermain di luar rumah. Kekhawatiran tersebut muncul karena orang tua takut kalau anak mereka mengalami hal-hal yang tidak diinginkan.</p>
                        <button class="btn">Read More...</button>
                    </div>
                </div>
            <!-- end blog -->
            </div>
        <!-- kiri -->
        <!-- kanan -->
        <div class="kanan">
            <div class="jarak">
                <h3>CATEGORY</h3>
                <hr/>
                <p><a href="#" class="undecor">HTML</a></p>
                <p><a href="#" class="undecor">CSS</a></p>
                <p><a href="#" class="undecor">BOOTSTRAP</a></p>
                <p><a href="#" class="undecor">PHP</a></p>
                <p><a href="#" class="undecor">YSQL</a></p>
                <p><a href="#" class="undecor">Jquery</a></p>
                <p><a href="#" class="undecor">Ajax</a></p>
            </div>
        </div>
        <!-- kanan -->
        </div>
    </div>
    <div class="footer">
        <div class="jarak">
            <p>copyright 2022 Nethan all reserved</p>
        </div>
    </div>
    </body>
</html>

    style.css:

body{
    background: #f3f3f3;
    color: #333;
    width: 100%;
    font-family: sans-serif;
    margin: 0 auto;
}

.header{
    width: 90%;
    margin: auto;
    height: 120px;
    line-height: 120px;
    background: #25316D;
    color: #fff;
}

.content{
    width: 90%;
    margin: auto;
    height: 420px;
    padding: 0.1px;
    background: #fff;
    color: #333;
}

.kiri{
    width: 70%;
    float: left;
    margin: auto;
    background: #fff;
    height: 420px;
}

.kanan{
    width: 30%;
    float: left;
    margin: auto;
    background: #fff;
    height: 420px;
}

.border{
    border: 2px solid #5F6F94;
    margin-top: 1pc;
    padding-bottom: 2pc;
    padding-right: 2pc;
}

.undecor{
    text-decoration: none;
}

.footer{
    width: 90%;
    margin: auto;
    height: 40px;
    line-height: 40px;
    background: #97D2EC;
    color: #fff;
}

.menu{
    background-color: #5F6F94;
    height: 50px;
    line-height: 50px;
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding: 0 auto;
}

.jarak{
    padding: 0 2pc;
}

.menu ul{
    list-style: none;
}

.menu ul li a{
    float: left;
    width: 70px;
    display: block;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

.menu ul li a:hover{
    background-color: #5F6F94;
    display: block;
}

Sumber berita: kompas.com

Comments

Popular posts from this blog

Tugas 7 PWeb

Tugas 8 PWeb

Tugas 5 PWeb