Tell us what’s happening:
Hello, where should I insert the class “project-tile” for this code to work, I’ve tried putting it in section element but it won’t go through. Kindly help.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF_8"/>
<meta name="viewport"content="width=device-width,initial-scale=1.0"/>
<title>Personal Portfolio</title>
<link rel="stylesheet"href="styles.css"/>
</head>
<body>
<header>
<nav id="navbar">
<a href="#welcome-section">About</a>
<a href="#projects">Work</a>
<a href="#contact">Contact</a>
</nav>
</header>
<br/>
<main>
<section id="welcome-section" class="project-tile">
<h1>Hello I am Hilary</h1>
<p>a web devloper</p>
</section>
<section id="projects" class="project-tile">
<h2 >These are some of my projects</h2>
<a id="profile-link" target="_blank" href="https://codepen.io/freeCodeCamp/full/zNqgVx"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"><p class="project-title">Tribute Page</p></a>
<a id="profile-link" target="_blank" href="https://codepen.io/freeCodeCamp/full/qRZeGZ"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"><p class="project-title">Quote Machine</p></a>
<a id="profile-link" target="_blank" href="https://codepen.io/freeCodeCamp/full/wgGVVX"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"><p class="project-title">Java Calculator</p></a>
<a id="profile-link" target="_blank" href="https://codepen.io/freeCodeCamp/full/mVEJag"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"><p class="project-title">World Map</p></a>
<a id="profile-link" target="_blank" href="https://codepen.io/freeCodeCamp/full/wGqEga"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"><p class="project-title">Wikipedia Viewer</p></a>
<a id="profile-link" target="_blank" href="https://codepen.io/freeCodeCamp/full/KzXQgy"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png"><p class="project-title">Tic Tac Toe Game</p></a>
</section>
<section id="contacts" class="project-tile">
<h1>Let's work togather</h1>
<p>how do we take coffee?</p>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Add font awesome icons -->
<a href="#" class="fa fa-facebook">faceboo</a>
<a href="#" class="fa fa-twitter">twitter</a>
<a href="#" class="fa fa-youtube">youtube</a>
<a href="#" class="fa fa-snapchat">snapchat</a>
<a href="#" class="fa fa-linkedin">linkedin</a>
<a href="#" class="fa fa-telegram">telegram</a>
</section>
<main>
<footer>
</footer>
</body>
/* file: styles.css */
#navbar {
position: fixed;
margin-right: 20px;
padding-left: 70%;
text-color: white;
background-color: red;
}
#navbar a {
font-size: 20px
}
@media(max-width: 300px) {h1 {font-size: 16px;}}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
Challenge: Responsive Web Design Projects - Build a Personal Portfolio Webpage
Link to the challenge: