nouvelle home
This commit is contained in:
Julie Blanc
parent
46b251e229
commit
e390d8cd5b
7 changed files with 374 additions and 226 deletions
200
index.html
200
index.html
|
|
@ -39,7 +39,7 @@
|
|||
<ul class="nav-hero">
|
||||
<li data-type="livret"><a href="#home__livrets">Livrets</a></li>
|
||||
<li data-type="base-connaissance"><a href="#home__base-connaissance">Base de connaissance</a></li>
|
||||
<li data-type="atelier"><a href="#home__ateliers">Ateliers</a></li>
|
||||
<li data-type="atelier"><a href="#home__animations">Ateliers</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
|
@ -57,10 +57,11 @@
|
|||
<section class="home--section-tool" id="home__livrets">
|
||||
<div class="section--inner">
|
||||
|
||||
<div class="section--header">
|
||||
|
||||
<div class="section--header">
|
||||
|
||||
<h2 class="section--title">Livrets</h2>
|
||||
<p class="baseline">Grâce à Botascopia, il est facile de générer des petites flores (environ 30 à 60 espèces) sous forme de livrets imprimables A5. Les livrets se composent d'une <strong>cé de détermination</strong> pour observer et identifier les plantes inconnues, et d'une partie « <strong>fiches-espèce</strong> » pour vérifier et en apprendre plus.</p>
|
||||
</div>
|
||||
<p class="baseline">Grâce à Botascopia, il est facile de générer des petites flores (environ 30 à 60 espèces) sous forme de livrets imprimables A5. Les livrets se composent d'une <strong>clé de détermination</strong> pour observer et identifier les plantes inconnues, et d'une partie « <strong>fiches-espèce</strong> » pour vérifier et en apprendre plus.</p>
|
||||
|
||||
|
||||
<div class="item-nav__group">
|
||||
|
|
@ -77,99 +78,75 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="highlight-block">
|
||||
<div class="content">
|
||||
<p class="label">Livret du mois</p>
|
||||
<h3 class="title">Apiaciée de Baumont</h3>
|
||||
<p class="details">45 espèces</p>
|
||||
<a class="see-more" href="#">Voir le livret<span>→</span></a>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="slideshow-scroll">
|
||||
|
||||
<div class="slideshow-scroll__warpper">
|
||||
|
||||
<div class="screenshot-booklet">
|
||||
<div class="cover"><img src="/images/livret-1.png"></div>
|
||||
<div class="double">
|
||||
<div class="page"><img src="/images/livret-2.png"></div>
|
||||
<div class="page"><img src="/images/livret-3.png"></div>
|
||||
</div>
|
||||
<div class="double">
|
||||
<div class="page"><img src="/images/livret-10.png"></div>
|
||||
<div class="page"><img src="/images/livret-11.png"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<figure><img src="https://botascopia.inria.fr/photos/Crataegus%20monogyna_morphology_vegetative_leaves_leaves_type0_illustration_photo.png"></figure>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home--section-tool" id="home__base-connaissance">
|
||||
<div class="section--inner">
|
||||
|
||||
|
||||
<div class="section--header">
|
||||
<h2 class="section--title">Base de connaissance</h2>
|
||||
<p class="baseline">Collaborative, la base de connaissance botanique est la source permettant de générer les livrets. Elle comporte actuellement xxx espèces dont xxx vérifiées.</p>
|
||||
</div>
|
||||
|
||||
<div class="item-nav__group">
|
||||
|
||||
<div class="item-nav">
|
||||
<h3 class="title">Explorer les espèces</h3>
|
||||
<p class="description">CAccédez à l'ensemble de la base ou consultez et téléchargez les fiches des espèces vérifiées.</p>
|
||||
<button class="btn--go-to">→</button>
|
||||
</div>
|
||||
|
||||
<div class="item-nav">
|
||||
<h3 class="title">Contribuer à la base de connaissance</h3>
|
||||
<p class="description">Enrichir ou relire, botanistes avertis, contactez-nous ! </p>
|
||||
<button class="btn--go-to">→</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="highlight-block">
|
||||
<div class="content">
|
||||
<p class="label">Espèce du jour</p>
|
||||
<h3 class="title">Charme commun</h3>
|
||||
|
||||
<p class="details">Carpinus betulus L. — Betulaceae</p>
|
||||
|
||||
<a class="see-more" href="#">Voir la fiche de l’espèce<span>→</span></a>
|
||||
</div>
|
||||
<figure><img src="https://botascopia.inria.fr/photos/Frangula%20alnus_morphology_vegetative_type_woody_twig-type_normal_twig-illustration_photo.png"></figure>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home--section-tool" id="home__ateliers">
|
||||
<section class="home--section-tool" id="home__animations">
|
||||
<div class="section--inner">
|
||||
|
||||
<div class="section--header">
|
||||
|
||||
|
||||
<h2 class="section--title">Ateliers</h2>
|
||||
<h2 class="section--title">Animations</h2>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item-nav__group">
|
||||
<p class="baseline">
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit aspernatur consectetur asperiores dignissimos, fuga consequatur, assumenda aliquam voluptatibus quia ratione necessitatibus, odit velit a sed culpa perferendis eum.
|
||||
</p>
|
||||
|
||||
<div class="item-nav">
|
||||
<h3 class="title">Organiser un atelier</h3>
|
||||
<p class="description">Consultez et téléchargez les fiches des espèces vérifiées par Botascopia.</p>
|
||||
<button class="btn--go-to">→</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="item-nav__group">
|
||||
|
||||
<div class="item-nav">
|
||||
<h3 class="title">Kits pédagogiques</h3>
|
||||
<p class="description">Seul·e ou dans le cadre d'une activité pédagogique en botanique, contactez-nous!</p>
|
||||
<button class="btn--go-to">→</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-nav">
|
||||
<h3 class="title">Organiser un atelier</h3>
|
||||
<p class="description">Consultez et téléchargez les fiches des espèces vérifiées par Botascopia.</p>
|
||||
<button class="btn--go-to">→</button>
|
||||
</div>
|
||||
|
||||
<div class="item-nav">
|
||||
<h3 class="title">Kits pédagogiques</h3>
|
||||
<p class="description">Seul·e ou dans le cadre d'une activité pédagogique en botanique, contactez-nous!</p>
|
||||
<button class="btn--go-to">→</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="slideshow" data-nbr-item="3" style="--items: 3">
|
||||
<div class="slideshow-container">
|
||||
|
||||
<!-- Inputs --------------------------------------- -->
|
||||
<input type="radio" name="slide-input" id="slide-input-1" hidden="" checked=""/>
|
||||
<input type="radio" name="slide-input" id="slide-input-2" hidden=""/>
|
||||
<input type="radio" name="slide-input" id="slide-input-3" hidden=""/>
|
||||
|
||||
<!-- Slides + container --------------------------- -->
|
||||
<div class="slideshow-inner">
|
||||
<div class="slideshow-item" data-item="1">
|
||||
|
||||
<div class="slideshow-scroll">
|
||||
|
||||
<div class="slideshow-scroll__warpper">
|
||||
|
||||
|
||||
<div class="slideshow-item" data-item="1">
|
||||
<figure>
|
||||
<img src="/content/images/atelier-2.png">
|
||||
</figure>
|
||||
|
|
@ -192,29 +169,59 @@
|
|||
Atelier 3 Lorem Ispsum, Epinay, 23 septembre 2025
|
||||
</figcaption>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Controls (arrows) -------------------------------- -->
|
||||
|
||||
<nav class="slideshow-controls" aria-hidden="true">
|
||||
<!-- Slide 1: prev=3, next=2 -->
|
||||
<label for="slide-input-3" class="slide_controls slide_controls-previous" alt="Aller à la slide 3"></label>
|
||||
<label for="slide-input-2" class="slide_controls slide_controls-next" alt="Aller à la slide 2"></label>
|
||||
|
||||
<!-- Slide 2: prev=1, next=3 -->
|
||||
<label for="slide-input-1" class="slide_controls slide_controls-previous" alt="Aller à la slide 1"></label>
|
||||
<label for="slide-input-3" class="slide_controls slide_controls-next" alt="Aller à la slide 3"></label>
|
||||
|
||||
<!-- Slide 3: prev=2, next=1 -->
|
||||
<label for="slide-input-2" class="slide_controls slide_controls-previous" alt="Aller à la slide 2"></label>
|
||||
<label for="slide-input-1" class="slide_controls slide_controls-next" alt="Aller à la slide 1"></label>
|
||||
|
||||
<span class="controls" aria-hidden="true"></span>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="home--section-tool" id="home__base-connaissance">
|
||||
<div class="section--inner">
|
||||
|
||||
|
||||
<div class="section--header">
|
||||
<h2 class="section--title">Base de connaissance</h2>
|
||||
<p class="baseline">Collaborative, la base de connaissance botanique est la source permettant de générer les livrets. Elle comporte actuellement xxx espèces dont xxx vérifiées.</p>
|
||||
|
||||
|
||||
<div class="item-nav__group">
|
||||
|
||||
<div class="item-nav">
|
||||
<h3 class="title">Explorer les espèces</h3>
|
||||
<p class="description">CAccédez à l'ensemble de la base ou consultez et téléchargez les fiches des espèces vérifiées.</p>
|
||||
<button class="btn--go-to">→</button>
|
||||
</div>
|
||||
|
||||
<div class="item-nav">
|
||||
<h3 class="title">Contribuer à la base de connaissance</h3>
|
||||
<p class="description">Enrichir ou relire, botanistes avertis, contactez-nous ! </p>
|
||||
<button class="btn--go-to">→</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="highlight-block">
|
||||
<div class="content">
|
||||
<p class="label">Espèce du jour</p>
|
||||
<h3 class="title">Charme commun</h3>
|
||||
|
||||
<p class="details">Carpinus betulus L. — Betulaceae</p>
|
||||
|
||||
<a class="see-more" href="#">Voir la fiche de l’espèce<span>→</span></a>
|
||||
</div>
|
||||
<figure><img src="https://botascopia.inria.fr/photos/Frangula%20alnus_morphology_vegetative_type_woody_twig-type_normal_twig-illustration_photo.png"></figure>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -222,6 +229,7 @@
|
|||
|
||||
|
||||
|
||||
|
||||
<section id="home__a-propos">
|
||||
<div class="section--inner">
|
||||
<h2 class="section--title">Apprendre à connaître <br>et reconnaître les plantes</h2>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue