I don't get what I am doing wrong

I was trying yesterday to make the testimonial side by side with each other and the mission and vision statements stay at the bottom but I couldn’t get it right and so I left it and now today, I went there and the images are no more showing, I don’t understand why, I need help. The HTML/CSS are below.
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">
    <link rel="stylesheet" href="about.css" type="text/css">
    <title>About</title>
</head>
<body>
    <div class="container">
        <div class="menubar">
            <h2>About us</h3>
            <li>Microsoft</li>
            <li>Programming</li>
            <li>Web Designing</li>
            </div>
        <div class="statements">
            <h4>Our Mission statement</h4>- <p>To raise future developers that will rule the world.</p>       
            <h4>Our Vision statement</h4>- <p>Anyone can become a programmer if you put your mind to it and <br>you work hard.</p>
        </div>  
        <div class="Testimonials">
            <h3>Testimonials</h3>
                <img src="Images/Tst1.JPG">
                <img src="Images/Tst2.JPG">
        </div>
        <div class="social media">
                <a href="#"><i class="fa icons fa-facebook"></i></a>
                <a href="#"><i class="fa icons fa-instagram"></i></a>  
                <a href="#"><i class="fa icons fa-twitter"></i></a>
        </div>
    </div>
</body>
</html>

CSS

*{
    margin: 0;
    padding: o;
    font-family: 'Poppins', sans-serif;
}
.container{
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(0,0,0,0.85)), url(images/Bg1.JPG);
    background-color: aqua;
    background-position: center;
    background-size: cover;
    position: relative;
    box-sizing: border-box;
    padding-right: 5%;
    padding-left: 3%;
}
.menubar{
    width: 100%;
    height:15vh;
    margin: auto;
    display: flex;
    align-items: center;
    border: #ffbd59;
}
h2{
    color: #ffbd59;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 20px;
    margin-top: 10px;
}
nav{
    flex: 1;
    padding-left: 400px;
}
nav ul li{
    display: inline-block;
    list-style: none;
    margin: 0 15px;
}
nav ul li a:hover{
    color:#ffbd59;
}
.statements{
    justify-content: flex-end;
 }
h3{
    color: #ffbd59;
}
p{
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: .1em;
    margin-top: 40px;
}
.btn{
    background: linear-gradient(to right, transparent 50%, #ffbd59 50%);
    background-size: 200% auto;
    background-position: left;
    margin-top: 70px;
    margin-left: 50px;
    padding: 15px 45px;
    text-align: center;
    border: 2px solid #ffbd59;
    outline: none;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 24px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 3px 8px 22px rgba(22,21,21,.15);
   transition: background-position .5s;
}
.btn:hover{
    background-position: right;
    color: #1b1b1b;
}
.slider{
    color: #ffbd59;
    margin-left: 14px;
    box-sizing: border-box;
    animation: slider 6s linear infinite;
}
@keyframes slider{
    0%{
        margin-top: -320px;
    }
    5%{
        margin-top: -160px;
    }
    30%{
        margin-top: -160px;
    }
    35%{
        margin-top: 0px;
    }
    65%{
        margin-top: 0px;
    }
    70%{
        margin-top: 160px;
    }
    100%{
        margin-top: 160px;
    }
}

1 Like

This is the frontend

1 Like

Without knowing the folder structure and file names we can’t really say much. All I can say is to check the paths and file names of the images.

If you use VS Code it should let you auto-complete the paths. So you can delete the path and start typing it in again and let it find the folder/file for you. If you Ctrl + Click the src image path it should also take you to the folder with the image (if the path is correct).

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