Being new to the world of coding, I recently created a website for a college presentation. However, after uploading the website onto the internet, I noticed that the background images from my files are not displaying on the website. It's likely that I made a rookie mistake somewhere along the way, and any feedback or suggestions would be greatly appreciated as I navigate through this confusion outside my comfort zone. Thank you, Sam.
Here is how my home page should look And here is how my home page currently looks like.
.index-banner {
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: table;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8>
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<title&rt;The Cloververse: A Transmedia Project</title>
</head>
<body>
<!--This is the main content-->
<link rel="stylesheet" href="style.css">
<header>
<a href="index.html" class="header-brand">Cloverfield: A Transmedia Project</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="About%20the%20Project.html">Project</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="Resources.html">Resources</a></li>
</ul>
</nav>
</header>
<main>
<section class="index-banner">
<div class="vertical-centre">
<div class="Index-html">
<h2>Cloverfield:<br>A transmedia Project</h2>
<h1>This website is related to the Cloververse. The cinematic universe regarding the Cloverfield film franchise. This website is part of a project on Transmedia. This serves as a platform for all things related to the Cloverfield film franchise and its surrounding ARG. The website will have videos from and about the ARG, links to resourceful websites and a smaller more in-depth piece on why I have made this website.</h1>
<iframe src="https://giphy.com/embed/bkbh97abxVMKQ" width="1000" height="400" style="0" class="giphy-embed" allowFullScreen></iframe>
</div>
</div>
</section>
</main>
</body>
</html>