This repository has been archived on 2023-11-10. You can view files and clone it, but cannot push or open issues or pull requests.
freecodecamp-projects/1-responsive-web-design/4-product-landing-page/index.html

71 lines
3 KiB
HTML
Raw Permalink Normal View History

2022-10-06 14:17:56 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fluffy Bunny Dango</title>
<link rel="stylesheet" href="styles.css">
<link href="https://use.fontawesome.com/releases/v6.2.0/css/all.css" rel="stylesheet">
</head>
<body>
<header id="header">
<div id="logo">
<img id="header-img" src="https://cdn-icons-png.flaticon.com/512/3546/3546856.png" alt="Dango logo">
<p>Fluffy Bunny Dango</p>
</div>
<nav id="nav-bar">
<a href="#What_are_Dango" class="nav-link">What are Dango?</a>
<a href="#Why_ours" class="nav-link">Why ours?</a>
<a href="#Coming_soon" class="nav-link">Coming soon</a>
</nav>
</header>
<main>
<section id="What_are_Dango">
<h1>What are Dango?</h1>
<p>
Dango is a Japanese dumpling made from rice flour mixed with uruchi rice flour and glutinous rice flour. It is different from the method of making mochi, which is made after steaming glutinous rice.<br>Dango is usually finished round shaped, three to five dango are often served on a skewer (skewered dango pieces called kushi-dango.)<br>Generally, dango comes under the category of wagashi, and is often served with green tea. It is eaten year-round, but the different varieties are traditionally eaten in given seasons.
</p>
<p>
They can also give you different temporary buffs, and maximize your stamina and HP. So be sure to eat some before every Hunt!
</p>
<iframe id="video" height="420px"
src="https://www.youtube.com/embed/N0jf7082CI8">
</iframe>
</section>
<section id="Why_ours">
<h1>Why ours?</h1>
<div class="reason">
<i class="fa-solid fa-heart"></i>
<p>
Made with love by Yomogi the Chef, Kamura's best!
</p>
</div>
<div class="reason">
<i class="fa-solid fa-bolt"></i>
<p>
Exciting flavours, with all kinds of suprising effects!
</p>
</div>
<div class="reason">
<i class="fa-solid fa-check"></i>
<p>
Approved by many Master Rank hunters all around the word, from Kamura to Elgado.
</p>
</div>
</section>
<section id="Coming_soon">
<h1>Coming soon</h1>
<p>
We are excited to announce that we are in the process of providing tea shops around the world with our signature Fluffy Bunny Dango!<br>
First stores are going to be supplied in the coming months.<br>
</p>
<p>
Do you want to get notified when a tea shop near you might get our Fluffy Bunny Dango?<br><br>Sign up for our Newsletter here:
</p>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" id="email" name="email" placeholder="E-Mail">
<input type="submit" id="submit" value="Notify me!">
</form>
</section>
</main>
</body>
</html>