Great video. One question, though.

Question

This video is great. I enjoyed it very much. But I have one question. I hope not to mess up and look more stupid than I feel.

I understand the labels are connected to the inputs via ids (obviously). But how are the sections linked to either the inputs or the labels?

In my case, once the labels are clicked, they show a blue box around the hidden radio button (or that's what I suppose), and no image is shown. I assume this happens due to a disconnection between the labels and the images...

I changed the code a little bit to create a recipe page, and I included absolute links to images I found in google. Just as practice.

I wrote the code Brackets, but I'll copy and paste it below. Would appreciate some help.

Trank you!

HTML

<!DOCTYPE html>

<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Recipes</title> <link rel="stylesheet" href="css/horizontal.css">

</head>

<body>

<div class="wrap"> <header> <label for="recipe-1-trigger">Recipe one</label> <label for="recipe-2-trigger">Recipe two</label> <label for="recipe-3-trigger">Recipe three</label> <label for="recipe-4-trigger">Recipe four</label> <label for="recipe-5-trigger">Recipe five</label> </header>

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

<input id="recipe-2-trigger" type="radio" name="slides">
<section class="slide recipe-two">
  <h1>Recipe 2 title</h1>
</section>

<input id="recipe-3-trigger" type="radio" name="slides">
<section class="slide recipe-three">
  <h1>Recipe 3 title</h1>
</section>

<input id="recipe-4-trigger" type="radio" name="slides">
<section class="slide recipe-four">
  <h1>Recipe 4 title</h1>
</section>

<input id="recipe-5-trigger" type="radio" name="slides">
<section class="slide recipe-five">
  <h1>Recipe 5 title</h1>
</section>

</div>

</body>

</html>

CSS

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

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

header { background: #3E474F; box-shadow: 0 .5em 1em #111; position: absolute; top: 0; left: 0; z-index: 900; width: 100%; }

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

header label:hover { background: #2e353b; }

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

.recipe-one { background-image: url(http://stilsbeztabu.lv/wp-content/uploads/img_2670.jpg); }

.recipe-two { background-image: url(http://img.sndimg.com/food/image/upload/h_465,w_620,c_fit/v1/img/recipes/18/76/01/3u9eLk7QQqSRztyh0pA2_zucchini-noodles-pesto-tomatoes-0004.jpg); }

.recipe-three { background-image: url(http://assets.epicurious.com/photos/560ac8f962fa7a9917c27e76/master/pass/51191410_hires.jpg); }

.recipe-four { background-image: url(http://noblepig.com/images/2016/06/Avocado-and-Three-Bean-Salad-is-perfect-for-a-summertime-barbecue-side-dish.JPG); }

.recipe-five { background-image: url(http://www.lifeofgoodness.com.au/wp-content/uploads/2015/07/cake-22.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; }

Welcome to the Treehouse Community

Looking to learn something new?

Nela Kay

Nela Kay

Great video. One question, though.