Créer un site internet

Portfolio with bootstrap 4 (1)

In this tutorial, I ll show you the steps to create your portfolio using Bootstrap 4.

Step 1 Getting started: 

Following is the structure of the project and the template to create the portfolio: 

 

De6fe4c1 dfcf 4523 bcc7 8fd4660c1094 4 5005 c 1

Starting index.html template:

The index.html file contains the bootstrap 4 dependencies, styles.css and script.js files.  Those files are empty for now. We have added an icon too (favicon.ico). The index page shows an empty page for now.

Step 2 : Creating the banner 

Now lets start the creation of the project. We will start by adding a background image and some text in the banner.

The background image is added in the file style.css. We used css also to adjust the banner text position in the center as follow.

The output:

C0367fe9 3332 4da7 b2ba 327f3eb061da 1

 

Now let's animate the text of the banner. To do this, we use css @keyframes anim.

style.css: These are the properties to be used the file.

Now, reload the index.html file and check the animation of the banner text.

Add a comment