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;
}
}
