PritamSarbajna / tourism-website

ADVENTURE - A simple website of a tourism agency for tourists.
https://simple-tourism-organization.netlify.app/
MIT License
143 stars 107 forks source link

[BUG] : "Learn More" Button Not Responsive #97

Closed amolgorithm closed 1 year ago

amolgorithm commented 1 year ago

Describe the bug Typically, the "Learn More" button is supposed to go to an info page or pop-up. However, this button does not seem to be responsive, as it does not really do anything in terms of the client-side domain. Unless this is what it is supposed to be doing, I was thinking an info page, pop-up, or even scrolling down to an info section, could be added. Maybe, a section below could be about the Learn More info, and on click of the button, the page could scroll down to that section. That may be aesthetically nice as it would follow your website's GUI and schema.

Screenshots issue

Additional context On the click of the button, some sort of form response seems to be occurring, as the link goes from to , but the button does not fulfill the purpose of a "Learn More" button. By the way, very nice GUI.

PritamSarbajna commented 1 year ago

@amolgorithm Yeah the learn more button doesn't work. I don't want the website to have a new section because you can see the navbar is already full instead we can route this to a section as you're saying. So I'm thinking we can make the about section to be more cool. Let me know is it a better idea or not. If so then how you're gonna make this section more cool.

amolgorithm commented 1 year ago

@PritamSarbajna True, I consider that to be a better idea. So, to make the about section better, we could add a mission statement or a deeper purpose initiative of the website. Then, at the end, we could add a short but catchy slogan for the website. From a perspective of GUI, I feel that it pretty much looks very good, however, one thing that seems like a good thing to add is a bigger version of the logo in the right side of the about section. I was thinking, on scroll to that section, there could be a transition put on the logo image element such that it fades in or does another type of animation. Please let me know if all the above are ok and can be implemented. Thank you.

PritamSarbajna commented 1 year ago

@amolgorithm I think your idea is good but can you show me some draft of the idea anyhow if possible ?

amolgorithm commented 1 year ago

@PritamSarbajna Sure, here is the forked repo where I added the changes: https://github.com/amolgorithm/tourism-website. The changes included all of the ideas I had proposed and successfully works. Sorry, I did not add a preview, you would need to clone it to see it.

PritamSarbajna commented 1 year ago

@amolgorithm Can you just make a test PR, so that I won't have to clone and setup locally.

amolgorithm commented 1 year ago

@PritamSarbajna Sure, that has been done.

PritamSarbajna commented 1 year ago

Hey @amolgorithm, Thanks for thinking that way but it'd be nice if you remove the paragraph and place carousel there which is interactive.

amolgorithm commented 1 year ago

Hi @PritamSarbajna, By carousel, I believe you mean like a div where you can slide through images using left and right arrows. Is that right? If it is, then should the carousel's height fill the height of the about section? Also, is it okay if I use Bootstrap? Btw, the issue says that no one is assigned, but I am assigned to this, right?

PritamSarbajna commented 1 year ago

@amolgorithm Yes that's correct but this a frontend focused website so I don't recommend you to use bootstrap but you can copy paste any html code and css classes as long as it is pure HTML and vanilla CSS.

PS: I forgot to assign you but here you go 🚀

amolgorithm commented 1 year ago

Hey @PritamSarbajna, I had finished the carousel, but I just realized a big problem that applies to your repo as well. The icon/logo for the website is from a drive local content link, which is currently down. It does not work, which is why, if you clicked on your link and went to the site, the image would be unavailable. Here is it the link to the drive photo: https://drive.google.com/uc?export=view&id=18w44M_wq9TbQlwsK126yf8IAin4VxGiK

PritamSarbajna commented 1 year ago

@amolgorithm Oh this is a big problem. Do one thing remove the occurrence of this link. Create a new logo a white mountain preferably.

amolgorithm commented 1 year ago

@PritamSarbajna Yep, that has been done. Check the same Test PR to see the new updated version. For the carousel, click on the faded image if you want to spotlight it in the center to view it.

I have add a new mountain logo as well.

PritamSarbajna commented 1 year ago

@amolgorithm Damn !! this is so nice ✨

If everything you need to do is finished I can merge it.

You need to fix the mobile responsiveness of the carousel.

amolgorithm commented 1 year ago

Hello @PritamSarbajna, I have pretty much fixed the mobile responsiveness of the carousel, so you can take a look again. For a small width screen, I remove the logo in the about page, because there occurs a flexbox issue that completely complicates the whole project. So, the carousel is mobile responsive now though. I am done with everything I need to do on my side, so if you are good with it, you can merge it and the issue could be closed.

PritamSarbajna commented 1 year ago

@amolgorithm Thank you. Merged your PR ✨