This website was designed for florists. The main focus of the site is to create an online presence allowing members to receive venu or occasion flower arrangement quotes from the best wedding florists and to find out relevant information.
This is the first of four Milestone Projects that the developer must complete during their Full Stack Web Development Program at The Code Institute.
The main requirements were to make a responsive website with a minimum of three pages using primarily HTML5 and CSS3.
- Wedding planners.
- Event organisers.
- General Users looking for flower arrangements.
- Current customers.
- To get quotes for weddings flower arrangemens or event flower arrangements.
- To be able to navigate throughout the site to find any occasion flower arrangements.
- To locate Information of the location and contact details.
- To locate links to social media for external resources.
- To be able to attract and retaining potential customers.
- Showcase photos from the flower Bouquets, events catalog.
- Merchandise occasion flower arrangements.
- To Provide Social media links to external resources and contact information.
- Wedding planners.
- Event organisers.
- General Users looking for flower arrangements.
- Current customers.
- To find floraal products and/or services.
- To navigate site easily through categories clearly.
- To find showcase gallery to see company's work.
- To easily find company's Contact information.
- To find company on their preferred social media platform.
- To create an online presence for the floral company.
- To provide a good site navigation to easy and quickly find the relevant information.
- To promote the products and/or services.
- To showcase floral artist work to create a thumbnail gallery.
- To Provide user with contact information.
- To Provide user with social media links.
- Easy website navigation to quickly find the information
- Picture Display gallery to showcase latest work.
- Contact Form and contact Information.
- Links to external resources such as social media.
- Responsive design to be able target broader audiences.
- Landing Page
- Descriptive Hero image
- Large Description responsive text overlay
- About Page
- "About Us" description
- "Who we are" description
- "What we do" description
- Later added "Top Picks" feature
- Gallery
- Showcase thumbnail Gallery content
- Contact Form
- Footer
- Address information
- Contact information
- Embeded location Map
- NavBar
- Branding
- Navigation Links
- Social Links
- Landing Page
- Large description
- Background Hero Image
- "About us" page was added latter after discussions with Mentor
- About us.
- Why Us.
- What we do.
- Top "Picks Feature" was added later to compliment "About us" Page design
- Gallery page
- Recent reviews
- Contact form
- "Name field"
- "Last-Namee field"
- "eMail field"
- "Text-Area field"
- "Submit button"
- Footer
- Social Links
- Address block
- Contact information Block
- Location Map
- Colour palette used View
- ROBOTO font is the main font used Serif as the fallback, family Yellowtail and family Special Elite was used for most of the headings.
- Large, background image is designed to be striking and catch the user's attention.
- Photo Gallery & Product Image Gallery helps you display and promote product or service.
Website features the Long-Scrolling design with four pages such as: "Home", "About Us", "Galery" and "Contact Us" page.
Website is Responsive on most devices such as: mobile devices and Large screen deskFloral-Fantasy PC's.
Features customized bootstrap NavBar with Bootstrap5 elements such as: "d-none d-sm-block" to display/hide elments to viewport size. Bootstrab drop-down menu was modified for mobile devices.
NavBar is Fully responsive, with 3 designs such as: for deskFloral-Fantasy computers, tablet devices and for mobile devices.
NavBar Features: "Site Link Block Element" is to help navigate the site, "Social Media Links element" displays link icons to various social media platforms, "Brand link block element" is text hyperlink and it will refresh the page.
NavBar has display Property "Fixed". As you scroll it will remain fixed at the Floral-Fantasy of the browser's viewport.
Large background image span the full width across the whole viewport and shrinks in size as viewport decreases. Hero background image and color overlay creates a better background for text while being more appealing than a solid background color.
Gradient-efect-overlay is used over the background image to blend background Image color and NavBar color to the website background. Gradient-efect-overlay was placed over background image using CSS declaration "position:absolute" and CSS declaration "position:relative" for Gradient-efect-overlay to position over the image"
Home Page Large font was set CSS property min & max font size, that is responsive to all other browser sizes. Positioning text over image with CSS property "position: absolute" along with CSS property "z-index".
"About Us" page features three visualy apealing, descriptive images and speaks to user before the quote does.
Each image has one very telling quote, describing user who the company is, why choice the company and what company does.
"About us" page was designed flexbox layout design for responsive website.
Original "about us" page was designed using CSS properties such as float, positioning of elements. But later it was redesigned as it was inconvenient for responsive design and required element repositioning on each screen size. And it was redesigned following responsive FlexBox Design as for viewport width changes sizes.
"Top Picks" Feature represents four thumblail images with current offers for the company.
"Top Picks" Feature was designed to be responsive and using FlexBox design for responsiveness.
"Top Picks" Feature was designed to overlap each image using negative margin and CSS property z-index. Text was palced over the images using CSS declaration "position:absolute".
"hover" pseudo-class was used with transition effects "rotate, translate and scale" for each card to create visual effect such as scale and rotate 6deg on mouse-over.
Thumbnail Gallery is a grid of images that when clicked on opens in a pop-up full view images.
The gallery configuration designed to have smaller images for Thumbnails and Large Images stored separately on the website.
The gallery is fully responsive. Bootstrap Grid system was used for responsive gallery layout desing.
Reviews feature is fully responsive. Bootstrap5 Grid system was used for responsive gallery layout.
For the content inside review box FlexBox design was implemented to align image next to a paragraph and to be responsive.
Contact Form is responsive on most devices with maximum width 600px.
Follow this guide to create a contact form here
Custom background colour for browser autocomplete function for the contact form input field. Solution was found here With W3C CSS Validation Warning.
Footer has 3 main block elements: "address for the company", "Contact Information", "Google Map embeded".
Footer was designed to be responsive using FlexBox system design. CSS Media query technique with FlexBox CSS declaration "flex-item :order" was used to rearrange Element order for mobile devices.
Embedding a Google map in the footer with iFrame for a business location.
Floral-Fantasy of the footer features social media links.
⇮
- Testing information can be found in a separate testing file TESTING.md
- Bugs and Issues moved to the TESTING file here TESTING.md#Fixed-Bugs-and-Issues
- W3C-Validation moved to the TESTING file here W3C-Validation TESTING.md
⇮
- Bootstrap 5.0.0-beta2: was used to assist with the responsiveness and to style the website.
- Google Fonts: were used throughout the site.
- Font Awesome: was used throughout the website to add icons.
- jQuery: came with Bootstrap.
- Git Git was used for version control.
- GitHub: used to store the projects code.
- gitpod.io gitpod Was used for codding.
- Balsamiq: was used to create the wireframes.
⇮
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- At the Floral-Fantasy of the repository, select Settings from the menu items.
- Scroll down the Settings page to the "GitHub Pages" section.
- Under "Source" click the drop-down menu labelled "None" and select "Master Branch".
- Upon selection, the page will automatically refresh meaning that the website is now deployed.
- Scroll back down to the "GitHub Pages" section to retrieve the deployed link.
- At the time of submitting this Milestone project the Development Branch and Master Branch are identical.
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- At the Floral-Fantasy of the repository, on the right side of the page, select "Fork"
- You should now have a copy of the original repository in your GitHub account.
- Install the GitPod Browser Extension for Chrome.
- After installation, restart the browser.
- Log into GitHub or create an account.
- Locate the [GitHub Repository](https://github.com/Raivis80/First-Milestone-Project"Link to GitHub Repo").
- Click the green "GitPod" button in the Floral-Fantasy right corner of the repository. This will trigger a new gitPod workspace to be created from the code in github where you can work locally.
How to run this project within a local IDE, such as VSCode:
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- Under the repository name, click "Clone or download".
- In the Clone with HTTPs section, copy the clone URL for the repository.
- In your local IDE open the terminal.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type 'git clone', and then paste the URL you copied in Step 3.
git clone https://github.com/USERNAME/REPOSITORY
- Press Enter. Your local clone will be created.
Further reading and troubleshooting on cloning a repository from GitHub here
⇮
- placeholder.com: Free Image Placeholder.
- stackoverflow.com: Useful website for code tips.
- www.w3schools: Useful website for code tips.
- Bootstrap5: Bootstrap Library was used to make site responsive.
- coolors.co: Colour palettes.
- pexels.com: Images used throughout site.
-
All the images comes From Here pexels.com
- pexels-visually-us-1477166
- pexels-visually-us-1477166
- pexels-cottonbro-4270232
- pexels-craig-adderley-2306275
- pexels-dmitry-zvolskiy-1721942
- pexels-emma-bauso-3585806
- pexels-fernanda-pereira-3885128
- pexels-ivan-57980
- pexels-olya-kobruseva-4661607
- pexels-rocsana-nicoleta-gurza-948185
- pexels-amber-janssens-6847775
- pexels-christina-morillo-1181424
- pexels-deden-dicky-ramdhani-2916263
- pexels-la-miko-3681591
- A huge thanks to Owonikoko Oluwaseun, My Mentor for continuous support and inspire me to push myself beyond where I think I can go.
- Tutor support at Code Institute for their support.