ruidy/lekol-plus
1
0
Fork 0
mirror of https://github.com/rjNemo/lekol-plus synced 2026-06-12 11:26:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

📷 Pictures (#2)

Browse source 
* 📷 update pictures

* 🤵 set netlify forms
This commit is contained in:
Ruidy 2020-07-16 21:30:34 +02:00 committed by GitHub
parent d07f28a669
commit 0f353e178f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 103 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/counters.jsx
View file

@ -5,22 +5,22 @@ const Counters = () => (
<div class="container"> <div class="container">
<div class="row counters"> <div class="row counters">
<div class="col-lg-3 col-6 text-center"> <div class="col-lg-3 col-6 text-center">
<span data-toggle="counter-up">1232</span> <span data-toggle="counter-up">100+</span>
<p>Élèves</p> <p>Élèves satisfaits</p>
</div> </div>
<div class="col-lg-3 col-6 text-center"> <div class="col-lg-3 col-6 text-center">
<span data-toggle="counter-up">64</span> <span data-toggle="counter-up">3</span>
<p>Cours</p> <p>Niveaux</p>
</div> </div>
<div class="col-lg-3 col-6 text-center"> <div class="col-lg-3 col-6 text-center">
<span data-toggle="counter-up">42</span> <span data-toggle="counter-up">10+</span>
<p>Ateliers</p> <p>Ateliers organisés</p>
</div> </div>
<div class="col-lg-3 col-6 text-center"> <div class="col-lg-3 col-6 text-center">
<span data-toggle="counter-up">15</span> <span data-toggle="counter-up">3</span>
<p>Enseignants</p> <p>Enseignants</p>
</div> </div>
</div> </div>

8
src/components/courseItem.jsx
View file

@ -1,7 +1,10 @@
import React from "react" import React from "react"
import PropTypes from "prop-types" import PropTypes from "prop-types"
import { Link } from "gatsby"
const CourseItem = ({ title, price, description, image }) => { import * as ROUTES from "../global/routes"
const CourseItem = ({ title, price, description, image, slug }) => {
return ( return (
<div className="col-lg-4 col-md-6 d-flex align-items-stretch"> <div className="col-lg-4 col-md-6 d-flex align-items-stretch">
<div className="course-item"> <div className="course-item">
@ -13,7 +16,7 @@ const CourseItem = ({ title, price, description, image }) => {
</div> </div>
<h3> <h3>
<a href="course-details.html">{title}</a> <Link to={`${ROUTES.COURSES}/${slug}`}>{title}</Link>
</h3> </h3>
<p>{description}</p> <p>{description}</p>
</div> </div>
@ -26,6 +29,7 @@ export default CourseItem
CourseItem.propTypes = { CourseItem.propTypes = {
title: PropTypes.string.isRequired, title: PropTypes.string.isRequired,
slug: PropTypes.string.isRequired,
price: PropTypes.number.isRequired, price: PropTypes.number.isRequired,
description: PropTypes.string.isRequired, description: PropTypes.string.isRequired,
image: PropTypes.node.isRequired, image: PropTypes.node.isRequired,

5
src/components/courses.jsx
View file

@ -8,7 +8,8 @@ import img3 from "../static/img/course-3.jpg"
const data = [ const data = [
{ {
title: "Garderie", title: "Primaire",
slug: "primaire",
price: 10, price: 10,
description: description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?", "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?",
@ -16,6 +17,7 @@ const data = [
}, },
{ {
title: "Collège", title: "Collège",
slug: "college",
price: 15, price: 15,
description: description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?", "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?",
@ -23,6 +25,7 @@ const data = [
}, },
{ {
title: "Lycée", title: "Lycée",
slug: "lycee",
price: 18, price: 18,
description: description:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?", "Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse necessitatibus sunt, porro animi vel officiis?",

18
src/components/footer.jsx
View file

@ -48,10 +48,6 @@ const Footer = ({ siteTitle }) => (
<div className="col-lg-3 col-md-6 footer-links"> <div className="col-lg-3 col-md-6 footer-links">
<h4>Nos niveaux</h4> <h4>Nos niveaux</h4>
<ul> <ul>
<li>
<i className="bx bx-chevron-right"></i>{" "}
<Link to={ROUTES.GARDERIE}>Garderie</Link>
</li>
<li> <li>
<i className="bx bx-chevron-right"></i>{" "} <i className="bx bx-chevron-right"></i>{" "}
<Link to={ROUTES.PRIMAIRE}>Primaire</Link> <Link to={ROUTES.PRIMAIRE}>Primaire</Link>
@ -64,6 +60,10 @@ const Footer = ({ siteTitle }) => (
<i className="bx bx-chevron-right"></i>{" "} <i className="bx bx-chevron-right"></i>{" "}
<Link to={ROUTES.LYCEE}>Lycée</Link> <Link to={ROUTES.LYCEE}>Lycée</Link>
</li> </li>
<li>
<i className="bx bx-chevron-right"></i>{" "}
<Link to={ROUTES.ATELIER}>Ateliers</Link>
</li>
</ul> </ul>
</div> </div>
@ -73,8 +73,14 @@ const Footer = ({ siteTitle }) => (
Tamen quem nulla quae legam multos aute sint culpa legam noster Tamen quem nulla quae legam multos aute sint culpa legam noster
magna magna
</p> </p>
<form action="" method="post"> <form
<input type="email" name="email" /> name="newsletter"
action="/success"
method="post"
data-netlify="true"
data-netlify-honeypot="bot-field"
>
<input type="email" name="email" required />
<input type="submit" value="S'inscrire" /> <input type="submit" value="S'inscrire" />
</form> </form>
</div> </div>

2
src/global/routes.js
View file

@ -4,7 +4,7 @@ export const A_PROPOS = "/a-propos"
export const CONTACT = "/contact" export const CONTACT = "/contact"
export const CALENDAR = "/calendrier" export const CALENDAR = "/calendrier"
export const LEGAL = "/legal" export const LEGAL = "/legal"
export const GARDERIE = COURSES + "/garderie" export const ATELIER = COURSES + "/ateliers"
export const PRIMAIRE = COURSES + "/primaire" export const PRIMAIRE = COURSES + "/primaire"
export const COLLEGE = COURSES + "/college" export const COLLEGE = COURSES + "/college"
export const LYCEE = COURSES + "/lycee" export const LYCEE = COURSES + "/lycee"

BIN
src/images/about.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 114 KiB

135
src/static/css/style.css
View file

@ -1,12 +1,5 @@
/** /*--------------------------------------------------------------
* Template Name: Mentor - v2.1.0 # General
* Template URL: https://bootstrapmade.com/mentor-free-education-bootstrap-theme/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/ --------------------------------------------------------------*/
body { body {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
@ -22,12 +15,17 @@ a:hover {
text-decoration: none; text-decoration: none;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Raleway", sans-serif; font-family: "Raleway", sans-serif;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Back to top button # Back to top button
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.back-to-top { .back-to-top {
position: fixed; position: fixed;
@ -55,8 +53,8 @@ h1, h2, h3, h4, h5, h6 {
color: #fff; color: #fff;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Preloader # Preloader
--------------------------------------------------------------*/ --------------------------------------------------------------*/
#preloader { #preloader {
position: fixed; position: fixed;
@ -102,8 +100,8 @@ h1, h2, h3, h4, h5, h6 {
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Disable aos animation delay on mobile devices # Disable aos animation delay on mobile devices
--------------------------------------------------------------*/ --------------------------------------------------------------*/
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
[data-aos-delay] { [data-aos-delay] {
@ -111,8 +109,8 @@ h1, h2, h3, h4, h5, h6 {
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Header # Header
--------------------------------------------------------------*/ --------------------------------------------------------------*/
#header { #header {
background: #fff; background: #fff;
@ -147,8 +145,8 @@ h1, h2, h3, h4, h5, h6 {
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Navigation Menu # Navigation Menu
--------------------------------------------------------------*/ --------------------------------------------------------------*/
/* Desktop Navigation */ /* Desktop Navigation */
.nav-menu ul { .nav-menu ul {
@ -177,7 +175,9 @@ h1, h2, h3, h4, h5, h6 {
font-weight: 500; font-weight: 500;
} }
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a { .nav-menu a:hover,
.nav-menu .active > a,
.nav-menu li:hover > a {
color: #5fcf80; color: #5fcf80;
} }
@ -215,7 +215,9 @@ h1, h2, h3, h4, h5, h6 {
color: #37423b; color: #37423b;
} }
.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a { .nav-menu .drop-down ul a:hover,
.nav-menu .drop-down ul .active > a,
.nav-menu .drop-down ul li:hover > a {
color: #5fcf80; color: #5fcf80;
} }
@ -335,7 +337,9 @@ h1, h2, h3, h4, h5, h6 {
outline: none; outline: none;
} }
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a { .mobile-nav a:hover,
.mobile-nav .active > a,
.mobile-nav li:hover > a {
color: #5fcf80; color: #5fcf80;
text-decoration: none; text-decoration: none;
} }
@ -391,13 +395,13 @@ h1, h2, h3, h4, h5, h6 {
color: #fff; color: #fff;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Hero Section # Hero Section
--------------------------------------------------------------*/ --------------------------------------------------------------*/
#hero { #hero {
width: 100%; width: 100%;
height: 80vh; height: 80vh;
background: url("../img/hero-bg.jpg") top center; background: url("../img/hero-bg.jpg") center;
background-size: cover; background-size: cover;
position: relative; position: relative;
} }
@ -476,8 +480,8 @@ h1, h2, h3, h4, h5, h6 {
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Sections General # Sections General
--------------------------------------------------------------*/ --------------------------------------------------------------*/
section { section {
padding: 60px 0; padding: 60px 0;
@ -547,8 +551,8 @@ section {
margin-bottom: 0; margin-bottom: 0;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# About # About
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.about .content h3 { .about .content h3 {
font-weight: 600; font-weight: 600;
@ -593,8 +597,8 @@ section {
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Counts # Counts
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.counts { .counts {
padding: 30px 0; padding: 30px 0;
@ -616,8 +620,8 @@ section {
color: #37423b; color: #37423b;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Why Us # Why Us
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.why-us .content { .why-us .content {
padding: 30px; padding: 30px;
@ -682,8 +686,8 @@ section {
color: #848484; color: #848484;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Features # Features
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.features { .features {
padding-top: 0px; padding-top: 0px;
@ -724,8 +728,8 @@ section {
color: #5fcf80; color: #5fcf80;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Courses # Courses
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.courses .course-item { .courses .course-item {
border-radius: 5px; border-radius: 5px;
@ -792,8 +796,8 @@ section {
color: #657a6d; color: #657a6d;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Trainers # Trainers
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.trainers .member { .trainers .member {
text-align: center; text-align: center;
@ -847,8 +851,8 @@ section {
margin: 0 2px; margin: 0 2px;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Testimonials # Testimonials
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.testimonials .testimonial-wrap { .testimonials .testimonial-wrap {
padding-left: 50px; padding-left: 50px;
@ -885,7 +889,8 @@ section {
margin: 0; margin: 0;
} }
.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right { .testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
color: #c1ecce; color: #c1ecce;
font-size: 26px; font-size: 26px;
} }
@ -908,7 +913,8 @@ section {
margin: 15px auto 15px auto; margin: 15px auto 15px auto;
} }
.testimonials .owl-nav, .testimonials .owl-dots { .testimonials .owl-nav,
.testimonials .owl-dots {
margin-top: 5px; margin-top: 5px;
text-align: center; text-align: center;
} }
@ -940,8 +946,8 @@ section {
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Cource Details # Cource Details
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.course-details h3 { .course-details h3 {
font-size: 24px; font-size: 24px;
@ -952,7 +958,7 @@ section {
} }
.course-details h3:before { .course-details h3:before {
content: ''; content: "";
position: absolute; position: absolute;
display: block; display: block;
width: 100%; width: 100%;
@ -963,7 +969,7 @@ section {
} }
.course-details h3:after { .course-details h3:after {
content: ''; content: "";
position: absolute; position: absolute;
display: block; display: block;
width: 60px; width: 60px;
@ -995,8 +1001,8 @@ section {
color: #657a6d; color: #657a6d;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Cource Details Tabs # Cource Details Tabs
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.cource-details-tabs { .cource-details-tabs {
overflow: hidden; overflow: hidden;
@ -1058,8 +1064,8 @@ section {
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Events # Events
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.events .card { .events .card {
border: 0; border: 0;
@ -1130,8 +1136,8 @@ section {
color: #5fcf80; color: #5fcf80;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Pricing # Pricing
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.pricing .box { .pricing .box {
padding: 20px; padding: 20px;
@ -1240,8 +1246,8 @@ section {
color: #fff; color: #fff;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Contact # Contact
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.contact { .contact {
padding-top: 5px; padding-top: 5px;
@ -1281,11 +1287,14 @@ section {
color: #657a6d; color: #657a6d;
} }
.contact .info .email, .contact .info .phone { .contact .info .email,
.contact .info .phone {
margin-top: 40px; margin-top: 40px;
} }
.contact .info .email:hover i, .contact .info .address:hover i, .contact .info .phone:hover i { .contact .info .email:hover i,
.contact .info .address:hover i,
.contact .info .phone:hover i {
background: #5fcf80; background: #5fcf80;
color: #fff; color: #fff;
} }
@ -1349,13 +1358,15 @@ section {
animation: animate-loading 1s linear infinite; animation: animate-loading 1s linear infinite;
} }
.contact .php-email-form input, .contact .php-email-form textarea { .contact .php-email-form input,
.contact .php-email-form textarea {
border-radius: 4px; border-radius: 4px;
box-shadow: none; box-shadow: none;
font-size: 14px; font-size: 14px;
} }
.contact .php-email-form input:focus, .contact .php-email-form textarea:focus { .contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
border-color: #5fcf80; border-color: #5fcf80;
} }
@ -1398,8 +1409,8 @@ section {
} }
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
# Footer # Footer
--------------------------------------------------------------*/ --------------------------------------------------------------*/
#footer { #footer {
color: #37423b; color: #37423b;

BIN
src/static/img/course-1.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
src/static/img/course-2.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 60 KiB

BIN
src/static/img/course-3.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 117 KiB

After

Width:  |  Height:  |  Size: 914 KiB

BIN
src/static/img/hero-bg.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 216 KiB

After

Width:  |  Height:  |  Size: 4.7 MiB