AWS not showing whole webiste with CloudFront-CodePudding

To keep it short, i setup CloudFront to "fix" my problem that when i went onto my AWS website it showed my Social header but nothing else: AWS Website

but when i tried to use CloudFront: CloudFront Website it still looks the same... when i test my code in VSC it shows me the whole website like its supposed to What its Supposed to look like

I set it up with the tutorial from Amazon, its redirected to the right website yet it still doesnt show... its HTTPS so it isn't that... any suggestions?

<html>
<title>Future Company Design</title>
<head><link rel="shortcut icon" type="image/x-icon" href="file:///C:/Users/LNGM/OneDrive - System Industrie Electronic GmbH/Bilder/favicon.ico" /></head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;height:2000px;}
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
  background-image: url('file:///C:/Users/LNGM/Downloads/website.jpg');
  min-height: 100%;
  background-position: center;
  background-size: cover;
}

.icon-bar {
 position: absolute;
  right: -720;
  top: -50;
}

.icon-bar a {
  display:flex; 
  text-align: left;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar a:hover {
  background-color: rgb(196, 44, 44);
}

.Twitch {
  background: #6441a5;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.instagram {
  background: #125688;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

</style>
<body>

  
<script>
var countDownDate = new Date("Dec 23, 2022 08:00:00").getTime();

var x = setInterval(function() {

  var now = new Date().getTime();

  var distance = countDownDate - now;

  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.getElementById("demo").innerHTML = days   "d "   hours   "h "
    minutes   "m "   seconds   "s ";

  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "Website going Live in only a Couple of Minutes";
  }
}, 1000);

</script>

<div >
  <div >
    <img src="file:///C:/Users/LNGM/Downloads/rsz_logo_small.png">
  </div>
  <div >
    <h1 >Work in Progress</h1>
    <hr  style="margin:auto;width:40%">
    <p id="demo" ></p>    

    <div >
      <a href="https://twitter.com/MaaxyBaxy" target="_blank" ><i ></i></a>
      <a href="https://www.instagram.com/lurinoxii/" target="_blank" ><i ></i></a>
      <a href="https://www.linkedin.com/in/matteo-lang-620881201/" target="_blank" ><i ></i></a>
      <a href="https://Twitch.tv/Lurinoxi" target="_blank" ><i ></i></a>

</body>
</html>

CodePudding user response：

Would propose to use relative path when referencing other static assets in your website. This will prevent broken linkages when you deploy in S3. EG. file:///C:/Users/LNGM/Downloads/website.jpg don't exists in S3, its a reference to a specific path in your PC