Technical Documentation Page - Build a Technical Documentation Page

HTML-CSS
1

Tell us what’s happening:
" Your portfolio should contain at least one element with a class of project-tile ."
???
what? what’s the problem with this?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Marki Portfolio</title>
        <link rel="stylesheet" href="styles.css" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap"
            rel="stylesheet"
        />
        <link
            href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
            rel="stylesheet"
        />
    </head>
    <body>
        <header>
            <nav id="navbar">
                <ul class="nav-links">
                    <li><a href="#welcome" class="nav-link">Welcome</a></li>
                    <li><a href="#projects" class="nav-link">Projects</a></li>
                    <li><a href="#contact" class="nav-link">Contact</a></li>
                </ul>
            </nav>
        </header>
        <section id="welcome-section">
            <h1>Hello, I'm Andrew!</h1>
            <p>Web developer</p>
        </section>
        <section id="projects">
            <h1>These are some of my projects</h1>
            <div class="projects">
                <a href="" class="project-title">
                    <img src="./skyline.png" alt="" />
                    <p><span>&lt;</span>Skyline CSS<span>&gt;</span></p>
                </a>
                <a href="" class="project-title">
                    <img src="./Ilovecsspenguin.png" alt="" />
                    <p><span>&lt;</span>I love CSS Penguin<span>&gt;</span></p>
                </a>
                <a href="" class="project-title">
                    <img src="./quiz.png" alt="" />
                    <p><span>&lt;</span>Quiz<span>&gt;</span></p>
                </a>
                <a href="" class="project-title">
                    <img src="./cafe_menu.png" alt="" />
                    <p><span>&lt;</span>Cafe Menu<span>&gt;</span></p>
                </a>
                <a href="" class="project-title">
                    <img src="./magazine.png" alt="" />
                    <p><span>&lt;</span>Magazine<span>&gt;</span></p>
                </a>
                <a href="" class="project-title">
                    <img src="./original_trombones.png" alt="" />
                    <p><span>&lt;</span>Original Trombones<span>&gt;</span></p>
                </a>
            </div>
            <a href="" class="show-all"
                >Show All<i class="ri-arrow-right-s-line"></i
            ></a>
        </section>
        <section id="contact">
            <h1>Let's work together...</h1>
            <p class="coffe-question">How do you take your coffee?</p>
            <div class="social-medias">
                <a href="" class="social-media">
                    <i class="ri-facebook-box-fill ri-2x"></i>
                    <p>Facebook</p>
                </a>
                <a
                    href="https://github.com/markiandras"
                    target="_blank"
                    class="social-media"
                    id="profile-link"
                >
                    <i class="ri-github-fill ri-2x"></i>
                    <p>GitHub</p>
                </a>
                <a
                    href="https://www.freecodecamp.org/markiandreew"
                    target="_blank"
                    class="social-media"
                >
                    <i class="ri-fire-fill ri-2x"></i>
                    <p>FreeCodeCamp</p>
                </a>
                <a href="" class="social-media">
                    <i class="ri-at-line ri-2x"></i>
                    <p>Send a mail</p>
                </a>
                <a href="" class="social-media">
                    <i class="ri-cellphone-fill ri-2x"></i>
                    <p>Call me</p>
                </a>
            </div>
        </section>
        <footer>Created by Andras Marki Jan 2023
        </footer>
    </body>
</html>


/* file: styles.css */

:root {
  --neutral: #004643;
  --base-100: #fffffe;
  --neutral-focus: #001e1d;
  --primary: #f9bc60;
  --secondary: #abd1c6;
  --accent: #abd1c6;
}

* {
  margin: 0;
  scroll-behavior: smooth;
}

body {
  font-family: "IBM Plex Mono", sans-serif;
  text-align: center;
  background-color: var(--neutral);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "IBM Plex Mono", sans-serif;
}

h1 {
  font-size: 60px;
}

#navbar {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: var(--neutral);
  padding: 20px 0;
  font-size: 20px;
  border-bottom: 1px solid var(--neutral-focus);
}

.nav-links {
  display: flex;
  list-style: none;
  font-family: "IBM Plex Mono", serif;
}

.nav-links a {
  text-decoration: none;
  padding: 0 10px;
  color: var(--base-100);
}

.nav-links a:hover {
  text-decoration: underline;
}

section {
  min-height: 100vh;
  padding: 70px 0;
}

#welcome-section {
  background: var(--neutral);
  color: var(--base-100);
  display: flex;
  flex-direction: column;
}

#welcome-section h1 {
  margin-top: 30vh;
}

#welcome-section p {
  color: var(--primary);
  font-size: 25px;
  margin: 25px 0;
  font-style: italic;

}

#projects {
  background-color: var(--secondary);
  color: var(--neutral);
}

#projects h1 {
  border-bottom: 5px solid var(--neutral);
  width: fit-content;
  margin: auto;
}

#projects .projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 20px;
  place-items: center;
  max-width: 1200px;
  margin: auto;
}

#projects .project-title {
  height: 525px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--neutral);
  text-decoration: none;
  color: var(--accent);
  border-radius: 5px;
  box-shadow: 8px 8px 10px 5px rgba(100, 100, 100, 0.3)
}

#projects .project-title img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#projects .project-title p {
  font-size: 25px;
  padding: 10px;
}

#projects .project-title span {
  opacity: 0%;
  padding: 0 5px;

}

#projects .project-title:hover span {
  opacity: 100%;
  color: var(--primary);
  transition: opacity 0.25s ease-in;
}

.show-all {
  text-decoration: none;
  width: max-content;
  display: flex;
  align-items: center;
  margin: auto;
  padding: 0px 15px;
  background-color: var(--neutral);
  color: var(--accent);
  font-size: 25px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease-in;
}

.show-all:hover {
  background-color: var(--neutral-focus);
  color: var(--base-100);
}

#contact {
  background-color: var(--neutral);
  color: var(--base-100);
}

#contact h1 {
  margin-top: 300px;
}

#contact .coffee-question {
  color: var(--primary);
  font-size: 25px;
  font-style: italic;
}

#contact .social-medias {
  display: flex;
  flex-wrap: wrap;
  max-width: 1000px;
  justify-content: space-around;
  margin: auto;
}

#contact .social-media {
  text-decoration: none;
  color: var(--base-100);
  transition: transform 0.2s ease-in;
  display: flex;
  align-items: center;
  margin: 20px;
  font-size: 22px;
}

#contact .social-media:hover {
  transform: translateY(10px);
}

footer {
  border-top: 3px solid var(--primary);
  color: var(--base-100);
  font-size: 25px;
  padding: 30px;
}

@media only screen and (width < 700px) {
  h1 {
    font-size: 50px;
  }
  #projects .project-title {
    height: 600px;
    width: 100%;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

2

should be project-tile not project-title

1 Like
3

oh my… sorry, thanks a lot!

1 Like
4

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