Be Present is a website to practice meditation. There are some guided meditation on the page and information about the presecial meetings.

Be-Present

https://github.com/naragurgel/bepresent

1. UX Development

   • Project Goal

   • User Stories

     • New User
     • Returning Users
     • Admin User
     • Target Audience

   • Design

     • Colour Scheme
     • Typography
     • Imagery
     • Site Structure
     • Wireframes

2. Features

   • Navigation Bar
   • Header
   • Benefits Section
   • Meditations Section
   • Sign up Section
   • Footer
   • 404 Page
   • Thank You Page
   • Favicon

3. Technology Used

   • Languages Used
   • Frameworks, Libraries and Programs

4. Testing

5. Deployment

6. Credits

7. Media

Demonstrate my competence using HTML and CSS languages to build a responsive website.

The website should promote informations about benefits of meditatios, guided meditations with online videos and information about the presencial meetings.

• I want to easily navigate the site and find the relevant information easily.
• I want to practice meditatio on-line.
• I want to know more about the meditations and the presencial meetings.
• I want to sign up to enjoy the meditations meetings.
• I want to interact with social media.

• I want to know about meditation and how to practice it.
• I want to be able to contact the company with any further questions.
• I want to be able to sign up and enjoy the presencial meetings.

• Update informations about meditation easily.
• Receive the correct information from subscribers.
• Send correct information to users.

• People interested about meditation.

The colour scheme was inspired by the relax image, with blue, green, white, gold and charcol tones.

The colour palette was created using the Coolors to generate some colour codes as inspiration for the site.

Google Fonts was used for the following fonts:

Satisfy is used for headings on the site. It's a rounded and classic font that brings lightness to the text. Sintony is used for the body text on the site. It's a modern and smooth font that provides calm and clear feeling to the readers.

The photos featured throughout the site were obtained from free image providers such as Pexels. I chose the relax-image and the other smaller ones within the sections following the color palette with tones that bring calm and call to nature, giving the feeling of relaxation.

Be Present is a 4 sections and 2 pages website and 404 pag customized. The home page is the default loading page. the other sections are accessible from the navigation menu at all times.

The Wireframes were produced using Balsamiq. The final site varies from the wireframes due to developments that occurred during the building process.

• The navigation bar is responsive at the top of the page and it shows the logo on the left.
• The navigation links on the right take the user to different sections on the same page.
• The navigation bar stickys when the users scrown down the page.
• The navigation bar gets smaller on smal devices.
• The navigation bar links scroll smoothly down, so it doesn't shock users with abrupt movement.

• The header provides the relax image com logo and sub logo inside.

• The benefits of meditation section tell the most important results from the practice of meditation.

• The benefits section becomes 1 column on smaller devices.

• The meditations section shows videos of guided meditation for the user prectice it.

• The videos are interactive and retain the aspect ratio when playing back no matter the screen width.

• The meditation sections becomes 1 column on smaller devices.

• There are a form with information about the presential meetings.
• The user can sign up for the meetings by giving some personal details and choosing a time.
• The form requires text input.
• The input fields are bigger with font size 18px to make it acessible and avoid auto zooming.

• The footer has 4 icons with directions for the social medias, where the user could contact and also interact.
• The icons have scale/rotate transformation on hoover for desktop user.

• The page has a text to explain that it was not possible to find the specific destinatio.
• The page has a link to go back to the index page.

• The page has a text to thanks the users for subscribing for the presencial meetings.
• The Thank you page has a link to go back to the index page.

• The icon in the browers page is the logo of the page.

-HTML and CSS were used to creat this website.

• Balsamiq - for wireframes
• Adobe Photoshop - for manipulating images
• coolors.co - the colour scheme was inspired by colours generated here
• Font Awesome - multiple icons implemented throughout the site from font awesome version 5
• Google Fonts - Both fonts used in the website imported from here
• Chrome Dev Tools - used extensively to experiment with grid, flexbox and general responsiveness.
• Gitpod - used to used to create and host the website
• Github - used to deploy the website
• Am I responsive - to create an image displaying the home page on various devices

The site was deployed to GitHub pages.

1. Navigate to the settings tab in the GitHub repository
2. Once in settings, navigate to the pages tab on the left of the page
3. Under source, select branch ‘main’ and then click ‘save’
4. page will no automatically refresh and show a detailed ribbon display to indicate deployment

To make a copy or ‘fork’ the repository -

1. Log into GitHub and locate repository
2. On the right hand side of the page select the ‘fork’ option to create and copy of the original

1. Under the repository name, click on the ‘code’ tab
2. In the clone box, HTTPS tab, click on the clipboard icon
3. In your IED open GitBash
4. Changed the current working directory to the location you want the cloned directory to be made
5. Type ‘git clone’ and then paste the URL copied from GitHub
6. Press enter and the local clone will be created

Testing.md

I would like to thank my mentor Malia for her help, patience and advice.

• Relax image is from Pexels website, free images.
• Guided meditations videos are from Youtube.