Need some advice for my Tribute project

1

Hello, everybody!
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:

  1. 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.
  2. 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!!

2

1)You can use negative margins
2)you should use #fronty0 to #fronty12 for id and not to let the first one without a number :slight_smile:
for(var x=0;x<13;x++){
$(’#fli’+x).css(‘height’,$(’#fronty’+x).outerHeight()+ ‘px’);
$(’#fli’+x).css(‘transform-origin’, $(’#fronty’+x).outerHeight()/2 + ‘px ’ + $(’#fronty’+x).outerHeight()/2 + ‘px’);
}

$(window).resize(function(){
for(var x=0;x<13;x++){
$(’#fli’+x).css(‘height’,$(’#fronty’+x).outerHeight()+ ‘px’);
}
})

1 Like
3

Thank you very much!
I still have a lot of trouble figuring out how to solve the margins issue. It seems to be that, depending where I put the margins class i get: 1) nothing, 2) overlapping between the text box and the flipped box or 3) a normally placed box that doesn’t flip.
I guess I’ll leave that part as is for now.
With respect to the second question, makes sense, but i think i’m going to struggle a lot with the syntax! I never would have thought doing that was possible :slight_smile:
Thanks again!