css, jquery, bootstrap and html5 work

the attach [login to view URL] file contain html files and [login to view URL] contain screenshots and some images. refer to drawing [login to view URL] (inside [login to view URL]) for the page [login to view URL] from the top nav bar until i'm a trail runner, this is one screen. screen 2 is trial running products until trial running corner. make use of this script [login to view URL] to make full page screen. u ensure responsive design. the effect for screen one. refer to [login to view URL] (inside [login to view URL]). after the page load, the background will become blur and you will see 3 tooltip header. 1 for shirt , 1 for short, 1 for calf. click on the tooltip header will toggle its description appearance. for example, when u click forquad, its description will appear. click on R2, forquad description will disappear and r2 description will appear. u ensure responsive design. u can use [login to view URL], [login to view URL], or [login to view URL] (inside [login to view URL]). you see the top nav bar. normally a responsive bootstrap nav bar collapse at width less 768px. i want this to collapse at a width of below 1100px. refer to [login to view URL] (inside [login to view URL]) for the page trail-running-shirt.html. i need to ensure that in every mode sm, md, lg and xs, the 4 thumbnails are properly aligned with the main picture. open [login to view URL] and you will see misalignment. see attach screenshot 4, [login to view URL] (inside [login to view URL]). you can rectify this problem either modify the images in photoshop or using css.