Landing page #32
Landing page #32
Conversation
…to the homepage to reflect the layout. Styling has only been started. Padding and margins need to be adjusted. The included screen shot was only a test and needs to be replaced with real screenshots and placed on the layout properly. No changes have been made to the 'header' at this point.
…tion to get the ul and img to be side by side. Adjusted syles to better fit the design. Added the 100Freelancers logo to public but it is not being used anywhere yet.
… page.jsx. Tailwind code is still divided between the global.css and page.jsx. Next steps are to continue the styling on the screenshots to match the example layout.
…nline on page.jsx. Finalized the visual adjustments to the two screenshots to have them reflex the design layout. Ahmend restyled the Sign In button as well as repositioned the logo and button within the header.
|
Someone is attempting to deploy a commit to a Personal Account owned by @devlarabar on Vercel. @devlarabar first needs to authorize it. |
There was a problem hiding this comment.
Hey Kirk and @AhmedHHamdy ! I really appreciate your hard work on this! The desktop layout looks beautiful. Very clean and crisp.
Something that stands out to me is the responsiveness. The layout doesn't adjust for mobile as in Karissa's original design referenced in the landing page issue. This is what it looks like when I resize:
It starts to look off between 860-1100px wide. I know Karissa's mobile design includes swiping between mobile screenshots, but for simplicity, it would be fine for now to just include one screenshot and we can enhance it in a future sprint.
For the "mid" sizes (smaller monitors and tablets), we can probably include the desktop and mobile screenshot images, but move them from the right side of the page to below the "View", "Add", and "Track" text. Then for super small screens like mobile, omit the desktop screenshot entirely and only show the mobile screenshot. Hope that makes sense - let me know if I should clarify!
Aside from this, I noticed some comments in globals.css that can be removed to keep the file clean and readable.
Thanks again for working so hard on this, and please feel free to ping me in Discord any time if you need help!
…k points in page.jsx to add responsiveness to the landing-page.
|
Thank you for the quick and clear feedback! I added several break points to make the page responsive to screen size. On smaller screen sizes the images are beneath the "view" "add" and "track" text. On larger screens the text and images are side by side however, the images will respond by either being stacked or overlapped depending on screen size. I made that decision to make the layout feel less cramped in the 'large' breakpoint without needing to make either image smaller. Let me know if additional changes are required. |
…e longer without causing too much overlapping. And adjustd the styling on mobile devices to be a bit more mobile appropriate.
|
With Ahmed's help we added aditional break points to keep the text and images side by side on a wider range of screens, and adjusted the styling on mobile screen sizes to be more mobile specific. |
Commit coauthored with Ahmed Hamdy
Description
Built out the landing page to resemble the design layout.
We added a ul, two imgs, as well as necessary tailwind classes to page.jsx.
Testing
We tested on different browsers and screen sizes to check responsiveness.
Did you change the schema?
Issue
Closes #20