Slider not working, even after same horizontal.css used. But I have different index.html and style.css

Question

/* Style.css */

/*************************** Body ****************************/

body { font-family:'Lato', open-sans; margin: 0 0; padding: 0 0; background-color: #fff; }

img { max-width: 100%; }

section { margin: 0 0 85px; padding: 0; }

a { text-decoration: none; }

nav ul { list-style: none; }

/*************************** Header ****************************/

header { background-color: #3ef; width: 100%; margin: 0 0; padding: 10px 0 10px 0; }

header h1 { margin: 10px 0 10px 70px; }

.logo { float: left; padding: 5px 0 0 10px; }

header img { border-radius: 50%; }

/*************************** Navigation ****************************/

nav { background-color: #9ff; text-align: center; margin: -10px 0 0 0; }

nav li { display: inline-block; margin: 0 0; padding: 15px 5px; font-weight: 600; }

nav a { padding: 10px 10px; }

/*************************** Section ****************************/

shop_name {

font-size: 2em; font-weight: 700; color: #111; }

partners {

width: 90%; margin: 5%; background-color: #ffeb94; }

partners h2 {

text-align: center; width: 100%; color: #fff; background-color: #f453fe; }

.listed_partners { margin: 5%; width: 100px; height: 100px; border: 0.2em solid #fc3;

}

/*************************** Footer ****************************/

footer { text-align: center; clear: both; font-size: 0.8em; color: #ccc; padding: 10px; background-color: #3ef; margin: 0 0 5px; color: #fff; }

/* footer p { background-color: #fff; } */

.social_icon { height: 20px; width: 20px; padding: 0 5px; border-radius: 50%;

}

/*************************** Random ****************************/

/* anchor */

nav a.selected, nav a:hover { color: #ff9900; }

nav a:hover { text-decoration: underline;

}

/*************************** Product Page ****************************/

products {

margin: 0; padding: 0; list-style: none; }

products li {

float: left; font-size: 0.8em; background-color: #f8f8f8; width: 45%; margin: 2.5%; }

products p {

text-align: center; }

/**************************** Horizontal.css*************/

html, body { height: 100%; width: 100%; margin: 0; padding: 0; background-color: orange; }

.wrap { height: 100%; width: 100%; position: relative; text-align: center; overflow: hidden; background-color: #120103; color: #fff; }

.wrap header { background: #3e474f; box-shadow: 0 0.5em 1em #111; position: absolute; opacity: 0.4; top: 0; left: 0; z-index: 900; width: 100%; }

.wrap header label { color: #fff; cursor: pointer; display: inline-block; line-height: 4.25em; font-size: 0.667em; font-weight: bold; padding: 0 1em; }

.wrap header label:hover { color: #3fe; }

.slide { height: 100%; width: 100%; position: center; top: 0; left: 100%; z-index: 10; padding: 8em 1em 0; background-color: #1fddf3; background-position: 50% 50%; background-size: cover; transition: left 0 .75s; }

.slide-one {background-image: url('../img/bathroom-1.jpg');}

.slide-two {background-image: url('../img/bathroom.jpg');}

.slide-three {background-image: url('../img/bath-3.jpg');}

.slide-four {background-image: url('../img/IMG_2137.JPG');}

.slide-five {background-image: url('../img/rak-logo.jpg');}

[idˆ="slide"]:checked + .slide { left: 0; z-index: 100; transition: left .65s ease-out; }

.slide h1 { opacity: 0; transform: translateY(100%); transition: transform .5s .5s, opacity .5s; }

[idˆ="slide"]:checked + .slide h1 { opacity: 1; transform: translateY(0); transition: all .5s .5s; }

/******************html page *****************/

<! Doctype html> <html> <head> <meta charset="utf-8"> <title>Senaan|Best Tiles, Bathroom Fitting, Modular Kitchen </title> <link rel="stylesheet" href="css/normalise.css"> <link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,700,900|Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/horizontal.css"> <meta name="viewport" content="width:device-width, initial-scale:1.0"> </head>

<body>

<div class="wrap">

  <header>
    <label for="slide-1-trigger">Slide One</label>
    <label for="slide-2-trigger">Slide Two</label>
    <label for="slide-3-trigger">Slide Three</label>
    <label for="slide-4-trigger">Slide Four</label>
    <label for="slide-5-trigger">Slide Five</label>
  </header>

  <input id="slide-1-trigger" type="radio" name="slides" checked>
    <section class="slide slide-one">
      <h1>Heading One</h1>
    </section>

  <input id="slide-2-trigger" type="radio" name="slides">
    <section class="slide slide-two">
      <h1>Heading Two</h1>
    </section>

  <input id="slide-3-trigger" type="radio" name="slides">
    <section class="slide slide-three">
      <h1>Heading Three</h1>
    </section>

  <input id="slide-4-trigger" type="radio" name="slides"> 
    <section class="slide slide-four">
      <h1>Heading Four</h1>
    </section>

  <input id="slide-5-trigger" type="radio" name="slides">
    <section class="slide slide-five">
      <h1>Heading Five</h1>
    </section>

</div>

<!-- <footer> <a href="https://www.facebook.com/"><img src="img/facebook-wrap.png"></a> <a href="https://www.twitter.com/"><img src="img/twitter-wrap.png"></a>

</footer>

--> </body> </html>

Welcome to the Treehouse Community

Looking to learn something new?

Nikhil Khandelwal