Skip to main content

Tugas (4) Pemgrograman Web D - Website Catalog

Di kesempatan kali ini saya membuat suatu website kalatog sederhahna. Yang saya pilih adalah mengenai barang - barang keluaran Steelseries. Web ini dibuat menggunakan html dan css tanpa ada bantuan framework manapun seperti Tailwind atau Bootstrap. Berikut merupakan preview tampilan dari websitenya.

Website dihost pada Vercel dan bisa anda kunjungi di sini.

Berikut merupakan source code untuk website yang saya buat

  • html
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>GG Store</title>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;800&display=swap');
    </style>
    <link rel="stylesheet" href="style.css" />
    </head>
    <body>
    <nav class="nav-container">
    <div class="nav-logo">
    <img class="app-logo" src="/images/app_logo.svg"/>
    <a class="nav-title unselect">GG Store</a>
    <div/>
    <a class="nav-item unselect">Home</a>
    <a class="nav-item unselect">About</a>
    <a class="nav-item unselect">Contact</a>
    </nav>
    <div id="base-container">
    <div class="span-8-center-xl">
    <div class="item-card">
    <img class="item-image"
    src="images/arctis_prime.png"/>
    <div class="item-content">
    <a class="item-title">Arctis Prime</a>
    <a class="item-subtitle">Headset</a>
    <a class="item-description">Advanced high fidelity audio drivers with the same premium hardware and tuning from the Arctis Pro. Built for extreme durability and lightweight performance with aluminum alloy and steel. Noise isolating leather-like ear cushions for both long-lasting comfort and noise isolation. Discord-certified ClearCast microphone. Detachable 3.5mm cable compatible with all gaming platforms including PC, Xbox, PlayStation, and Switch
    </a>
    <a class="item-price">$119.99</a>
    <a class="item-ship unselect">Place Order</a>
    </div>
    </div>
    <div class="item-card">
    <img class="item-image"
    src="images/arctis_pro_wireless.jpg"/>
    <div class="item-content">
    <a class="item-title">Arctis Pro Wireless</a>
    <a class="item-subtitle">Headset</a>
    <a class="item-description">Dual Wireless: 2.4G lossless + Bluetooth. Industry-leading hi-res capable speaker drivers. Lightweight aluminum alloy and steel construction. Swappable dual-battery system
    </a>
    <a class="item-price">$329.99</a>
    <a class="item-ship unselect">Place Order</a>
    </div>
    </div>
    <div class="item-card">
    <img class="item-image"
    src="images/prime_mini.png"/>
    <div class="item-content">
    <a class="item-title">Prime Mini Wireless</a>
    <a class="item-subtitle">Mice</a>
    <a class="item-description">Smaller. Lighter. All Performance. 73g ultra lightweight and mini form factor was designed with top esports pros for sustained comfort and battle-tested durability. Prestige Optical Magnetic Switches are a first in esports and harness the power of light for response times and utilize magnetic components to last 5x longer than the competition. Pro grade 1-to-1 tracking with the TrueMove Air optical gaming sensor. Quantum 2.0 Wireless offers lag-free gaming with dual channel optimization. Over 100 hours of high-performance 1000Hz gameplay plus fast-charge
    </a>
    <a class="item-price">$129.99</a>
    <a class="item-ship unselect" href="https://steelseries.com/gaming-mice/prime-mini-wireless">Place Order</a>
    </div>
    </div>
    <div class="item-card">
    <img class="item-image"
    style="object-position: 20% 0;"
    src="images/qck_prism_xl.png"/>
    <div class="item-content">
    <a class="item-title">QcK Prism XL</a>
    <a class="item-subtitle">Mice</a>
    <a class="item-description">Smaller. Lighter. All Performance. 73g ultra lightweight and mini form factor was designed with top esports pros for sustained comfort and battle-tested durability. Prestige Optical Magnetic Switches are a first in esports and harness the power of light for response times and utilize magnetic components to last 5x longer than the competition. Pro grade 1-to-1 tracking with the TrueMove Air optical gaming sensor. Quantum 2.0 Wireless offers lag-free gaming with dual channel optimization. Over 100 hours of high-performance 1000Hz gameplay plus fast-charge
    </a>
    <a class="item-price">$59.99</a>
    <a class="item-ship unselect" href="https://steelseries.com/gaming-mousepads/qck-prism-series?size=xl">Place Order</a>
    </div>
    </div>
    </div>
    <!-- <div class="span-8-center-xl height-screen"></div>
    <div class="span-8-center-xl height-screen"></div> -->
    </div>
    <footer>
    <a class="footer-title">© Axel Briano Suherik 2021</a>
    </footer>
    </body>
    </html>
    view raw index.html hosted with ❤ by GitHub
  • css
    body {
    margin: 0;
    padding: 0;
    background-color: ghostwhite;
    font-family: 'Poppins', sans-serif;
    }
    footer {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
    padding-top: 3em;
    padding-bottom: 3em;
    background-color: #000000;
    }
    .footer-title {
    color: white;
    text-align: center;
    }
    .nav-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: start;
    background-color: #000000;
    }
    .app-logo {
    height: 1.2em;
    margin: 0;
    }
    .nav-logo {
    padding: 1em 2em;
    font-weight: 800;
    align-content: space-between;
    display: flex;
    flex-flow: row nowrap;
    color: white;
    }
    .nav-title {
    margin-left: 1em;
    margin-right: 2em;
    }
    .nav-item {
    padding: 1em 2em;
    color: white;
    }
    .unselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }
    .nav-item:hover {
    background-color: #383838;
    }
    .container-fluid {
    width: 100%;
    }
    #base-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(100px, auto);
    }
    .span-8-center-xl {
    grid-column: 4 / span 6;
    }
    .height-screen {
    height: 100vh;
    }
    .item-card {
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    margin: 2em 0em;
    /* background-color: gold; */
    }
    .item-image {
    margin: 0;
    height: 25em;
    width: 20em;
    object-fit: cover;
    object-position: 50% 0;
    /* background-color: greenyellow; */
    }
    .item-content {
    display: flex;
    flex-flow: column;
    margin: 0em 2em;
    /* background-color: khaki; */
    }
    .item-title {
    font-weight: 800;
    font-size: 2.4rem;
    }
    .item-subtitle {
    font-weight: 600;
    font-size: 1.5rem;
    }
    .item-description {
    font-weight: 400;
    font-size: 1rem;
    }
    .item-price {
    font-weight: 600;
    font-size: 1.3rem;
    margin-top: 0.6em;
    }
    .item-ship {
    font-weight: 600;
    font-size: 1.2rem;
    border-radius: 0.2em;
    text-align: center;
    text-decoration: none;
    padding: 0.4em 0;
    margin-top: 1em;
    color: white;
    background-color: #FC4E03;
    }
    .item-ship:hover {
    background-color: #FD834E;
    }
    .container-placeholder {
    width: 100%;
    height: 100vh;
    }
    view raw style.css hosted with ❤ by GitHub

Axel Briano Suherik

05111940000137

Pweb - D

Comments

Post a Comment

Popular posts from this blog

Tugas (3) Pemgrograman Web D - Warung Tegal

Tugas kali ini membuat website Warung Makan Tegal. Dalam proses pengerjaannya, menggunakan  HTML ,   CSS ,   dan  JavaScript  serta  VSCode  sebagai  text editor . Di website ini, saya menggunakan carousel dan ada satu content video pada carousel tersebut menggunakan tag html video . Untuk websitenya sendiri bisa di akses melalui link berikut . Content website terdiri dari carousel, lalu ada video promosi Warung Tegal. Kemudian menu yang disediakan. Berikut merupakan preview dari Website Warung Tegal Source code index.html carousel.css carousel.js Axel Briano Suherik 05111940000137 Pweb - D
Post a Comment
Read more

Tugas (6) Pemrograman Web D - Form Login & Contact Us dengan Bootstrap

 Tugas kali ini membuat website form login  dan contact us  menggunakan salah satu framework CSS paling populer yaitu Bootstrap . Dalam pengerjaannya digunakan HTML, CSS(Bootstrap) dan custom, serta sedikit JavaScript. JS digunakan untuk menampilkan alert bahwa data telah berhasil di-submit atau dikirim. Laman website dapan diakses pada link berikut . Untuk hosting web digunakan Vercel . Website terdiri dari satu halaman dan 2 bagian: Login form,  berisi halaman yang memuat form untuk login, dan sign in. Email dan password tidak boleh kosong. Newsletter section, berisi informasi mengenai pengguna yang ingin berlangganan berita update dari website ini. Source Code index.html main.css index.js
Post a Comment
Read more

Tugas 5 Rekayasa Kebutuhan (A) - Spesifikasi Kebutuhan Aplikasi Moka

Tugas kali ini adalah membuat spesifikasi kebutuhan dari suatu aplikasi bernama Moka. PoS merupakan sistem untuk memudahkan proses pembayaran para pelanggan di suatu pelaku usaha ketika membeli suatu produk atau jasa. Sistem PoS biasanya digunakan pada smartphone, tablet, komputer atau mesin EDC. Moka perupakan suatu aplikasi yang menerapkan  point-of-sales (PoS), Moka menggabungkan perangkat lunak dan perangkat keras membentuk sistem untuk memudahkan transaksi oleh pelaku usaha dengan pelanggan. Dengan Moka pelaku usaha dapat melakukan beragam hal seputar penjualan, mulai dari membuat entry produk atau jasa baru, mengatur stok, harga, keterangan, serta menampilkan grafik grafik data transaksi yang sudah di akumulasi dengan cepat dan secara real-time . Kebutuhan Fungsional Sistem menyediakan fitur login Sistem menyediakan fitur register Sistem menyediakan sejumlah opsi jenis usaha Sistem menyediakan fitur untuk mengelola menu Sistem menyediakan fitur untuk melakukan pengelolaan sh...
Post a Comment
Read more