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 >
<header>
<a href="index.html" >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 >
<!-- 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 >
<div >
<h1>YOUR FAVORITE WEB DESIGNER<br /> YOU HAVENT HIRED <br />YET</h1>
<div >
<span>