Tugas PWEB 3
Nama : Darren Prasetya
NRP : 5025211162
Kelas : Pemrograman Web A
Tahun : 2022/2023
Pada meet keempat, kami diberikan sebuah tugas untuk membuat website landing page. Disini saya memilih website https://apple.com untuk ditiru.
Link Repository: Mikask1/Tugas-PWEB-3 (github.com)
Link Deploy: Apple (tugas-pweb-3.netlify.app) Berikut adalah kode saya yang sudah saya komentar.
-- index.html
-- index.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>Apple</title>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/images/apple.ico">
<!-- CSS -->
<link rel="stylesheet" href="index.css" />
</head>
<body>
<!-- NavBar -->
<nav>
<div class="layout navbar">
<img src="images/apple.png" class="icon" onclick="toTop()">
<p>Store</p>
<p>Mac</p>
<p>iPad</p>
<p>iPhone</p>
<p>Watch</p>
<p>AirPods</p>
<p>TV & Home</p>
<p>Entertainment</p>
<p>Accesories</p>
<p>Support</p>
</div>
</nav>
<main id="main">
<!-- Hero Section -->
<section class="hero">
<div class="layout">
<h1>iPhone 14 Pro</h1>
<h2>Pro. Beyond.</h2>
<div class="hero-buttons">
<span>
<h3 onclick="alert('Congrats. You learned more.')">Learn More</h3>
</span>
<span>
<h3 onclick="alert('You actually bought it. Check your bank account.')">Buy</h3>
</span>
</div>
<video src="images/apple.mp4" autoplay muted class="hero-video" id="vid">
</div>
</section>
<!-- After Hero Section -->
<section class="hero hero-next">
<div class="layout">
<h1>iPhone 14</h1>
<h2>Big and Bigger</h2>
<div class="hero-buttons">
<span>
<h3 onclick="alert('Congrats. You learned more.')">Learn More</h3>
</span>
<span>
<h3 onclick="alert('You actually bought it. Check your bank account.')">Buy</h3>
</span>
</div>
<img src="images/hero-next.jpg" class="hero-video hero-next-image">
</div>
</section>
<!-- Grid Section -->
<section class="grid">
<!-- iPhone 14 -->
<section class="bg-white grid-item">
<div class="grid-padding">
<h1>iPhone 14</h1>
<h2>Big and Bigger</h2>
<div class="hero-buttons">
<span>
<h3 onclick="alert('Congrats. You learned more.')">Learn More</h3>
</span>
<span>
<h3 onclick="alert('You actually bought it. Check your bank account.')">Buy</h3>
</span>
</div>
<div class="img-container">
<img src="images/ipad.jpg" class="hero-video hero-next-image">
</div>
</div>
</section>
<!-- MacBook Pro -->
<section class="bg-black grid-item">
<div class="grid-padding">
<h1>MacBook Pro</h1>
<h2>Superchaged with M2 Pro and M2 Max</h2>
<div class="hero-buttons">
<span>
<h3 onclick="alert('Congrats. You learned more.')">Learn More</h3>
</span>
<span>
<h3 onclick="alert('You actually bought it. Check your bank account.')">Buy</h3>
</span>
</div>
<div class="img-container">
<img src="images/macbook.jpg" class="hero-video hero-next-image">
</div>
</div>
</section>
<!-- HomePod -->
<section class="bg-black grid-item">
<div class="grid-padding">
<h1>HomePod</h1>
<h2>Profound sound</h2>
<div class="hero-buttons">
<span>
<h3 onclick="alert('Congrats. You learned more.')">Learn More</h3>
</span>
<span>
<h3 onclick="alert('You actually bought it. Check your bank account.')">Buy</h3>
</span>
</div>
<div class="img-container">
<img src="images/homepod.jpg" class="hero-video hero-next-image bigger">
</div>
</div>
</section>
<!-- AirPods Pro -->
<section class="bg-black grid-item">
<div class="grid-padding">
<h1>AirPods Pro</h1>
<h2>Rebuilt from the sound up</h2>
<div class="hero-buttons">
<span>
<h3 onclick="alert('Congrats. You learned more.')">Learn More</h3>
</span>
<span>
<h3 onclick="alert('You actually bought it. Check your bank account.')">Buy</h3>
</span>
</div>
<div class="img-container">
<img src="images/ipods.jpg" class="hero-video hero-next-image bigger">
</div>
</div>
</section>
<!-- Apple Fitness -->
<section class="bg-gray grid-item specific">
<div class="grid-padding">
<h1>Apple Fitness+</h1>
<h2>Welcome to the year of you</h2>
<h2>Now all you need is iPhone.</h2>
<div class="hero-buttons">
<span>
<h3 onclick="alert('Congrats. You learned more.')">Learn More</h3>
</span>
<span>
<h3 onclick="alert('You actually bought it. Check your bank account.')">Buy</h3>
</span>
</div>
<div class="img-container">
<img src="images/iphones.jpg" class="hero-video hero-next-image big">
</div>
</div>
</section>
<!-- Apple Card -->
<section class="bg-white grid-item specific">
<div class="grid-padding">
<h1>Apple Card</h1>
<h2>Get up to 3% Daily Cashback</h2>
<h2>with every purchase.</h2>
<div class="hero-buttons">
<span>
<h3 onclick="alert('Congrats. You learned more.')">Learn More</h3>
</span>
<span>
<h3 onclick="alert('You actually bought it. Check your bank account.')">Buy</h3>
</span>
</div>
<div class="img-container">
<img src="images/apple-pay.jpg" class="hero-video hero-next-image big">
</div>
</div>
</section>
</section>
</main>
<!-- Footer -->
<footer style="height:25vh; background-color:black;">
<div class="footer-div">
<a onclick="toTop()"><span><img src="images/apple.png" class="icon-footer">Apple</span></a>
</div>
</footer>
</body>
<script>
// Play video immediately
document.getElementById('vid').play();
// Smooth scroll to top
function toTop(){
scrollTo({
top: 0,
behavior: 'smooth',
})
}
</script>
</html>
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap");
body {
font-family: "IBM Plex Sans", sans-serif;
margin: 0;
overflow-x: hidden;
scroll-behavior: smooth;
}
nav {
background-color: #222222e8;
backdrop-filter: blur(5px);
margin: 0;
position: fixed;
width: 100vw;
z-index: 100;
top: 0;
}
main {
padding-top: 2.5rem;
}
.navbar {
display: flex;
justify-content: space-evenly;
align-items: center;
color: lightgray;
font-size: 0.8rem;
margin: 0;
z-index: 10;
}
.navbar p {
cursor: pointer;
}
.navbar img {
cursor: pointer;
}
.navbar p:hover {
filter: brightness(120%);
}
.navbar img:hover {
filter: brightness(120%);
}
.layout {
max-width: 80rem;
width: 60%;
margin: 0 auto;
}
.icon {
width: 1rem;
height: 1rem;
}
.icon-footer {
width: 1.75rem;
height: 1.75rem;
margin-right: 1rem;
}
.hero {
margin: 0 auto;
text-align: center;
background-color: black;
padding-top: 5rem;
}
.hero h1 {
color: white;
font-size: 3.5rem;
font-weight: 600;
margin: 0;
}
.hero h2 {
color: white;
font-size: 3rem;
font-size: 1.7rem;
font-weight: 400;
margin: 0;
margin-bottom: 1rem;
}
.hero-buttons {
color: #2381da;
display: flex;
justify-content: center;
padding-bottom: 1rem;
}
.hero-buttons span {
padding: 0 2rem;
margin: 0;
margin-right: 1rem;
cursor: pointer;
}
.hero-buttons span:hover {
text-decoration: underline;
}
.hero-buttons span:hover {
color: #2381da;
filter: brightness(75%);
}
.hero-buttons h3 {
font-size: 1.3rem;
font-weight: 400;
margin: 0;
}
.hero-video {
width: 100%;
}
.hero-next {
background-color: white;
}
.hero-next h1 {
color: black;
}
.hero-next h2 {
color: black;
}
.hero-next-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.grid {
margin: 0 auto;
text-align: center;
padding-top: 1rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.grid-item {
width: 100%;
height: 80vh;
}
.grid-padding {
width: 100%;
height: 100%;
padding: 5rem 0;
}
.grid-item .img-container {
height: 60%;
}
.grid h1 {
font-size: 2.5rem;
font-weight: 600;
margin: 0;
}
.grid h2 {
font-size: 1.4rem;
font-weight: 400;
margin: 0;
margin-bottom: 1rem;
}
.grid h3 {
font-size: 1.25rem;
}
.bg-white {
background-color: #fbfbfd;
color: black;
}
.bg-black {
background-color: black;
color: white;
}
.bg-gray {
background-color: #f5f5f7;
color: black;
}
.wh-full {
width: 100%;
height: 100%;
}
.specific {
padding-bottom: 3rem;
margin-bottom: 2rem;
}
.footer-div {
color: white;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100%;
font-size: 2rem;
}
.footer-div span:hover{
cursor: pointer;
}
.footer-div span:hover{
filter: brightness(120%);
}
a{
text-decoration: none;
color: white;
scroll-behavior: smooth;
}
Comments
Post a Comment