nouvelle home
This commit is contained in:
Julie Blanc
parent
46b251e229
commit
e390d8cd5b
7 changed files with 374 additions and 226 deletions
|
|
@ -1,17 +1,23 @@
|
|||
.item-nav{
|
||||
border: 1px solid var(--color-txt-light);
|
||||
border-radius: var(--radius-small);
|
||||
background-color: var(--white);
|
||||
border: 1.5px solid var(--color-txt);
|
||||
border-radius: var(--radius-btn);
|
||||
background-color: var(--white);
|
||||
color: var(--color-txt);
|
||||
// background-color: transparent;
|
||||
|
||||
padding: var(--padding-inner);
|
||||
padding-bottom: calc(var(--padding-inner)*0.5);
|
||||
|
||||
min-height: calc(var(--unit)*5);
|
||||
max-width: 440px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:hover{
|
||||
background-color: var(--color-light);
|
||||
// color: white;
|
||||
}
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
.title{
|
||||
|
|
|
|||
|
|
@ -1,22 +1,24 @@
|
|||
@use "abstracts/mixins.scss" as *;
|
||||
|
||||
|
||||
|
||||
#home__livrets{
|
||||
#home__livrets {
|
||||
--color: var(--color-violet);
|
||||
--color-medium: var(--color-violet-medium);
|
||||
--color-light: var(--color-violet-light);
|
||||
background-color: var(--color-medium);
|
||||
background-color: var(--color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
|
||||
#home__base-connaissance{
|
||||
#home__animations {
|
||||
--color: var(--color-yellow);
|
||||
--color-medium: var(--color-yellow-medium);
|
||||
--color-light: var(--color-yellow-light);
|
||||
background-color: var(--color-medium);
|
||||
}
|
||||
background-color: var(--color);
|
||||
|
||||
#home__ateliers{
|
||||
|
||||
color: var(--color-txt);
|
||||
}
|
||||
#home__base-connaissance {
|
||||
--color: var(--color-orange);
|
||||
--color-medium: var(--color-orange-medium);
|
||||
--color-light: var(--color-orange-light);
|
||||
|
|
@ -25,86 +27,78 @@
|
|||
|
||||
|
||||
|
||||
#main_home{
|
||||
section{
|
||||
|
||||
|
||||
|
||||
|
||||
#main_home {
|
||||
--max-w-home: 1100px;
|
||||
section {
|
||||
padding: calc(var(--unit)*3) var(--padding-body);
|
||||
position: relative;
|
||||
.section--inner{
|
||||
max-width: 1100px;
|
||||
|
||||
.section--inner {
|
||||
max-width: var(--max-w-home);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.item-nav__group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--unit);
|
||||
}
|
||||
.item-nav__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing);
|
||||
}
|
||||
|
||||
.section--header{
|
||||
margin-bottom: calc(var(--unit)*3);
|
||||
}
|
||||
.section--header {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
|
||||
.section--title{
|
||||
display: grid;
|
||||
// grid-template-columns: 3fr 2fr;
|
||||
grid-template-columns: 1fr 440px;
|
||||
gap: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.section--title {
|
||||
font-size: 2.8rem;
|
||||
font-family: var(--font-title);
|
||||
margin-bottom: calc(var(--unit)*1);
|
||||
// margin-bottom: calc(var(--spacing) * 1.5);
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.baseline{
|
||||
.baseline {
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 46ch;
|
||||
max-width: 42ch;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.slideshow{
|
||||
.slideshow {
|
||||
width: 100%;
|
||||
height: calc(var(--unit)*13);
|
||||
|
||||
figure{
|
||||
figure {
|
||||
height: calc(var(--unit)*11);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.home--section-tool .section--inner{
|
||||
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 4fr 5fr;
|
||||
column-gap: calc(var(--unit)*3);
|
||||
|
||||
.section--header{
|
||||
grid-column: 1/end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item-nav{
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.highlight-block, .slideshow{
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#home__hero{
|
||||
#home__hero {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: calc(var(--unit)*1.5)!important;
|
||||
padding-bottom: calc(var(--unit)*1.5) !important;
|
||||
|
||||
.section--inner{
|
||||
.section--inner {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
|
@ -112,7 +106,8 @@
|
|||
|
||||
|
||||
}
|
||||
.section--title{
|
||||
|
||||
.section--title {
|
||||
font-size: 3.6em;
|
||||
|
||||
margin-bottom: calc(var(--unit)*1.5);
|
||||
|
|
@ -122,7 +117,7 @@
|
|||
}
|
||||
|
||||
/* button{ display: none;} */
|
||||
.description{
|
||||
.description {
|
||||
font-size: var(--fs-medium);
|
||||
|
||||
max-width: 48ch;
|
||||
|
|
@ -130,9 +125,11 @@
|
|||
margin-bottom: calc(var(--unit)*1.5);
|
||||
}
|
||||
|
||||
.search--container{ display: none;}
|
||||
.search--container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-hero{
|
||||
.nav-hero {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -141,7 +138,7 @@
|
|||
margin-bottom: calc(var(--unit)*3);
|
||||
|
||||
|
||||
li{
|
||||
li {
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
|
|
@ -152,21 +149,22 @@
|
|||
border: 1.5px solid var(--color);
|
||||
color: var(--color);
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(var(--unit)*1.5);
|
||||
padding: 0px 1.5ch;
|
||||
border-radius: var(--radius-btn);
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
background-color: var(--color-light);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(var(--unit)*1.5);
|
||||
padding: 0px 1.5ch;
|
||||
border-radius: var(--radius-btn);
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--color-light);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a{
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color);
|
||||
font-weight: bold;
|
||||
|
|
@ -176,44 +174,47 @@
|
|||
}
|
||||
}
|
||||
|
||||
.see-more{
|
||||
.see-more {
|
||||
display: block;
|
||||
// color: var(--color-txt);
|
||||
// font-weight: bold;
|
||||
padding-top: calc(var(--unit)*1.5);
|
||||
// color: var(--color-txt);
|
||||
// font-weight: bold;
|
||||
padding-top: calc(var(--unit)*1.5);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#home__a-propos{
|
||||
p, li{
|
||||
#home__a-propos {
|
||||
|
||||
p,
|
||||
li {
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 1em;
|
||||
position: relative;
|
||||
|
||||
strong{
|
||||
strong {
|
||||
color: var(--color-green)
|
||||
}
|
||||
}
|
||||
|
||||
ol li::marker{
|
||||
ol li::marker {
|
||||
display: none;
|
||||
content: "";
|
||||
|
||||
}
|
||||
|
||||
ol{
|
||||
ol {
|
||||
padding-left: 5ch;
|
||||
counter-reset: ol;
|
||||
li{
|
||||
|
||||
li {
|
||||
counter-increment: ol 1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
ol li::before{
|
||||
ol li::before {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
content: counter(ol);
|
||||
|
|
@ -232,8 +233,77 @@
|
|||
|
||||
}
|
||||
|
||||
.btn--solid{
|
||||
.btn--solid {
|
||||
margin-top: calc(var(--unit)*2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.slideshow-scroll{
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: calc((100vw - var(--max-w-home))*-0.5);
|
||||
padding-bottom: 20px;
|
||||
|
||||
overflow-y: scroll;
|
||||
@include hide-scrollbar();
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
|
||||
.slideshow-scroll__warpper{
|
||||
// padding-left: calc((100vw - var(--max-w-home))*0.5);
|
||||
padding-left: var(--padding-body);
|
||||
display: flex;
|
||||
gap: var(--padding-inner);
|
||||
|
||||
|
||||
.slideshow-item{
|
||||
flex-shrink: 0;
|
||||
figure{
|
||||
height: 420px;
|
||||
width: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
aspect-ratio: 5/3;
|
||||
}
|
||||
}
|
||||
}
|
||||
&::after{
|
||||
content: "........................................";
|
||||
display: block;
|
||||
width: calc((100vw - var(--max-w-home))*1);
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.screenshot-booklet{
|
||||
display: flex;
|
||||
--size-page: 340px;
|
||||
--gap: var(--padding-inner);
|
||||
gap: var(--gap);
|
||||
width: calc(var(--size-page)*5 + var(--gap)*2);
|
||||
|
||||
.cover, .page{
|
||||
width: 300px;
|
||||
|
||||
img{
|
||||
border: 0.5px solid var(--color-txt-light);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.double{
|
||||
display: flex;
|
||||
|
||||
}
|
||||
|
||||
.page + .page img{
|
||||
border-left-color: transparent!important;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -43,3 +43,12 @@
|
|||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin hide-scrollbar(){
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
--fs-small: 14px;
|
||||
--fs-normal: 16px;
|
||||
--fs-medium: 24px;
|
||||
--fs-medium: 22px;
|
||||
--fs-title-page: 38px;
|
||||
|
||||
--spacing: 20px;
|
||||
|
|
@ -34,7 +34,8 @@
|
|||
--color-violet-medium: #9b92c4;
|
||||
--color-violet-light: #e1dfec;
|
||||
|
||||
--color-yellow: #c4a233;
|
||||
// --color-yellow: #c4a233;
|
||||
--color-yellow: #d4a938;
|
||||
--color-yellow-medium: #e0c46a;
|
||||
--color-yellow-light: #f5f0d5;
|
||||
--color-map: #ad8422;
|
||||
|
|
|
|||
122
assets/style.css
122
assets/style.css
|
|
@ -4,7 +4,7 @@
|
|||
--font: "Nunito", Arial, sans-serif;
|
||||
--fs-small: 14px;
|
||||
--fs-normal: 16px;
|
||||
--fs-medium: 24px;
|
||||
--fs-medium: 22px;
|
||||
--fs-title-page: 38px;
|
||||
--spacing: 20px;
|
||||
font-size: 14px;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
--color-violet: #6e62a4;
|
||||
--color-violet-medium: #9b92c4;
|
||||
--color-violet-light: #e1dfec;
|
||||
--color-yellow: #c4a233;
|
||||
--color-yellow: #d4a938;
|
||||
--color-yellow-medium: #e0c46a;
|
||||
--color-yellow-light: #f5f0d5;
|
||||
--color-map: #ad8422;
|
||||
|
|
@ -574,17 +574,20 @@ span.controls::after {
|
|||
}
|
||||
|
||||
.item-nav {
|
||||
border: 1px solid var(--color-txt-light);
|
||||
border-radius: var(--radius-small);
|
||||
border: 1.5px solid var(--color-txt);
|
||||
border-radius: var(--radius-btn);
|
||||
background-color: var(--white);
|
||||
color: var(--color-txt);
|
||||
padding: var(--padding-inner);
|
||||
padding-bottom: calc(var(--padding-inner) * 0.5);
|
||||
min-height: calc(var(--unit) * 5);
|
||||
max-width: 440px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-nav:hover {
|
||||
background-color: var(--color-light);
|
||||
}
|
||||
.item-nav .title {
|
||||
font-family: var(--font-title);
|
||||
font-size: 1.4rem;
|
||||
|
|
@ -679,47 +682,56 @@ span.controls::after {
|
|||
--color: var(--color-violet);
|
||||
--color-medium: var(--color-violet-medium);
|
||||
--color-light: var(--color-violet-light);
|
||||
background-color: var(--color-medium);
|
||||
background-color: var(--color);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
#home__base-connaissance {
|
||||
#home__animations {
|
||||
--color: var(--color-yellow);
|
||||
--color-medium: var(--color-yellow-medium);
|
||||
--color-light: var(--color-yellow-light);
|
||||
background-color: var(--color-medium);
|
||||
background-color: var(--color);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
#home__ateliers {
|
||||
#home__base-connaissance {
|
||||
--color: var(--color-orange);
|
||||
--color-medium: var(--color-orange-medium);
|
||||
--color-light: var(--color-orange-light);
|
||||
background-color: var(--color);
|
||||
}
|
||||
|
||||
#main_home {
|
||||
--max-w-home: 1100px;
|
||||
}
|
||||
#main_home section {
|
||||
padding: calc(var(--unit) * 3) var(--padding-body);
|
||||
position: relative;
|
||||
}
|
||||
#main_home section .section--inner {
|
||||
max-width: 1100px;
|
||||
max-width: var(--max-w-home);
|
||||
margin: 0 auto;
|
||||
}
|
||||
#main_home .item-nav__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--unit);
|
||||
gap: var(--spacing);
|
||||
}
|
||||
#main_home .section--header {
|
||||
margin-bottom: calc(var(--unit) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 440px;
|
||||
gap: calc(var(--spacing) * 1);
|
||||
}
|
||||
#main_home .section--title {
|
||||
font-size: 2.8rem;
|
||||
font-family: var(--font-title);
|
||||
margin-bottom: calc(var(--unit) * 1);
|
||||
grid-column: span 2;
|
||||
}
|
||||
#main_home .baseline {
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 46ch;
|
||||
max-width: 42ch;
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
|
|
@ -730,24 +742,6 @@ span.controls::after {
|
|||
height: calc(var(--unit) * 11);
|
||||
}
|
||||
|
||||
.home--section-tool .section--inner {
|
||||
display: grid;
|
||||
grid-template-columns: 4fr 5fr;
|
||||
-moz-column-gap: calc(var(--unit) * 3);
|
||||
column-gap: calc(var(--unit) * 3);
|
||||
}
|
||||
.home--section-tool .section--inner .section--header {
|
||||
grid-column: 1/end;
|
||||
width: 100%;
|
||||
}
|
||||
.home--section-tool .section--inner .item-nav {
|
||||
grid-column: 1;
|
||||
}
|
||||
.home--section-tool .section--inner .highlight-block, .home--section-tool .section--inner .slideshow {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#home__hero {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: calc(var(--unit) * 1.5) !important;
|
||||
|
|
@ -812,12 +806,14 @@ span.controls::after {
|
|||
padding-top: calc(var(--unit) * 1.5);
|
||||
}
|
||||
|
||||
#home__a-propos p, #home__a-propos li {
|
||||
#home__a-propos p,
|
||||
#home__a-propos li {
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 1em;
|
||||
position: relative;
|
||||
}
|
||||
#home__a-propos p strong, #home__a-propos li strong {
|
||||
#home__a-propos p strong,
|
||||
#home__a-propos li strong {
|
||||
color: var(--color-green);
|
||||
}
|
||||
#home__a-propos ol li::marker {
|
||||
|
|
@ -853,6 +849,64 @@ span.controls::after {
|
|||
margin-top: calc(var(--unit) * 2);
|
||||
}
|
||||
|
||||
.slideshow-scroll {
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: calc((100vw - var(--max-w-home)) * -0.5);
|
||||
padding-bottom: 20px;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
.slideshow-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.slideshow-scroll .slideshow-scroll__warpper {
|
||||
padding-left: var(--padding-body);
|
||||
display: flex;
|
||||
gap: var(--padding-inner);
|
||||
}
|
||||
.slideshow-scroll .slideshow-scroll__warpper .slideshow-item {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.slideshow-scroll .slideshow-scroll__warpper .slideshow-item figure {
|
||||
height: 420px;
|
||||
width: 100%;
|
||||
}
|
||||
.slideshow-scroll .slideshow-scroll__warpper .slideshow-item figure img {
|
||||
width: 100%;
|
||||
aspect-ratio: 5/3;
|
||||
}
|
||||
.slideshow-scroll .slideshow-scroll__warpper::after {
|
||||
content: "........................................";
|
||||
display: block;
|
||||
width: calc((100vw - var(--max-w-home)) * 1);
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.screenshot-booklet {
|
||||
display: flex;
|
||||
--size-page: 340px;
|
||||
--gap: var(--padding-inner);
|
||||
gap: var(--gap);
|
||||
width: calc(var(--size-page) * 5 + var(--gap) * 2);
|
||||
}
|
||||
.screenshot-booklet .cover, .screenshot-booklet .page {
|
||||
width: 300px;
|
||||
}
|
||||
.screenshot-booklet .cover img, .screenshot-booklet .page img {
|
||||
border: 0.5px solid var(--color-txt-light);
|
||||
width: 100%;
|
||||
}
|
||||
.screenshot-booklet .double {
|
||||
display: flex;
|
||||
}
|
||||
.screenshot-booklet .page + .page img {
|
||||
border-left-color: transparent !important;
|
||||
}
|
||||
|
||||
.species-list {
|
||||
display: grid;
|
||||
display: flex;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
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>
|
||||
|
||||
|
||||
<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 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>
|
||||
<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">
|
||||
|
||||
<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>
|
||||
<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__group">
|
||||
|
||||
<div class="slideshow" data-nbr-item="3" style="--items: 3">
|
||||
<div class="slideshow-container">
|
||||
<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>
|
||||
|
||||
<!-- 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=""/>
|
||||
<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>
|
||||
|
||||
<!-- Slides + container --------------------------- -->
|
||||
<div class="slideshow-inner">
|
||||
<div class="slideshow-item" data-item="1">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</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