You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
7.9 KiB
161 lines
7.9 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
<meta name="description" content="" />
|
|
<meta name="author" content="" />
|
|
<title>In English Please!</title>
|
|
<link rel="icon" type="image/x-icon" href="{{base}}/assets/favicon.ico"/>
|
|
<!-- Font Awesome icons (free version)--><!-- Google fonts-->
|
|
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
|
|
rel="stylesheet" />
|
|
<!-- Core theme CSS (includes Bootstrap)-->
|
|
<link href="{{base}}/css/styles.css" rel="stylesheet" />
|
|
</head>
|
|
|
|
<body id="page-top">
|
|
<!-- Navigation-->
|
|
{% include 'navBar.twig' %}
|
|
<!-- Masthead-->
|
|
<header class="masthead">
|
|
<div class="container px-4 px-lg-5 d-flex h-100 align-items-center justify-content-center">
|
|
<div class="d-flex justify-content-center">
|
|
<div class="text-center">
|
|
<h1 class="mx-auto my-0 text-uppercase">IN ENGLISH PLEASE</h1>
|
|
<h2 class="text-white-50 mx-auto mt-2 mb-5">An easy-to-learn English app for students</h2>
|
|
<a class="btn btn-primary" href="#game">Get Started</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- About-->
|
|
<section class="about-section text-center">
|
|
<div class="container px-4 px-lg-5">
|
|
<div class="row gx-4 gx-lg-5 justify-content-center">
|
|
<div class="col-lg-8">
|
|
<h2 class="text-white mb-4">Anywhere at any time</h2>
|
|
<p class="text-white-50">
|
|
Our application is avaivable on all devices. You can use it on your computer, tablet or phone.<br/>
|
|
At home, at school or even in the bus, the app adapts to your lifestyle.<br/>
|
|
Learning english has never been so easy!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<img class="img-fluid" src="{{base}}/assets/img/ipad.png" alt="..." />
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<!-- -->
|
|
<section class="projects-section">
|
|
<div class="container px-4 px-lg-5" id="game">
|
|
<!-- Game One Row-->
|
|
<div class="row gx-0 mb-5 mb-lg-0 justify-content-center">
|
|
<div class="col-lg-6"><img class="img-fluid" src="{{base}}/assets/img/quizz.jpeg" alt="..." /></div>
|
|
<div class="col-lg-6">
|
|
<div class="bg-black text-center h-100 project">
|
|
<div class="d-flex h-100">
|
|
<div class="project-text w-100 my-auto text-center text-lg-left">
|
|
<h4 class="text-white">Quiz</h4>
|
|
<p class="mb-0 text-white-50">Test your knowledge and study smarter!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Game Two Row-->
|
|
<div class="row gx-0 justify-content-center">
|
|
<div class="col-lg-6"><img class="img-fluid" src="{{base}}/assets/img/memory.jpeg" alt="..." /></div>
|
|
<div class="col-lg-6 order-lg-first">
|
|
<div class="bg-black text-center h-100 project">
|
|
<div class="d-flex h-100">
|
|
<div class="project-text w-100 my-auto text-center text-lg-right">
|
|
<h4 class="text-white">Memory</h4>
|
|
<p class="mb-0 text-white-50">Have fun associating words to help your brain learn faster</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row gx-5 align-items-center" id="download">
|
|
<div class="col-lg-6">
|
|
<div class="mb-5 mb-lg-0 text-center text-lg-start">
|
|
<h1 class="display-1 lh-1 mb-3">Download now</h1>
|
|
<p class="lead fw-normal mb-5">Start to learn english now with the mobile app!<br>Available on Android & iOS.</p>
|
|
<div class="d-flex flex-column flex-lg-row align-items-center">
|
|
<a class="me-lg-3 mb-4 mb-lg-0" href="https://play.google.com"><img class="app-badge" src="{{base}}/assets/img/google-play-badge.svg" alt="..." /></a>
|
|
<a href="https://www.apple.com/fr/app-store/"><img class="app-badge" src="{{base}}/assets/img/app-store-badge.svg" alt="..." /></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<!-- Download phone-->
|
|
<div class="download">
|
|
<div class="device-wrapper">
|
|
<div class="device" data-device="iPhoneX" data-orientation="portrait" data-color="black">
|
|
<div class="screen bg-black">
|
|
<video muted="muted" autoplay="" loop="" style="max-width: 100%; height: 100%"><source src="{{base}}/assets/img/demo-screen.mp4" type="video/mp4" /></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="contact-section bg-black">
|
|
<!-- <div class="separateur">
|
|
<img src="assets/img/separator.png" alt="Separator" style="width: 100%;" />
|
|
</div> -->
|
|
<div class="container px-4 px-lg-5">
|
|
<div class="row gx-4 gx-lg-5">
|
|
<div class="col-md-4 mb-3 mb-md-0">
|
|
<div class="card py-4 h-100">
|
|
<div class="card-body text-center">
|
|
<i class="fas fa-map-marked-alt text-primary mb-2"></i>
|
|
<h4 class="text-uppercase m-0">Address</h4>
|
|
<hr class="my-4 mx-auto" />
|
|
<div class="small text-black-50">5 Avenue Blaise Pascal, Aubière 63170, France</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-3 mb-md-0">
|
|
<div class="card py-4 h-100">
|
|
<div class="card-body text-center">
|
|
<i class="fas fa-envelope text-primary mb-2"></i>
|
|
<h4 class="text-uppercase m-0">Email</h4>
|
|
<hr class="my-4 mx-auto" />
|
|
<div class="small text-black-50"><a href="#!">assistance@segwave.fr</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-3 mb-md-0">
|
|
<div class="card py-4 h-100">
|
|
<div class="card-body text-center">
|
|
<i class="fas fa-mobile-alt text-primary mb-2"></i>
|
|
<h4 class="text-uppercase m-0">Phone</h4>
|
|
<hr class="my-4 mx-auto" />
|
|
<div class="small text-black-50">+33 6 06 06 06 06</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="social d-flex justify-content-center">
|
|
<a class="mx-2" href="#!"><i class="fab fa-twitter"></i></a>
|
|
<a class="mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
|
|
<a class="mx-2" href="#!"><i class="fab fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Footer-->
|
|
<footer class="footer bg-black small text-center text-white-50">
|
|
<div class="container px-4 px-lg-5">Copyright © SegWave</div>
|
|
</footer>
|
|
</body>
|
|
|
|
</html> |