Responsive Web Design Projects - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
My issue is in step 5 where i have to create at least an element with a class of project-tile. Ive literally tried it on multiple elements and it didnt work for some reason, i also tried adding random css to it but it still didnt work. Can you please help me with it. I want to carry on with the project but this is annoying me so much.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<div id="navbar" class="banner">
<ul> 
<li><a id="profile-link" href="https://www.freecodecamp.org/fccf903f396-f859-4fa0-b5bc-92775badc022" target="_blank"></a>About</li>
<li><a href="#"></a>Work</li>
<li><a href="#"></a>Contact</li>
</ul>  
</div>
</nav>
<div class="main-text" id="welcome-section">
<h1>Hey I am Vertex</h1> <h2><i>a Full Stack developer</i></h2>
</div>
<div class="projects-title">       
<h1><u>These are some of my projects</u></h1>
</div>
<h1 class="project-tile">Hdsjkds</h1>
<h2 class="project-tile">HJKEE</h2>
<div class="projectss">
<section id="projects">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Nelson_Mandela_1994.jpg/640px-Nelson_Mandela_1994.jpg" alt="Nelson Mandela Image">
<figcaption><a href="https://en.wikipedia.org/wiki/Nelson_Mandela" target="_blank">Nelson Manela Tribute Page</a>
</section>
</div>
</body>
</html>


/* file: styles.css */
.banner {
    background: red;
    padding: 20px;
    position: fixed;
    top: 0;
    z-index: 2;
    }
.banner ul{
    display: flex;
    list-style: none;
}
.banner ul li {
    color: #fff;
    box-sizing: border-box;
    padding: 3px;
    margin: 0 5px 0 5px;
    display: flex;
    justify-content: flex-end;
    font-size: 25px;
}
.banner ul li:hover {
    background: blue;
}
.main-text {
    background: #090782;
    padding: 20px;
    z-index: 1;
}
.main-text h1 {
    color: white;
    text-align: center;
    font-size: 100px;
}
.main-text h2 {
    color: red;
    text-align: center;
    font-size: 30px;
}
.projects-title {
    background: blue;
    padding: 20px 100px 500px 100px;
}
.projects-title h1{
    text-align: center;
    color: white;
    font-size: 40px;
}
.projectss img{
    position: relative;
    max-height: 228px;
    max-width: 176px;
    top: -30em;
    right: -40%;
}
.projectss figcaption{
    position: relative;
    top: -30em;
    right: -40%;
}
.projectss a{
    color: white;
}
@media (max-height: 200px) {
    color: white;
}
.project-tile {
    font-family: sans-serif;
}

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 OPR/93.0.0.0 (Edition std-1)

Challenge: Responsive Web Design Projects - Build a Personal Portfolio Webpage

Link to the challenge:

2

you will need to do these steps in order

  1. Your portfolio should have a projects section with an id of projects
  2. The projects section should contain at least one element with a class of project-tile to hold a project

so for #1 I see you have this

so now you just need to make one element -within- the section element have the requested id of project-tile

3

Thank you very much i didnt know that it had to be nested within the section element.

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.