i'm working on making a captive portal login page during my internship but for some reason the html isnt showing up like it should be the logo is not displaying over the slideshow like i designed it in html. i'm not sure weither this has something to do with the conversion to php. i've never realy worked with php. i know i should upload the images localy on the server but this is just for test purposes till it gets approved and decided what images to use. below is the html code that i have for the page. i've also included screen shots both of the html page in normale browser and as the login page on clearpass. any help would be greatly appreciated.
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
</style>
<body style="background-color: black">
<div class="w3-content w3-section" style="max-width:900px; position: relative" >
<div class="car" style="z-index: -99">
<img class="mySlides" src="http://www.pxl.be/assets/website/in_beeld/20180112_nieuwjaarsfeest/pxl-nieuwjaarsfeest-002.jpg" style="width:100%">
<img class="mySlides" src="http://www.pxl.be/assets/website/in_beeld/20180112_nieuwjaarsfeest/pxl-nieuwjaarsfeest-031.jpg" style="width:100%">
<img class="mySlides" src="http://www.pxl.be/assets/website/in_beeld/20180112_nieuwjaarsfeest/pxl-nieuwjaarsfeest-083.jpg" style="width:100%">
<img class="mySlides" src="http://www.pxl.be/assets/website/in_beeld/20180228_openlesdag/PXL067.jpg" style="width:100%">
<img class="mySlides" src="http://www.pxl.be/assets/website/in_beeld/20180228_openlesdag/PXL208.jpg" style="width:100%">
<img class="mySlides" src="http://www.pxl.be/assets/website/in_beeld/20170915_opening_restaurant_diepenbeek/PXL0079.jpg" style="width:100%">
<img class="mySlides" src="http://www.pxl.be/assets/website/in_beeld/20170915_opening_restaurant_diepenbeek/PXL0003.jpg" style="width:100%">
<img class="mySlides" src="http://www.pxl.be/assets/website/in_beeld/20170915_opening_restaurant_diepenbeek/PXL0316.jpg" style="width:100%">
<img class="mySlides" src="http://www.pxl.be/assets/website/in_beeld/20170420_management_assistant_day/PXL008.jpg" style="width:100%">
<img class="mySlides" src="http://www.pxl.be/assets/website/in_beeld/20170420_management_assistant_day/PXL012.jpg" style="width:100%">
<img class="mySlides" src="http://www.pxl.be/assets/website/in_beeld/20170503_openlesdag/PXL%20002.jpg" style="width:100%">
<img class="mySlides" src="http://www.pxl.be/assets/website/in_beeld/20170503_openlesdag/PXL%20109.jpg" style="width:100%">
</div>
<div id="logo" style="vertical-align:middle; text-align:center"><img src="http://www.pxl.be/Assets/website/pxl_algemeen/afbeeldingen/grotere_versie/1314_logo_pxl_bol.png" style="width:30%; position: absolute; left: 35%; right: 35%; top: 65" ></div>
</div>
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 5000); // Change image every 2 seconds
}
</script>