Why display differently Browser and HTML Preview?

HTML-CSS
1

Why my .footer part seems to have an oragned border-bottom even if I actually did not set with CSS?

image
image1920Ă—804 115 KB

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 Page</title>
    <link rel="stylesheet" href="../CSS5/Personal-Portfolio-Page.css" />
    <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=WDXL+Lubrifont+TC&display=swap"
      rel="stylesheet"
    />
    <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=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <main>
      <nav id="navbar">
        <div class="logo-container">
          <img
            class="logo"
            src="../FCC Beta Curriculum/Sources/spiral.jpg"
            alt="spiral"
          />
          <p class="logo-text">Sprial</p>
        </div>
        <div class="nav-link-container">
          <a class="nav-link" href="#welcome-section">About</a>
          <a class="nav-link" href="#project-section">Work</a>
          <a class="nav-link" href="#contact-section">Contact</a>
        </div>
      </nav>
      <section id="welcome-section">
        <h1 class="title">Hey I am Dovb1ek</h1>
        <p class="subtitle">a web developer</p>
      </section>
      <section id="project-section">
        <h2>
          These are some of my projects
          <hr />
        </h2>
        <div class="project-container">
          <div id="tribute-page" class="project-tile">
            <a
              class="image-container"
              href="../FCC Old Courses/Tribute Page Lab.html"
            >
              <img
                class="project-image"
                src="../FCC Beta Curriculum/Sources/Tribute Page.png"
                alt="Tribute Page"
              />
            </a>
            <a
              class="project-name"
              href="../FCC Old Courses/Tribute Page Lab.html"
              >Tribute Page</a
            >
          </div>
          <div id="technical-documentation-page" class="project-tile">
            <a
              class="image-container"
              href="../FCC Beta Curriculum/A Technical Documentation Page Lab(Responsive Design).html"
            >
              <img
                class="project-image"
                src="../FCC Beta Curriculum/Sources/Technical Documentation Page.png"
                alt="Technical Documentation Page Picture"
              />
            </a>
            <a
              class="project-name"
              href="../FCC Beta Curriculum/A Technical Documentation Page Lab(Responsive Design).html"
              >Technical Documentation</a
            >
          </div>
          <div id="house-painting" class="project-tile">
            <a
              class="image-container"
              href="../FCC Beta Curriculum/A House Painting Lab(Positioning).html"
            >
              <img
                class="project-image"
                src="../FCC Beta Curriculum/Sources/House Painting.png"
                alt="House Painting Page Picture"
              />
            </a>
            <a
              class="project-name"
              href="../FCC Beta Curriculum/A House Painting Lab(Positioning).html"
              >House Painting</a
            >
          </div>
          <div id="magazine-layout" class="project-tile">
            <a
              class="image-container"
              href="../FCC Beta Curriculum/A Magazine Layout Lab(Grid).html"
            >
              <img
                class="project-image"
                src="../FCC Beta Curriculum/Sources/Magazine Layout.png"
                alt="Magazine Layout Page Picture"
              />
            </a>
            <a
              class="project-name"
              href="../FCC Beta Curriculum/A Magazine Layout Lab(Grid).html"
              >Magazine Layout</a
            >
          </div>
          <div id="playing-cards" class="project-tile">
            <a
              class="image-container"
              href="../FCC Beta Curriculum/A Page of Playing Cards Lab(Flexbox).html"
            >
              <img
                class="project-image"
                src="../FCC Beta Curriculum/Sources/Playing Cards.png"
                alt="Playing Cards Page Picture"
              />
            </a>
            <a
              class="project-name"
              href="../FCC Beta Curriculum/A Page of Playing Cards Lab(Flexbox).html"
              >Playing Cards</a
            >
          </div>
          <div id="product-landing-page" class="project-tile">
            <a
              class="image-container"
              href="../FCC Beta Curriculum/A Product Landing Page Lab(Grid).html"
            >
              <img
                class="project-image"
                src="../FCC Beta Curriculum/Sources/Product Landing Page.png"
                alt="Product Landing Page Picture"
              />
            </a>
            <a
              class="project-name"
              href="../FCC Beta Curriculum/A Product Landing Page Lab(Grid).html"
              >Product Landing Page</a
            >
          </div>
        </div>
        <div class="button">
          <a href="https://codepen.io/FreeCodeCamp/">Show all</a>
        </div>
      </section>
      <section id="contact-section">
        <div>
          <h2 class="sologan">Let's work together...</h2>
          <p>How do you take your coffee?</p>
          <div class="contact-link-container">
            <div class="links">
              <img
                class="link-icon"
                src="../FCC Beta Curriculum/Sources/facebook.png"
                alt="Facebook Icon"
              />
              <a
                class="profile-links profile-text"
                href="https://facebook.com/Dovb1ek"
                >Facebook</a
              >
            </div>
            <div class="links">
              <img
                class="link-icon"
                src="../FCC Beta Curriculum/Sources/github-fill.png"
                alt="Github Icon"
              />
              <a
                class="profile-links profile-text"
                id="profile-link"
                target="_blank"
                href="https://github.com/Dovb1ek"
                >Github</a
              >
            </div>
            <div class="links">
              <img
                class="link-icon"
                src="../FCC Beta Curriculum/Sources/tuite-copy.png"
                alt="X Icon"
              />
              <a class="profile-links profile-text" href="https://x.com/Dovb1ek"
                >X(Twitter)</a
              >
            </div>
            <div class="links">
              <img
                class="link-icon"
                src="../FCC Beta Curriculum/Sources/at.png"
                alt="At Icon"
              />
              <a
                class="profile-links profile-text"
                href="mailto:2309554037@qq.com"
                >Send a mail</a
              >
            </div>
            <div class="links">
              <img
                class="link-icon"
                src="../FCC Beta Curriculum/Sources/手机图标.png"
                alt="Phone Icon"
              />
              <a class="profile-links profile-text" href="tel:+86 13482821893"
                >Call me</a
              >
            </div>
            <div class="links">
              <img
                class="link-icon"
                src="../FCC Beta Curriculum/Sources/微信.png"
                alt="Wechat Icon"
              />
              <a
                class="profile-links profile-text"
                href="https://weixin.qq.com/"
                >Wechat</a
              >
            </div>
          </div>
        </div>
        <div>
          <div class="footer">
            <p>© Created for <br />freeCodeCamp</p>
          </div>
        </div>
      </section>
    </main>
  </body>
</html>

CSS:

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  font-size: 62.5%;
  scroll-behavior: smooth;
  --color1: orange;
  --color2: white;
  --color3: #323232;
  --color4: #282828;
  --text: 1.5rem;
  --font-family-1: "WDXL Lubrifont TC", sans-serif;
  --font-family-2: "Ubuntu", sans-serif;
  font-family: var(--font-family-2);
}

body {
  height: 100vh;
}

main {
  height: 100%;
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem 1rem 2rem;
  background-color: var(--color1);
}

.nav-link-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  font-size: 1.8rem;
  font-weight: bold;
  text-decoration: none;
  color: black;
  padding: 0.5rem;
  transition: 0.5s ease-in-out 0ms;
}

.nav-link:hover {
  color: var(--color2);
  background-color: black;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.logo {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
}

.logo-text {
  font-size: 2rem;
  font-family: "WDXL Lubrifont TC", sans-serif;
}

#welcome-section {
  background: linear-gradient(45deg, rgb(60, 60, 60), black);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 4rem;
  color: var(--color2);
}

.subtitle {
  font-size: 2rem;
  font-style: italic;
  font-weight: lighter;
  color: var(--color1);
}

#project-section {
  background-image: url(https://static.vecteezy.com/system/resources/previews/026/620/795/non_2x/konoha-symbol-hidden-leaf-naruto-free-vector.jpg);
  background-size: cover;
  background-clip: border-box;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  padding: 1rem;
}

#project-section h2 {
  margin-top: 4rem;
  padding-top: 2rem;
  font-size: 3rem;
  text-align: center;
}

#project-section hr {
  border-width: 0.1rem;
  border-color: var(--color1);
}

.project-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2rem;
}

.project-tile {
  max-width: 300px;
}

.project-tile a {
  display: block;
  text-decoration: none;
  color: var(--color2);
}

.image-container {
  height: 80%;
}

.project-name {
  background-color: var(--color3);
  height: 20%;
  font-size: var(--text);
  text-align: center;
  align-content: center;
}

.project-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-name::before {
  content: "< ";
  color: var(--color1);
  opacity: 0;
  transition: 0.5s ease-in-out 0ms;
}

.project-name::after {
  content: " />";
  color: var(--color1);
  opacity: 0;
  transition: 0.5s ease-in-out 0ms;
}

.project-name:hover::before {
  opacity: 1;
}

.project-name:hover::after {
  opacity: 1;
}

.image-container:hover + .project-name::before {
  opacity: 1;
}

.image-container:hover + .project-name::after {
  opacity: 1;
}

.button {
  text-align: center;
  padding: 1rem;
  background-color: var(--color3);
  transition: 0.5s ease-in-out 0ms;
}

.button {
  margin-bottom: 4rem;
  padding: 0.8rem 2rem;
  font-size: var(--text);
  color: var(--color2);
}

.button a {
  text-decoration: none;
  color: var(--color2);
}

.button:hover {
  background-color: var(--color1);
  cursor: pointer;
}

.button::after {
  content: ">";
  font-weight: bold;
  display: inline-block;
  transition: 0.5s ease-in-out 0ms;
}

.button:hover::after {
  transform: translateX(0.2rem);
}

#contact-section {
  background-color: var(--color3);
  height: 100vh;
  border-bottom: 2px solid var(--color1);
}

#contact-section > div:first-child {
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#contact-section > div:first-child p {
  font-size: 1.8rem;
  font-style: italic;
  font-weight: lighter;
  text-align: center;
  color: var(--color2);
}

#contact-section > div:nth-child(2) {
  height: 20%;
}

.sologan {
  text-align: center;
  margin-top: 5rem;
  font-size: 5rem;
  color: var(--color2);
}

.contact-link-container {
  width: 80%;
  margin-top: 4rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
}

.links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: 0.3s ease-in-out 0ms;
}

.links:hover {
  cursor: pointer;
  transform: translateY(0.5rem);
}

.link-icon {
  width: 2rem;
  height: 2rem;
  box-shadow: 2px 2px var(--color4);
}

.profile-links {
  color: var(--color2);
  text-decoration: none;
}

.profile-text {
  text-align: center;
  align-content: center;
  font-size: 1.8rem;
  text-shadow: 2px 2px var(--color4);
}

.footer {
  width: 100%;
  height: 100%;
  border-top: 2px solid var(--color1);
  background-color: var(--color4);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.footer p {
  color: var(--color2);
  margin-right: 5rem;
  font-size: var(--text);
}

@media only screen and (max-width: 440px) {
  :root {
    font-size: 40%;
  }

  .project-container {
    grid-template-columns: 1fr;
  }
}
2

please share your code so people can try it out

3

The html and css file includes a lot of codes and local pics,with the default code share mode of the forum,I think it might not be a good way to share. Is there any other ways?

4

I have shared the code.

5

Can anyone reply?I am really confused… :thinking:

6

that code can’t be tested in the freeCodeCamp editor, I can’t replicate your issue

7

What do you mean?
I just copy the code piece and check it using freecodecamp editor,
although the pics cannot load since they are local.
The same problem related to border appears… :face_with_spiral_eyes:

image
image1565Ă—1262 240 KB

8

image
image541Ă—752 25.3 KB

9

Just change the ../CSS5/Personal-Portfolio-Page.css into styles.css since freecodecamp has default CSS file name.

10

You have a border-bottom on the contact-section element and the “footer” element is inside that section (BTW, use the footer element, not a div for the footer).

1 Like
11

Thanks a lot.I am a fool… :joy: