Tell us what’s happening:
some tests fail but the requirement is satisfied
Your code so far
TEST 1:
Your portfolio should contain at least one element with a class of project-tile.
CODE:
<header>
<div class="banner text-rainbow">
<img src="mda.png" alt="eat me!" class="mda">
<span class="project-title">M.D.A. Portfolio</span>
</div>
<nav id="navbar" class="navbar">
<ul>
<li><a href="#welcome-section">Whoami</a></li>
<li><a href="#projects">Works</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
TEST 2:
Your `#navbar` element should always be at the top of the viewport.
CODE:
SAME CODE ABOVE, no media query involved for this
Thanks in advance
MDA
Your browser information:
User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/117.0
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
@polakenfold welcome to the freeCodeCamp forum community!
TEST 1:
Your portfolio should contain at least one element with a class of project-tile .
I don’t see an element with class of project-tile in your code.
There is a class “project-title” but “title” and “tile” are not the same words.
I think the “project-tile” class could be written as an attribute in the
opening tag of a div as a project thumbnail container.
<!-- This is an HTML comment ( Writing comments can help to keep track of your
thoughts as you code and there are other reasons to write comments too ).
The "project-tile" class will allow you to apply styles to all your project thumbnail
containers with just one selector in your CSS so that you don't have to write CSS for
each individual project thumbnail container.
Your project thumbnail container divs can be nested inside a projects section with an id of "projects".
See the hint HTML and hint CSS I wrote below that helps illustrate what I've said above.
-->
<style>
.project-tile{
width: 200px;
height: 200px;
font-size: 1.5rem;
color: white;
background-color: rgb(100,100,100);
}
#projects{
/* This is a CSS comment.
Some CSS flex and/or grid properties might be useful here */
}
</style>
<!-- HTML code below -->
<section id="projects">
<div class="project-tile"> <!-- opening project thumbnail container div tag -->
<h3>My Tribute Page</h3>
<img class="tribute-page project-thumbnail-img" src="You can upload a screenshot of
your project to a secure website, then right click it ( so from the menu that pops up after
you right-click, you can click 'copy image address' or something like that ( it may be
different on different browsers ), then just paste that link to your project screenshot
here inside the opening/closing double quotes of this src attribute." alt="thumbnail of
my tribute page freeCodeCamp project"/>
<p> description of your project here </p>
</div> <!-- closing project thumbnail container div tag -->
<!-- The rest of the project thumbnail containers may be written in a similar way as the one above. -->
</section>
I’d like to know if this reply of mine helps you and if I can be of further help.
note: a thumbnail is an image of web content used as a link to the actual web content that is shown in the thumbnail image ( an example is the images that are clicked on on youtube to bring the user to the video of the image that was clicked ).