實作程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="The Espresso Emporium" />
<meta
name="description"
content="At The Espresso Emporium, we're dedicated to providing a truly
exceptional coffee experience. Our passion for coffee is at the heart of
everything we do."
/>
<meta
name="keywords"
content="Coffee shop, Coffee, Breakfast, Lunch, Afternoon tea, Gourmet, Coffee varieties, Freshly brewed, Roasted coffee, Pour-over coffee, Green tea, Baked goods, Desserts, Delicious food, Restaurant, Dining, Light meals, Internet cafe, Barista, Coffee roasting, Specialty coffee, Casual dining, Social, Art, Culture, Music, Events, Coffee tasting, Relaxation, Coffee appreciation, Handcrafted brew, Local ingredients, Classic coffee, Specialty drinks, Coffee culture, Coffee enthusiasts, Coffee brewing, Authentic coffee, Networking, WiFi, Home-cooked dishes, Healthy eating, Vegetarian options, Tasty breakfast, Pancakes, Pastries, Fresh baked goods, Hand-brewed coffee, Matcha latte, Cappuccino, Specialty pastries, Homemade pastries, Delicious sandwiches, Urban coffee shop, Coffee brewing methods, Coffee beans, Single-origin coffee, Coffee pairings, Artistic taste, Music performances, Cultural events, Social gathering, Handcrafted pastries, Unique beverages, Green tea latte, Espresso, Special baked goods, Cozy atmosphere, Casual dining, Leisurely afternoon, Internet cafe ambiance, Unique experience"
/>
<meta name="robots" content="index,follow" />
<meta name="author" content="H" />
<link
rel="shortcut icon"
type="image/x-icon"
href="./image/logo_brown.png"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
/>
<link rel="stylesheet" href="./library/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/style.css" />
<title>The Espresso Emporium</title>
</head>
<body>
<header class="fixed-top">
<nav class="container">
<ul class="d-flex justify-content-center align-items-center">
<li class=""><a href="#about">ABOUT</a></li>
<li class=""><a href="#product">PRODUCT</a></li>
<li class="">
<a href="#top" class="header_logo"
><img
src="./image/logo_brown.png"
alt="The Espresso Emporium Logo"
/></a>
</li>
<li class=""><a href="#location">LOCATION</a></li>
<li class=""><a href="#contact">CONTACT</a></li>
</ul>
</nav>
</header>
<section class="kv_banner">
<div class="text-center">
<img src="./image/Espresso Yourself..png" alt="Espresso Yourself" />
</div>
</section>
<section class="sec_about text-center py-5" id="about">
<div class="container">
<h1 class="fw-bold">Welcome to The Espresso Emporium</h1>
<p class="py-3">
At The Espresso Emporium, we're dedicated to providing a truly
exceptional coffee experience. Our passion for coffee is at the heart
of everything we do.
</p>
</div>
<div class="sec_about-pic row pt-4">
<div class="sec_about-pic1 col">
<img src="./image/exquisite.png" alt="exquiste" />
</div>
<div class="sec_about-pic2 col">
<img src="./image/sumptuous.png" alt="sumptuous" />
</div>
<div class="sec_about-pic3 col">
<img src="./image/aromatic.png" alt="aromatic" />
</div>
</div>
</section>
<section class="sec_product container text-center pb-5" id="product">
<h2>Our Coffee Selection</h2>
<p class="py-4">
Discover a world of flavors with our diverse coffee offerings. Each cup
is a journey, and we're excited to be your guide. Here's a glimpse of
what you'll find at The Espresso Emporium:
</p>
<!-- 使用貓頭鷹輪播，會在實作jQuery的時候教學 -->
<div class="owl-carousel owl-theme">
<!-- Owl Carousel 輪播容器 -->
<div class="item">
<img src="./image/Espresso Shots.png" alt="Espresso Shots" />
<h3>Espresso Shots</h3>
<h4>For those who appreciate the pure and bold essence of coffee.</h4>
</div>
<div class="item">
<img src="./image/Iced Coffee.png" alt="Iced Coffee" />
<h3>Iced Coffee</h3>
<h4>Perfect for a refreshing pick-me-up on a warm day.</h4>
</div>
<div class="item">
<img src="./image/Cold Brew.png" alt="Cold Brew" />
<h3>Cold Brew</h3>
<h4>Smooth, bold, and ideal for the coffee purist.</h4>
</div>
<div class="item">
<img src="./image/Lattes.png" alt="Lattes" />
<h3>Lattes</h3>
<h4>
Creamy and smooth, with various flavor options to suit your taste.
</h4>
</div>
<div class="item">
<img src="./image/Mochas.png" alt="Mochas" />
<h3>Mochas</h3>
<h4>A chocolate-infused treat for your coffee cravings.</h4>
</div>
<div class="item">
<img src="./image/Cappuccinos.png" alt="Cappuccinos" />
<h3>Cappuccinos</h3>
<h4>A delightful balance of espresso, steamed milk, and foam.</h4>
</div>
<div class="item">
<img src="./image/Tea Selection.png" alt="Tea Selection" />
<h3>Tea Selection</h3>
<h4>
For tea lovers, we offer a range of teas for a different kind of
delight.
</h4>
</div>
</div>
</section>
<section class="sec_location text-center pb-5" id="location">
<h2>Where is The Espresso Emporium?</h2>
<!-- 嵌入google地圖(這裡假設定位在台北市101) -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3615.030752872954!2d121.55863992695312!3d25.03303040000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442abb6625e6f89%3A0xf3ab83833fbea1dd!2z5Y-w5YyXMTAxL-S4luiyvw!5e0!3m2!1szh-TW!2stw!4v1697122609647!5m2!1szh-TW!2stw"
width="600"
height="450"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
class="pt-4"
></iframe>
</section>
<section class="sec_contact text-center container pb-4" id="contact">
<h2>Contact Us!</h2>
<form action="" method="POST" class="row pt-4">
<div class="col-12">
<input
id="text"
type="text"
name="name"
placeholder="Your Name"
required
/>
</div>
<div class="col-12 py-4">
<input
id="email"
type="email"
name="email"
placeholder="Your Email"
required
/>
</div>
<div class="col-12">
<textarea
name="suggestion"
id="suggestion"
cols="30"
rows="10"
placeholder="Typing your message here..."
required
></textarea>
</div>
<div class="col-12 pt-4">
<button type="submit">SEND</button>
</div>
</form>
</section>
<footer>
<div class="footer_sec1 container">
<div class="row">
<div class="col">
<img
src="./image/logo_white.png"
alt="The Espresso Emporium Logo"
/>
<h5 class="d-inline-block">The Espresso Emporium</h5>
</div>
<div class="col text-end">
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#product">PRODUCT</a></li>
<li><a href="#location">LOCATION</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</div>
<div class="footer_sec2 text-end container">
<img src="./image/copyright.png" alt="copy right" /><span
>2023 The Espresso Emporium</span
>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$(".owl-carousel").owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1,
},
600: {
items: 3,
},
1000: {
items: 5,
},
},
});
</script>
</body>
</html>
iThome鐵人賽
看影片追技術