My project | Img positioning & visibility issues

Question

I am doing my first project from a UI design and I am having issues with image visibility. I have images showing when they arent supposed to, and I have images not showing at all. One of this images are also WAY out of position as well, and am looking for some help.

This is what it's supposed to look like

As you can see in the image above, I should have a dribble, github, and facebook icons showing in the top right corner. However, my images are not displaying at all as if the links are broken. I have opened the files individually and they are still working files. This is what it looks like on my screen:

What it looks like on my screen (code)

What is looks like on my screen (display)

I have tried both images/[file name] & ive tried copying the full path and pasting it in. None of them work.

Also, per the image with the class and file name "hero-image.svg", as you can see in the 3rd image, is not positioned correctly. It is also being displayed in the mobile view as it should not be doing that. Ive tried tweaking the code, but I think I took too long to change it that im not even exactly sure how I got it to move in the first place. Lastly, this "hero-image" should not be displayed in the mobile view AT ALL.

My code and css will be posted below.

It may be worth mentioning that im using a .scss (sass). Im not sure if that information changes anything.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

body {
  height: 100vh;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

image {
  width: 100%;
}

.nav-container {
  background: #6700ee;

  a{
    color: white;
  }
}
header {
  display: flex;
  justify-content: space-between;
  padding: 2em;

  .logo {
    color: #00f7ff;
    font-weight: bold;
  }

  ul {
    display: flex;

    a{
      display: block;
      padding: 0 1em;
    }
  }
}

.social-header, .hero-design {
    display: none;
}

.hero {
    background: #6e00ff;
    color: white;
    display: grid;
    text-align: center;
    padding: 4em;
}

.meet {
    display: flex;
    margin: 0 auto;
    width: 200px;
    font-weight: bold;
    color: #ff64cb;

    span {
        margin-top: 1em;
        margin-right: .5em;
    }
}

.scroll {
    width: 30px;
    margin-top: 2em;
}

section {
    padding: 4em 2em;
    text-align: center;
}

.featured {
    position: relative;
}
.featured::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #e5d5fa;
    top: 0;
    left: 0;
    z-index: -1;
}

.subtitle {
    text-transform: uppercase;
    font-weight: bold;
    color: #6e00ff;
    letter-spacing: .2em;
    font-size: .85em;
}

.featured-title {
    color: black;
    font-weight: bold;
    font-size: 1.3em;
    margin-top: -.4em;
    display: block;
}

.featured-desc {
    color: #3b3b3b;
    margin-bottom: 3em;
    font-size: .9em;
    line-height: 1.8em;
    font-weight: 500;
}

.skills {
    background: #ff64cb;
}

.skills-container ul li {
    background: white;
    padding: 2em;
    border-radius: 1em;
    margin-bottom: 1em;

    .icon-container {
        height: 100px;
        display: grid;
        place-content: center;
        margin: 0 auto;

        &.one {
            width: 50px;
        }
        &.two {
            width: 100px;
        }
        &.three {
            width: 60px;
        }
    } 
    .skill-title {
        font-weight: bold;
    }
    .featured-desc {
        margin-bottom: 2em;
    }
}

.portfolio {
    background: #f7f7f7;
}

.portfolio-container a img {
    border-radius: 1em;
    margin-bottom: 2em;
}

@media only screen and (min-width: 800px) {
    .featured, .portfolio {
        text-align: left;
    }

    .featured, .portfolio-container {
        display: grid;
        grid-template-columns: 40% auto;
    }
    .left, .portfolio-left {
        display: grid;
        place-content: center;

    }
    .right {
        margin-left: 2em;
        margin-top: 1em;
    }

    .skills {
        margin-top: -5em;
        margin-bottom: -7em;
        padding-top: 7em;
    }

    .skills-container ul {
        display: grid;
        grid-template-columns: repeat(3, auto);
        grid-gap: 1em;
    }

    .portfolio {
        padding-top: 7em;
    }
    .portfolio-container img {
        margin-left: 2em;
    }
}

@media only screen and (min-width: 1050px) {
    .hero {
        height: 90vh;
    }

    .nav-container {
        display: grid;
        grid-template-columns: 66% auto;
        background: unset;

        header {
            background: #6700ee;
        }
    }
    header {
        padding: 2em 2em 2em 4em;
    }
    .social-header {
        padding: 2em 4em 2em 0;
    }
    section {
        padding: 4em;
    }

    .social-header {
        display: block;
        ul {
            display: flex;
            justify-content: space-around;
            width: 7em;
            float: right;

            img {
                width: 20px;
            }
        }
    }

    .hero {
        display: grid;
        grid-template-columns: 66% auto;
        background: unset;
        padding: 0;

        .content {
            background: #6e00ff;
            padding: 6em 8em 8em 4em;
            text-align: left;

            h1 {
                font-size: 3em;
                line-height: 1.2em;
            }
        }
    }
    .meet {
        margin: unset;
    }
    .hero-design {
        display: unset;
        margin-left: -50%;
        margin-top: 15%;
        width: 100%;
    }

    .portfolio img {
        float: right;
        max-width: 500px;
    }
}

@media only screen and (min-width: 1250px) {
    header {
        padding: 2em 2em 2em 10em;
    }
    .social-header {
        padding: 2em 10em 2em 0;
    }
    section {
        padding: 10em 10em 4em 10em;
    }
    .hero .content {
        padding: 6em 8em 6em 10em;
    }
}

@media only screen and (min-width: 1550px) {
    header {
        padding: 2em 2em 2em 20em;
    }
    .social-header {
        padding: 2em 20em 2em 0;
    }
    section {
        padding: 20em 10em 4em 20em;
    }
    .hero .content {
        padding: 6em 8em 6em 20em;
    }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My portfolio</title>
    <link rel="stylesheet" href="/css/main.css">
  </head>
  <body>
    <div class="nav-container">
      <header>
        <a href="index.html" class="logo">Isaiah Johnson</a>
        <nav>
          <ul>
            <li><a href="">My Work</a></li>
            <li><a href="">My Skills</a></li>
            <li><a href="">Hire Me</a></li>
          </ul>
        </nav>
      </header>

      <div class="social-header">
        <!-- MAKE SURE IMAGES ARE VISIBLE -->
        <ul>
          <li><a href=""><img src"images/dribble.png" alt="dribble"/></a></li>
          <li><a href=""><img src"images/github.png" alt="github"/></a></li>
          <li><a href=""><img src"C:\Users\dparr\OneDrive\Desktop\Web Dev\My Portfolio\images\facebook.png" alt="facebook"/></a></li>
        </ul>
      </div>
    </div>
    <div class="hero">
      <div class="content">
        <h1>YOUR FAVORITE WEB DESIGNER<br /> YOU HAVENT HIRED <br />YET</h1>
        <div class="meet">
          <span>👇</span>
          <p>Meet Isaiah Johnson</p>
        </div>
        <svg class="scroll" width="36" height="76" viewBox="0 0 36 76">
          <g id="scroll" transform="translate(-186 -482)">
            <g id="Rectangle_3" data-name="Rectangle 3" transform="translate(186 482)" fill="none" stroke="#fff" stroke-width="6">
              <path d="M17.333,0H18A18,18,0,0,1,36,18V58A18,18,0,0,1,18,76h0A18,18,0,0,1,0,58V17.333A17.333,17.333,0,0,1,17.333,0Z" stroke="none"/>
              <path d="M17.375,3H18A15,15,0,0,1,33,18V58A15,15,0,0,1,18,73h0A15,15,0,0,1,3,58V17.375A14.375,14.375,0,0,1,17.375,3Z" fill="none"/>
            </g>
            <g id="Rectangle_4" data-name="Rectangle 4" transform="translate(197 494)" fill="#fff" stroke="#707070" stroke-width="1">
              <rect width="15" height="17" rx="7.5" stroke="none"/>
              <rect x="0.5" y="0.5" width="14" height="16" rx="7" fill="none"/>
            </g>
          </g>
        </svg>
      </div>

      <svg xmlns="http://www.w3.org/2000/svg" width="520" height="520" viewBox="0 0 520 520">
        <g id="hero-image" transform="translate(-1006 -161)">
          <rect id="Rectangle_5" data-name="Rectangle 5" width="130" height="130" rx="19" transform="translate(1266 161)" fill="#6e00ff"/>
          <rect id="Rectangle_10" data-name="Rectangle 10" width="130" height="130" rx="19" transform="translate(1266 421)" fill="#6e00ff"/>
          <rect id="Rectangle_7" data-name="Rectangle 7" width="130" height="130" rx="19" transform="translate(1396 291)" fill="#6e00ff" opacity="0.39"/>
          <rect id="Rectangle_6" data-name="Rectangle 6" width="130" height="130" rx="19" transform="translate(1136 291)" fill="#fff"/>
          <rect id="Rectangle_9" data-name="Rectangle 9" width="130" height="130" rx="19" transform="translate(1136 551)" fill="#fff"/>
          <rect id="Rectangle_8" data-name="Rectangle 8" width="130" height="130" rx="19" transform="translate(1006 421)" fill="#fff" opacity="0.27"/>
          <circle id="Ellipse_1" data-name="Ellipse 1" cx="64.5" cy="64.5" r="64.5" transform="translate(1266 291)" fill="#ff64cb"/>
          <circle id="Ellipse_2" data-name="Ellipse 2" cx="64.5" cy="64.5" r="64.5" transform="translate(1136 422)" fill="#00f7ff"/>
        </g>
      </svg>
    </div>

    <!-- FEATURED PROJECT -->
    <section class="featured">
      <div class="left">
        <div class="inner transition2">
          <p class="subtitle">Featured Project</p>
          <a href="" class="featured-title">DesignCourse.com ReDesign</a>
          <p class="featured-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
      <img class="right transition2" src="images/designcourse.jpg" alt="Seductivebox">
    </section>

<!-- SKILLS SECTION-->
  <!-- UX DESIGN -->
    <section class="skills">
      <div class="skills-container">
        <ul>
          <li class="transition2">
            <div class="icon-container one">
              <img src="images/icons8-pointer-50.png" alt="UI/UX Icon">
            </div>
            <p class="skill-title">UI UX Design</p>
            <p class="featured-desc skill-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </li>
  <!-- FRONTEND DEVELOPMENT -->
          <li class="transition2">
            <div class="icon-container two">
              <img src="images/frontend.svg" alt="frontend">
            </div>
            <p class="skill-title">Frontend Development</p>
            <p class="featured-desc skill-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </li>
  <!-- IDENTITY DESIGN -->
          <li class="transition2">
            <div class="icon-container three">
              <img src="images/identity.svg" alt="identity">
            </div>
            <p class="skill-title">Identity Design</p>
            <p class="featured-desc skill-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </li>
        </ul>

      </div>
    </section>


<!-- PORTFOLIO SECTION -->
  <!-- FIRST PROJECT -->
    <section class="portfolio">
      <div class="portfolio-container transition3">
        <div class="portfolio-left">
          <div class="inner">
            <p class="subtitle">Lingerie Subscription Box</p>
            <p class="featured-title">Seductivebox</p>
            <p class="featured-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, nam!</p>
          </div>
        </div>
        <a href=""><img src="images/seductivebox.jpg" alt="seductivebox"> </a>
      </div>

  <!-- SECOND PROJECT   -->
      <div class="portfolio-container transition3">
        <div class="portfolio-left">
          <div class="inner">
            <p class="subtitle">Dog Dating App</p>
            <p class="featured-title">Tindog</p>
            <p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, velit.</p>
          </div>
        </div>
        <a href=""><img src="images/seductivebox.jpg" alt="seductivebox"> </a>
      </div>

  <!-- THIRD PROJECT -->
      <div class="portfolio-container transition3">
        <div class="portfolio-left">
          <div class="inner">
            <p class="subtitle">Vanilla Coding</p>
            <p class="featured-title">Virtual Keyboard</p>
            <p class="featured-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, soluta!</p>
          </div>
        </div>
        <a href=""><img src="images/seductivebox.jpg" alt="seductivebox"> </a>
      </div>

    </section>

  </body>
</html>

Answer 1

You're missing an = sign in your src of the image.

<img src="images/dribble.png" alt="dribble"/>

insead of

<img src"images/dribble.png" alt="dribble"/>