From 6cbcc08be6d92cd92e804baa5b32315bf5e1aead Mon Sep 17 00:00:00 2001 From: CherryKitten Date: Thu, 6 Oct 2022 16:17:56 +0200 Subject: [PATCH] Add product landing page --- .../4-product-landing-page/index.html | 71 +++++++++++ .../4-product-landing-page/styles.css | 111 ++++++++++++++++++ index.html | 1 + 3 files changed, 183 insertions(+) create mode 100644 1-responsive-web-design/4-product-landing-page/index.html create mode 100644 1-responsive-web-design/4-product-landing-page/styles.css diff --git a/1-responsive-web-design/4-product-landing-page/index.html b/1-responsive-web-design/4-product-landing-page/index.html new file mode 100644 index 0000000..587ac47 --- /dev/null +++ b/1-responsive-web-design/4-product-landing-page/index.html @@ -0,0 +1,71 @@ + + + + + Fluffy Bunny Dango + + + + + +
+
+

What are Dango?

+

+ 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.
Dango is usually finished round shaped, three to five dango are often served on a skewer (skewered dango pieces called kushi-dango.)
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. +

+

+ They can also give you different temporary buffs, and maximize your stamina and HP. So be sure to eat some before every Hunt! +

+ +
+
+

Why ours?

+
+ +

+ Made with love by Yomogi the Chef, Kamura's best! +

+
+
+ +

+ Exciting flavours, with all kinds of suprising effects! +

+
+
+ +

+ Approved by many Master Rank hunters all around the word, from Kamura to Elgado. +

+
+
+
+

Coming soon

+

+ We are excited to announce that we are in the process of providing tea shops around the world with our signature Fluffy Bunny Dango!
+ First stores are going to be supplied in the coming months.
+

+

+ Do you want to get notified when a tea shop near you might get our Fluffy Bunny Dango?

Sign up for our Newsletter here: +

+
+ + +
+
+
+ + \ No newline at end of file diff --git a/1-responsive-web-design/4-product-landing-page/styles.css b/1-responsive-web-design/4-product-landing-page/styles.css new file mode 100644 index 0000000..9bf40ed --- /dev/null +++ b/1-responsive-web-design/4-product-landing-page/styles.css @@ -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; +} \ No newline at end of file diff --git a/index.html b/index.html index 7da9a92..a7ea860 100644 --- a/index.html +++ b/index.html @@ -14,5 +14,6 @@ Survey Form
Tribute Page
Technical Documentation Page
+ Technical Documentation Page