~The Home Page Code~
7/22/2024
The Home Page
*Watch it, the code for the font awesome, at the bottom of this index.html code, for the icons must be your own code gotten from signing up with the font awesome website. OR IT WILL NOT WORK!
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/main.css">
<title>StarsInDust Portfolio</title>
</head>
<body>
<header>
<div class="menu-btn">
<span class="menu-btn__burger"></span>
</div>
<nav class="nav">
<ul class="menu-nav">
<li class="menu-nav__item active">
<a href="index.html" class="menu-nav__link">Home</a></li>
<li class="menu-nav__item">
<a href="about.html" class="menu-nav__link">About Me</a></li>
<li class="menu-nav__item">
<a href="projects.html" class="menu-nav__link">My Projects</a></li>
<li class="menu-nav__item">
<a href="contact.html" class="menu-nav__link">Contact Me</a></li>
</ul>
</nav>
</header>
<main>
<section class="home">
<h2>Welcome to my Portfolio Site</h2>
<h1 class="home__name">My name is: <span class ="home__name--last">StarsInDust</span></h1>
<h2>
Web Developer, Designer & Programmer
</h2>
<div class="social-icons">
<a href="#!"><i class="fab fa-twitter fa-2x"></i></a>
<a href="#!"> <i class="fab fa-facebook fa-2x"></i></a>
<a href="#!"><i class="fab fa-instagram fa-2x"></i></a>
<a href="#!"><i class="fab fa-github fa-2x"></i></a>
</div>
<footer> © Copyright 2024</footer>
</section>
</main>
<script src="https://kit.fontawesome.com/d40012b1b4.js" crossorigin="anonymous"></script>
<script src="js\main.js"></script>
</body>
</html>
The _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;
&__name{
font-size: 3.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid #fff;
&--last {
color: $secondary-color;
font-weight: 300;
}
}
}
The main.scss
The only reason that I am adding this code to this code file is that the partial _home file to this code extra code document is because it needs to be imported. So, there is a very slight change to this page at the top to bring this file in.
Warning, when a partial file is imported, you do not put the underscore in front of the name.
@import"config";
@import"home";