I developed this site mainly due to my personal connection with mental health issues.
- Brainteaser is created to spread awareness about mental health diagnosises aswell as help people with their diagnosises.
- Subscribe to the monthly newsletter for news and updates about your diagnosis.
- Clean design with easy navigation tools.
- Brainteaser is both good looking and informative.
#FFFFFFused for primary headers and text in darker containers.#e98784used for text boxes with dark containers for high visibility and style.#231F20used for containers and headers in brighter containers.#847365used for backgrounds mainly.#c6b6a9used for main background.
I used coolors.co to generate my colour palette.
For Brainteaser I used Google Fonts as it is easy to use and accessible.
Here are the links to the fonts and icons I've used:
-
League Spartan was used for the primary headers and titles.
-
Barlow was used for all other secondary text.
-
Font Awesome icons were used throughout the site, such as the social media icons in the footer.
I used Canva to design the wireframes for the website. Canva website
| Size | Screenshot |
|---|---|
| Mobile |  |
| Desktop |  |
| Size | Screenshot |
|---|---|
| Mobile |  |
| Desktop |  |
| Size | Screenshot |
|---|---|
| Mobile |  |
| Desktop |  |
| Size | Screenshot |
|---|---|
| Mobile |  |
| Desktop |  |
-
Hoverable header
-
Header that changes the color from black to pink when hovered over using :hover CSS.
-
On every page you can use it to get back to the homepage.
- Responsive navigation and hero
- Navigation and hero section with four circles and a image of a brain.
- The layout changes when you resize it to tablet/mobile viewports. (Try it!)
- The circles have a hover function which makes the white text pink when hovering over it.
- Instead of having the traditional navigation at the top of the page I found this to be more eye catching for the user. (only on the home page)
- By pressing the about us button you will be forwarded down to our about us section on the bottom of the index page.
-
About Us Section
-
The about us section on the bottom of the homepage is made of a black circle with three other circles around it which makes it look like a solar system.
-
The about us section is made to convey the goal of the team and why it was created.
-
Sign Up Page
-
The Sign up page is made for signing up to the monthly newsletter on the webpage where the user recieves updates about their diagnosis.
-
When Sign Up is pressed it will redirect you to a thank you page if you wait 10 seconds it will redirect you back to the homepage again.
- A fully interactive hamburger menu, unfortunately this requires JavaScript.
- Contact page
- Full contact page for users to interact with our team. (COMING SOON)
- Further design of the Diagnosis and Tips&Tricks as viewed in the wireframes. (COMING SOON)
I used both grid and flex to flexibly put elements where I needed them.
- HTML used for the main site content.
- CSS used for the main site design and layout.
- CSS :root variables used for reusable styles throughout the site.
- CSS Flexbox and/or CSS Grid used for an enhanced responsive layout.
- Git used for version control. (
git add,git commit,git push) - GitHub used for secure online code storage.
- Canva used for creation of the wireframes.
- GitHub Pages used for hosting the deployed front-end site.
- Gitpod used as a cloud-based IDE for development.
- Markdown Builder by Tim Nelson used to help generate the Markdown files.
There is a seperate file for testing of the webpage with browser compability, lighthouse values etc.
Press the link below to get redirected to the page.
TESTING.md
The site was deployed to GitHub Pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab.
- Click pages tab.
- From the source section drop-down menu, select the Main Branch, then click "Save".
- The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here
| Source | Location | Notes |
|---|---|---|
| Markdown Builder by Tim Nelson | README and TESTING | tool to help generate the Markdown files |
| Chris Beams | version control | "How to Write a Git Commit Message" |
| W3Schools | entire site | how to use CSS :root variables |
| Flexbox Froggy | entire site | was used to learn Flexbox layout and implementation |
| Font Awesome | entire site | was used for the favicons I used in my footer at the bottom |
| Google Fonts | entire site | was used for the fonts I used in my project |
| W3Schools | entire site | was used to learn how to make perfect circles in CSS |
| Tim Nelson | entire site | Helped me make a :root calc() for my navigation circles and helped me with a bit of the media queries |
| Source | Location | Type | Notes |
|---|---|---|---|
| Canva | entire site | image | hero image and wireframe creation |
Thank you to everyone for all the help I have gotten during the development phase!
- I would like to thank my Code Institute mentor, Tim Nelson for his excellent help and support during the development phase.
- I would like to thank the Code Institute tutor team for their assistance with troubleshooting and debugging some project issues.
- I would like to thank the Code Institute Slack community for the moral support, great way to find answers to questions and the community is great.
- I would like to thank my partner Merle , for believing in me, helping me with the creation of the wireframes and allowing me to spend sleepless nights developing my project.