Defining a video as Background and creating a page

omersurer(65)

Published in

#utopian-io

Words

581

Reading

3 min

Listen

Play

Repository

https://github.com/sass/sass

What Will I Learn?

You will learn how to use a video file as background.
You will learn the meaning of video tag and also other functions likeloop and muted.
You will learn how to create a footer with hover effects and playing with font-size.
You will learn how to define nested codes in scss.
You will learn how to use display: flex; and justify-content: center;.

Requirements

Any text editor. (Brackets, Atom, Notepad++)
Basic HTML knowledge
Basic SCSS code knowledge
SASS installed.
Local server (Wampserver)
Any browser

Resources

Difficulty

Intermediate

Description

In this tutorial we will create a web-page with a video background an we will combine it with header and footer. This web page will be a different website in it self. We will define minimum height and width values to make our background responsive. We will also create a navigation bar. If you follow this tutorial download all files from my github page and change the values. You can use comment mark(/*between these marks*/) to deactivate codes and test it. With this way it will be more useful for you and you can test and understand the codes better.

1- Before you start be sure that you run our sass code in the directory of site files. Our command is sass --watch sass:css. It will translate all codes that you write in scss file to css file. After that, write a basic html file on root directory and into body section we define between header and footer 2 divisions. One is for our background video other one will be our content.

2- On our scss file we start with body body and after that our header. In our header class we are styling our navigation bar with some animation and a transparent background.

3- With footer we define same transparent color to the bottom of the page. It will create a nice effect fot our page. After that we style its content and with hover we are animating the content. Therefore we use font-size as 0px.

4- Our text class is the main content of our page. Here we 100% as width and define more transparent background color to it so our video has more effect as background. We use display: flex andjustify-content: center to center it on the page.

5- In this part whole codes are belongs to our video. We define its position and size for the page. With minimum height and width values We are making it responsive.