<!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;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
