-
November 2nd:
- Created "Our Team" section based on Ruth's page designs.
- Used semantic HTML for element creation, minimizing generic custom divs.
- Implemented Flex display for element placement: profile images on one side, and name, info, and button on the opposite side.
- Increased "Our Team" margin-top to 30rem to fix top section overlap.
- Added Ruth's and my pictures in image tags for aesthetics.
-
November 3rd:
- Enhanced styling for "Our Team".
- Created and styled "Portfolio" Section.
-
November 4th:
- Added "Portfolio" section using HTML and CSS.
- Included project pictures.
- Created column structure using flex-box.
- Improved "Our Team" Section.
- Applied Ruth's button styling to "Portfolio" Section.
-
November 5th:
- Added additional images for projects and background.
- Included project titles.
- Created CSS styling for buttons in "Our Team" section.
- Adjusted margins of various elements.
-
November 7th:
- Integrated HTML from Ruth into my version.
- Attempted to create Javascript functionality for the burger menu.
- Added styling for burger menu.
-
November 8th:
- Noted Ruth's addition of responsive design and hamburger menu with JS functionality.
- Fixed an issue where the hamburger menu would disappear after clicking a link; implemented ClassList in JS.
- Added responsive design to "Our Team" section using media queries, flex-direction: column, and align-items: center.
-
General Changes:
- Experimented with a background animation in Javascript for aesthetic enhancement.
- Attempted to add Javascript functionality for form submission to our business Gmail, with limited success due to Google restrictions.
- Resolved responsive design issues, particularly at widths below 480px.
- Fixed zoom-in issue at page start by adjusting the top HTML code in the head from initial-1.
- Corrected the 'Hire Me' button overlap on the top navbar, based on Emily's advice using z-index.
- Improved the function for displaying a green message box after form submission, adding a 3-second timeout for the message to disappear and the form to reappear.
- Modified color schemes, like the nav bar, from white to grey for better accessibility.
Ruth’s Note
• The website wireframe was created by using convo.com. Having a blueprint helps us to visualize the overall structure, content placement, and user interface elements of the website.
• Sam suggested using semantic HTML such us nav, main, section, and footer instead of div for accessibility and readability purposes.
• In the header section, the navigation was implemented using the display: flex property. This allowed us to effectively divide it into two distinct sections: the logo and the navbar.
• The main page features a title, social media icons, a button that leads to the contact page, and a description of our agency.
• The description text and the social media icons are placed within a flexbox and aligned using the justify-content: space-around property.