<!-- file: index.html -->
/* file: styles.css */
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15
Personal Portfolio Webpage - Build a Personal Portfolio Webpage
<!-- file: index.html -->
/* file: styles.css */
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15
Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Use the button </> to preformat the code
Hey there,
Please update the message to include your code. The code was too long to be automatically inserted by the help button.
When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
Hey there,
Please update the message to include your code. The code was too long to be automatically inserted by the help button.
When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Earl Lawrence Marion-Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<ul>
<li><a href="#welcome-section">Welcome</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a id="profile-link" href="https://f
<!-- file: index.html -->
/* file: styles.css */
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15
Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Hi @Shakubuku67
I edited your post so the code formats correctly on the forum.
Please update your post to include the rest of the html
Also include the css
Happy coding
Your portfolio should use at least one media @query. I have created html/css links to personal contact information and links to freecodecamp.org and coursera.org. Not sure of what is missing or incorrect.
<!-- file: index.html -->
/* file: styles.css */
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15
Personal Portfolio Webpage - Build a Personal Portfolio Webpage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Earl Lawrence Marion-Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<ul>
<li><a href="#welcome-section"><p>Welcome to Earl L. Marion's Personal Portfolio Webpage</p></a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a id="profile-link" href="https://freecodecamp.org/learn/2022/responsive-web-design/Earl Lawrence Marion" target="_blank">freecodecamp</a></li>
</ul>
</nav>
<!--Welcome Section-->
<header id="welcome-section">
<h1>Welcome to Earl Lawrence Marion's Portforlio</h1>
<h1>Welcome to my Personal Portfolio</h1>
<p>Empowering security and confidentiality through expertise in cybersecurity, medical coding, and billing.</p>
<h2>Cybersecurity Specialist</h2>
<h2>Medical Coding and Billing Specialist</h2>
<h2>Confidentiality Expert</h2></header>
<!--Experience Section-->
<section id="experience">
<h2>Experience</h2>
<div class="experience-item">
<h3>Vietnam Veteran - Clerk-Typist</h3>
<p>Managed classified documents, filed and retrieved confidential files of military personnel and typed highly classified SOPs (Standard Operation Procedures) manuals.</p> </div>
<div class="experience-item">
<h3>New York City Police Department Police Administrative Aide</h3>
<p>Worked as a Police Administrative Aide at the Civilian Complaint Desk. Preparing complaints from civilians of criminal offenses against them. Worked in the Bureau of New York City Bureau of Criminal Identification maintaining New York City Criminal Records and preparing Court Arrest Records for Police Officers.</p> </div>
<div class="experience-item">
<h3>Nursing Assistant/New York State Peer Specialist</h3>
<p>Healthcare information intake specialist for inpatient and outpatient services providers: assisting clients to obtain medical and mental health care. Assist clients to obtain social security, medcaid, medicare, and Social Services and Food Stamps. Meeting all HIPAA standards for protecting patient medical records from unauthorized access.</p></div>
</section>
<!--Projects Section-->
<section id="projects">
<h1>Welome to My Portfolio Projecrts</h1>
<h2>HTML/CSS Projects</h2>
<div class="project-tile">
<a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page" target="_blank">Build a Technical Documentation Page Project</a></div>
<div class="project-tile">
<a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/builed-a-tribute-page-project/build-a-tribute-page"target="blank">Build a Tribute Page Project</a></div>
<div class="project-tile">
<a class="course-link" href="https://www.coursera.org/specializations/ibm-cybersecurity-analyust" target="_blank">IBM Cybersecurirty Analyst Certification</a>
<style>
body, html {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background-color:#333;
color: #fff;
padding: 0;
text-align: center;
}
header h1 {
margin: 0;
}
main {
padding: 2rem;
}
.course-link {
display: block;
margin: 2rem 0;
padding: 1rem;
background-color: #0077cc;
color: white;
text-align: center;
text-decoration: none;
border-radius: 5px;
}
.course-link:hover {
background-color: #005fa3;
}
footer {
text-align: center;
padding: 1rem 0;
background-color: #f4f4f4;
}
#navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
padding: 10px 0;
z-index: 1000;
}
#navbar ul {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
#navbar ul li {
margin: 0 15px;
}
#navbar ul li a {
color: white;
text-decoration: none;
font-size: 18px;
}
#navbar ul li a:hover {
text-decoration: underline;
}
#welcome-section {
height: 20vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-aligh: center;
background: linear-gradient(to right, #4e54c8, #8f94fb);
color: white;
}
#welcome-section h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
#welcome-section h3 {
font-size: 1.5em;
margin: 5px 0;
}
#experience {
padding: 50px 20px;
background: #f4f4f4;
}
#experience h2 {
text-align: center;
margin-bottom: 20px;
}
.experience-item {
margin-bottom:20px;
}
.experience-item he {
font-size: 1.5em; color: #333;
}
.experience-item p {
font-size: 1em;
color: #666;
}
#projects {
padding: 50px 20px;
background: #fff;
}
#projects h2 {
text-align: center;
margin-bottom: 20px;
}
.project-tile {
text-align: center;
margin-bottom: 20px;
}
.project-tile a {
color: $4e54c8;
text-decoration: none;
font-size: 1.2em;
}
.project-tile a:hover {
text-decoration: underline;
}
#footer {
text-align: center;
padding: 20px;
background: #333;
color: white;
}
@media only screen and (max-width: 600px) {
nav ul {
flex-direction: column;
align-items: center;
;
header, footer {
font-size: 1.2rem;
dtext-align: center;
}
main {
padding: 1rem;
}
.course-link {
font-size: 1rem;
}
#projects .project-tile {
font-size: 0.9rem;
}
}
nav ul li {
margin: 0.5rem 0;
}
section {
padding: 1rem;
}
project {
padding: 0.5rem;
}
#welcome-section h1 {
font-size: 2em;
}
#welcome-section h1 {
font-size: 1.2em;
}
}
<title>Contact:Earl Lawrence Marion</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.contact-section {
background-color: #f4f4f9;
padding: 50px 20px;
text-align: center;
}
.contact-section h2 {
font-size: 2rem;
margin-botom: 20px;
color: #333;
}
.contact-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-tip: 20px;
}
.contact-links a {
text-decoration: none;
color: white;
background-color: #0073e6;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s;
}
.contact-links a:hover {
background-color: #005bb5;
}
@media (max-width: 600px) {
.contact-section h2 {
font=size: 1.5rem;
}
}
.contact-links a {
font-size: 0.9rem;
padding: 8px 16px;
}
</body>
</style>
</head>
<footer id="footer">
<body>
<section class="contact-section"><h2>Contact Me</h2><p>Feel free to contact me any of the platforms media:</p>
<div class="contact-links">
<a href+"https://www.facebook.com"target="_blank">Facebook</a>
<a href="https://twitter.com"target="_blank">Twitter</a>
<a href="email to:elm165nyc@gmail.com">elm165nyc@gmail.com</a>
<a href="tel:914-258-6138">914-258-6138</a>
</body>
</html>
I have merged your 4 topics on the Personal Portfolio Webpage together, please do not open multiple topics for the same challenge
Hi @Shakubuku67
The tests are expecting the css in the styles.css file
Try moving the css from the styles element in the html file to the styles.css file.
Happy coding