~The Code for Project Page~
9/16/2024
Go Here to return to the main tutorial
The Project Page Code
*Watch it, the code for the font awesome, at the bottom of this code for html, for the icons must be your own code gotten from signing up with the font awesome website.
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>MyProjects</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">
<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 active">
<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="projects">
<div class="projects__bio-image">
<h1 class="text-secondary">My Projects</h1>
</div>
<div class="projects__items">
<div class="projects__item">
<img src="img/project-1.jpg" alt="My Project">
<div class="projects__btns">
<a href="#!" class="projects__btn">
<i class="fas fa-eye"></i> Preview
</a>
<a href="#!" class="projects__btn">
<i class="fab fa-github"></i> Github
</a>
</div>
</div>
<div class="projects__item">
<img src="img/project-2.jpg" alt="My Project">
<div class="projects__btns">
<a href="#!" class="projects__btn">
<i class="fas fa-eye"></i> Preview
</a>
<a href="#!" class="projects__btn">
<i class="fab fa-github"></i> Github
</a>
</div>
</div>
<div class="projects__item">
<img src="img/project-3.jpg" alt="My Project">
<div class="projects__btns">
<a href="#!" class="projects__btn">
<i class="fas fa-eye"></i> Preview
</a>
<a href="#!" class="projects__btn">
<i class="fab fa-github"></i> Github
</a>
</div>
</div>
<div class="projects__item">
<img src="img/project-4.jpg" alt="My Project">
<div class="projects__btns">
<a href="#!" class="projects__btn">
<i class="fas fa-eye"></i> Preview
</a>
<a href="#!" class="projects__btn">
<i class="fab fa-github"></i> Github
</a>
</div>
</div>
<div class="projects__item">
<img src="img/project-5.jpg" alt="My Project">
<div class="projects__btns">
<a href="#!" class="projects__btn">
<i class="fas fa-eye"></i> Preview
</a>
<a href="#!" class="projects__btn">
<i class="fab fa-github"></i> Github
</a>
</div>
</div>
<div class="projects__item">
<img src="img/project-6.jpg" alt="My Project">
<div class="projects__btns">
<a href="#!" class="projects__btn">
<i class="fas fa-eye"></i> Preview
</a>
<a href="#!" class="projects__btn">
<i class="fab fa-github"></i> Github
</a>
</div>
</div>
</div>
<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 SCSS Code
.projects {
padding-bottom: 2rem;
&__bio-image {
height: 60vh;
width: 100%;
background:
url('../img/home-image.jpg ') center top;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
.text-secondary {
font-size: 2rem;
margin-bottom: 2rem;
}
}
&__items {
width: 60vw;
margin: 2rem auto 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-gap: 2rem;
}
&__item {
position: relative;
border-bottom: 5px solid $secondary-color;
overflow: hidden;
cursor: pointer;
img {
width: 100%;
}
&::after {
content: '';
position: absolute;
top: 100%;
left: 0;
height: 100%;
width: 100%;
background: $secondary-color;
opacity: 0;
@include transition-ease;
}
&:hover {
&::after {
top: 0;
opacity: 0.9;
}
}
}
&__btns {
position: absolute;
top:0;
height: 100%;
width:100%;
z-index: 1;
display: grid;
grid-template-columns: repeat(2,1fr);
align-items: center;
text-align: center;
}
&__btn {
color: #fff;
@include transition-ease;
&:hover {
color:#000;
}
}
.social-icons {
display: flex;
flex-direction: column;
}
footer {
transform:
rotate(90deg)
translate(-7rem, 1rem);
}
}
Go Here to return to the main tutorial