For the exercise from lecture #5, I chose to provide a link to a early peek to the HTML template for the portfolio. I chose to not provide a screenshot, because my code contains a video, so it’s a bit hard to take a screenshot for that. The reason for using a video is written in the design page.

In the link, I am working on the video part. It must have a full width and height in the front page. I want to visitors could ‘only’ see the video when they come to my page, and scroll further down to the content of my portfolio. I want to have the video as a welcome-message to the visitors.

The video part contains of a HTML5 <video> tag with video files, <header> tag with the page title and subtitle and <nav> tag with navigator menu.

It show the video in full screen and the other sections below will be hidden from the start and shows when the visitor scrolls down.

By make the video full-screen I wrote the following CSS codes to tell the Browser to understand the <video> tag as a block and it must be positioned absolute and have a width and height of 100%.

Also I need to tell it that the <header> tag must be positioned atop the video to show the title and navigator. I did it by using the “z-index” CSS-property. Video have the index of -1000 and header have the index of 10. It stacks the indexs, and thus higher the z-index is, thus further the atop it lies on the page.

It’s the little HTML and CSS part I wanted to show you by my work.