We Keep Coding

Show nested button above overlay

I have an HTML page where I need to make a deeply nested element appear above a neighboring ancestor.
Here is an example JSFiddle: https://jsfiddle.net/nLa607g5/1/
This HTML structure can’t be changed. Using CSS (preferably) or JavaScript, is there any way I can make the red button appear on top of the overlay, but the blue portion appear behind the overlay?
The following are the two main classes that deal with the overlay and button:
.overlay {
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2px);
border-radius: 5px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#cntrl {
float: left;
}
.modal {
overflow: auto;
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
}
.dialog {
background: blue;
width: 100px;
height: 100px;
display: block;
}
.btn {
margin-top: 20px;
position: relative;
background: red;
}
<div class="overlay"></div>
<div id="app">
<div id="cntrl">
<div>
<div>
<div class="modal">
<div class="dialog">
<span>should appear behind overlay</span>
<div class="content">
<div class="footer">
<button class="btn">
Should appear on top of overlay
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Impossible with CSS and no HTML. JavaScript is the only option. Basically, you append the overlay to the footer and the button to the overlay -- exactly what you'd do with HTML.
const overlay = document.querySelector('.overlay');
const footer = document.querySelector('.footer');
const button = document.querySelector('.btn');
footer.append(overlay);
overlay.append(button);
.overlay {
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2px);
border-radius: 5px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#cntrl {
float: left;
}
.modal {
overflow: auto;
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
}
.dialog {
background: blue;
width: 100px;
height: 100px;
display: block;
}
.btn {
margin-top: 20px;
position: relative;
background: red;
}
<div class="overlay"></div>
<div id="app">
<div id="cntrl">
<div>
<div>
<div class="modal">
<div class="dialog">
<span>should appear behind overlay</span>
<div class="content">
<div class="footer">
<button class="btn">
Should appear on top of overlay
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Output Percentage with accordion in each of every multi-step forms once submitted

I am really new in web development. So I really need some guides, tips and tricks on how to do coding. So here's the details...
After I fill up my Yes and No checkboxes forms on each steps of a multi form steps, I want to have a grade on each steps. for example Leadership Development has a 12 Yes and 8 No and the system will calculate it's percentage from
(This is the pie chart) & (This is the accordion)
0 to 49% Your leadership skills will need to be improved for your business to at least
survive.
50% to 70% You have middling leadership skills that could probably be sufficient for your
business to survive.
70% to 100% You have very good leadership skills to help your organization grow.
How to show it's pie chart with percentage inside of it and beside the pie is an accordion which will also give details from the ratings.
Please I really need help on this one.
Here's the progress bar I made for an example
<style>
#output .accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
font-size: 35px;
margin-top: 152px;
}
#output .active, .accordion:hover {
background-color: #ccc;
}
#output .panel {
padding: 0 18px;
background-color: #abaaaa;
max-height: 0;
color: black;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#output .accordion:after {
content: '\002B';
color: #d02a3e;
font-weight: bold;
float: right;
margin-left: 5px;
}
#output .active:after {
content: "\2212";
}
.progress-pie-chart {
width: 128px;
height: 128px;
border-radius: 50%;
background-color: #ececec;
position: relative;
}
.progress-pie-chart.gt-50 {
background-color: orange;
}
.progress-pie-chart.red .ppc-progress-fill {
background: red;
}
.progress-pie-chart.red span {
color: red;
}
.progress-pie-chart.orange .ppc-progress-fill {
background: orange;
}
.progress-pie-chart.orange span {
color: orange;
}
.progress-pie-chart.green.gt-50,
.progress-pie-chart.green .ppc-progress-fill {
background: green;
}
.progress-pie-chart.green span {
color: green;
}
.ppc-progress {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 128px, 128px, 64px);
}
.ppc-progress .ppc-progress-fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 64px, 128px, 0);
transform: rotate(60deg);
}
.gt-50 .ppc-progress {
clip: rect(0, 64px, 128px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
clip: rect(0, 128px, 128px, 64px);
background: #E5E5E5;
}
.ppc-percents {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 111.30435px/2);
top: calc(50% - 111.30435px/2);
width: 111.30435px;
height: 111.30435px;
background: #fff;
text-align: center;
display: table;
}
.ppc-percents span {
display: block;
font-size: 18px;
}
.ppc-percents span cite {
font-size: 35px;
}
.pcc-percents-wrapper {
display: table-cell;
vertical-align: middle;
}
.progress-pie-chart {
margin: 0 auto 0;
margin-top: 115px;
}
</style>
<div class="row">
<div class="col-lg-6">
<div class="progress-pie-chart" data-percent="24">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
<div class="progress-pie-chart" data-percent="60">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
<div class="progress-pie-chart" data-percent="95">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
</div>
<div class="col-lg-6 pt-4 pt-lg-0 align-items-stretch">
<button class="accordion">Leadership Development System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Marketing System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Financial System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>

How do I make a header element's width goes to left slowly

I have a hamburger side menu and header element and when I click that hamburger menu I want the header to be displayed initial and the header's width grows slowly to left how do I do that.
header {
width: 0px;
background-color: black;
padding-bottom: 10px;
display: none;
position: absolute;
}
.hamburger {
width: 20px;
background-color: black;
margin: 3px;
height: 3px;
top: 22px;
left: 100px;
}
<header>.</header>
<div id="main">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>

You can use css transition to animate when header width goes from 0 to 100%
document.getElementById('main').onclick = function() {
document.getElementById('header').classList.add('show');
}
html,
body {
padding: 0;
margin: 0;
}
header {
width: 0px;
background-color: black;
position: absolute;
transition: all 0.5s;
overflow: hidden;
}
header.show {
width: 100%;
}
.hamburger {
width: 20px;
background-color: black;
margin: 3px;
height: 3px;
top: 22px;
left: 100px;
}
<header id="header">
<div style="padding: 1em;">
header
</div>
</header>
<div id="main">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>

Target This and Class not working as expected

For some reason, as you can see in my pen, when I hover over a learn more button it adds the details class to all the cards.
I've tried with no luck :
$(this).find('element')
And :
('', this)
//slick slider
$('.responsive').slick({
dots: true,
prevArrow: $('.prev'),
nextArrow: $('.next'),
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
//tilt
$('.tilt-card').tilt({
perspective: 1000,
})
//show details
$(".faction-more-btn").hover(
function() {
$('.description-overlay').addClass('desc-hover');
},
function() {
$(".description-overlay").removeClass('desc-hover');
}
);
$(document).ready(function() {
$('button').hover(function() {
$(this).text('Read More');
}, function() {
$(this).text('Learn More');
});
});
//scroll text
$(document).ready(function() {
var count;
var interval;
$(".faction-more-btn").on('mouseover', function() {
var div = $('.description-container');
interval = setInterval(function() {
count = count || 1;
var pos = div.scrollTop();
div.scrollTop(pos + count);
}, 100);
}).click(function() {
if (count < 6) {
count = count + 1;
}
}).on('mouseout', function() {
// reset the speed on out
count = 0;
clearInterval(interval);
$(".description-container").scrollTop(0);
});
});
* {
font-family: 'Exo', sans-serif;
}
body {
background: url("https://mankindreborn.com/wp-content/uploads/2018/04/newBG.jpg");
background-size: cover;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
padding-top: 100px;
}
img {
width: 100%;
height: 400px;
padding: 5px;
}
h2 {
text-align: center;
padding-bottom: 1em;
}
.slick-dots {
text-align: center;
margin: 0 0 10px 0;
padding: 0;
li {
display: inline-block;
margin-left: 4px;
margin-right: 4px;
&.slick-active {
button {
background-color: black;
}
}
button {
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: #999;
border: none;
width: 15px;
height: 15px;
border-radius: 50%;
}
:hover {
background-color: black;
}
}
}
/* Custom Arrow */
.prev {
color: #999;
position: absolute;
top: 38%;
left: -2em;
font-size: 1.5em;
:hover {
cursor: pointer;
color: black;
}
}
.next {
color: #999;
position: absolute;
top: 38%;
right: -2em;
font-size: 1.5em;
:hover {
cursor: pointer;
color: black;
}
}
#media screen and (max-width: 800px) {
.next {
display: none !important;
}
}
/* the slides */
.slick-slide {
margin: 0 10px;
}
/* the parent */
.slick-list {
margin: 0 -10px;
}
.slide {
position: relative;
}
.tilt-card {
overflow: visible;
transform-style: preserve-3d;
}
.faction-char-img {
width: 85%;
height: auto;
transform: translateZ(30px);
overflow: visible;
}
.faction-char-con {
position: absolute;
bottom: 0px;
}
.faction-logo-con {
position: absolute;
top: 10px;
}
.faction-logo {
width: 70%;
height: auto;
transform: translateZ(20px);
overflow: visible;
float: right;
margin-right: 10px;
}
.nsm-overlay {
position: absolute;
width: 96%;
margin-left: 6px;
top: 4px;
height: 200px;
background: url('https://i.imgur.com/xBr7FM1.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: right;
transform: translateZ(30px);
}
.foe-overlay {
position: absolute;
width: 98%;
margin-left: 3px;
top: 4px;
height: 200px;
background: url('https://i.imgur.com/tyF6AgV.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: right;
transform: translateZ(30px);
}
.faction-more-btn {
position: absolute;
bottom: 20px;
margin-left: 53%;
z-index: 100;
transform: translateZ(50px);
background-color: #212121cc;
border: none;
color: #585858;
padding: 10px 20px 10px;
}
.faction-more-btn:hover {
background-color: #68ddda;
color: #000;
}
.description-overlay {
position: absolute;
width: 97%;
margin-left: 4px;
bottom: 0px;
height: 0%;
background-color: #0e0e0ef5;
z-index: 99;
transform: translateZ(37px);
transition: height 0.5s;
-webkit-transition: height 0.5s;
color: #fff;
padding-left: 25px;
padding-left: 25px;
}
.description-container {
margin-top: 20px;
overflow-y: scroll;
height: 185px;
padding-right: 20px;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
}
.description-container::-webkit-scrollbar {
display: none;
}
.desc-hover {
position: absolute;
width: 97%;
margin-left: 4px;
bottom: 0px;
height: 100%;
background-color: #0e0e0ea6;
z-index: 99;
transform: translateZ(37px);
transition: height 0.5s;
-webkit-transition: height 0.5s;
}
.description-overlay h2 {
text-align: left;
font-size: 20px;
margin-top: 30px;
padding-right: 10px;
}
.faction-type {
color: #68ddda;
margin-top: -25px;
}
.faction-details {
font-size: 10px;
}
.foe-tower {
position: absolute;
top: 0px;
height: 100%;
width: auto;
transform: translateZ(20px);
}
.foe-logo {
margin-right: -8px;
margin-top: -9px;
}
.nsm-img {
width: 70%;
}
.nsm-logo {
margin-top: -10px;
width: 65%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/gijsroge/tilt.js/38991dd7/dest/tilt.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.5/slick.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-12 heroSlider-fixed">
<div class="overlay">
</div>
<!-- Slider -->
<div class="slider responsive">
<div class="tilt-card slide">
<img src="https://i.imgur.com/eHkER1D.jpg">
<div class="nsm-overlay"></div>
<div class="description-overlay">
<h2>NORTH STAR MINING</h2>
<p class="faction-type">MEGACORP</p>
<p class="faction-details"><b>BASED:</b> Upper Copper City, Venus, Sol.</p>
<p class="faction-details"><b>FOUNDED:</b> -</p>
<div class="description-container">
<br><br>
<p>One of the oldest corporations still in existence and one of the Big Three Megacorps, North Star Mining has its origins on pre-space Earth. In 2045, a former mine supervisor for SA Mines named Dawie Copper took advantage of the privatisation
of his former employers and purchased several palladium mines in South Africa. By the start of the Second Space Race in 2075, the Copper Mining Group (CMG), owned almost all of the mines in South Africa and Copper’s son Anton had taken
the reins of the company...</p>
</div>
<p class="learn-more-text"></p>
</div>
<div class="faction-logo-con">
<img class="faction-logo nsm-logo" src="https://i.imgur.com/9GiEkjB.png">
</div>
<button class="faction-more-btn">Learn More</button>
<div class="faction-char-con">
<img class="faction-char-img nsm-img" src="https://i.imgur.com/nOpzEfF.png">
</div>
</div>
<div class="tilt-card slide">
<img src="https://i.imgur.com/urJ0pyz.png">
<img class="foe-tower" src="https://i.imgur.com/jm9Gjvw.png">
<div class="foe-overlay"></div>
<div class="description-overlay">
<h2>FOLLOWERS OF ETERNITY</h2>
<p class="faction-type">ANARCHO-TERRORISTS</p>
<p class="faction-details"><b>BASED:</b> Unknown, speculated near New Terra</p>
<p class="faction-details"><b>FOUNDED:</b> -</p>
<div class="description-container">
<br><br>
<p>The slums of Earth’s Mega-Cities proved to be the perfect breeding ground for fanaticism and dissent. The Followers of Eternity have no grounded history; their origin is fragmented amongst the various slums from where they came. The faction
started life as a quasi-charity group sometime in the early 22nd century seeking to improve the lives of those who lived in the squalled urban centers; they soon realized that real change would only come through anarchy. The 'charity'
organized into street gangs and set up 'education hubs' from which their movement gained a mass following amongst the young, oppressed low entry union workers and the many forgotten who dwell at street level. The group's aim is simple,
resist the Union and their corrupt corporate masters - modeling themselves as 'enlightened anarchists' out to smash the system...</p>
</div>
<p class="learn-more-text"></p>
</div>
<div class="faction-logo-con">
<img class="faction-logo foe-logo" src="https://i.imgur.com/y3gH30H.png">
</div>
<button class="faction-more-btn">Learn More</button>
<div class="faction-char-con">
<img class="faction-char-img" src="https://i.imgur.com/x45t5zh.png">
</div>
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
<div class="tilt-card">
<img src="http://placehold.it/200x150" alt="" />
</div>
</div>
<!-- control arrows -->
<div class="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</div>
<div class="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
Live version on codepen

is this what you are looking for:
$(this).closest('.tilt-card').find('.description-overlay').addClass('desc-hover');
instead of
$('.description-overlay').addClass('desc-hover');
https://codepen.io/anon/pen/zJaPbQ
Your problem is that you are adding class to all elements with css class 'description-overlay', you have to add only to the one inside current tilt-card

Working codepen.
That happens because of the hover part bellow, you're using class selector $('.description-overlay') that will select all the elements with this class and add/remove class desc-hover.
$(".faction-more-btn").hover(
function() {
$('.description-overlay').addClass('desc-hover');
},
function() {
$(".description-overlay").removeClass('desc-hover');
}
);
Should use $(this) to target the related .description-overlay div of every button :
//show details
$(".faction-more-btn").hover(
function() {
$(this).siblings(".description-overlay").addClass('desc-hover');
},
function() {
$(this).siblings(".description-overlay").removeClass('desc-hover');
}
);
NOTE : Both functions you've tried doesn't work since they look inside the current hovered button when the div is a sibling of the button, so you could use siblings() function or the combination of parent()/closest() method and find() like :
$(this).parent().find(".description-overlay");
$(this).closest('.tilt-card').find(".description-overlay");
$(this).siblings(".description-overlay")

can't animate an image slider in jquery

I'm new to javascript/jquery, and I'm building an image slider. I can't seem to get the images to animate. I'm not sure what's wrong here.
What I've been trying to do is to get the active slide then slide the next sibling and animate it, but all I get in result is that the first image animate then it stops.
Here is the code: https://jsfiddle.net/6qntgg5z/
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=" > ">
<input type="button" name="next" id="prev" value=" < ">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
</div>
</div>
CSS
html,body {
height: 100%;
position: relative;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 2em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
top:15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
Javascript
$(document).ready(function(){
setInterval(animateSlider(), 5000);
});
//configuration
var currentSlide=activeSlide();
var slides=$("#carousel .slides .slide");
//get active slide index
function activeSlide(){
var activeSlide=$("#carousel .slides .active").index();
return activeSlide;
}
function animateSlider() {
var $current=slides.eq(activeSlide());
var $next= $(".slides img:first");
$next.addClass('active');
$current.animate({opacity: 0.0}, 1000,
function () {
$current.removeClass('active');
$current.css({opacity: 1.0});
});

try this fiddle (does what you need but has other flaws i think). in your html you used the '<' and '>' characters as your button text, this breaks the flow of the html so you should instead use character codes:
< becomes < and
> becomes > www.w3schools.com/html/html_entities.asp
also your js was missing a closing } and the jsfiddle was missing aa jquery library call (I wish jsfiddle would make it faster to integrate libraries). hope it helps.
$(document).ready(function(){
setInterval(function(){ animateSlider() }, 5000);
});
//configuration
var currentSlide = activeSlide();
var slides = $("#carousel .slides .slide");
//get active slide index
function activeSlide(){
var activeSlide=$("#carousel .slides .active").index();
return activeSlide;
}
function animateSlider() {
//remove active class from previous element and assign it to the current one then animate it using animate() function
var $current=slides.eq(activeSlide());
var $next= $(".slides img:first");
$next.addClass('active');
$current.animate({opacity: 0.0}, 1000, function () {
$current.removeClass('active');
$current.css({opacity: 1});
});
}
html,body {
height: 100%;
position: relative;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 1em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
top:15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="next" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
</div>
</div>