CSS - menu i jego tło.

0

Witam mam pewien problem i nie wiem jak z nim sobie poradzić. ( nie wiem gdzie leży problem )
index.html

<!doctype html>
<html lang="en">
 <head>
  <title>Pure CSS Horizontal Slide</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/horizontal.css"/>
  
  </head>
  <body>
  
  
  <div class="wrap">
    <header>
        <label for="slide-1-trigger">Home</label>
        <label for="slide-2-trigger">Images</label>
        <label for="slide-3-trigger">About this Site</label>
        <label for="slide-4-trigger">Tutorial</label>
    </header>

    <input id="slide-1-trigger" type="radio" name="slides" checked>
    <section class="slide slide-one">
        <h1>Pure CSS Slider</h1>
    </section>
    <input id="slide-2-trigger" type="radio" name="slides">
    <section class="slide slide-two">
        <h1>Pictures</h1>
    </section>
    <input id="slide-3-trigger" type="radio" name="slides">
    <section class="slide slide-three">
        <h1>About Us</h1>
    </section>
    <input id="slide-4-trigger" type="radio" name="slides">
    <section class="slide slide-four">
        <h1>Watch it!</h1>
    </section>

</div>
  
  </body>
  
  </html>

horizontal.css

@import url(http://fonts.googleapis.com/css?family=Audiowide);
//mixins
@mixin bp($bp, $min-max: min-width) {
    $em: $bp/16;
    @media(#{$min-max}: #{$em}em) {
        @content;
    }
}

html {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 16px; 
    font-weight: normal;
    line-height: 1.4;
}

*,
*:before,
*:after  { box-sizing: inherit; }

h1 { 
    color: rgb(255, 255, 255);
    font-family: "Audiowide", cursive;
    font-size: 4em;
    font-size: 7vw;
    line-height: 2.3;
    margin: 0.5em 0 3em;
    text-shadow: 1px 1px 1px #333;
}

@include bp(1075) { h1 { font-size: 4em; } }

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrap {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.38);
    color: #ffffff;
    text-align: center;
}

header {
    background: #626262;
    box-shadow: 0 .5em 1em #ffffff;
	font-family: "Audiowide", cursive;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    
    label {
        color: #ffffff;
        cursor: pointer;
        display: inline-block;
        line-height: 4.25em;
        font-size: .75em;
        font-weight: bold;
        padding: 0 1em;
    }
}

header label:hover {
    background: rgba(42, 42, 42, 0.76);
}

.slide {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 100;
    padding:  8em 1em 0;
    background-color: rgb(0, 0, 0);
    background-position: 50% 50%;
    background-size: cover;
    transition: left 0s .75s;        
    
    &-one { background-image: url('../img/starryFarm.jpg'); }

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

    &-three { background-image: url('../img/campusDarkDays.jpg'); }

    &-four { background-image: url('../img/autumn.jpg'); }
    
    h1 {
        opacity: 0;
        transform: translateY(100%);
        transition: transform .7s .7s, opacity .7s;
    }
}

[id^="slide"]:checked + .slide {
    left: 0;
    z-index: 100;
    transition: left .65s ease-out;
    
    & h1 {
        opacity: 1;
        transform: translateY(0);
        transition: all .7s .7s;
    }
}

Efekt który chce osiągnąć.
http://codepen.io/davidicus/pen/pvObpV
Mam problem ponieważ tło się nie chce u mnie pojawiać, proszę o pomoc.

0

Refresh.

1

Jak widać w index.html:

 <link rel="stylesheet" href="css/horizontal.css"/>

To chyba too..

Ach, no i tutaj problem. To co Ty masz to nie jest CSS, tylko Sass - nie możesz go tak sobie includować.

0

Więc jakie jest rozwiązanie ? Jak mam to dołączyć ?

0

Poczytaj co to Sass, zobacz jak się to obsługuje... i najważniejsze - nie działaj na pałę ;)

0
Patryk27 napisał(a):

Poczytaj co to Sass, zobacz jak się to obsługuje... i najważniejsze - nie działaj na pałę ;)

Postaram się coś zdziałać, dziękuje za pomoc, jak mi się nie uda będę pisał.

1 użytkowników online, w tym zalogowanych: 0, gości: 1