Repository
What Will I Learn?
- You will learn how to use sass to convert scss to css
- You will learn how to work with variables
- You will learn how to create boxes for your text area.
- You will learn how to re-position your text.
- You will learn how to create transition effect for images.
Requirements
- Any text editor. (Brackets, Atom, Notepad++)
- Basic HTML knowledge
- Basic SCSS code knowledge
- SASS
- Local server (Wampserver)
- Any browser
Difficulty
- Intermediate
Description
In this tutorial you will learn how to createa nice transition effect for your websites. You can use this effect when you need to give more information about images or whatever you want.With some variables we will make it easy to change it in the future. You will need sass installed on your envoriement. You need ruby instalation for it and once you installed you will be able to translate sass scss files to css. There for you need index.html file with navigaton bar codes in it. With before/after examples you will be able to see what codes are doing.
1- Before we start our page without sass
2- With the codes here below we will create 2 boxes for our text area.
3- With this code block here below we will insert our images to this boxes
4- Now we will give new position and design to our text. It's because of effect that we will give to image later.
5- With our last codes we will create a hover effect for our image and boxes.
