~The Code for the About Page~
9/9/2024
You will have instructions for the main.scss file too, but I did not put that information in here, it is probably better to understand that by reading the tutorial for the About code by going here”
*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.
Go here to return to the main About page tutorial
The About Page 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>About 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>
<li class="menu-nav__item active">
<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="about">
<div class="about__bio-image">
<div class="about__bio">
<h2 class="text-secondary">BIO</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae culpa sapiente rerum dolores aliquam, fugiat eveniet commodi. Vel, nihil, numquam possimus deserunt officiis rerum in omnis error esse iusto quas.</p>
</div>
</div>
<div class="jobs">
<div class="jobs__job">
<h2 class="text-secondary">2008-2012</h2>
<h3>Bachelor Degree from International School of Technology & Design</h3>
<h6>Web Designer/Developer</h6>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat vero dolores eum ut, culpa ullam quis quasi exercitationem in adipisci.</p>
</div>
<div class="jobs__job">
<h2 class="text-secondary">2012 - 2017</h2>
<h3>Company</h3>
<h6>Role</h6>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat vero dolores eum ut, culpa ullam quis quasi exercitationem in adipisci.</p>
</div>
<div class="jobs__job">
<h2 class="text-secondary">2017 - Current</h2>
<h3>Company</h3>
<h6>Role</h6>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat vero dolores eum ut, culpa ullam quis quasi exercitationem in adipisci.</p>
</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 about.scss file
.about {
padding-bottom: 2rem;
&__bio-image {
height: 60vh;
width: 100%;
background:
url('../img/home-image.jpg ') ;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
p {
margin-bottom: 2rem;
}
}
&__bio {
width: 80%;
text-align: center;
.text-secondary {
padding-bottom: 1rem;
}
}
.jobs {
width: 60vw;
margin: 2rem auto 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-gap: 2rem;
&__job {
background: lighten($primary-color, 10%);
padding: 0.5rem;
border-bottom: 5px solid $secondary-color;
h2, h3 {
margin: 0.5rem 0;
}
h6 {
margin: 0.3rem 0;
}
}
}
.social-icons {
display: flex;
flex-direction: column;
}
footer {
transform:
rotate(90deg)
translate(-7rem, 1rem);
}
}
Go here to return to the main About page tutorial