This project has been developed for the PP1 of Code Institute and in collabotration with the Special Treatments Center "simeio" based in Thessaloniki, Greece. The treatment center aims to inform people, mostly parents, regarding the therapies they apply and encourage parents to seek for help when they discover any difficulties in their child's speech or movement. It provides information about the services that the Treatment Center offer, information about the team and a contact form.
View the deployed site Simeio Therapy
- Design
- User Experience (UX)
- Features
- Technologies Used
- Deployment and Local Development
- Testing
- Credits
The #5D4E96 and the #4FC4CF were chosen by the owners of the Special Treatments Center.
The rest of the colours were chosen to match the two above.
Opacity has been used for :
| Colour | Opacity |
|---|---|
| #4FC4CF | rgba(79, 196, 207, 0.4) |
| #E5E7E9 | rgba(229, 231, 233, 0.7) |
| #70C9D1 | rgba(112, 201, 209, 0.1) |
| #70C9D1 | rgba(112, 201, 209, 0.3) |
Other colours have been used :
#616161 , #f74242 , #fafafa , #3f3f3f
The Manrope font was chosen by the owners of the Special Treatment Center.
The font imported from Google fonts.
Font weights used : 400, 500, 600
| Goal | |
|---|---|
| Client | A simple and easy to navigate website |
| To encourage and help people find out more about learning disabilities | |
| To help people identify signs of learning diasabilities | |
| First Time User | I want to learn what services the special treatments center offer |
| I want to learn about the therapists' experience | |
| I want to know where the special treatments center is located | |
| I want to navigate easily to the website | |
| I want to connect on their social media | |
| I want to see if they offer any internship * | |
| Returning User | I want to be able to contact the special treatments center for any queries I have |
| I want to sign up for their newsletter * | |
| Frequent User | I want to find out if there is a new service * |
| I want to find out about new members in the team * |
*To be implemented in the future
The site consists of a home page, an about us page in which there 4 cards with links to cv pages, 4 services pages, a contact page and a thank you page that is shown when the contact form has been submited.
All pages on the site are responsive and have :
- A favicon and a title of the active page on the browser tab.
-
A logo image on top left corner which acts and as home button.
-
A nav bar with 4 links : Home, About us, Services, Contact us.
-
A dropdown menu on hover to the services button with white background and coloured on hover with links to each service's page.
- A footer section with social links that open in a new tab, contact information, an iframe with a pin on the address and a contact us with a link to the contact us page.
The Home Page consists of an image on the left hand and a paragraph with a short story of the therapists on the right hand, a services section with an image on the side of each two services sections (one left-hand and one right hand). The first paragraph of each service contains a link to the service's page.
The About Us Page consists of an image on the left hand and a paragraph with a short story of the therapists on the right hand and a our team section with 4 cards of the therapists with links to CV Pages. These links contained on the "View profile" button in which there is shadow to create 3D effect.
The CV Pages contain the bio of each therapist.
The Services Pages consists of an image to the right hand and info of the service.
The Contact Us Page consists of a contact form with the fields : user's first and last name, email address, contact number, a subject, a text area to comment and a submit button in which there is shadow to create 3D effect. All fields are required. When the form is submitted it links to the Thank you Page.
The Thank you Page consists of a message that confirms form's submition and an image of the logo with link to the home page.
The error page displays an error message and there is a logo image with link to the home page.
Implement Career Page to inform about and offer graduates internship.
Implement Newsletter.
Add new team members.
Add new services.
HTML, CSS
- GitHub - To save and store files for the website.
- GitPod - IDE used to create the site.
- Codeanywhere - IDE used to create the site.
- Techsini - To show the web image in various devices.
- Google Fonts - To import the fonts used on the website
- Google Developer Tools - To test features, resposiveness and stylilng.
- TinyPNG - To reduce size of the images.
- Favicon - To create favicon.
- Shields IO - To add badges to README.
- Coolors - To create palette image to README.
- Font Awesome - To create icons
- VSCode - Code editor used for local development.
The site is deployed using GitHub Pages. Deployed site Simeio Therapy
To deploy the site to GitHub Pages :
- Log in (sign up) to GitHub.
- Go to the repositoty for this project Simeio Therapy.
- Go to settings.
- Select Pages from the left hand menu.
- From the dropdown menu at source select the main branch and press save.
- The site has been deployed. Check at the top of the page, it might take a couple of minutes.
Any code pushed to main branch will automatically go live/update in the deployed site.
To fork the repository :
- Log in (sign up) to GitHub.
- Go to the repository for this project Simeio Therapy.
- Click the fork button in the top right corner.
To clone the repository :
- Log in (sign up) to GitHub.
- Go to the repository for this project Simeio Therapy.
- Click on the code button, select one of the HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
For any changes made to the code:
- git add [file]
- git commit -m "[descriptive message]"
- git push
Any code pushed to main branch will automatically go live/update in the deployed site.
Find a detailed section on TESTING.md.
Through the development W3 schools was consulted for HTML and CSS.
- Rising Women To create the cards to the About Us Page.
- Rising Women To create the contact form.
- Hamburger Menu To create the hamburger menu for mobile devices.
- Navbar To create the navbar.
- A Complete Guide to Flexbox To learn and understand how flexbox works (CSS).
- Flexbox tutorial youtube video To learn and understand how flexbox works (CSS).
- README How to write the README.
- README I followed this guide and all the examples that contains to write the README.
All the text content has been provided by Simeiotherapy.gr
Images were dowloaded from Pexels.com
- Home Page Photo by Karolina Grabowska
- Home Page Photo by Karolina Grabowska
- Home Page Photo by Karolina Grabowska
- About us Page Photo by cottonbro studio
- Services Pages Photo by Ksenia Chernaya
My mentor Brian Macharia for guidance, support and feedback during the project.
Kera Cudmore for feedback and support during the project. Also for providing an excellent guide of how to write the README.
Sawyer Thompson for guidance and support during the project.
Humberto Pereira for support and feedback during the project.
Friends and family for support and testing the project on their devices.
A massive thank you to Simeio Therapy for providing the content and feedback for the project.