Add product landing page
This commit is contained in:
parent
2c0b4756a3
commit
6cbcc08be6
GPG key ID:
0B696A86A853E955
3 changed files with 183 additions and 0 deletions
71
1-responsive-web-design/4-product-landing-page/index.html
Normal file
71
1-responsive-web-design/4-product-landing-page/index.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!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>
|
||||
111
1-responsive-web-design/4-product-landing-page/styles.css
Normal file
111
1-responsive-web-design/4-product-landing-page/styles.css
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
*{
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body{
|
||||
background: linear-gradient(
|
||||
lightpink,
|
||||
mintcream,
|
||||
lime
|
||||
);
|
||||
}
|
||||
|
||||
#header{
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
min-height: 1%;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: peachpuff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#logo{
|
||||
position: absolute;
|
||||
width: 30%;
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#logo img{
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
float: left;
|
||||
position: relative;
|
||||
bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
#nav-bar{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
width: 50%;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.nav-link{
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
main{
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
max-width: 70%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main h1{
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
#video{
|
||||
width: 100%;
|
||||
padding: 2rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#Why_ours{
|
||||
padding: 1rem;
|
||||
display:flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.reason{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
font-size: 1.2rem;
|
||||
margin: 2rem 2rem;
|
||||
}
|
||||
|
||||
.reason i{
|
||||
font-size: 3rem;
|
||||
position: relative;
|
||||
right: 2rem;
|
||||
bottom: 1rem;
|
||||
color: mediumpurple;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
main{
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
form{
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
button{
|
||||
|
||||
border: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -14,5 +14,6 @@
|
|||
<a href=1-responsive-web-design/1-survey-form/index.html>Survey Form</a><br>
|
||||
<a href="1-responsive-web-design/2-tribute-page/index.html">Tribute Page</a><br>
|
||||
<a href="1-responsive-web-design/3-technical-documentation-page">Technical Documentation Page</a><br>
|
||||
<a href="1-responsive-web-design/4-product-landing-page">Technical Documentation Page</a><br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Reference in a new issue