This is the main website for ACARYA Vineyard & Winery.
1. As a First Time Visitor I want to be able to find the informations about the company.
2. As a First Time Visitor I want to easily navigate through the website to find the content I'm interested with.
1. As a Returning Visitor I want to find the information about the company's offer.
2. As a Returning Visitor I want to be able to easily find the company's physical adress, so I can plan my future visits.
3. As a Returning Visitor I want to be able to contact the company in case of having any queries.
1. As a Frequent Visitor I want to see that the range of available products is being updated regularly.
2. As a Frequent Visitor I want to be able to share my feedback with the owners.
3. As a Frequent Visitor I want to be able to enjoy using the website on a various screen sizes thanks to a responsive layout.
- Main colours used are shades of grey and beige, which correspond to ACARYA's logo and background.
- Poiret One and Great Vibes have been chosen as the headings fonts as they've been used in the logo and they provide elegant, aesthetically pleasing experience for a user.
- Montserrat has been used as a main body elements. It's a popular and commonly used font in programming. Thanks to it's clean and simple design it compliments the decorative aspects of the headings.
- Sans Serif and Helvetica are used as a fallback fonts in case of the main fonts not being imported into the site.
- Imagery is crucial, as it gives the first impression of what ACARYA's website is about. The hero image represents clusters of freshly picked white grapes, which corresponds with the main line of the business. The warm colours of the picture are in perfect harmony with the website's colour scheme.
Wireframes have been created with a use of Figma
- About Us page:
- Products page:
- Contact page:
- grapes-header.png - Photo by Christoph Schütz from pixabay.com
- wine-pouring.png - Photo by Zsanett Mezei from pixabay.com
- grape-hand.jpg & vineyard-uphill.jpg - Image by Krzysztof Wójcik
- red-wine.jpg- Photo by Ron Lach from pexels.com
- white-wine.jpg- Photo by Steven Weeks from unsplash.com
- rose-wine.jpg- Photo by Maria Orlova from pexels.com
- mead.jpg- Photo by Mona Miller on unsplash.com
- ready website picture generated by https://ui.dev/amiresponsive
- Blur effect code from css.glass by miketromba
- Solution for hero image animation not working properly from here
- Fliping card effect created thanks to my Mentor's support
- To Code Institute's Student Care for support and constructive review.
- To my partner for sharing opinion about my aesthetic choices.
- Special thanks to my Mentor Narender Singh for all the help and support.
The index page welcomes the User with an animated hero image, logo and a navigation menu. On the menu you can see 3 links to the pages presented below. The logo and menu are the same on each of the pages.
Scrolling down, the User will find the About Us section, that includes some useful informations about the company.
On the bottom of each page the User will find the footer, that includes links to social media.
The second page presents the products available at this moment in the Winery. They are separated into 4 categories and presented in a form of a flip cards.
The last page contains the necessery contact informations. The user can also find here the embedded mini Google Maps and the contact form to fill out.
- Hamburger menu on smaller screens.
- Improved media query to improve layout and funcionality on smaller screens.
- Adding an additional feedback, events and testimonials sections.
The website has been tested in multiple ways, that included: - HTML validation through The W3C Validator - CSS validation through Jigsaw - Checking responsiveness through Chrome DevTools on a laptop and on Samsung Galaxy S7 as well as through https://ui.dev/amiresponsive - Checking if all the links and input areas are working as expected - Opening the website on Google Chrome, Mozilla Firefox and Opera
-
- Google fonts were used to import the Poiret One, Great Vibes and Montserrat fonts into the style.css file which are used on all pages throughout the project.
-
- Font Awesome has been used to import the social media icons in the footer.
-
- Git was used for version control by utilizing the Gitpod and Codeanywhere terminals to commit to Git and Push to GitHub.
-
- GitHub is used to store the projects code after being pushed from Git.
-
- GIMP was used to create the logo and for the edition of the pictures.
-
- Figma was used for the early design planning.
-
- Am I Responsive has been used to present different breakpoints of the website.
- There's a small margin on the right on the active menu link.
- Jigsaw validator does not recognise the shape-outside: circle(50%) property, but the property itself is displaying properly