Tweet
<div class="wrapper">
<div class="box box1">
<p><img style="margin: 8px; float: left;" src="images/formations/baptme_FFESSM.jpg" alt="baptme FFESSM" width="266" height="187" />Le premier contact avec la plongée se fait sous forme de baptême. Cette 1ère incursion dans le « monde du silence » peut se réaliser dans une piscine, une fosse, un centre de plongée ou en milieu naturel protégé. Le baptême s’adresse à tous, de 8 à 88 ans… et plus ! Il n’y a pas de prérequis : il suffit d’être en bonne santé. Accompagnés d’un moniteur, vous apprendrez à découvrir les fonds marins en toute sécurité. Un baptême dure normalement entre 20 et 40 minutes et se déroule entre 2 et 6 mètres de fond. Lors de cette première immersion dans le "monde du silence", vous apprendrez également à manier le matériel de base de la plongée en bouteille, composé d’un masque, de palmes, d’une combinaison et d’un gilet de flottabilité, ainsi qu’un détendeur, qui vous permet de respirer l’air contenu dans la bouteille. Respirer sous l'eau devient un jeu d'enfant.</p>
</div>
<div class="box box2">
<div class="tabset">
<!-- Tab 1 -->
<input type="radio" name="tabset" id="tab1" aria-controls="inscription" checked>
<label for="tab1">Inscription</label>
<!-- Tab 2 -->
<input type="radio" name="tabset" id="tab2" aria-controls="inscrit">
<label for="tab2">Inscrit</label>
<!-- Tab 3 -->
<input type="radio" name="tabset" id="tab3" aria-controls="plan d'accès">
<label for="tab3">Plan</label>
<div class="tab-panels">
<section id="inscription" class="tab-panel">
<p><strong>formulaire inscription</strong>
</section>
<section id="inscrit" class="tab-panel">
<p><strong>Liste des inscrits</strong>
</section>
<section id="plan" class="tab-panel">
<p><strong>Plan d'accès</strong>
</section>
</div>
</div>
</div>
</div>
.tabset > label {
position: relative;
display: inline-block;
padding: 15px 15px 25px;
border: 1px solid transparent;
border-bottom: 0;
cursor: pointer;
font-weight: 600;
}
.tabset > label::after {
content: "";
position: absolute;
left: 15px;
bottom: 10px;
width: 22px;
height: 4px;
background: #8d8d8d;
}
.tabset > label:hover,
.tabset > input:focus + label {
color: #06c;
}
.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
background: #06c;
}
.tabset > input:checked + label {
border-color: #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.tab-panel {
padding: 30px 0;
border-top: 1px solid #ccc;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
padding: 30px;
}
.tabset {
max-width: 65em;
}
/*div imbriques*/
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
height:600px;
}
.box1 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 10;
}
.box2 {
grid-column-start: 2;
grid-column-end:5;
grid-row-start:1;
grid-row-end: 5;
}
Commentaire