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%20-%20System%20Industrie%20Electronic%20GmbH/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 class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-topleft w3-padding-large w3-xlarge">
<img src="file:///C:/Users/LNGM/Downloads/rsz_logo_small.png">
</div>
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">Work in Progress</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
<p id="demo" class="w3-large w3-center"></p>
<div class="icon-bar">
<a href="https://twitter.com/MaaxyBaxy" target="_blank" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="https://www.instagram.com/lurinoxii/" target="_blank" class="instagram"><i class="fa fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/matteo-lang-620881201/" target="_blank" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="https://Twitch.tv/Lurinoxi" target="_blank" class="Twitch"><i class="fa fa-Twitch"></i></a>
</body>
</html>
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