I’m Irene, from Buenos Aires. I started with the course last week. I have previous experience with C/C++/Python/Java, but I’m fairly new to HTML/CSS/JQuery.
I created a Tribute page about my favorite Argentinean writer. I introduced some quotes from his books, and thought it would be cool to have them both in English and Spanish.
After a lot of googling I figured a way to flip the element so that when you hover over with the mouse you see the version in Spanish, and I’m quite happy with the results. There’s two problems though:
- Even though the whole page is wrapped in a div with the container-fluid class, I can’t make the elements that flip expand to the edges of the page. Everything else works fine, and if I comment out the div wrappers for the flipping animation, the elements expand fine. They seem to contract fine if I decrease the width of my browser. I can’t seem to be able to center them either. I figured that if they were to be smaller than the width, i could use center-block, which worked fine for the images, but not in this case.
- I used JQuery and css quite a bit to achieve the effect I wanted. This is more of a code specific question. I had to use over 10 different variables in JQuery, one for each element id, and i was wondering if there’s a more elegant way of doing it than just copying and pasting code 10 times.
Here’s my project: https://codepen.io/IreneNaya/full/ZWgYPj/
Any other comments, suggestions and critiques will be welcome.
Thank you very much!!