marshadkhn / tindog Goto Github PK

I noticed an error in the sentence in the pricing section of index.html.
I believe it should :
"Simple and affordable price plans for your dog."
I've attached a screenshot for your reference.

Problem:
The current footer design of the project could benefit from enhancements to make it more visually appealing and user-friendly. Specifically, I suggest improving the design of the footer to make it more vibrant, and responsive, and feature eye-catching social media icons, as well as enhancing the contrast for better readability.

Suggested Enhancements:

Vibrant Design:
Consider incorporating a more vibrant color scheme that aligns with the project's branding and adds visual appeal to the footer.

Responsive Design:
Implement responsive design techniques to ensure that the footer adapts gracefully to different screen sizes, including mobile devices.

Social Media Icons:
Add high-quality social media icons that are easily recognizable and link to the project's official social media profiles.

Contrast Enhancement:
Review and adjust the color choices and text formatting in the footer to ensure sufficient contrast for readability.

Screenshot:

I'm looking forward to collaborating on this improvement.

Is your feature request related to a problem? Please describe.
My feature request is related to enhancing the user experience. Specifically, I propose implementing a user registration system on TinDog to allow new users to sign up. It would be beneficial to have a dedicated login page for older users to access their accounts efficiently.

Describe the solution you'd like
I plan to create the necessary pages using HTML and CSS to implement the requested features. These pages will include user registration forms for new users, a dedicated login page for existing users.
The login page will include fields for basic user details, such as username and password. The user registration page will collect necessary information from new users to create their accounts.

I noticed that the UI of Adoption section is not very user-attracting. I would like to update it's CSS to make it look a little good looking.

Before -

After -

If you like this change kindly assign me this issue.
Thankyou @kubical12

There is no Navbar in login page, I would like to make a navbar in that page for navigation.

can you please assign me ??

Issue Description:
Problem:
The testimonial section of the website currently has issues with responsiveness, and the color scheme used across the site feels incongruous and could use improvement.

Description:
Testimonial Section Responsiveness:
The testimonial section on the website does not adapt well to different screen sizes, making it challenging to read and navigate on mobile devices or smaller screens. It would be great to see improvements in responsiveness to ensure a consistent and user-friendly experience across various devices.

Color Scheme:
The choice of colors used on the website, particularly in terms of contrast and readability, feels unpleasant. Some text might be difficult to read against the background, and the color palette might not convey the desired aesthetic or branding effectively. A more harmonious and visually appealing color scheme would greatly enhance the overall user experience.

screenshot:

Describe the bug
Display property of submit button should be changed because display:inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'

To Reproduce
Steps to reproduce the behavior:

1. Go to 'css/styles.css'
2. Scroll down to 'line no - 311'
3. See error : screenshot of the error

Expected behavior
the display property should be changed into display:block

Screenshots
screenshot after changing the property value ::

Desktop (please complete the following information):

• OS: Ubuntu 22.04.3 LTS
• Browser - chrome
• Version - 117.0.5938.132

Describe the bug
Color of the footer should match with that of the navbar

Description:
I have noticed that when clicking on the hamburger menu icon on mobile devices, it opens the navigation menu. However, there is an issue where the hamburger icon does not transform into a close icon to indicate that users can click it again to close the menu. Though it seems obvious to click on the hamburger icon again to close, it would significantly enhance the mobile user experience if the icon transformed into a close icon when the menu is open, providing clear visual feedback.

To Reproduce:
Steps to reproduce the behavior:

1. Access the website on a mobile device.
2. Click on the hamburger menu icon.
3. Observe that the menu opens, but the hamburger icon remains unchanged.

Expected Behavior:
I expected that when the mobile menu is opened, the hamburger icon would transform into a close icon, making it evident that clicking it again would close the menu.

Screenshots:

Additional Context:
This enhancement would significantly improve the mobile user experience by providing clear visual feedback when interacting with the navigation menu on small screens. If the issue seems relevant, I would like to work on it myself.

Is your feature request related to a problem? Please describe.
Yes, In the homepage the navbar looks a bit dull and can be made more beautiful.

Describe the solution you'd like
I would first love to change its increase its font size and the add change the color of the font to make it more beautiful

Screenshot

Is your feature request related to a problem? Please describe.
My feature request is related to enhancing the user experience. Specifically, I propose rather than a separate login and signup page, I propose a single page for both rather than expanding the code to more complexity. Also, a Contact us Form for better reach and feedback section.

Describe the solution you'd like.
I plan to create a single page using HTML and CSS to implement the requested features. This page will include user registration form for new users with a dedicated login page for existing users and also a Forgot Password section Which will lead to another page.
The login page will include fields for basic user details, such as username and password. The user registration page will collect necessary information from new users to create their accounts. The page will have a sliding animation for which user can easily jump through login and signup in a matter of seconds. The feedback and contact us section willl expand for better view.

Additional context
I would also like to look upon dark mode and shifting toggle for it but will need further permissions from the author(s). @marshadkhn

Hey @marshadkhn
I went through the repository and found that the download buttons in intro section do not have a proper hover effect making it look very simple. I would like to add hover effect to these buttons. The hover effect will make the text bolder.

BEFORE -

AFTER -

Please assign me this issue under hacktoberfest.
Thankyou.

I can add hover effect like box shadow, or something else on the 3 cards

Describe the bug
an image consistently rotates in all screen sizes, including mobile, it might be considered a "persistent image rotation bug." This implies that the image does not respond appropriately to different screen sizes, and its rotation behavior is consistent across all devices, which is likely unintended. Addressing this bug would involve ensuring that the image orientation adjusts correctly based on the screen size, especially for mobile devices.

To Reproduce

It should be like this

that's the bug

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Fork this repository.
Clone the forked repository.
git clone https://github.com//TinDog.git
Navigate to the project directory.
cd TinDog
Create a new branch.
git checkout -b <your_branch_name>
Make changes.
Stage your changes and commit
git add .
git commit -m "<your_commit_message>"
Push your local commits to the remote repo.
git push -u origin <your_branch_name>
Create a Pull Request.
Congratulations! 🎉 you've made your contribution..

Describe the bug
On the home page the cards of dogs you have put are not responsive

To Reproduce
Steps to reproduce the behavior:

1. Go to home page
2. Scroll down to "A Plan for Every Dog's Needs"
3. Now check it's responsiveness
4. See error

Expected behavior
As the screen width reduces the cards should be in vertical order.

bug Something isn't working
https://github.com/marshadkhn/TinDog/labels/hacktoberfest
https://github.com/marshadkhn/TinDog/labels/hacktoberfest-accepted-2023

Issue Description:
The Card component in the mobile version of the project is not displaying properly. It is expected to be responsive and adapt to variable screen sizes. However, this is not currently the case.

Expected Behavior:
The Card should resize and reformat itself to fit the screen properly, maintaining a visually appealing and functional display on all devices and screen sizes.

Steps to Reproduce:

Open the project on a mobile device or emulator.
Navigate to the section where the Card component is used.
Observe the issue where the Card does not display correctly.

Screenshots:

I would like to take on this issue and work on fixing it.

I would like to request the addition of a customizable heart color in the project .Currently, the heart icon is displayed in its default color , white, and i believe to make it red ,would be a wonderful addition.
Heart color would not only add a visually appealing aspect to the project but also provide users with better user experience. Red hearts, for example, are often associated with love and positive emotions.

My Feature request is to add some new animation when the user scrolls down the webpage. The animation is like fade-in fade-out.
I think this animation will make the website even more good.

Is your feature request related to a problem? Please describe.
I want to convert the login link into a button style

It appears to me that the main color for your website is "#ff4c68" but the default scroll bar which is provided by the browser doesn't matches well with the website.
Generally developers for popular websites modify this default scroll bar which matches with their website's main color, since this is missing in the website so I am suggesting this modification.

I would really like to work on this as I have good idea of doing this in a easy and a faster way. If assigned with this task then I will definitely give you the updated version within tomorrow.

Description
I have encountered that clicking on the navbar items does not navigate to the corresponding sections of the page as it should.

To Reproduce
Steps to reproduce the behavior:

1. Go to the website.
2. Click on any of the navbar items.
3. Observe that the page does not scroll down to the intended content.

Expected Behavior
I expected that clicking on a navbar item would smoothly scroll the page to the relevant content.

From what I understand, on clicking on 'Price', the page should scroll down smoothly to this section:

Similarly for 'download' and 'contact' it should scroll down to:

If the issue seems relevant and aligns with the goals and objectives of the project, I would like to work on it myself to enhance the website's usability.

Describe the bug
When clicking on a icon, it fails to redirect to the intended page as expected.

To Reproduce
Steps to reproduce the behavior:

1. Go on 'TinDog'
2. Click on 'Contact Us'
3. Scroll down to the bottom
4. click on any icon
5. see error

Expected behavior
It should redirect to the respective page.

Solution :- I will add your official mail and twitter handle.

Additional context
Add any other context about the problem here.

Describe the solution you'd like
I would like to propose a feature request that I believe would enhance the user experience and make TinDog even more user-friendly. I suggest adding an "Our Dogs " menu option to the menu navbar.

Describe alternatives you've considered
1)when a user logs into their tindog account, they can navigate to the "Our Dogs" section from the navbar .
2) Users can browse through others users dog profiles.
3)With this feature users can also propose playdates or doggy meetups with other users dogs.

Additional context

.

Describe the bug
When navigating to the social logos on the site, users expect to be redirected to the respective social media platforms. However, currently, clicking on these logos does not redirect users to the correct social sites. This creates a confusing and frustrating user experience, as users may expect to be taken to the official social media pages associated with the website.

To Reproduce
Steps to reproduce the behavior:

1. Go to the homepage of the website.
2. Look for the social media logos/icons (e.g., Facebook, Twitter, Instagram) displayed on the site.
3. Click on any of the social logos/icons.

Expected behavior
Clicking on a social logo/icon should redirect the user to the official social media page associated with the website, providing users with an easy way to connect with the site's social media presence.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

I think nowadays it is extremely important to have a dark mode on any website. I want to create the dark-theme of the website with a toggle button in the navbar.

Is your feature request related to a problem? Please describe.
Yes, To provide information to the user about the dogs and their nature.
Describe the solution you'd like
I added three new pages to respective dog images that take them to their respective information page.

Additional context

It will give the user a unique experience if they get their doubts solved by just clicking on faq site.

Is your feature request related to a problem? Please describe.
I want to make a feedback section so that we can know actual view of user. After this We can improve our service accordingly.

Describe the solution you'd like
I will make a separate feedback page for TinDog. And add the feedback form button in footer.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
A clear and concise description of what the bug is.
Download and Iphone Image is overlapping below navbar.

To Reproduce
Steps to reproduce the behavior:

1. Go to the website
2. Right Click and press inspect
3. Decrease the size to see the ovelapping
4. See error

Expected behavior
Overlapping shouldn't happen.

Screenshots

I want to create a forgot password page for your website as it was not there.

Description
I noticed that the login button in the navbar is not aligned properly. It appears to be misaligned to the left, causing a visual inconsistency. This issue can be observed on both desktop and mobile devices.

Steps To Reproduce
Steps to reproduce the behavior:

1. Go to TinDog website
2. Click on Hamburger icon which is on the top of the website
3. See error

Screenshots

Feature request

I would like to request an update to the Twitter icon on the website https://tindog.co/. The current Twitter icon needs to be changed to 'X'. This update is necessary to align the website's content with the desired branding or design changes.

Issue

• could you please assign me i can resolve it myself

The login and signup are integrated together. Now there is no need of single login and signup. I should be removed. I can do this you can assign it to me

Is your feature request related to a problem? Please describe.
In this web application, i faced an issue where logos were displaced slightly when users interacted with them.

Describe the solution you'd like
Logos should be optimized to prevent any displacement or movement when users interact with them. Whether users hover over the logos or click on them, there should be no visible shift in the logo positions. The logos should remain stable and maintain their layout integrity.

Actual Behavior

Expected Behavior

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

The mouse pointer does not change to pointer style when we hover to sign in btn or sign up btn

The feature is related to the problem that the testimonial section is not user friendly when it comes to buttons and color scheme
modifying it a little bit can make some good changes

current behaviorr :

expected behavior:

After modification the ui will look something like this which is more user friendly and has eye-catching effects

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Describe the bug
At max-width of 991px the title-image is almost touching the next section which is not looking good so we have to make fix the position .

To Reproduce
Steps to reproduce the behavior:

1. Go to the website page
2. Minimize the page to max-width of less than 991px
3. See error
4. screenshot :: before

5.

Expected behavior
There should be a sufficient gap between upper and lower section .

Screenshots :: after

Desktop (please complete the following information):

• OS: Ubuntu 22.04.3 LTS
• Browser : chrome
• Version : 117.0.5938.132

• I want to design a logo for tindog project which is based on the concept of " Tinder for dogs" i believe that compelling logo is crucial to establishing our brand identity and communicating our mission effectively.

• I believe that a well-designed logo will be an essential part of our branding efforts and help us connect with our target audience.

• While the design of logo will be unique and subtle . This will help users recognize the familiar concept.
  
  
  

Describe the bug

The pink div leaves a space in the right side which looks ugly at size laptop- 1024px
assign this to me I'll make it look like the second screenshot

Screenshots
the hero section of TinDog is like below

I'll make it like this

Describe the bug
Navbar is a little inwards than it should be. Margin and padding can be adjusted

Describe the bug
Footer section is very messy and not structure, like not aligned properly

Is your feature request related to a problem? Please describe.
Yes, there is no facebook page of this repo so its not redirecting to facebook, that's okay but when there is a github present then it must redirect to it if we click on the github logo at the footer.

Describe the solution you'd like
I want to add github repo link
Describe alternatives you've considered

Additional context

Describe the solution you'd like
I will create a basic responsive Contact us page for the website

Is your feature request related to a problem? Please describe.
The font size of the testimonials are not looking that good and it somehow looks very big if we reduce the screen size.

Describe the solution you'd like
It will be good if we can reduce the font size and decrease the padding-bottom.

Describe alternatives you've considered
I am thinking about doing some work for the fonts and padding.

Screenshot of before and after changing

I have a feature request that i believe could enhance the user interface and overall user experience on tindog . I'd like to suggest the implementation of a hover effect on the send button within the messaging feature .currently the button appears static and adding a hover effect would not only make the UI more interactive but also provide visual feedback to users when they hover their mouse pointer over it.

1. Feature Request:

I encounter frustration when the image orientation doesn't respond appropriately to different screen sizes

2. A solution proposal:

I would like the image orientation to remain fixed when the webpage shrinks and rotate smoothly when flexing the image, providing a visually appealing and responsive experience

3. Exploring alternatives, I've considered using CSS media queries to handle image orientation based on screen sizes.

4. Before the feature:

5. After the feature Added:

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
There needs to be a way to invite contributors to this project.
Describe the solution you'd like
A clear and concise description of what you want to happen.
Add a greeting.yml file
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

test

Feature Request

I would like to add a feature that smoothens the effect when hovering over the buttons on the website.

Current Issue

Right now when I hover there is a sudden jitter that doesn't look good to the eye.