can anyone help, im struggling with the following:
my social icons aren’t showing up on screen,
How to create a media query within my project
the navbar issue
thankyou in advance
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta name="viewpoint" content="width=device-width, initial scale=1.0"></meta>
<title>My Personal Portfolio NM</title>
<link rel="stylesheet" href="styles.css">
</head>
<nav id="navbar">
<ul>
<li>
<a href="#welcome-section">WelcomeSection</a>
</li>
<li><a href="#projects">Projects</a>
</li>
<li> <a href="#contact">Contact</a>
</li>
</ul>
</nav>
<body>
<main>
<section id="welcome-section" class="welcome-section">
<h1 class="heading"> Welcome to my page </h1>
<p class="introduction">
I have recently embarked on a new journey into the coding world using <a href="www.Freecodecamp.org">FreecodeCamp</a> and look forward to exploring all the other different languages.
</p>
</section>
<section id="projects" class="projects">
<p class="project-tile"></p>
<h2>Below is a little snippet of my projects so far.</h2>
Hope you Enjoy!
<div class="projects">
<p class="lists"> </p>
<ul> <li> <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-grid-by-building-a-magazine/step-80">Building a Magazine</a>
</li>
<li> <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-60"> Bulding A Cafe Menu </a></li>
<li> <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-68"> Accessibility by Bulding a Quiz</a></li>
</div>
</section>
<section>
<aside class="image-wrapper">
<img
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
alt="image of the quote machine project"
loading="lazy"
class="image-1"
width="600"
height="400"
/>
</section>
<section class="contact">
<div class="social-icons">
<a href="https://www.facebook.com/freecodecamp/">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/freecodecamp/">
<i class="fab fa-twitter"></i>
</a>
<a href="https://instagram.com/freecodecamp"
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/school/free-code-camp/">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://www.youtube.com/freecodecamp">
<i class="fab fa-youtube"></i> </a>
</div>
<div class="author">
<p class="author-name">By<a href="https://www.freecodecamp.org/nmirr98" id="profile-link" target="_blank"> Nukhba Mir </a></p>
</section>
</body>
</main>
/* file: styles.css */
.project-title {text-align: center;}
*,
::before,
::after {
padding: 0;
margin: 0;
}
body {
font-family: 'Baskervville', serif;
color: linen;
background-color: rgb(20, 30, 40);
}
h1 {
font-family: 'Anton', sans-serif;
}
h2, h3 {
font-family: 'Raleway', sans-serif;
}
a {
text-decoration: none;
color: linen;
}
img {
width: 100%;
object-fit: cover;
}
.heading {
grid-column: 2 / 3;
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 1.5rem;
}
.introduction {
font-size: 2rem;
color: maroon;
text-align: center;
}
.heading {
text-align: center;
color: maroon;
font-size: 7.5rem;
}
.author {
font-size: 2rem;
font-family: "Raleway", sans-serif;
}
.author-name a:hover {
background-color: #306203;
}
.social-icons {
font-size: 2rem;
}
.social-icons {
display: grid;
font-size: 3rem;
grid-template-columns: repeat(5, 1fr);
grid-auto-flow: column;
grid-auto-columns: 1fr;
align-items: center;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge:
