Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

layout is not good and words are going out of the board #333

Open
Ritikabiswas opened this issue Oct 20, 2024 · 4 comments
Open

layout is not good and words are going out of the board #333

Ritikabiswas opened this issue Oct 20, 2024 · 4 comments

Comments

@Ritikabiswas
Copy link

Screenshot 2024-10-20 122859

@RitikaMaha
Copy link

can i work on this @iamparas0

@Ritikabiswas
Copy link
Author

@RitikaMaha I have done this and submitted the pull request once @iamparas0 gets online he will accept it

@RitikaMaha
Copy link

@RitikaMaha I have done this and submitted the pull request once @iamparas0 gets online he will accept it

Yeah ik that but I would also love to do some changes from my side.. if it is OK @iamparas0

@Ritikabiswas
Copy link
Author

@iamparas0 I have made pull request; kindly check

nihalaniharsh added a commit to nihalaniharsh/TIC-TAC-TOE that referenced this issue Nov 5, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
This file provides a comprehensive layout for a responsive footer, designed to enhance both the aesthetics and functionality of a webpage. The footer is crafted with several key features, such as social media links, quick navigation, and an additional "Back to Top" button that improves user experience, particularly on long-scroll pages. The layout is flexible and responsive, ensuring that the footer adapts seamlessly to various screen sizes, from large desktop monitors to small mobile devices.

Key Components and Features
General Footer Design:

The footer itself is positioned relative with a slight bottom offset (bottom: -320px), providing a unique placement on the page that doesn't interfere with the main content while still ensuring visibility.
It utilizes a dark background color (iamparas0#333) with white text to contrast against the rest of the webpage, providing easy readability.
The footer is enclosed in a container with a flexbox layout to organize the elements and ensure they're aligned properly within the section.
Responsive Design:

The layout of the footer adapts to different screen sizes, thanks to the use of flexbox and media queries.
On smaller screens (max-width: 768px), the footer’s content is arranged vertically instead of horizontally to accommodate narrower viewports.
Footer sections such as the "About Us", "Quick Links", and "Follow Us" columns are stacked in a columnar format, and each section adapts to the screen size, ensuring a clean and readable design across devices.
Social media links are aligned horizontally on larger screens, but will stack into a vertical list when viewed on mobile devices.
Footer Content:

The footer is divided into multiple sections (.footer-section), each containing information like About Us, Quick Links, and Social Media Links. These sections make it easy for users to navigate to key areas of the website, enhancing both usability and accessibility.
The social links section utilizes font-awesome icons, providing clickable links to various social media platforms (Facebook, Twitter, Instagram, LinkedIn) that transition smoothly to a golden color (#f39c12) when hovered over.
Each section within the footer contains heading text (e.g., “About Us”) and lists of links that serve as quick navigation options for visitors.
Back to Top Button:

A new Back to Top button has been added to improve the overall user experience. This button is fixed at the bottom-right corner of the screen and becomes visible only when the user scrolls down a certain distance (i.e., after scrolling past 200px).
The button is styled with a bright golden background (#f39c12), which stands out against the footer’s darker color scheme and provides a strong call-to-action for users to easily scroll back to the top of the page.
The button has a hover effect that slightly darkens the background color, signaling to the user that it is interactive.
Smooth scrolling is implemented via JavaScript, allowing users to return to the top of the page without any jerky jumps. The transition is smooth, contributing to a polished and seamless browsing experience.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants