In jumbotron page, need to use Toggle switch to behave like it’s comparing two sides. In this case, there’s a photo in the left for cats and on the half, dogs. They are separated by a toggle switch. When toggle (called Cats) is slid, the page shows an entire page of cats. When toggle is slid again, this time on right, Dogs page appears. The image of a dog then appears in banner/jumbotron page.
Would also need link so people can go to either a cats page or dog page.
Thought of using toggle and overlay and hover image effects but could not connect them all.
Just get the major gist of your program up and running. Then worry about animation and effects later. Break down the problem into it’s major steps and post your code.
Noyb, yes, exactly like that. Did the same thing. Just wondering how I could add text and images inside of it-- or if I could put it inside jumbotron. Especially important is how to put a link button there, so it goes to the content of cats and dogs content. Just thinking of creative options for it.
Initially thought of using flexbox for the entire site when I go into details/content of the cats and dogs content, but I now think that it would be too much. After this banner page, I would be ok just using a toggle to switch between cats and dogs content. Still not sure how to attack it. Would you also use flexbox for it?
Don’t attack anyone, please. Jokes aside, I still don’t quite get what you are after to be honest, I’m sorry. I would suggest following @owel advice and focusing on getting the big part of your project running, first; then, if you still have issues, I (or plenty of other people) will probably be able to help you further.
LOL. I think you got it. I see what you did–putting text inside. That’s what I was looking to do as a next step. But just wondering why no one uses it as banner/splash page and only this use for other parts of a site. Thinking if it has to do with user experience. Why people don’t use it. Thanks so much.
I actually used this method for the wikipedia viewer project (if you click on my avatar you’ll see my Codepen link). You can go check it, maybe it’ll help you to better visualize what you are trying to do.
Also, @rmdawson71 suggestion seems like a good approach. You basically just need to lay down something (be it code, a drawing, a list of what you are trying to accomplish), then you can go from there.
Saw your codepen. You did use flexbox for banner and it works by just clicking on the other side. Mine takes an extra step with the toggle, though. Do you know if I can do this (with the toggle and your code) with just CSS.
If you need to “switch” something, you’ll probably have to use at least a little javascript. CSS doesn’t provide “click listeners” (aside from the :active pseudo-class but that works only if the mouse button is held down). There are some hacks that could work, but you’ll end up with so much chaos in your css that it won’t probably be worth it.
