Scribd
Upload
4 views17 pages

Html

The document outlines the structure and styling of a Starbucks landing page, including HTML for layout, CSS for design, and JavaScript for functionality. It features sections for navigation, product offerings, and a shopping cart system. The design emphasizes a coffee theme with a user-friendly interface for ordering and exploring products.

Uploaded by

ilkom2301
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views17 pages

Html

The document outlines the structure and styling of a Starbucks landing page, including HTML for layout, CSS for design, and JavaScript for functionality. It features sections for navigation, product offerings, and a shopping cart system. The design emphasizes a coffee theme with a user-friendly interface for ordering and exploring products.

Uploaded by

ilkom2301
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

Html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

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

<title>Starbucks Landing Page</title>

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

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@300;500;700&display=swap" rel="stylesheet">

</head>

<body>

<header>

<img src="logo.png" alt="Logo" height="30" />

<input type="text" placeholder="Tell us what you need" />

<nav>

<a href="#">Home</a>

<a href="#">Gift</a>

<a href="#">Order</a>

<a href="#">Pay</a>

<a href="#">Store</a>

</nav>

</header>

<section class="hero">
<div class="hero-text">

<h1>HANDCRAFTED</h1>

<p>Choose from our wide range of handcrafted coffees</p>

<button>Order Now</button>

</div>

</section>

<section class="section">

<h2>Handcrafted Curations</h2>

<div class="curations">

<div class="card">Bestseller</div>

<div class="card">Drinks</div>

<div class="card">Food</div>

<div class="card">Merchandise</div>

<div class="card">Coffee At Home</div>

</div>

</section>

<section class="section">

<h2>Barista Recommends</h2>

<div class="recommendations">

<div class="card">

<img src="frappuccino.jpg" alt="Java Chip Frappuccino" />

<h4>Java Chip Frappuccino</h4>

<p>$15.20</p>

<button>Add Item</button>

</div>

<div class="card">
<img src="americano.jpg" alt="Caffe Americano" />

<h4>Caffe Americano</h4>

<p>$10.30</p>

<button>Add Item</button>

</div>

<div class="card">

<img src="cold-coffee.jpg" alt="Cold Coffee" />

<h4>Cold Coffee</h4>

<p>$11.20</p>

<button>Add Item</button>

</div>

<div class="card">

<img src="double-choco.jpg" alt="Double Chocolate Chip" />

<h4>Double Chocolate Chip</h4>

<p>$11.20</p>

<button>Add Item</button>

</div>

</div>

</section>

<section class="learn-more">

<h2>How Coffee Stirred Revels & Rebels</h2>

<p>Delighted by the jovial character of coffee, everyone was inspired to bring it


home...</p>

<button>Learn More</button>

</section>

<footer>
<div>

<h4>About Us</h4>

<a href="#">Our Heritage</a>

<a href="#">Our Company</a>

<a href="#">Coffeehouse</a>

</div>

<div>

<h4>Responsibility</h4>

<a href="#">Community</a>

<a href="#">Ethical Sourcing</a>

<a href="#">Environment</a>

<a href="#">Diversity</a>

</div>

<div>

<h4>Quick Links</h4>

<a href="#">Careers</a>

<a href="#">Season's Gifting</a>

<a href="#">FAQs</a>

<a href="#">Customer Service</a>

<a href="#">Delivery</a>

</div>

<div class="social-icons">

<h4>Social Media</h4>

<a href="#">Twitter</a>

<a href="#">Instagram</a>

<a href="#">Facebook</a>

</div>

<div>
<h4>Downloads</h4>

<a href="#">Google Play</a>

<a href="#">App Store</a>

</div>

<div class="bottom-bar">

<a href="#">Web Accessibility</a> |

<a href="#">Privacy Statement</a> |

<a href="#">Terms of Use</a> |

<a href="#">Contact Us</a>

<p>&copy; 2022 Starbucks Coffee Company. All rights reserved.</p>

</div>

</footer>

</body>

</html>

Css

/* RESET & DASAR */

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Arial', sans-serif;

body {

background-color: #f4f1e1; /* Warna dasar lembut */

color: #3e2c23; /* Warna coklat kopi */

line-height: 1.6;
font-size: 16px;

/* HEADER */

.topbar {

background-color: #3e2c23; /* Coklat tua kopi */

color: white;

padding: 1rem 3rem;

display: flex;

justify-content: space-between;

align-items: center;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

.topbar .logo {

font-size: 1.8rem;

font-weight: bold;

.topbar nav a {

color: white;

margin-left: 2rem;

text-decoration: none;

font-size: 1rem;

font-weight: bold;

transition: all 0.3s ease-in-out;

}
.topbar nav a:hover {

color: #d6a760; /* Warna emas yang elegan */

/* HERO */

.hero {

background: url('kopi-wallpaper.jpg') center/cover no-repeat;

color: white;

text-align: center;

padding: 120px 20px;

.hero h1 {

font-size: 4rem;

margin-bottom: 10px;

text-shadow: 2px 2px 5px rgba(0,0,0,0.3);

.hero p {

font-size: 1.5rem;

margin-bottom: 30px;

text-shadow: 1px 1px 3px rgba(0,0,0,0.2);

/* TOMBOL */

.btn {

background-color: #d6a760; /* Emas terang */

color: white;
padding: 12px 30px;

border: none;

border-radius: 50px;

font-weight: bold;

cursor: pointer;

text-transform: uppercase;

transition: all 0.3s ease-in-out;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

.btn:hover {

background-color: #bb8a3c; /* Lebih gelap saat hover */

transform: scale(1.1);

/* SECTION TENTANG KAMI */

.about {

padding: 60px 30px;

background-color: #fff;

text-align: center;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

margin-top: 30px;

.about h2 {

font-size: 2.5rem;

margin-bottom: 20px;

color: #3e2c23;
}

.about-images {

display: flex;

justify-content: center;

gap: 20px;

.about-images img {

width: 300px;

height: 200px;

object-fit: cover;

border-radius: 10px;

/* MENU */

.menu {

padding: 60px 30px;

background-color: #f4f1e1;

text-align: center;

.menu h2 {

font-size: 2.5rem;

margin-bottom: 30px;

.menu-items {
display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 20px;

.menu-items .item {

background: white;

border-radius: 10px;

width: 250px;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

overflow: hidden;

text-align: center;

.menu-items .item img {

width: 100%;

height: 200px;

object-fit: cover;

.menu-items .item h3 {

margin: 20px 0;

font-size: 1.5rem;

.menu-items .item p {

font-size: 1.2rem;
margin-bottom: 15px;

/* FEEDBACK */

.feedback {

padding: 60px 30px;

background-color: #fff;

text-align: center;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

.feedback h2 {

font-size: 2.5rem;

margin-bottom: 30px;

.feedback-list {

margin-top: 30px;

.feedback-item {

margin-bottom: 25px;

font-style: italic;

font-size: 1.2rem;

color: #555;

.feedback-item h4 {
margin-top: 10px;

font-weight: bold;

font-size: 1rem;

color: #3e2c23;

/* KERANJANG BELANJA */

.cart-section {

padding: 60px 30px;

background-color: #fff;

text-align: center;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

.cart-section h2 {

font-size: 2.5rem;

margin-bottom: 30px;

#cart-items {

margin-bottom: 30px;

#total-price {

font-size: 1.5rem;

font-weight: bold;

}
/* Toko dan Kontak */

.store {

padding: 60px 30px;

background-color: #f4f1e1;

text-align: center;

.store h2 {

font-size: 2.5rem;

margin-bottom: 30px;

.store-links {

margin-bottom: 30px;

.store-links button {

margin: 10px;

padding: 12px 30px;

background-color: #3e2c23;

color: white;

border: none;

border-radius: 50px;

font-weight: bold;

cursor: pointer;

transition: all 0.3s ease-in-out;

}
.store-links button:hover {

background-color: #d6a760;

transform: scale(1.1);

.store-details {

margin-top: 20px;

background-color: #fff;

padding: 20px;

border-radius: 10px;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

/* FOOTER */

footer {

background-color: #3e2c23;

color: white;

padding: 40px 30px;

text-align: center;

footer p {

margin-top: 20px;

font-size: 1rem;

/* RESPONSIVE */

@media (max-width: 768px) {


.topbar {

flex-direction: column;

align-items: flex-start;

text-align: center;

.menu-items {

flex-direction: column;

.about-images {

flex-direction: column;

align-items: center;

Js

let keranjang = [];

function masukWebsite() {

document.getElementById("welcome-screen").style.display = "none";

document.getElementById("main-content").style.display = "block";

function tambahKeKeranjang(nama, harga) {

const existing = keranjang.find(item => item.nama === nama);

if (existing) {
existing.jumlah += 1;

} else {

keranjang.push({ nama, harga, jumlah: 1 });

renderKeranjang();

function renderKeranjang() {

const container = document.getElementById('cart-items');

container.innerHTML = '';

let total = 0;

keranjang.forEach(item => {

const itemDiv = document.createElement('div');

itemDiv.textContent = `${item.nama} x${item.jumlah} - Rp ${item.harga * item.jumlah}`;

container.appendChild(itemDiv);

total += item.harga * item.jumlah;

});

document.getElementById('total-price').textContent = `Total: Rp ${total.toLocaleString()}`;

function prosesPesanan() {

if (keranjang.length === 0) {

alert("Keranjang kosong. Silakan tambah produk terlebih dahulu.");

return;

}
const konfirmasi = confirm("Apakah Anda yakin ingin memesan?");

if (konfirmasi) {

alert("Terima kasih! Pesanan Anda sedang diproses.");

keranjang = [];

renderKeranjang();

You might also like