~The Code for The Contact Page~
9/30/2024
The Contact Page
*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.
To get back to the Main Page of tutorial
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>Contact Me</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 class="menu-nav__item">
<a href="about.html" class="menu-nav__link">About Me</a>
<li class="menu-nav__item">
<a href="projects.html" class="menu-nav__link">My Projects</a>
<li class="menu-nav__item active">
<a href="contact.html" class="menu-nav__link">Contact Me</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="contact">
<h2>Contact Me..</h2>
<div class="contact__list">
<div class="contact__email">
<i class="fas fa-envelope"></i> Email
<div class="text-secondary">email@email.com</div>
</div>
<div class="contact__phone">
<i class="fas fa-mobile-alt"></i> Phone
<div class="text-secondary">+1 (234) 567-8910</div>
</div>
<div class="contact__address">
<i class="fas fa-marker-alt"></i> Address
<div class="text-secondary">1234 SomeWhere St. Buffalo, NY</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
.contact {
height: 100vh;
padding-top: 40vh;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
background:
url('../img/contact-image.jpg') center top;
background-size: cover;
h2 {
font-size: 3rem;
margin-bottom: 2rem;
}
&__list {
display: grid;
grid-template-columns: 1fr;
grid-gap: 2rem;
font-size: 1.5rem;
}
.social-icons {
position: initial;
margin-top: 2rem;
}
}
To get back to the Main Page of tutorial