Tell us what’s happening:
Blockquote
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
:root {
--customGreen: #c6f68d;
--customGray: #121212;
--customWhite: rgb(252, 252, 252);
--customRed: rgb(27, 14, 1);
--gradientLeft: linear-gradient( to left, #121212, black, var(--customRed));
--gradientHover: linear-gradient(#a1ec44, #703b09);
--gradientActive: linear-gradient(to left, #f68da7, #6e2626);
--main-background: linear-gradient( 45deg, #121212, black, var(--customRed));
}
* {
font-family: 'Roboto', sans-serif;
color: var(--customWhite);
list-style: none;
text-decoration: none;
}
body {
margin: 0;
background: var(--main-background);
}
#navbar {
position: fixed;
display: flex;
justify-content: flex-end;
top: 0px;
margin: 0;
padding: 25px 0;
width: 100%;
z-index: 1;
background: inherit;
}
#nav-list {
display: flex;
justify-content: space-between;
}
#nav-list li {
margin: 0 2vw;
font-size: 1.3em;
}
#nav-list a:hover {
text-decoration-line: underline;
color: var(--customGreen);
}
ul {
margin: 0;
padding: 0;
}
main {
position: relative;
bottom: 40px;
margin: 0 5%;
text-align: center;
}
#welcome-section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#welcome-section>h1 {
font-size: 2em;
text-transform: uppercase;
color: var(--customGreen);
}
section {
margin: 30px 0;
}
.headers {
color: var(--customGreen);
font-size: 1.4em;
border-bottom: 0.1em solid;
margin: 30px 0 20px 0;
text-align: left;
}
p {
font-size: 1em;
line-height: 1.8;
text-align: justify;
color: var(--text);
}
.projects-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.projects-container a {
color: var(--customGreen);
margin: 20px;
border: 10px solid;
border-image-slice: 1;
border-width: 2px;
border-image-source: var(--customRed);
width: 300px;
height: 200px;
display: flex;
justify-content: center;
}
.projects-container ul {
height: 100px;
line-height: 170%;
white-space: nowrap;
}
.projects-container a:hover {
border-image-source: var(--gradientHover);
cursor: pointer;
}
.projects-container a:active {
border-image-source: var(--gradientActive);
}
.project-tile {
font-size: 1.3em;
}
#project {
order: 3;
}
#project2 {
order: 2;
}
#project3 {
order: 1;
}
.contact-container {
font-size: 1.2em;
}
#contacts a {
margin: 20px;
}
#contacts a:hover {
color: var(--customGreen);
}
footer p {
position: relative;
text-align: right;
}
footer a {
color: var(--customGreen);
}
#scrollBtn{
position:fixed;
bottom: 10px;
right:10px;
color: var(--customGray)
}
#scrollBtn:hover{
background-color: var(--customGray);
color: var(--customWhite);
cursor: pointer;
}
@media (max-width: 600px) {
#nav-list {
display: block;
margin: auto;
}
#nav-list li {
padding: 10px 0 0 0;
}
.contact-container {
display: grid;
margin-top: 20px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 40px 40px;
}
footer p {
text-align: center;
}
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Personal Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous" />
<script src="./scrypts/typewriter.js"></script>
</head>
<body>
<!--FreeCodeCamp test script-->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<nav id="navbar">
<ul id="nav-list">
<li><a href="#welcome-section">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contacts">Contact</a></li>
</ul>
</nav>
<main>
<section id="welcome-section">
<h1>...</h1>
</section>
<section id="about-section">
<header class="headers">About</header>
<h2>Learn, create, work and repeat.
</h2>
<p>I am a Web Developer passionate about the internet, data, and quality. I believe that together, they
can
be powerful and meaningful in many ways to change people's lives.
Over the years, I have acquired expertise and experience in a wide range of tools that, along with
my
creativity and resilience, have allowed me to help people solve their problems and make their lives
easier. I love to learn, seek innovation and help those around me achieve their goals.
I am also a multi-instrumentalist/producer/mixer and music has been a big passion since I was young.
I
like to stay with my family and friends in my free time, learn new stuff, play my guitar, compose
songs
or make notes about new ideas.
Let's connect and have a chat about what you are trying to build next!</h1>
</section>
<section id="projects">
<header class="headers">Projects</header>
<div class="projects-container">
<a id="project1">
<ul>
<h2 class="project-tile">DA/BA</h2>
<li>Process Improvement</li>
<li>Total Quality Management</li>
<li>Business Process Mapping</li>
</ul>
</a>
<a id="project2">
<ul>
<h2 class="project-tile">Music Services</h2>
<li>Live Recording</li>
<li>Music Lessons</li>
<li>Post Production</li>
</ul>
</a>
<a id="project3">
<ul>
<h2 class="project-tile">Web Development</h2>
<li>Websites</li>
<li>Android Apps</li>
<li>Iphone Apps</li>
</ul>
</a>
</div>
</section>
<section id="contacts">
<header class="headers">Get In Touch</header>
<div class="contact-container">
<a id="profile-link" href="https://github.com/jonathanbcsouza" target="_blank">
<i class="fab fa-github"></i>
GitHub
</a>
<a id="profile-link" href="https://www.linkedin.com/in/jonathanbcsouza" target="_blank">
<i class="fab fa-linkedin"></i>
LinkedIn
</a>
<a id="profile-link" href="https://dev.to/jonathanbcsouza" target="_blank">
<i class="fab fa-dev"></i>
Dev
</a>
<a id="profile-link" href="https://codepen.io/jonathanbcsouza" target="_blank">
<i class="fab fa-codepen"></i>
CodePen
</a>
<a id="profile-link" href="https://twitter.com/jonathanbcsouza" target="_blank">
<i class="fab fa-twitter"></i>
Twitter
</a>
</div>
</section>
<footer>
<p class="link-footer">©Created with love for
<a href="https://www.freecodecamp.com/" target="_blank">FreeCodeCamp</a>
</p>
</footer>
</main>
<button id="scrollBtn" onclick="scrollUp()">△</button>
</body>
</html>
type or paste code here
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.114 Safari/537.36 Edg/103.0.1264.49
Challenge: Build a Personal Portfolio Webpage
Link to the challenge: