Style Guide

This guide offers comprehensive instructions on various design elements, ranging from color schemes and typography to button styles and text sizes.

Colors

Primary

Secondary

Light Gray

Black

White

Headings & Paragraph

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Logo made in Photoshop:

Notes:
Custom Logo Design:
Created a unique logo in Photoshop, aligning with the florist theme, and integrated it into the site for consistent branding.

Image Updates:
Replaced all images with florist-themed visuals, optimized for quality and fast loading.
Chose vibrant floral arrangements to enhance the aesthetic.

Text Refinement:
Updated all text with florist-themed content, emphasizing services like bouquets, events, and flower delivery

Service Highlight:
Dedicated a section for "Florist Services," showcasing offerings with descriptions and examples.

Theme Enhancements:
Adjusted the color palette to soft pastels and blue's.
Updated typography for elegance and added subtle animations for an engaging user experience.

Why I choose WebFlow:
1. Recommended by fellow peers
2. I like the functionality and freedom of making a website
3. Many themes and many choices for web building 

Options Considered:

Wix: Easy drag-and-drop builder but limited design flexibility for advanced     animations.

WordPress: Highly customizable with plugins but requires more coding and setup time.

Feedback:  

Iain - Amazing website, I like the feel of realism!

Aj - I like the color choices and functionalities.



 Links to Images: 

https://pixabay.com/photos/autumn-aster-purple-yellow-flower-7504819/
https://pixabay.com/photos/flowers-table-vase-bouquet-window-7233987/https://pixabay.com/photos/beach-wedding-reception-1854076/
https://pixabay.com/illustrations/flower-flower-decoration-border-8582484/
https://pixabay.com/illustrations/cabinet-furniture-home-plant-room-7277181/https://unsplash.com/photos/white-and-green-leaf-plant-KcufLkTXYy4https://pixabay.com/photos/wedding-reception-table-banquet-1854074/https://pixabay.com/photos/chrysanthemum-flowers-plant-petals-8350644/https://pixabay.com/photos/agriculture-man-farmer-gardener-6942153/
https://pixabay.com/photos/adult-bald-beard-corporate-1868750/
https://pixabay.com/photos/woman-smiling-portrait-outdoors-7175038/
https://pixabay.com/photos/business-man-suit-man-smile-3297140/
https://pixabay.com/photos/sun-woman-curls-smiling-portrait-7350734/https://pixabay.com/photos/woman-model-portrait-pose-style-6742445/
https://pixabay.com/photos/man-beard-cap-vest-gilet-retro-8222531/
https://pixabay.com/photos/window-floral-decorations-1789236/
https://pixabay.com/photos/table-setting-table-preparing-set-791149/
https://pixabay.com/photos/flower-bouquet-rose-roses-pink-3215149/
https://pixabay.com/photos/desk-office-office-desk-computer-4962107/

Rich Text

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Image Caption
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Bullet list 1
  • Bullet list 2
  • Bullet list 3
  1. Number List 1
  2. Number List 2
  3. Number List 3

Buttons