title: Making a slideshow with navigation without javascript
body: <p>I need help figuring out what in the code is going wrong. You can see it below. I tried following style guides on here, and nothing seemed to work. Please help, as this is for class. I have to use visual studio code as my html/css builder. I cannot upload my CSS because it keeps recognizing it as invalid code, but here is what I have:</p>
  <p>html:</p>
  <pre><code>&lt;div class=&quot;slidershow middle&quot;&gt;
  
  &lt;div class=&quot;slides&quot;&gt;
  &lt;input type=&quot;radio&quot; name=&quot;r&quot; id=&quot;rl&quot; checked&gt;
  &lt;input type=&quot;radio&quot; name=&quot;r&quot; id=&quot;r2&quot;&gt;
  &lt;input type=&quot;radio&quot; name=&quot;r&quot; id=&quot;r3&quot;&gt;
  &lt;input type=&quot;radio&quot; name=&quot;r&quot; id=&quot;r4&quot;&gt;
  &lt;input type=&quot;radio&quot; name=&quot;r&quot; id=&quot;r5&quot;&gt;
  &lt;div class=&quot;slide s1&quot;&gt;
  &lt;img src=&quot;images/Making_Pasta.jpg&quot; alt=&quot;Making_Pasta&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;slide&quot;&gt;
  &lt;img src=&quot;images/noodles.jpg&quot; alt=&quot;noodles&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;slide&quot;&gt;
  &lt;img src=&quot;images/pasta.jpg&quot; alt=&quot;pasta&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;slide&quot;&gt;
  &lt;img src=&quot;images/pesto.jpg&quot; alt=&quot;pesto&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;slide&quot;&gt;
  &lt;img src=&quot;images/flatbread.jpg&quot; alt=&quot;flatbread&quot;&gt;
  &lt;/div&gt;
  &lt;/div&gt;
          
  &lt;div class=&quot;navigation&quot;&gt;
  &lt;label for=&quot;r1&quot; class=&quot;bar&quot;&gt;&lt;/label&gt;
  &lt;label for=&quot;r2&quot; class=&quot;bar&quot;&gt;&lt;/label&gt;
  &lt;label for=&quot;r3&quot; class=&quot;bar&quot;&gt;&lt;/label&gt;
  &lt;label for=&quot;r4&quot; class=&quot;bar&quot;&gt;&lt;/label&gt;
  &lt;label for=&quot;r5&quot; class=&quot;bar&quot;&gt;&lt;/label&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>