SLIDER HTML Wireframe

Header


This is the main section

Japanese Singer
Figure 1. - Ms Kyoto.

Awesome Show by Ms Kyoto and Fred Bloggs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Great Australian Bight
Figure 2. - Great Australian Bight.

Great Australian Bight

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Article 3

Article 4

JS // JavaScript Document var slideIndex = 0; function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 1000); // Change image every 5 seconds } CSS /* CSS Document */ * { margin: 0; padding: 0; font-family:Verdana, Geneva, sans-serif; } header{ width:100%; height:125px; background-color:#999; } nav{ width:80%; height:30px; float: right; background-color:#ccc; } div#sliderContainer{ clear:both; width:100%; max-height:400px; min-height:400px; background-image:url(../images/slider/20180128_145046.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; z-index:0; } .enableBlur{ filter: blur(3px); } .disableBlur { filter: blur(0); } div#slider{ margin: -400px auto 0 auto; width:800px; max-height:400px; min-height:400px; overflow:hidden; z-index:1; } main{ width:100%; display:flex; } section{ margin-right:20px; flex: 1 1 auto; background-color: white; width:100%; /*height:500px; will be removed*/ } aside{ background-color:#CCC; height:500px; /*will be removed*/ width: 320px; flex: 0 0 auto; } footer{ width:100%; height:300px; /* will be removed*/ background-color:black; color:white; } section h2{ margin:20px 0 20px 30px; } article{ width:100%; min-height:240px; margin: 10px; /*background-color:#ccc;*/ border:thin #E9E9E9 solid; border-radius: 10px; } article h3{ display: block; padding: 20px 0 20px 15px; } article time, article p{ margin: 20px 20px 15px 15px; } article time{ background:url(../images/bullet.png) no-repeat; padding-left:30px; } article p{ text-align:justify; line-height: 166%; } article figure{ float:right; top: 0; right:0; margin: 10px 10px 10px 20px; } article figure img.responsive { width: 300px; height: auto; } article figure img.zoom{ opacity:1; transition: all 0.25s ease-in-out; } article figure img.zoom:hover{ opacity: 0.2; } aside img.responsive{ width: 100%; height: auto; } #slider div.mySlides{ width: 100%; } #slider div img.mySliderWidth{ width: 100%; } CHeat HTML