TROELS MADSEN

HTML & CSS

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.

Video not supported

</video>

<h1>Hello, I'm TROELS MADSEN</h1>

<p>I am studying Digital Media and Design<br>

>> Welcome to my Portfolio <<</p>

<nav>

<ul>

<li>Portfolio</li>

<li>About me</li>

<li>Contact me</li>

</ul>

</nav>

</header>

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%.

#video_background {

position: absolute;

bottom: 0px;

right: 0px;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

z-index: -1000;

overflow: hidden;

}

header.top {

position: relative;

width: 100%;

height: 100%;

z-index: 10;

font-family: 'Enigma Bold';

}

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.