PRAKTEK MEMBUAT WEBSITE SPOTIFY

    Pada kesempatan kali ini, saya akan mempraktekkan membuat tampilan sebuah website mengikuti website spotify guna untuk pelengkapan tugas pemrograman web dan perangkat bergerak. Untuk website yang saya buat, masih memiliki kekurangan yaitu tidak membuat website responsive sehingga ketika lebar halaman web di ubah maka tampilan web menjadi berantakan/tidak rapih. 

Berikut ini adalah source code dari html.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Spotify Premium - Spotify (ID)</title>

    <!-- membuat favicon -->

    <link rel="shortcut icon" href="gmbr/favicon.ico" type="image/x-icon">

<!-- buat font awesome biar bisa ngambil icon -->

    <link rel="stylesheet"  type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

    <link rel="stylesheet" href="style.css">

</head>

<body>

    

    <header>

        <div class="nav">

            <div class="logo">

                <i class="fa-brands fa-spotify fa-2x"></i>

                <h1>Spotify</h1>

            </div>

            <ul>

                <li><a href="">Premium</a></li>

                <li><a href="">Dukungan</a></li>

                <li><a href="">Download</a></li>

                <li>|</li>

                <li><a href="">Daftar</a></li>

                <li><a href="">Masuk</a></li>

            </ul>

        </div>

    </header>


    <section>

        <div class="isi">

            

            <h1>Dapatkan 2 bulan Premium cuma Rp 54,990 dengan e-</h1>

            <h1>wallet dan pulsa.</h1>

            <br>

            <p>Hanya Rp 54,990/bulan sesudahnya. Batalkan kapan saja.</p>

        </div>


        <div class="tombol">

            <div class="kotak">

                <h3>MULAI</h3>

            </div>

            <div class="kotak2">

                <h3>LIHAT PAKET</h3>

            </div>

        </div>

        <div class="keterangan">

            <p id="syarat">Persyaratan dan ketentuan berlaku</p>

            <p>. Tawaran tidak tersedia untuk pengguna yang pernah mencoba Premium.</p>

        </div>

    </section>


    <article>

        <h1>Memperkenalkan Premium Mini</h1>

        <p>Download 30 lagu dan dengarkan musik iklan semaumu, di 1 ponsel.</p>

        <center>

            <h3>LIHAT PAKET</h3>

        </center>

        <p><a href="">Syarat dan ketentuan berlaku.</a></p>

    </article>


    <aside>

        <h1>Kenapa Beli Premium?</h1>

        <div class="cardview">

            <div class="card1">

                <h3>Download musik.</h3>

                <p>Dengarkan di mana saja.</p>

            </div>

            <div class="card2">

                <h3>Dengarkan musik bebas iklan.</h3>

                <p>Nikmati musik tanpa henti.</p>

            </div>

            <div class="card3">

                <h3>Putar lagu apa pun.</h3>

                <p>Bahkan di ponsel.</p>

            </div>

            <div class="card4">

                <h3>Lewati sesukamu.</h3>

                <p>Cukup tekan berikutnya.</p>

            </div>

        </div>

    </aside>


    <div class="pembelian">

        <h1>Pilih paket Premium</h1>

        <p>Dengarkan tanpa batas di ponsel, speaker, dan perangkat lainnya.</p>


        <div class="paket">

            <div class="paket1">

                <h3>Mini</h3>

                <p>Mulai dari Rp 2,500/hari</p>

                <p>khusus ponsel</p>

                <p>1 akun</p>

                <br>

                <h5>MEMULAI</h5>

            </div>

            <div class="paket2">

                <h3>Individual</h3>

                <p>Rp 54,990/bulan sesudah</p>

                <p>periode tawaran</p>

                <p>1 akun</p>

                <br>

                <h5>MULAI</h5>

            </div>

            <div class="paket3">

                <h3>Duo</h3>

                <p>Rp 71,490/bulan sesudah</p>

                <p>periode tawaran</p>

                <p>2 akun</p>

                <br>

                <h5>MULAI</h5>

            </div>

            <div class="paket4">

                <h3>Family</h3>

                <p>Rp 86,900/bulan sesudah</p>

                <p>periode tawaran</p>

                <p>Hingga 6 akun</p>

                <br>

                <h5>MULAI</h5>

            </div>

        </div>

    </div>

    <footer>

        <div class="akhir">

            <img src="gmbr/lambang.jpg" alt="">

            <div class="perusahaan">

                <h5>PERUSAHAAN</h5>

                <ul>

                    <li><a href="">Tentang</a></li>

                    <li><a href="">Pekerjaan</a></li>

                    <li><a href="">For the Record</a></li>

                </ul>

            </div>

            <div class="komunitas">

                <h5>KOMUNITAS</h5>

                <ul>

                    <li><a href="">Untuk Artis</a></li>

                    <li><a href="">Pengembang</a></li>

                    <li><a href="">Iklan</a></li>

                    <li><a href="">Investor</a></li>

                    <li><a href="">Vendor</a></li>

                </ul>

            </div>

            <div class="tautan">

                <h5>TAUTAN BERGUNA</h5>

                <ul>

                    <li><a href="">Dukungan</a></li>

                    <li><a href="">Pemutar Web</a></li>

                    <li><a href="">Aplikasi Seluler Gratis</a></li>

                </ul>

            </div>

            <div class="sosmed">

                <a href=""><i class="fa-brands fa-instagram fa-2x"></i></a>

                <a href=""><i class="fa-brands fa-twitter fa-2x"></i></a>

                <a href=""><i class="fa-brands fa-facebook-f fa-2x"></i></a>

            </div>

        </div>

    </footer>

</body>

</html>


Dan ini tampilan source code dari css

/* deklarasiin font spotify */

@font-face {

    font-family: 'spotify';

    src: url('Font/Gotham-Bold.otf');

}

@font-face {

    font-family: 'spicetify';

    src: url('Font/GothamBook.ttf');

}

@font-face {

    font-family: 'spotipuy';

    src: url('Font/GothamMedium_1.ttf');

}


*{

    margin: 0;

    padding: 0;

}


body{

    font-family: 'spotify';

    

}


.nav{

    width: 80%;

    margin: 0 auto;

}


.nav:after{

    content: '';

    display: block;

    clear: both;

}

header{

    border: 1px solid;

    background-color: black;

}

header .logo{

    padding: 20px;

    color: white;

    display: flex;

    float: left;

}

header ul{

    border: 1px solid;

    float: right;

}

header ul li{

    display: inline-block;

    color: white;

}

header ul li a{

    padding: 25px 20px;

    color: white;

    text-decoration: none;

    display: inline-block;

}


header ul li a:hover{

    color: #1ed760;

}


section{

    padding: 150px 350px;

    background-color: #1d75de;

    color: white;

}


section h1{

    font-size: 40px;

}


section p{

    padding-top: 10px;

    font-family: 'spicetify';

    font-size: 14px;

}

section .tombol{

    margin-top: 20px;

    display: flex

    

}

section .tombol .kotak{

    background-color: black;

    color: white;

    text-align: center;

    padding: 15px;

    width: 90px;

    border-radius: 45px;

}


section .tombol .kotak2{

    margin-left: 10px;

    color: white;

    border: 2px solid white;

    padding: 15px;

    border-radius: 45px;

    width: fit-content;

}

section .keterangan{

    display: flex;

    color: white;

    margin-top: 20px;

    font-family: 'spicetify';

    font-size: 10px;

}


.keterangan #syarat{

    text-decoration: underline white;

    cursor: pointer;

}


article{

    padding: 98px;

    background-color: black;

    color: white;

    text-align: center;

}

article h1{

    font-size: 40px;

}

article p{

    padding-top: 20px;

    font-family: 'spicetify';

    font-size: 20px;

}

article h3{

    margin: 40px;

    padding: 15px;

    color: black;

    background-color: white;

    width: 150px;

    align-items: center;

    border-radius: 45px;

}

p a{

    color: white;

    font-size: 10px;

    text-decoration: underline white;

}


/* bagian kenapa beli premium? */

aside{

    padding-top: 100px;

    text-align: center;

}

aside h1{

    font-size: 40px;

}

aside .cardview{

    padding: 50px;

    display: grid;

    grid-template-columns: 25% 25% 25% 25%;

}


.cardview h3{

    font-size: 24px;

    margin-top: 200px;

}


.card1, .card2, .card3, .card4{

    margin: 20px;

}


.card1 p, .card2 p, .card3 p, .card4 p{

    font-size: 14px;

    font-family: 'spicetify';

}


.pembelian{

    background-color: #eeeeee;

    text-align: center;

    padding-top: 50px;

}


.pembelian p{

    font-family: 'spicetify';

}


.paket{

    padding: 50px;

    display: flex;

    justify-content: center;

}

.paket1 h5, .paket2 h5, .paket3 h5, .paket4 h5{

    background-color: black;

    color: white;

    border-radius: 45px;

    padding: 15px;

}

.paket p{

    padding-top: 8px;

    font-family: 'spicetify';

    font-size: 14px;

    text-align: left;

}

.paket h3{

    text-align: left;

}


.paket1, .paket2, .paket3, .paket4{

    background-color: white;

    box-shadow: 0px 2px 2px #6a6a6a;

    border-radius: 20px;

    margin: 10px;

    padding: 20px;

}


/* bagian footer */

footer{

    background-color: black;

    color: white;

    padding: 80px;

}

footer .akhir{

    display: flex;

    justify-content: space-around;

}

footer img{

    width: 9%;

    height: 9%;

}

.akhir h5{

    color: #6a6a6a;

    font-size: 18px;

}

.akhir ul li{

    list-style: none;

    margin-top: 8px;

}

.akhir ul li a{

    text-decoration: none;

    font-size: 14px;

    color: white;

    font-family: 'spicetify';

}

.akhir .sosmed i{

    margin-right: 15px;

    color: white;

}


.akhir ul li a:hover{

    color: #1ed760;

}

.akhir .sosmed i:hover{

    color: #1ed760;

}


Maka Hasilnya menjadi seperti ini:







Comments

Post a Comment

Popular posts from this blog

APLIKASI PERPUSTAKAAN DENGAN BOOTSTRAP 5, PHP DAN MYSQL

 koneksi.php <?php  $db = mysqli_connect("localhost","root","","perpus"); function query($query){     global $db;     $result = mysqli_query($db, $query);     $rows = [];     while ($row = mysqli_fetch_assoc($result)) {         $rows[] = $row;     }     return $rows; } function register($nis,$nama,$password){     global $db;     $result = mysqli_query($db, "select nis from user where nis = '$nis'");     if (mysqli_fetch_assoc($result)) {         echo "<script>         alert('NIS sudah terdaftar!')         </script>";         return false;     }     $sql = mysqli_query($db,"insert into user value('$nis','$nama','$password')");     return $sql; } function login($nis,$password){     global $db;     $sql = mysqli_query($db, "selec...
Read more

Aplikasi PKL dengan PHP

PHP koneksi.php <?php       $host = "localhost"; $username = "root"; $password = ""; $database = "pkl"; $koneksi = mysqli_connect($host,$username,$password,$database);       function register($username,$password,$nama) {         global $koneksi; $insert = mysqli_query($koneksi,"insert into user values ('$username','$password','$nama')"); return $insert; }   function login($username,$password,$remember) {         global $koneksi; $query = mysqli_query($koneksi,"select * from user where username='$username'"); $data_user = $query->fetch_array(); if(password_verify($password,$data_user['password'])) { if($remember) { setcookie('username', $username, time() + (60 * 60 * 24 * 5), '/'); setcookie('nama', $data_user['nama'], time() + (60 * 60 * 24 * 5), '/'); } $_SESSION['user...
Read more