~3 The Home Page SASS~

By StarsInDust

7/22/2024

Code for this Tutorial

Table of Contents

Create Home partial SCSS

Go to main.scss to import Home

Turn on SASS

Go to index.html to test the page

Styling the Home Text

Testing the Text on the home page

Turn on SASS

Go to index.html to test the page

Warning, in order for this code to work you must have your images to your website, in the image file, and with the same name as I am using. You can create your own images if you want.

Your image folder is inside your dist folder

Create Home partial SCSS

~back to top~

Create a new partial and name it _home.scss

.home{

height:100%;

padding-top: 40vh;

overflow: hidden;

align-items: center;

text-align: center;

background: url('../img/home-image.jpg');

background-size:cover;

}

Go to main.scss to import Home

~back to top~

@import"home";

Turn on SASS

~back to top~

At the bottom of the app

Go to index.html to test the page

~back to top~

Styling the Home Text

~back to top~

We are just going to be targeting the fonts inside of the .home rule. We will be using the &. The & sign is used in SCSS when we want to nest something, which is exactly what we are going to do.

.home{

height:100%;

padding-top: 40vh;

overflow: hidden;

align-items: center;

text-align: center;

background: url('../img/home-image.jpg');

background-size:cover;

&__name{

font-size: 3.5rem;

padding-bottom: 1rem;

border-bottom: 2px solid #fff;