I need a HTML/CSS/JS ninja to upgrade an existing website template

I need a HTML/CSS/JS ninja to upgrade an existing website template as described below Find attached to this project a scan i have draw. On the template page you can see the header menu on top, and then a headband with a background and written on it in the middle "Property Catalog", then there is a "property filter" area, so far you do not have to change ANYTHING, the job is located right below the property filter. As you can see on my drawing, i want properties to show up as rows, one below the other, with a little margin between each of them, just as described on my drawing page 1 I want those rows showing up animated smoothly from the bottom to the top when the page loaded, like they just arrived, the animation is about 1 second no more, just to make it look awesome. Every row contains a picture on the left, along with a postal address, then there is a vertical separator bar with additional informations such as: number of rooms, floor number, and meter square. Then an other vertical separator bar and the price. The separators of every rows are all aligned together, just as described on my drawing. When the cursor fly over a row, that row get a little shadow around it. All the text must be correctly aligned and looking professional grade good ! When the user click on a row, that row gets expanded vertically as shown on the drawing page 2. This expension must be animated smoothly and starting from the top: only the bottom is moving down to make room to the new area that just got opened. This whole new area (including the initial row that is part of it) has a light background color (yellow/orange) so the user knows that the whole area is about the property he has clicked on just right now. The picture of the row gets updated with a little oval area showing "+4" : this is the number of pictures available, so if the user click on the picture, a full screen gallery shows up making available to see the 4 pictures. A "Show map" text appears below the address on the row, if the user click on it, a google map located on the adress get loaded full screen In the new area that showed up, there are 3 sections: 1) this section include 3 parts: 1. Property description 2. Property options this part includes icons, i know a website with those exact icons if you need, if you don't, alright 3. few more informations 2 on each sides with a little separator bar 2) Contact owner If the user clicks on this button, it opens a popup smoothly on top of the button with a google captcha in it. to close the popup the user MUST click again on that exact same button, and then the popup just melt down back where it came from. 3) A simple bar with an ID number a clickable text "Report" and aligned on the right: few icons, like whatsapp, facebook, email, link, print, open just as you can see on my drawing I need this coded with HTML/CSS/Javascript, and i need the whole document XHTML valide The design must be 100% responsive and it is forbidden to make blocks hidden/showing according to screen size. Just make CSS magic so everything finds his location when the screen changes size and still look awesome You will have to make use of the pre-existing bootstrap included in that template, and includes libraries for galeries If you have ANY question on a point that hasnt been described well enough, ask me before. If you have hard time creating this UI, just give up before you'll waste both of our time 100 USD budget if you are hell of a ninja and 2 more jobs after that one.