Item: Test_crossedBox
Rating: 3.4
Author: sarlam

0 Downloads
1 Views
Tweet
Download Now View Demo

HTML
CSS

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Test_crossedBox</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

      <div id="last_activity" class="block_view">
        <h1 class="dotted background_blue">Dernières activités proposées</h1>

        <div class="crossed_border">
            <div class="crossed_content">
                <div class="activity">
                    <img src="" alt="poule mouillette front"/>

                    <p>
                        Café Poule Mouillette - Paris 10<br/>
                        19.01.15 - 15h30 à 17h30<br/>
                        <a href="#">Voir les détails</a>
                    </p>
                </div>
            </div>
        </div>
    </div>

        <nav>
          <label for="trigger_menu">trigger<br/></label>
          <input type="checkbox" id="trigger_menu"/>
          <div>
            Accueil Activités
          </div>
            <ul>
                <li>Accueil</li>
                <li>Activités</li>
                <li>Professionnels</li>
                <li>Le blog</li>
                <li>La boutique</li>
                <li>Contact</li>
            </ul>
        </nav>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/sarlam/test_crossedbox-ogWVwb */
* {
  border: 0;
  margin: 0;
  padding: 0;
}
h1 {
  background: orange;
}
.crossed_border {
  border: 0;
  margin: 0;
  padding: 0;
  height: inherit;
}
.crossed_border > .crossed_content {
  background: grey;
  margin: 0 20px;
}
#trigger_menu:checked ~ ul {
  display: block;
  background: purple;
}
#trigger_menu:checked ~ div {
  display: none;
}
#trigger_menu ~ div {
  display: inline-block;
}
#trigger_menu ~ ul {
  display: none;
}

Comments

More from sarlam

Test_crossedBox

In this example below you will see how to do a Test_crossedBox with some HTML / CSS and Javascript

Comments

More from sarlam

A Pen by Paul J.

A Pen by Paul J.

A Pen by Paul J.

A Pen by Paul J.

You Might Also Like

КК 03.04.17

Creative tab designs

A Pen by Bo Bayless

A Pen by Arnaldo Pires

A Pen by Sampurna Gautam

Flexbox

A Pen by zZho0o0oOu

[MBA-3] MBA Template 3 (fix)