TeaFest Express

Style guide for TeaFest Express.

Project Description:

TeaFest Express is a week long Tea festival. Special events are planned for each day of the week. Through this weekly calendar-like website, customers can book a ticket for each day of the festival and also preview the events that are planned for each day of the festival.

Styleguide navigation

Services/Products

Events listings

CSS selector:

h4 | p

sample code:

<ul class="grid" >
<li>
<h4> Day 7: Tea Grand FinaleThe Tea Party of the Year </h4>
Day 7 is our grand finale. Discover rare teas,...
</li>
</ul>

Events Calendar

A week long tea festival!

Get ready for a week of tea exploration like no other. From free tastings to art workshops, wellness sessions to global traditions, our festival is your ticket to tea-inspired adventures. Join us for a week of sipping, learning, and indulging!

MONDAY - Nov 13th

Day 1: Free Tea Day!

Start your festival journey with a bang on Day 1. it's Free Tea Day! Sip and savor a range of teas from around the world, on the house. Discover new favorites without spending a dime.

Book Your Ticket

TUESDAY - Nov 14th

Day 2: Tea WorkshopsBecome!

Day 2 is all about mastering tea. Join workshops and uncover brewing secrets, tea blending artistry, and delightful pairings. You'll leave as a tea pro!

Book Your Ticket

WEDNESDAY - Nov 15th

Day 3: Tea and Wellness!

Day 3 combines tranquility and wellness. Begin your day with a complimentary yoga or meditation class. Then explore tea's healing magic through tastings. Zen out!

Book Your Ticket

THURSDAY - Nov 16th

Day 4: Tea Art Workshops!

Day 4 transforms you into a tea artist! Join our Tea Art Workshops. Create beautiful tea presentations, from ceremonies to latte art. Express yourself with tea!

Book Your Ticket

FRIDAY - Nov 17th

Day 5: Tea and Culture!

Day 5 is a global adventure. Explore how diverse cultures enjoy tea. Immerse yourself in traditions and tastings from around the world. Get your cultural tea passport ready!

Book Your Ticket

SATURDAY - Nov 18th

Day 6: Tea and Gastronomy!

Day 6 is a culinary delight. Renowned chefs prepare dishes infused with tea's magic. It's a gourmet journey where tea meets gastronomy. Bon appétit! We hope you enjoy!

Book Your Ticket

SUNDAY - Nov 19th

Day 7: Tea Grand Finale!

Day 7 is our grand finale. Discover rare teas, join auctions, and enjoy exclusive blends. Live music and entertainment set the stage for the tea party of the year!

Book Your Ticket

CSS selector:

.product-day | .product-day h2 | .product-day h4 | .product-day p | .short-description

sample code:

<div class="product-day">
<h2> FRIDAY - <sup>Nov 17th</sup></h2>
<h4> Day 5: Tea and Culture! </h4>
<p> Day 5 is a global adventure. Explore how diverse cultures enjoy tea. Immerse yourself in traditions and tastings from around the world. Get your cultural tea passport ready! </p>
<a href="https://www.eventbrite.ca/" class="ticket-button"> Book Your Ticket</a>
</div>

Text Input Form

Contact Us form

CSS selector:

#submitbutton | input | label

sample code:

<div>
<label for ="customer-name"> Your full name : </label>
<input type = "text"
id="customer-name" placeholder="First name, Last name" >
</div>

Interactive elements

This is what an in text link would look like:

we would like to thank our lovely sponsor Sponsor Name for allowing us to make this festival a reality.

CSS selector:

a

sample code:

<p> we would like to thank our lovely sponsor <a href="https://maps.app.goo.gl/vqqGk553ATFpp1jx5" target = "_blank"> Sponsor Name </a> for allowing us to make this festival a reality. </p>

This is what a "book now" button would look like:

Book Your Ticket

CSS selector:

.ticket-button

sample code:

<a href="#home" class="ticket-button"> Book Your Ticket Now </a>

This is what an in image as a link would look like:

CSS selector:

.imgstyle

sample code:

<a href="https://maps.app.goo.gl/vqqGk553ATFpp1jx5" target="_blank"> <img src="img/manyteas.jpg" height="640" width="426" alt="Day 1 event details" > </a>

Art Direction

Text elements section styling:

Heading 1 - used for page title

Heading 2 - main heading

Heading 3 - main subheading

Heading 4 - for smallest headings

this is the text used in paragraphs

CSS selector:

.heading-style

sample code:

<h2 class="heading-style"> Heading 2 - main heading </h2>

Main and sub colors

image of color palette

Fonts used

Body and small headings: Raleway

ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 1234567890

Main Headings: Rubik

ABCDE FGHIJ KLMNO PQRST UVWXYZ abcde fghij klmno pqrst uvwxyz 1234567890

Visual concept wireframe

wireframe of how the main page would conceptually look like

Citations

coding sources:

image sources:

Fonts:

content: