Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul 8 - Muhammad Rafli Pradipta - 225150601111005 - DAP-B

    Diunggah oleh

    dimasfiebry
    6 tayangan4 halaman

    Judul Asli

    Modul 8_Muhammad Rafli Pradipta_225150601111005_DAP-B (1)

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    6 tayangan4 halaman

    Modul 8 - Muhammad Rafli Pradipta - 225150601111005 - DAP-B

    Diunggah oleh

    dimasfiebry

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 4

    Laporan Praktikum Desain Antarmuka Pengguna

    Fakultas Ilmu Komputer – Universitas Brwaijaya


    BAB : BAB 8 – CSS Preprocessor
    NAMA : Muhammad Rafli Pradipta
    NIM : 225150601111005
    TANGGAL : 1 November 2023
    ASPRAK : Faishal Fariz Hidayatullah

    Latihan dan Percobaan


    A. Soal
    1. Buatlah variabel $peimary-color dengan #3498db dan gunakan variabel ini untuk mengubah warna
    teks pada elemen dengan kelas .header!
    2. Buatlah mixin Bernama box-shadow yang menerima parameter untuk menentukan jenis bayangan
    dan warna. Terapkan mixin ini pada elemen .box!
    3. Buatlah cariabel $base-font-size dengan nilai 16px dan gunakan operator untuk menghitung ukuran
    font dalam em!
    4. 4. Dalam kode Sass di bawah ini, terapkan extend pada elemen .succes untuk digunakan pada elemen
    dengan kelas .message!
    Laporan Praktikum Desain Antarmuka Pengguna
    Fakultas Ilmu Komputer – Universitas Brwaijaya
    B. Screenshot

    C. Kode

    style.scss
    // 1. Membuat variabel $primary-color dengan nilai #3498db
    $primary-color: #3498db;

    .header {
    // Menggunakan variabel $primary-color untuk mengubah warna teks
    color: $primary-color;
    }

    style1.scss
    @mixin box-shadow($shadow-type, $color) {
    -webkit-box-shadow: $shadow-type $color;
    -moz-box-shadow: $shadow-type $color;
    box-shadow: $shadow-type $color;
    }

    .header {
    // Menggunakan mixin box-shadow pada elemen .header
    Laporan Praktikum Desain Antarmuka Pengguna
    Fakultas Ilmu Komputer – Universitas Brwaijaya
    @include box-shadow(0px 0px 10px, #000);
    }
    $base-font-size: 16px;

    body {
    // Menggunakan variabel $base-font-size pada elemen body
    font-size: $base-font-size;
    }
    .success {
    color: #27ae60;
    font-weight: bold;
    }
    .message {
    font-size: 1.2em;
    }
    .error {
    color: #e74c3c;
    font-weight: bold;
    }

    style1.css
    .header {
    box-shadow: 0px 0px 10px #000;
    }

    body {
    font-size: 16px;
    }

    .success {
    color: #27ae60;
    font-weight: bold;
    }

    .message {
    font-size: 1.2em;
    }

    .error {
    color: #e74c3c;
    font-weight: bold;
    }/*# sourceMappingURL=style1.css.map */
    Laporan Praktikum Desain Antarmuka Pengguna
    Fakultas Ilmu Komputer – Universitas Brwaijaya

    style1.css.map
    {"version":3,"sources":["style1.scss","style1.css"],"names":[],"mappings":"AAMA;EA
    HE,6BAAA;ACCF;;ADQA;EAEE,eAJe;ACFjB;;ADQA;EACE,cAAA;EACA,iBAAA;ACLF;;ADOA;EACE,gBA
    AA;ACJF;;ADMA;EACE,cAAA;EACA,iBAAA;ACHF","file":"style1.css"}

    index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Muhammad Rafli Pradipa</title>
    <link rel="stylesheet" href="style1.css" />
    </head>
    <body>
    <div class="header">
    <h1>Selamat datang di halaman web saya!</h1>
    </div>
    <p class="success">Ini adalah pesan sukses.</p>
    <p class="message">Ini adalah pesan biasa.</p>
    <p class="error">Ini adalah pesan error.</p>
    </body>
    </html>

    Anda mungkin juga menyukai