diff --git a/.gitignore b/.gitignore index e43b0f988..4e83bca36 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ .DS_Store +.vscode +venv diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/facts.txt b/facts.txt new file mode 100644 index 000000000..a567615e6 --- /dev/null +++ b/facts.txt @@ -0,0 +1,74 @@ +I chose typical milk teas while looking for pictures i was wondering if we should do like a passion fruit tea or like black tea with cheese foam or include other toppings? + +I also included a couple cute gifs for fun ^-^ + +milk-tea +https://www.epicurious.com/recipes/food/views/classic-milk-tea-bubble-tea +Milk tea, also known as bubble tea or boba tea, originated in Taiwan in the 1980s. +It is made by combining tea, milk, and sweetened syrup or fruit flavors, then adding tapioca pearls or other toppings. +milk tea is available at many tea shops and cafes around the world, and can also be made at home using just a few simple ingredients. +Fans of milk tea often enjoy experimenting with different toppings and flavor combinations to create their own unique creations. +milk tea is often served hot or cold with boba (tapioca pearls) added for texture. +milk tea is often topped with tapioca pearls, which are small, chewy balls made from tapioca starch. +Milk tea has gained popularity worldwide, with different variations and flavors being introduced in different countries. +Milk tea has been identified as a potential health risk due to its high sugar content, but some versions can be made with reduced sugar or sugar-free options. +The bubble tea industry is estimated to be worth more than $2 billion globally. +In some countries, such as Taiwan and China, there are milk tea shops on almost every corner, serving thousands of drinks a day. + + +match-milk-tea img +https://ameessavorydish.com/matcha-milk-tea/ +Matcha milk tea originates from Japan and is made using high quality matcha powder and milk. +Matcha powder is made from grinding shade-grown green tea leaves into a fine powder. +Matcha powder contains high levels of antioxidants and the amino acid L-theanine which provides a calm and relaxed feeling. +The caffeine content of matcha milk tea is lower than coffee but higher than traditional green tea. +Matcha milk tea is often enjoyed as a mid-day pick-me-up or as a tasty and healthy alternative to sugary drinks. + + +taro-milk-tea +https://brewedleaflove.com/purple-taro-boba-milk-tea/ +The main ingredient in taro milk tea is taro, which is a root vegetable that is similar in taste and texture to a potato. +Taro milk tea is typically made by blending together taro root, milk, tea, and sweetener. +Taro milk tea has a rich and creamy flavor that is slightly sweet and nutty. +Taro milk tea is a popular alternative to traditional milk teas for people who are lactose intolerant or looking for a dairy-free option. +Taro milk tea is also known for its health benefits, as taro root is high in fiber, potassium, and vitamin E. + +jasmine-milk-tea +https://greenheartlove.com/jasmine-milk-tea/ +Jasmine milk tea is a popular Taiwanese style milk tea. +It is typically brewed with a combination of high-quality jasmine tea leaves and milk. +The jasmine tea used in the recipe is often scented with jasmine flowers, which add a sweet aroma and delicate flavor to the tea. +Jasmine milk tea can be served hot or cold, depending on your personal preference. +The milk used in the recipe can be either dairy milk or non-dairy milk, such as soy or almond milk, making it a great option for those who are lactose intolerant or vegan. +Some variations of jasmine milk tea may include additional ingredients such as honey or boba (tapioca pearls) to enhance the flavor and texture. +Jasmine milk tea is believed to have numerous health benefits due to the antioxidants and anti-inflammatory properties present in jasmine tea. +Drinking jasmine milk tea is said to promote relaxation and reduce stress levels due to the calming effects of jasmine flowers. +The popularity of jasmine milk tea has led to numerous specialty tea shops and bubble tea cafes offering it as a staple drink on their menus. +The creamy and flavorful nature of jasmine milk tea has garnered a loyal following among tea lovers all over the world. + + +thai-milk-tea +https://bkkfoodie.com/5-thai-milk-tea-recipes/ +Thai milk tea is also known as 'cha-yen' in Thailand. +It is usually made by steeping black tea with a combination of spices like star anise, cinnamon, and cardamom. +The tea is then mixed with condensed milk and sugar, giving it a creamy and sweet taste. +Thai milk tea is typically served over ice and can be found in many street vendors, cafes, and restaurants in Thailand. +Thai milk tea is high in caffeine, providing an energy boost to those who need it. +The tea is also known for its bright orange color, which often comes from adding food coloring to the mix. +Many people enjoy Thai milk tea as a refreshing drink on a hot day, or as a sweet treat after a meal. +It is a popular choice to pair with spicy or savory dishes, as it balances out the flavor profile. +Thai milk tea has become a popular flavor for desserts, such as ice cream, cakes, and pastries. + + +brown-sugar-milk-tea +https://teakandthyme.com/brown-sugar-milk-boba/ +Originated from Taiwan, brown sugar milk tea is a popular beverage that is enjoyed all over the world. +Brown sugar milk tea combines the mellowness of milk with the deep and rich flavor of brown sugar syrup. +Unlike other black teas, brown sugar milk tea is much sweeter, creamier, and richer in flavor. +The drink is typically served chilled and can include boba pearls or other tapioca-based add-ins. +The beverage is said to have numerous health benefits, including improved digestion and reduced stress levels. +Brown sugar milk tea has become a social media sensation, with people posting photos of their drinks on Instagram and other platforms. +The drink has inspired numerous variations including brown sugar matcha milk tea and brown sugar rose milk tea. +Many shops have their unique way of making brown sugar syrup, which can alter the taste, thickness, and color of the drink. +Recently, many recipe websites have emerged, and people can now make their homemade brown sugar milk tea. +The popularity of brown sugar milk tea has led to the opening of numerous milk tea shops worldwide, making it a universal favorite. \ No newline at end of file diff --git a/images/EJY.jpg b/images/EJY.jpg new file mode 100644 index 000000000..404775eae Binary files /dev/null and b/images/EJY.jpg differ diff --git a/images/Matcha-milk-tea.jpeg b/images/Matcha-milk-tea.jpeg new file mode 100644 index 000000000..523f2541a Binary files /dev/null and b/images/Matcha-milk-tea.jpeg differ diff --git a/images/background-gif.gif b/images/background-gif.gif new file mode 100644 index 000000000..051f18cb0 Binary files /dev/null and b/images/background-gif.gif differ diff --git a/images/bear-tea.gif b/images/bear-tea.gif new file mode 100644 index 000000000..60f6f8222 Binary files /dev/null and b/images/bear-tea.gif differ diff --git a/images/brown-sugar-milk-tea.jpeg b/images/brown-sugar-milk-tea.jpeg new file mode 100644 index 000000000..325e812d2 Binary files /dev/null and b/images/brown-sugar-milk-tea.jpeg differ diff --git a/images/cat-bubble-tea.gif b/images/cat-bubble-tea.gif new file mode 100644 index 000000000..d06cc6027 Binary files /dev/null and b/images/cat-bubble-tea.gif differ diff --git a/images/corgi tea.gif b/images/corgi tea.gif new file mode 100644 index 000000000..aa203e96b Binary files /dev/null and b/images/corgi tea.gif differ diff --git a/images/duckbo.png b/images/duckbo.png new file mode 100644 index 000000000..45ff4a279 Binary files /dev/null and b/images/duckbo.png differ diff --git a/images/jasmine-milk-tea-.jpeg b/images/jasmine-milk-tea-.jpeg new file mode 100644 index 000000000..2150bcaaa Binary files /dev/null and b/images/jasmine-milk-tea-.jpeg differ diff --git a/images/milk-tea.webp b/images/milk-tea.webp new file mode 100644 index 000000000..a9db80f49 Binary files /dev/null and b/images/milk-tea.webp differ diff --git a/images/taro-milk-tea.jpeg b/images/taro-milk-tea.jpeg new file mode 100644 index 000000000..a7f7cbf7e Binary files /dev/null and b/images/taro-milk-tea.jpeg differ diff --git a/images/thai-tea.png b/images/thai-tea.png new file mode 100644 index 000000000..ad56e5404 Binary files /dev/null and b/images/thai-tea.png differ diff --git a/pages/facts.html b/pages/facts.html index b4ae215c4..444ceb1dd 100644 --- a/pages/facts.html +++ b/pages/facts.html @@ -1,12 +1,178 @@ - - - - Document + + + + + Bubble Tea Facts + + + + + + + + +
+

FunbearFacts!

+

About Bubble Tea

+ + + + + + + + + + + + + + + + +
+
  • + tb + Thai milk tea is also known as 'cha-yen' in Thailand. + It is usually made by steeping black tea with a combination of spices like star anise, cinnamon, and cardamom. + The tea is then mixed with condensed milk and sugar, giving it a creamy and sweet taste. + Thai milk tea is typically served over ice and can be found in many street vendors, cafes, and restaurants in Thailand. + Thai milk tea is high in caffeine, providing an energy boost to those who need it. + The tea is also known for its bright orange color, which often comes from adding food coloring to the mix. + Many people enjoy Thai milk tea as a refreshing drink on a hot day, or as a sweet treat after a meal. + It is a popular choice to pair with spicy or savory dishes, as it balances out the flavor profile. + Thai milk tea has become a popular flavor for desserts, such as ice cream, cakes, and pastries. +
    		• +
  • tb + Originated from Taiwan, brown sugar milk tea is a popular beverage that is enjoyed all over the world. + Brown sugar milk tea combines the mellowness of milk with the deep and rich flavor of brown sugar syrup. + Unlike other black teas, brown sugar milk tea is much sweeter, creamier, and richer in flavor. + The drink is typically served chilled and can include boba pearls or other tapioca-based add-ins. + The beverage is said to have numerous health benefits, including improved digestion and reduced stress levels. + Brown sugar milk tea has become a social media sensation, with people posting photos of their drinks on Instagram and other platforms. + The drink has inspired numerous variations including brown sugar matcha milk tea and brown sugar rose milk tea. + Many shops have their unique way of making brown sugar syrup, which can alter the taste, thickness, and color of the drink. + Recently, many recipe websites have emerged, and people can now make their homemade brown sugar milk tea. + The popularity of brown sugar milk tea has led to the opening of numerous milk tea shops worldwide, making it a universal favorite. + tb +
    • +
    +
  • + tb + Jasmine milk tea is a popular Taiwanese style milk tea. + It is typically brewed with a combination of high-quality jasmine tea leaves and milk. + The jasmine tea used in the recipe is often scented with jasmine flowers, which add a sweet aroma and delicate flavor to the tea. + Jasmine milk tea can be served hot or cold, depending on your personal preference. + The milk used in the recipe can be either dairy milk or non-dairy milk, such as soy or almond milk, making it a great option for those who are lactose intolerant or vegan. + Some variations of jasmine milk tea may include additional ingredients such as honey or boba (tapioca pearls) to enhance the flavor and texture. + Jasmine milk tea is believed to have numerous health benefits due to the antioxidants and anti-inflammatory properties present in jasmine tea. + Drinking jasmine milk tea is said to promote relaxation and reduce stress levels due to the calming effects of jasmine flowers. + The popularity of jasmine milk tea has led to numerous specialty tea shops and bubble tea cafes offering it as a staple drink on their menus. + The creamy and flavorful nature of jasmine milk tea has garnered a loyal following among tea lovers all over the world. + tb +
    • +     		+
  • tb + The main ingredient in taro milk tea is taro, which is a root vegetable that is similar in taste and texture to a potato. + Taro milk tea is typically made by blending together taro root, milk, tea, and sweetener. + Taro milk tea has a rich and creamy flavor that is slightly sweet and nutty. + Taro milk tea is a popular alternative to traditional milk teas for people who are lactose intolerant or looking for a dairy-free option. + Taro milk tea is also known for its health benefits, as taro root is high in fiber, potassium, and vitamin E. + tb +
    • +
    +
  • tb + Matcha milk tea originates from Japan and is made using high quality matcha powder and milk. + Matcha powder is made from grinding shade-grown green tea leaves into a fine powder. + Matcha powder contains high levels of antioxidants and the amino acid L-theanine which provides a calm and relaxed feeling. + The caffeine content of matcha milk tea is lower than coffee but higher than traditional green tea. + Matcha milk tea is often enjoyed as a mid-day pick-me-up or as a tasty and healthy alternative to sugary drinks. + tb +
    • +     		+
  • gif + Milk tea, also known as bubble tea or boba tea, originated in Taiwan in the 1980s. + It is made by combining tea, milk, and sweetened syrup or fruit flavors, then adding tapioca pearls or other toppings. + milk tea is available at many tea shops and cafes around the world, and can also be made at home using just a few simple ingredients. + Fans of milk tea often enjoy experimenting with different toppings and flavor combinations to create their own unique creations. + milk tea is often served hot or cold with boba (tapioca pearls) added for texture. + milk tea is often topped with tapioca pearls, which are small, chewy balls made from tapioca starch. + Milk tea has gained popularity worldwide, with different variations and flavors being introduced in different countries. + Milk tea has been identified as a potential health risk due to its high sugar content, but some versions can be made with reduced sugar or sugar-free options. + The bubble tea industry is estimated to be worth more than $2 billion globally. + In some countries, such as Taiwan and China, there are milk tea shops on almost every corner, serving thousands of drinks a day.
    • + +
    +
    + + + + + \ No newline at end of file diff --git a/pages/favorites.html b/pages/favorites.html new file mode 100644 index 000000000..2d307b600 --- /dev/null +++ b/pages/favorites.html @@ -0,0 +1,85 @@ + + + + + + + + Best Boba Tea + + + +
    + + +
    + + + + + + + + +
    + + + About Us +
    + + +
    +
    +
    + +

    Bobalitious!

    +

    Our Favorite Spots!

    + +
    + + + +
    +
    + +
    +
    + + + + + + + + \ No newline at end of file diff --git a/pages/gallery.html b/pages/gallery.html index b4ae215c4..4a5821b4d 100644 --- a/pages/gallery.html +++ b/pages/gallery.html @@ -1,12 +1,131 @@ - + - Document + + Best Boba Tea + +
    + + +
    + + + + + + + +
    + + + About Us +
    + + +
    +
    +
    + +

    Bubble Tea Gallery

    + +
    + + + + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/pages/index.html b/pages/index.html index b4ae215c4..a68ef31bc 100644 --- a/pages/index.html +++ b/pages/index.html @@ -1,12 +1,209 @@ - + - + - Document + + Best Boba Tea + + + - + +
    + + +
    + + + + + + + + +
    + + + About Us +
    + + +
    +
    +
    + +

    Bobalitious!

    + +
    + + + +
    +
    + + +
    +
    +
    +

    What Is Boba?

    +

    + Boba, also known as bubble tea or pearl milk tea, is a popular beverage that originated in Taiwan during the 1980s but has recently exploded in popularity in the United States and around the world. + It typically consists of a tea base, milk or a non-dairy alternative, and tapioca pearls or other chewy toppings. +

    +
    +
    +

    Here are some common types of boba:

    +
      +
    • + Classic Milk Tea: This is the original boba flavor, made with black tea, milk, and sweetened with sugar or flavored syrups. It is often served with tapioca pearls. +
      • +
    • + Fruit Tea: Fruit teas are made with a blend of fresh or flavored fruit juices and tea. Common fruit flavors include mango, strawberry, lychee, passion fruit, and peach. They can be served with or without milk, and with or without tapioca pearls. +
      • +
    • + Green Tea: Green tea boba is made with green tea as the base, which gives it a lighter and more refreshing flavor compared to black tea. It can be served with milk or without, and with various fruit or syrup flavors. +
      • +
    • + Matcha: Matcha boba is made using high-quality powdered green tea. It has a distinctive, slightly bitter taste and vibrant green color. Matcha boba can be prepared with or without milk, and with different sweeteners or flavors. +
      • +
    • + Thai Tea: Thai tea boba is a popular variation made with Thai tea, which is a blend of black tea, spices, and condensed milk. It has a rich and creamy flavor and is often topped with tapioca pearls. +
      • +
    • + Taro: Taro boba is made with taro root, a starchy tuber with a slightly sweet and nutty flavor. It is often combined with milk or coconut milk and blended into a smooth and creamy drink. +
      • +
    • + Coffee: Coffee boba is a fusion of coffee and boba. It can be made with various coffee types like espresso, cold brew, or flavored coffee. It is often sweetened with syrups and served with milk and tapioca pearls. +
      • +
    • + Brown Sugar: Brown sugar boba is a trendy variation where the pearls are cooked in a rich brown sugar syrup. This gives them a caramel-like flavor and a chewy texture. +
      • +
    +

    + These are just a few examples of boba types, and there are countless variations and combinations available, as boba has become a popular and creative beverage around the world. +

    +

    Here are some popular types of boba or bubble tea toppings:

    +
      +
    • + Tapioca Pearls: Tapioca pearls are the most common and traditional boba topping. They are small, chewy spheres made from tapioca starch. They have a neutral flavor and a gelatinous texture. +
      • +
    • + Fruit Jelly: Fruit jelly is a colorful and fruity topping made from agar or gelatin. It comes in various flavors such as mango, lychee, strawberry, or passion fruit. Fruit jelly adds a refreshing and chewy element to boba drinks. +
      • +
    • + Aloe Vera: Aloe vera cubes or strips are another popular boba topping. They are made from the gel of the aloe vera plant and have a mild, slightly tangy taste. Aloe vera adds a unique texture and a hint of freshness to the drink. +
      • +
    • + Popping Boba: Popping boba, also known as juice balls or bursting boba, are small, gelatinous spheres filled with fruit-flavored juice. When you bite into them, they release a burst of fruity liquid. Popping boba comes in various flavors like strawberry, mango, lychee, or passion fruit. +
      • +
    • + Grass Jelly: Grass jelly is a jelly-like dessert made from the leaves of the Mesona chinensis plant. It has a slightly bitter and herbal taste. When added to boba drinks, grass jelly provides a contrasting texture and a unique flavor. +
      • +
    • + Red Bean: Red bean, also known as adzuki bean, is a common ingredient in Asian desserts. It is sweetened and cooked until soft. When used as a boba topping, red bean adds a creamy and sweet element to the drink. +
      • +
    • + Coconut Jelly: Coconut jelly is a translucent and chewy topping made from coconut water or coconut milk. It has a subtle coconut flavor and adds a tropical twist to boba beverages. +
      • +
    • + Boba Pudding: Boba pudding is a creamy and smooth pudding made from milk, eggs, and sugar. It is sometimes infused with tea flavors or other extracts. Boba pudding can be served as a topping or blended into the drink. +
      • +
    +
    +

    + These are just a few examples of boba toppings available. The creativity and variety of boba drinks have led to the development of many unique and inventive toppings to suit different tastes and preferences. +

    +

    + This Month's Most popular Boba: +

    + +
    +
    + + \ No newline at end of file diff --git a/pages/us.html b/pages/us.html new file mode 100644 index 000000000..964585993 --- /dev/null +++ b/pages/us.html @@ -0,0 +1,122 @@ + + + + + + + + Best Boba Tea + + + +
    + + +
    + + + + + + + +
    + + + About Us +
    + + +
    +
    +
    + +

    Bobalitious!

    +

    Get to know us!

    + +
    + + + + +
    + +
    + + + + + + + + + \ No newline at end of file diff --git a/styles/facts.css b/styles/facts.css new file mode 100644 index 000000000..e8bdd0520 --- /dev/null +++ b/styles/facts.css @@ -0,0 +1,267 @@ +* { + /* font-style: linear-gradient(pink, purple); */ + background-color: transparent; +} + +#title { + color: plum; + font-size: 40px; + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + padding: 50px; + text-align: center; +} + +#aboutus{ + text-align: center; +} + +#about-me { +margin-top: -75px; +text-align: center; +background: -webkit-linear-gradient( #ffffcc, #FFB6C1); +-webkit-background-clip: text; +-webkit-text-fill-color: transparent; +text-shadow: -1px 1px 2px #FFB6C1, + 1px 1px 2px #ffffcc, + 1px -1px 0 #ffffcc, + -1px -1px 0 #ffffcc; +/* padding: 50px; */ +} + +.bear-gif { +margin-top: -25px; +margin-bottom: -35px; +background: #f2e6ff; +display: block; +margin-left: auto; +margin-right: auto; +width: 100px; +text-align: center; +} + + +.smack-bee-gif { +margin-top: -79px; +margin-bottom: -9kittpx; +background: #f2e6ff; +display: block; +margin-left: auto; +margin-right: auto; +width: 100px; +text-align: center; +} + +.kitty-gif { +margin-top: -80px; +/* margin-bottom: px; */ +background: #f2e6ff; +display: block; +margin-left: auto; +margin-right: auto; +width: 100px; +text-align: center; +} + +.taro-gif { + margin-top: -65px; + margin-bottom: -5px; + background: #f2e6ff; + display: block; + margin-left: auto; + margin-right: auto; + width: 100px; + text-align: center; +} + +.matcha-gif { + margin-top: -65px; + margin-bottom: -5px; + background: #f2e6ff; + display: block; + margin-left: auto; + margin-right: auto; + width: 100px; + text-align: center; +} + + +.dancy-gif { + margin-top: -75px; + margin-bottom: -7px; + background: #f2e6ff; + display: block; + margin-left: auto; + margin-right: auto; + width: 100px; + text-align: center; +} + +.milk-tea-gif { +margin-top: -55px; +margin-bottom: -20px; +background: #f2e6ff; +display: block; +margin-left: auto; +margin-right: auto; +width: 100px; +text-align: center; +} + +.spit-tea-gif { +margin-bottom: -50px; +background: #f2e6ff; +display: block; +margin-left: auto; +margin-right: auto; +width: 100px; +text-align: center; +} + + +.sleep-gif { +margin-top: -15px; +margin-bottom: -50px; +background: #f2e6ff; +display: block; +margin-left: auto; +margin-right: auto; +width: 100px; +text-align: center; +} + +body { +display: flex; +flex-direction: column; +min-height: 100%; +} + +#outer-column { +border: 8px dotted #FFB6C1; +background: #f2e6ff; +width: 720px; +margin: auto; +padding: 50px; +} + + +#title { + margin-block-start: -100px; + background: -webkit-linear-gradient( #ffffcc, #FFB6C1); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 80px; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + text-align: center; +} + +#aboutus{ + text-align: center; + +} + + + +.footer { + flex: 1; + padding: 20px; + text-align: center; +} + +.topnav { + position: relative; + overflow: hidden; + padding: 30px; +} + +/* Style the links inside the navigation bar */ +.topnav a { + float: left; + color: plum; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; +} + +/* Change the color of links on hover */ +.topnav a:hover { + background-color: #ddd; + color: plum; +} + +/* Add a color to the active/current link */ +.topnav a.active { + background-color: plum; + color: #ffffcc; +} + +.topnav-centered a { + float: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.topnav-right { + float: right; +} + +#about-me { + text-align: center; +} + +.puppies-photo { + display: block; + margin-left: auto; + margin-right: auto; + width: 40%; +} + + +#freeform { + background-color: white; + color: plum; + border: 1cm; +} + +#freeform2 { + background-color: white; + color: plum; + border: 1cm; +} + +.reviewer-specs { + float: left; + color: plum; + text-align: center; + padding: 14px 16px; + font-size: 18px; +} +.footer { + flex: 1; + padding: 20px; + text-align: center; +} + +button:hover { + transform: rotate(360deg); +} + +#home { + width: 80px; + height: 60px; + position: absolute; + transform: translate(-50%, -50%); + border-radius: 30px; + } + + .topnav-centered { + display: flex; + justify-content: center; + } + + button { + display: inline-block; + transition: transform 0.7s ease-in-out; + } \ No newline at end of file diff --git a/styles/favorites.css b/styles/favorites.css new file mode 100644 index 000000000..8859a21f6 --- /dev/null +++ b/styles/favorites.css @@ -0,0 +1,225 @@ +* { + color: burlywood; + background-color: ivory; +} + +body { + display: flex; + flex-direction: column; + min-height: 100%; +} + +html { + height: 100%; +} + +h2 { + margin-left: 3.2em;; +} + +ul { + margin: 2em 2.5em 2em 2.5em; + display: block; +} + +.container { + position: relative; + text-align: center; + color: white; + background-blend-mode: overlay; +} + +.backgroung-image { +background-position: top center; +background-blend-mode: overlay; +background-image: url(https://drinkthriveremedies.com/wp-content/uploads/2021/05/bubble-tea.jpg) !important; +} + +.topnav { + position: relative; + overflow: hidden; + padding: 30px; +} + +/* Style the links inside the navigation bar */ +.topnav a { + float: left; + color: burlywood; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} + +/* Change the color of links on hover */ +.topnav a:hover { + background-color: rgba(232, 213, 166, 0.57); + color: black; +} + +/* Add a color to the active/current link */ +.topnav a.active { + background-color: burlywood; + color: darkgoldenrod; +} + +.topnav-centered a { + float: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.topnav-right { + float: right; +} + +/* Dropdown Button */ +.dropbtn { + color: burlywood; + padding: 16px; + font-size: 17px; + border: none; + padding: 14px 16px; + text-align: center; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} + +/* The container
    - needed to position the dropdown content */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + min-width: 160px; + /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */ + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + color: lightpink; + padding: 12px 16px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover {background-color: blanchedalmond;} + +/* Show the dropdown menu on hover */ +.dropdown:hover .dropdown-content {display: block;} + +/* Change the background color of the dropdown button when the dropdown content is shown */ +.dropdown:hover .dropbtn {background-color: rgba(232, 213, 166, 0.57)} + +.container { + align-items: center; + float: left; +} + +.image{ + float: left; + /* padding: 5px; */ + width: 300px; +} + +.mt-auto py-1 bg-light fixed-bottom { + background-color: #e3f2fd; + flex: 1; + padding: 20px; +} + +.container { + align-items: center; + float: left; +} + +.image{ + float: left; + padding: 5px; + width: 300px; +} + +.footer { + flex: 1; + padding: 20px; + text-align: center; +} + +.book-covers li { + /* padding-right: 10px; */ + list-style-type: none; + display: inline-block; + text-align: center; + padding-right: 1em; + padding-top: 2em; +} + +.book-covers li img { + display: block; + margin: 0 auto; +} + +.covers { + width: 300px; + height: 400px; +} + +#title { + color: burlywood; + font-size: 40px; + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + padding: 50px; + text-align: center; +} + +#popular { + /* Add shadows to create the "card" effect */ + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; +} + +/* On mouse-over, add a deeper shadow */ +#popular:hover { + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); +} + +/* Add some padding inside the card container */ +#popular { +padding: 2px 16px; +} +.footer { + flex: 1; + padding: 20px; + text-align: center; +} + +button:hover { + transform: rotate(360deg); +} + +#home { + width: 80px; + height: 60px; + position: absolute; + transform: translate(-50%, -50%); + border-radius: 30px; + } + + .topnav-centered { + display: flex; + justify-content: center; + } + + button { + display: inline-block; + transition: transform 0.7s ease-in-out; + } \ No newline at end of file diff --git a/styles/gallery.css b/styles/gallery.css new file mode 100644 index 000000000..d8a5d4d3a --- /dev/null +++ b/styles/gallery.css @@ -0,0 +1,201 @@ +* { + color: burlywood; + background-color: ivory; +} + +#title { + color: burlywood; + font-size: 40px; + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + text-align: center; +} +#title2 { + color: burlywood; + font-size: 20px; + font-family: 'Arial Narrow', sans-serif; + text-align: center; +} +.topnav { + position: relative; + overflow: hidden; + padding: 30px; +} + + /* Style the links inside the navigation bar */ + .topnav a { + float: left; + color: burlywood; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; + } + + /* Change the color of links on hover */ + .topnav a:hover { + background-color: rgba(232, 213, 166, 0.57); + color: black; + } + + /* Add a color to the active/current link */ + .topnav a.active { + background-color: burlywood; + color: darkgoldenrod; + } + + .topnav-centered a { + float: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .topnav-right { + float: right; + } + +/* Dropdown Button */ +.dropbtn { + color: burlywood; + padding: 16px; + font-size: 16px; + border: none; +} + +/* The container
    - needed to position the dropdown content */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover {background-color: #ddd;} + +/* Show the dropdown menu on hover */ +.dropdown:hover .dropdown-content {display: block;} + +/* Change the background color of the dropdown button when the dropdown content is shown */ +.dropdown:hover .dropbtn {background-color: rgba(232, 213, 166, 0.57)} + + #popular { + /* Add shadows to create the "card" effect */ + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; + } + + /* On mouse-over, add a deeper shadow */ + #popular:hover { + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); + } + + /* Add some padding inside the card container */ + #popular { + padding: 2px 16px; + } + + .container { + display: grid; + grid-template-columns: 30% 30% 30%; + padding: 4px; +} + + + .image{ + float: left; + padding: 5px; + width: 300px; + } + + + html { + height: 100%; + } + + body { + display: grid; + flex-direction: column; + min-height: 100%; + } + + .mt-auto py-1 bg-light fixed-bottom { + background-color: #e3f2fd; + flex: 1; + padding: 20px; + } + + + +.covers { + width: 300px; + height: 400px; +} + + /* Style the links inside the navigation bar */ + .footer { + flex: 1; + padding: 20px; + text-align: center; + } + + button:hover { + transform: rotate(360deg); + } + + #home { + width: 80px; + height: 60px; + position: absolute; + transform: translate(-50%, -50%); + border-radius: 30px; + } + + .topnav-centered { + display: flex; + justify-content: center; + } + + button { + display: inline-block; + transition: transform 0.7s ease-in-out; + } + + + +/* In case if you would like it - few more bright nice popics with Boba ;) + +https://herbivorecucina.com/wp-content/uploads/2022/05/Rose-Boba-Tea-3-scaled.jpg + +https://www.google.com/imgres?imgurl=https%3A%2F%2Frestaurantsustainability.files.wordpress.com%2F2021%2F01%2Fbubble-tea.jpeg&tbnid=_7PgR0bOPwRnPM&vet=10CKwBEDMolQJqFwoTCMje_Pzz-_4CFQAAAAAdAAAAABAQ..i&imgrefurl=https%3A%2F%2Fugsrp.com%2F2021%2F01%2F18%2Fretea-rethinking-single-use-plastic-in-the-bubble-tea-market%2F&docid=vAl-YWs-ghQqQM&w=1072&h=553&q=boba%20tea%20images&client=firefox-b-1-d&ved=0CKwBEDMolQJqFwoTCMje_Pzz-_4CFQAAAAAdAAAAABAQ + +https://www.google.com/imgres?imgurl=https%3A%2F%2Ftheflavorbells.com%2Fwp-content%2Fuploads%2F2022%2F07%2FHoneydew_boba-_f.jpg&tbnid=RqgalhGEyUSF_M&vet=10CF8QMyiLAWoXChMIyN78_PP7_gIVAAAAAB0AAAAAEA8..i&imgrefurl=https%3A%2F%2Ftheflavorbells.com%2Fhoneydew-milk-tea%2F&docid=aaLI-rDhTmde3M&w=1200&h=1200&q=boba%20tea%20images&client=firefox-b-1-d&ved=0CF8QMyiLAWoXChMIyN78_PP7_gIVAAAAAB0AAAAAEA8 + +https://www.google.com/imgres?imgurl=https%3A%2F%2Fi0.wp.com%2Fdailyteatime.com%2Fwp-content%2Fuploads%2F2022%2F04%2Ftaro-milk-tea-sized-feature.jpg%3Ffit%3D735%252C1103%26ssl%3D1&tbnid=o4UMCKKneTJ1GM&vet=10CBwQxiAoCWoXChMI4Nitnvb7_gIVAAAAAB0AAAAAEAc..i&imgrefurl=https%3A%2F%2Fdailyteatime.com%2Ftaro-milk-tea%2F&docid=hr7sFkatvNGR1M&w=735&h=1103&itg=1&q=boba%20tea%20images&hl=en&client=firefox-b-1-d&ved=0CBwQxiAoCWoXChMI4Nitnvb7_gIVAAAAAB0AAAAAEAc + +https://www.google.com/imgres?imgurl=https%3A%2F%2Fmyveganminimalist.com%2Fwp-content%2Fuploads%2F2022%2F08%2FLychee-Bubble-Milk-Tea-Boba-19.jpg&tbnid=_siPnDD6gbXBGM&vet=10CC0QMyh6ahcKEwjI3vz88_v-AhUAAAAAHQAAAAAQDw..i&imgrefurl=https%3A%2F%2Fmyveganminimalist.com%2Flychee-milk-tea%2F&docid=2kuL7eoo7jtUtM&w=1200&h=1200&q=boba%20tea%20images&client=firefox-b-1-d&ved=0CC0QMyh6ahcKEwjI3vz88_v-AhUAAAAAHQAAAAAQDw + +https://www.google.com/imgres?imgurl=https%3A%2F%2Fi0.wp.com%2Fdailyteatime.com%2Fwp-content%2Fuploads%2F2022%2F04%2Ftaro-milk-tea-sized-feature.jpg%3Ffit%3D735%252C1103%26ssl%3D1&tbnid=o4UMCKKneTJ1GM&vet=10CBwQxiAoCWoXChMI4Nitnvb7_gIVAAAAAB0AAAAAEAc..i&imgrefurl=https%3A%2F%2Fdailyteatime.com%2Ftaro-milk-tea%2F&docid=hr7sFkatvNGR1M&w=735&h=1103&itg=1&q=boba%20tea%20images&hl=en&client=firefox-b-1-d&ved=0CBwQxiAoCWoXChMI4Nitnvb7_gIVAAAAAB0AAAAAEAc#imgrc=o4UMCKKneTJ1GM&imgdii=LARyhYS07dA25M + +https://www.google.com/imgres?imgurl=https%3A%2F%2Fshottbeverages.com%2Fwp-content%2Fuploads%2F2020%2F06%2Fblack_tea_apple_bubble_tea.jpg&tbnid=o3tb2jTPEWncBM&vet=10CIEBEDMolwFqFwoTCMje_Pzz-_4CFQAAAAAdAAAAABAP..i&imgrefurl=https%3A%2F%2Fshottbeverages.com%2Frecipe%2Fblack-tea-apple-tea-bubble-tea%2F&docid=8RcyCb2tGUNm8M&w=1332&h=1576&q=boba%20tea%20images&client=firefox-b-1-d&ved=0CIEBEDMolwFqFwoTCMje_Pzz-_4CFQAAAAAdAAAAABAP + +https://www.google.com/imgres?imgurl=https%3A%2F%2Frealandvibrant.com%2Fwp-content%2Fuploads%2F2019%2F08%2FHow-to-Make-Matcha-Boba-Tea-11.jpg&tbnid=zmnQq841WDKJxM&vet=10CPMBEDMotAJqFwoTCMje_Pzz-_4CFQAAAAAdAAAAABAQ..i&imgrefurl=https%3A%2F%2Frealandvibrant.com%2Fmatcha-bubble-tea%2F&docid=obsy77zq-CPWnM&w=800&h=1067&q=boba%20tea%20images&client=firefox-b-1-d&ved=0CPMBEDMotAJqFwoTCMje_Pzz-_4CFQAAAAAdAAAAABAQ#imgrc=zmnQq841WDKJxM&imgdii=wUTo82tjdrs1bM + +//cdn.shopify.com/s/files/1/0596/8822/2898/products/rosehips_latte_0.75x_x643.png?v=1663877010 */ \ No newline at end of file diff --git a/styles/index-style.css b/styles/index-style.css new file mode 100644 index 000000000..585d4a640 --- /dev/null +++ b/styles/index-style.css @@ -0,0 +1,267 @@ +* { + color: burlywood; + /* background-color: ivory; */ +} + +body { + display: flex; + flex-direction: column; + min-height: 100%; + font-family: 'Raleway', sans-serif; +} + +button { + display: inline-block; + transition: transform 0.7s ease-in-out; +} + +button:hover { + transform: rotate(360deg); +} + +html { + height: 100%; +} + +h2 { + margin-left: 2em; + font-size: xx-large; + padding-top: 1.5em; +} + +h3 { + margin: 2em 2.5em 2em 2.5em; + padding-bottom: 2em; + font-size: 150%; + line-height: 1.5; +} + +h4 { + margin-left: 2.5em; + font-size: xx-large; + padding-top: 1.5em; +} + +ul { + margin: 2em 2.5em 2em 2.5em; + display: block; +} + +ul li { + font-size: larger; + line-height: 1.5; +} + +.topnav { + position: relative; + overflow: hidden; + padding: 30px; +} + +/* Style the links inside the navigation bar */ +.topnav a { + float: left; + color: burlywood; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} + +/* Change the color of links on hover */ +.topnav a:hover { + background-color: rgba(232, 213, 166, 0.57); + color: black; +} + +/* Add a color to the active/current link */ +.topnav a.active { + background-color: burlywood; + color: darkgoldenrod; +} + +.topnav-centered a { + float: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.topnav-right { + float: right; +} + +/* Dropdown Button */ +.dropbtn { + color: burlywood; + padding: 16px; + font-size: 17px; + border: none; + padding: 14px 16px; + text-align: center; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} + +/* The container
    - needed to position the dropdown content */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + min-width: 160px; + /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */ + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + color: lightpink; + padding: 12px 16px; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover {background-color: blanchedalmond;} + +/* Show the dropdown menu on hover */ +.dropdown:hover .dropdown-content {display: block;} + +/* Change the background color of the dropdown button when the dropdown content is shown */ +.dropdown:hover .dropbtn {background-color: rgba(232, 213, 166, 0.57)} + +.container { + align-items: center; + float: left; +} + +.image{ + float: left; + /* padding: 5px; */ + width: 300px; +} + +.mt-auto py-1 bg-light fixed-bottom { + background-color: #e3f2fd; + flex: 1; + padding: 20px; +} + +.container { + align-items: center; + float: left; +} + +.image{ + float: left; + padding: 5px; + width: 300px; +} + +.book-covers li { + /* padding-right: 10px; */ + list-style-type: none; + display: inline-block; + text-align: center; + padding-right: 1em; + padding-top: 2em; +} + +.book-covers li img { + display: block; + margin: 0 auto; +} + +.covers { + width: 300px; + height: 400px; +} + +.footer { + flex: 1; + padding: 20px; + text-align: center; +} + +.topnav-centered { + display: flex; + justify-content: center; +} + +#title { + color: burlywood; + font-size: 40px; + font-family: 'Raleway', sans-serif; + padding: 50px; + text-align: center; + font-size: 300%; +} + +#popular { + /* Add shadows to create the "card" effect */ + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; +} + +/* On mouse-over, add a deeper shadow */ +#popular:hover { + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); +} + +/* Add some padding inside the card container */ +#popular { + padding: 2px 16px; +} + +#backgroung-image { + background-position: center; + background-size: cover; + width: 100%; + /* background-blend-mode: overlay; */ + mix-blend-mode: multiply; + background-image: url("https://sugaryums.com/wp-content/uploads/2022/03/Oolong-Milk-Tea-Process-SugarYums-2.jpg") !important; +} + +#boba-types { + margin-top: 1em 1.5em; + padding-bottom: 8em; +} + +#first { + padding-bottom: 1em; +} + +#last { + padding-bottom: 1.5em; +} + +#second-ul-title { + margin-top: -120px; +} + +#background-gif { + grid-column: 1 / span 2; + text-align: center; + mix-blend-mode: multiply; + margin: 0px auto; +} + +#description { + padding-left: 10px; + padding-right: 10px; +} + +#home { + width: 80px; + height: 60px; + position: absolute; + transform: translate(-50%, -50%); + border-radius: 30px; +} \ No newline at end of file diff --git a/styles/us.css b/styles/us.css new file mode 100644 index 000000000..b0d2162ee --- /dev/null +++ b/styles/us.css @@ -0,0 +1,188 @@ +* { + color: burlywood; + background-color: ivory; +} + +#title { + color: burlywood; + font-size: 40px; + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + text-align: center; +} +#title2 { + color: burlywood; + font-size: 20px; + font-family: 'Arial Narrow', sans-serif; + text-align: center; +} +.topnav { + position: relative; + overflow: hidden; + padding: 30px; +} + + /* Style the links inside the navigation bar */ + .topnav a { + float: left; + color: burlywood; + text-align: center; + padding: 14px 16px; + text-decoration: none; + font-size: 17px; + } + + /* Change the color of links on hover */ + .topnav a:hover { + background-color: rgba(232, 213, 166, 0.57); + color: black; + } + + /* Add a color to the active/current link */ + .topnav a.active { + background-color: burlywood; + color: darkgoldenrod; + } + + .topnav-centered a { + float: none; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .topnav-right { + float: right; + } + +/* Dropdown Button */ +.dropbtn { + color: burlywood; + padding: 16px; + font-size: 16px; + border: none; +} + +/* The container
    - needed to position the dropdown content */ +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +/* Change color of dropdown links on hover */ +.dropdown-content a:hover {background-color: #ddd;} + +/* Show the dropdown menu on hover */ +.dropdown:hover .dropdown-content {display: block;} + +/* Change the background color of the dropdown button when the dropdown content is shown */ +.dropdown:hover .dropbtn {background-color: rgba(232, 213, 166, 0.57)} + + #popular { + /* Add shadows to create the "card" effect */ + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; + } + + /* On mouse-over, add a deeper shadow */ + #popular:hover { + box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); + } + + /* Add some padding inside the card container */ + #popular { + padding: 2px 16px; + } + + .container { + align-items: center; + float: left; + } + .image{ + float: left; + padding: 5px; + width: 300px; + } + + + html { + height: 100%; + } + + body { + display: flex; + flex-direction: column; + min-height: 100%; + } + + .mt-auto py-1 bg-light fixed-bottom { + background-color: #e3f2fd; + flex: 1; + padding: 20px; + } + + + .book-covers li{ + padding-right: 10px; + list-style-type: none; + display: inline-block; + text-align: center; +} + +.book-covers li img { + display: block; + margin: 0 auto; + border-radius: 10px; +} + +.covers { + width: 300px; + height: 400px; +} + + /* Style the links inside the navigation bar */ + .footer { + flex: 1; + padding: 20px; + text-align: center; + } + + button:hover { + transform: rotate(360deg); + } + + #home { + width: 80px; + height: 60px; + position: absolute; + transform: translate(-50%, -50%); + border-radius: 30px; + } + + .topnav-centered { + display: flex; + justify-content: center; + } + + button { + display: inline-block; + transition: transform 0.7s ease-in-out; + } \ No newline at end of file