One page Portfolio template with sliding sections

Create a dynamic portfolio with a slideshow using Html, Css, Javascript and Keyframes

Hi Guys,

What you’ll learn

  • Add animation to the sections with Keyframes.
  • Create a Slideshow.
  • Add social media Icons.
  • Add animation when hover a container.

Course Content

  • Introduction –> 1 lecture • 2min.
  • Create the first Containers –> 1 lecture • 14min.
  • Use keyframes to add sliding animation –> 1 lecture • 13min.
  • Add the content to the containers –> 1 lecture • 15min.
  • Create a Slideshow –> 1 lecture • 16min.

One page Portfolio template with sliding sections

Requirements

  • Basics of Css and Html.

Hi Guys,

 

Welcome to the Course!

Please check out bellow the description of what you will be learning on each section:

 

– First Section:

Introduction

On this video you can see the final result of the course.

 

All the containers and each part of the Porftolio template that you gonna create.

Including the keyframes animation, the gallery with a Slideshow, and the About, Features, and Contact Section.

 

– Second Section

Create the first Containers

On this video you will learn how to make the first containers that will be place behind the main Picture with vertical titles that will be the only part showing of the containers.

 

– Third Section

Use keyframes to add sliding animation

On this video you will learn how to use Keyframes to add a sliding animation to an element. All containers will be animated by the end of the video.

 

– Fourth Section

Add the content to the containers

On this video you will learn how to add the Social media Icons for the contact container. Also the text for the about Section and the Features section, you will code only html and Css.

 

– Fourth and last Section

Create a Slideshow

On this video you will learn how to make an slideshow for the gallery section using a function with JavaScript to change the images when you click on the arrows preview and next. Also, you will be adding a fade efect when you change the images with the Keyframes animation.

 

 

Get Tutorial