Tugas 4 PWEB

Membuat Layout dengan HTML dan CSS

Pada tugas 4 ini diminta untuk memodifikasi web 'Belajar Membuat Layout dengan HTML dan CSS' menjadi website untuk menampilkan katalog produk. 

Dokumentasi:

Source Code:
<!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">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/005e7fbdf6.js" crossorigin="anonymous"></script>
<title>De-Books</title>
</head>
<body>
<header>
<img src="img/name.png" alt="De-Books">
<nav class="navMenu">
<a href="#">Home</a>
<a href="#">Products</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<div id="icons">
<div class="icon">
<i class="fas fa-search"></i>
</div>
<div class="icon">
<i class="fas fa-shopping-bag"></i>
</div>
</div>
</header>
<main>
<section id="main">
<div class="container">
<img src="img/kimiCover.jpg" alt="kimi no nawa cover">
</div>
<div class="container">
<div id="main-content">
<p><span class="main-sub">Light Novel</span></p>
<p><span class="main-title">Kimi no Nawa</span></p>
<p><span class="main-sub">Makoto Shinkai</span></p>
<p class="main-description">Mitsuha Miyamizu, a high school girl living in the fictional town of
Itomori in Gifu Prefecture's
mountainous Hida region is fed up with her life in the countryside and wishes to be a handsome
Tokyo
boy in her next life. Later, Taki Tachibana, a high school boy living in Tokyo, wakes up and
realizes that he is Mitsuha, who herself has somehow ended up in Taki's body.</p>
<p><span class="main-price">Rp 100.000</span></p>
<button>Add to Cart</button>
</div>
</div>
</section>
<section class="popular">
<p class="section-title">Popular Books</p>
<div class="items">
<div class="card">
<img src="img/AliceCover.jpeg" alt="Alice in Borderland Cover">
<p><span class="sub">Manga</span></p>
<p><span class="title">Alice in Borderland</span></p>
<p><span class="sub">Haro Aso</span></p>
<p class="price">Rp 35.000</p>
<button>Add to Cart</button>
</div>
<div class="card">
<img src="img/KonoCover.jpg" alt="KonoSuba Cover">
<p><span class="sub">Manga</span></p>
<p><span class="title">KonoSuba</span></p>
<p><span class="sub">Natsume Akatsuki</span></p>
<p class="price">Rp 35.000</p>
<button>Add to Cart</button>
</div>
<div class="card">
<img src="img/SAOCover.jpg" alt="Sword Art Online Cover">
<p><span class="sub">Light Novel</span></p>
<p><span class="title">Sword Art Online</span></p>
<p><span class="sub">Reki Kawahara</span></p>
<p class="price">Rp 90.000</p>
<button>Add to Cart</button>
</div>
<div class="card">
<img src="img/AOTCover.jpg" alt="Attack on Titan Cover">
<p><span class="sub">Manga</span></p>
<p><span class="title">Attack on Titan</span></p>
<p><span class="sub">Hajime Isayama</span></p>
<p class="price">Rp 35.000</p>
<button>Add to Cart</button>
</div>
<div class="card">
<img src="img/IWantCover.jpg" alt="Kimi no Suizō o Tabetai Cover">
<p><span class="sub">Light Novel</span></p>
<p><span class="title">Kimi no Suizō o Tabetai</span></p>
<p><span class="sub">Yoru Sumino</span></p>
<p class="price">Rp 100.000</p>
<button>Add to Cart</button>
</div>
</div>
</section>
</main>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 16px;
width: 100%;
background-color: #FFF5E6;
}
body {
margin: 2.5rem auto;
margin-bottom: 0;
max-width: 80%;
min-height: 100vh;
background-color: #FFF;
border-radius: 10px;
}
header {
display: flex;
flex: auto;
justify-content: space-between;
padding: 0 1rem;
}
.navMenu {
justify-self: center;
}
.navMenu a {
color:black;
text-decoration: none;
font-size: 1.2em;
text-transform: uppercase;
font-weight: 500;
display: inline-block;
line-height: 72px;
margin: 0 1rem;
}
.navMenu a:hover {
color: #FFA10E;
}
#icons {
width: 172px;
display: flex;
justify-content: center;
align-items: center;
}
.icon i{
font-size: 1rem;
color: black;
margin: 0 1rem;
}
.icon i:hover{
color: #FFA10E;
}
main {
width: 94%;
min-height: 50vh;
margin: 0 auto;
background-color: #FFF5E6;
}
section#main {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-height: 50vh;
}
#main .container{
display: flex;
justify-content: center;
align-items: center;
width: 50%;
box-sizing: border-box;
}
.container img {
display: block;
margin: 1.5rem auto;
border: 1px solid #131428;
}
#main-content {
padding: 0 1rem;
}
.main-description {
text-align: justify;
margin-right: 2.5rem;
}
.main-sub {
color: gray;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 0.25rem;
display: inline-block;
}
.main-title {
color: #131428;
font-weight: 700;
text-transform: uppercase;
font-size: 1.75rem;
margin-bottom: 0.25rem;
display: inline-block;
}
.main-price {
color: #131428;
font-weight: 700;
text-transform: uppercase;
font-size: 1.5rem;
margin: 0.25rem 0;
display: inline-block;
}
button {
position: relative;
display: inline-block;
background-color: #131428;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
color: white;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
font-family: "Roboto", sans-serif;
border: 2px solid #131428;
transition: all 0.1s linear;
cursor: pointer;
}
button:hover {
opacity: 0.7;
color: #FFA10E;
}
section.popular {
width: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
min-height: 50vh;
padding-top: 1.5rem;
background-color: white;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
/* max-width: 300px; */
width: 20%;
/* margin: auto; */
text-align: center;
font-family: arial;
}
.price {
color: grey;
font-size: 22px;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 0.75rem;
}
.card button:hover {
opacity: 0.7;
color: #FFA10E;
}
.items {
display: flex;
flex-direction: row;
justify-content: space-evenly;
min-height: 35vh;
}
.card img {
padding-top: 0.75rem;
width: 7.5rem;
height: 12.5rem;
}
.sub {
color: gray;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
/* margin-bottom: 0.25rem; */
display: inline-block;
}
.title {
color: #131428;
font-weight: 700;
text-transform: uppercase;
font-size: 1.25rem;
/* margin-bottom: 0.25rem; */
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
.price {
color: #131428;
font-weight: 700;
text-transform: uppercase;
font-size: 0.9rem;
margin: 0.25rem 0;
display: inline-block;
}
.section-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
view raw style.css hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 1 MPPL A 2021

Gambar
Nama : Andika Nugrahanto NRP : 05111940000031 Kelas : MPPL A 2021 1. Bergabung ke Situs Freelance Berdasarkan rekomendasi yang saya dapat dari kelas, saya memutuskan untuk mendaftar di salah satu web freelance yaitu  https://projects.co.id/ . Pada web tersebut saya terdaftar dengan username Anran31. 2. Memilih Project Dalam Situs Tersebut Karena saya tertarik pada bidang web development, maka saya menyari project yang berhubungan dengan web development. Setelah mencari, saya menemukan satu project yang sesuai dengan minat saya.  Berdasarkan Skill Requirement diatas, kurang lebih hal yang saya bisa dan tidak bisa adalah sebagai berikut: HTML, CSS, JS (Sedang belajar) PHP & Laravel (Sedang belajar) Codeigniter (Belum bisa) MySQL (Bisa) Github (Bisa) Sekian pemaparan saya untuk tugas kali ini. Terima kasih.
Baca selengkapnya

Tugas 3 Rekayasa Kebutuhan D

MCAS(Maneuvering Characteristics Augmentation System) Posisi dan ukuran mesin yang lebih besar pada Boeing 737 MAX dibanding Boeing 737 NG maka peletakan mesin ini terletak lebih maju dan sedikit naik daripada seri sebelumnya, sehingga menyebabkan cenderungnya mendorong hidung pesawat ke atas pada manuver tertentu. Keputusan desain ini mengakibatkan munculnya kemungkinan stalling pada pesawat ini. MCAS ini membuat sistem otomatis yang mengkompensasi gerakan pitch (dongakan hidung pesawat), agar dapat membantu pilot menurunkan hidung pesawat, apabila angle of attack terlalu besar saat terbang manual. Angle of attack yang terlalu besar inilah yang berisiko membuat pesawat stall. Fitur otomatis ini (MCAS), tetap aktif meski pesawat terbang dalam kondisi manual (Autopilot Off). Sistem MCAS akan menurunkan hidung pesawat dengan cara mengatur roda penyesuaian (trim) agar horizontal stabilizer (sayap kecil di ekor pesawat) berputar, membuat hidung pesawat turun. MCAS akan menggerakkan horizon...
Baca selengkapnya

Tugas 2 Rekayasa Kebutuhan D

Gambar
 Nama   : Andika Nugrahanto NRP         : 05111940000031 Kelas      : RK - D SKPL yang akan saya analisis untuk tugas ini adalah SKPL pembuatan perangkat lunak untuk Mizan Store. Perangkat lunak tersebut dibuat dengan tujuan untuk mempermudah melakukan pencarian dan pembelian buku secara online. Berikut adalah SKPL yang akan saya analisis untuk tugas kali ini: Berdasarakan gambar di atas, input yang dibutuhkan untuk proses rekayasa kebutuhan ada 5, yaitu sebagai berikut: 1. Existing Systems Information Mizan store merupakan salah satu toko buku dan perangkat lunak yang dikembangkan bertujuan untuk mempermudah pembeli dalam melakukan pencarian dan pembelian buku secara online. Pembeli sekarang tidak perlu pergi ke Mizan store dan mencari buku yang diinginkan secara manual, tetapi hanya perlu pergi ke web Mizan Store, lalu memilih buku yang ingin dibeli, kemudian pembeli dapat melakukan pembayaran melalui berbagai macam cara seperti o...
Baca selengkapnya