link: http//imanas.shanghai.nyu.edu/~ds5665/week3/selfintro.html
This time I started with two individual websites that I made. One was all the contents of my self intro and another was the optimized (lol) css exercise. The goal was to combine these two websites together.
But I soon realized that the major problem was that the original design of the content website which was each page has a link towards the next, which was rather like a slide rather than a website. This design cannot fit into the design of the css exercise which was one home page and several branches.so I decided to alter my organization of the contents while adding more information about me (i.e. more pictures and descriptions) as it contained little of them.
For the bar on the left, I made it as a out side link bar. So I abandoned the “position: sticky” of it in css. But one thing that needed to be found out is that why the navi-box end up in the middle of the page rather than being at the near top after I put the pictures in the content boxes. I tried “position: absolute; top: 80px;right: 0;” but the box ended up overlapping with the pictures.
And for the content box, I tried to add some hover overlays on it but my trails were all unsuccessful. I tried “hover: size: 200%” but the picture remained unchanged, maybe there wasn’t such code. So I ended up just putting the pictures in the boxes.
Also, there was problems in my branch pages. I added a background color of the photo description, but it was too wide. I tried to add “width=…” but when I did the background color disappeared for some reason. So I have to leave it there.
at last, rather than having a css file for every branch pages i simply did the css
in the html using <style>.