Ajout du site internet ! 💩
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
8
.editorconfig
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
indent_style = tab
|
||||||
|
indent_size = 4
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
@ -5,7 +5,8 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start"
|
"start": "next start",
|
||||||
|
"export": "next export"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"next": "9.1.5",
|
"next": "9.1.5",
|
||||||
|
@ -1,88 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import Head from 'next/head'
|
|
||||||
import Nav from '../components/nav'
|
|
||||||
|
|
||||||
const Home = () => (
|
|
||||||
<div>
|
|
||||||
<Head>
|
|
||||||
<title>Home</title>
|
|
||||||
<link rel="icon" href="/favicon.ico" />
|
|
||||||
</Head>
|
|
||||||
|
|
||||||
<Nav />
|
|
||||||
|
|
||||||
<div className="hero">
|
|
||||||
<h1 className="title">Welcome to Next.js!</h1>
|
|
||||||
<p className="description">
|
|
||||||
To get started, edit <code>pages/index.js</code> and save to reload.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="row">
|
|
||||||
<a href="https://nextjs.org/docs" className="card">
|
|
||||||
<h3>Documentation →</h3>
|
|
||||||
<p>Learn more about Next.js in the documentation.</p>
|
|
||||||
</a>
|
|
||||||
<a href="https://nextjs.org/learn" className="card">
|
|
||||||
<h3>Next.js Learn →</h3>
|
|
||||||
<p>Learn about Next.js by following an interactive tutorial!</p>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://github.com/zeit/next.js/tree/master/examples"
|
|
||||||
className="card"
|
|
||||||
>
|
|
||||||
<h3>Examples →</h3>
|
|
||||||
<p>Find other example boilerplates on the Next.js GitHub.</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style jsx>{`
|
|
||||||
.hero {
|
|
||||||
width: 100%;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding-top: 80px;
|
|
||||||
line-height: 1.15;
|
|
||||||
font-size: 48px;
|
|
||||||
}
|
|
||||||
.title,
|
|
||||||
.description {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.row {
|
|
||||||
max-width: 880px;
|
|
||||||
margin: 80px auto 40px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
padding: 18px 18px 24px;
|
|
||||||
width: 220px;
|
|
||||||
text-align: left;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #434343;
|
|
||||||
border: 1px solid #9b9b9b;
|
|
||||||
}
|
|
||||||
.card:hover {
|
|
||||||
border-color: #067df7;
|
|
||||||
}
|
|
||||||
.card h3 {
|
|
||||||
margin: 0;
|
|
||||||
color: #067df7;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
.card p {
|
|
||||||
margin: 0;
|
|
||||||
padding: 12px 0 0;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
`}</style>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
export default Home
|
|
234
pages/index.jsx
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import Head from 'next/head'
|
||||||
|
import Nav from '../components/nav'
|
||||||
|
|
||||||
|
const Home = () => (
|
||||||
|
<div>
|
||||||
|
<nav>
|
||||||
|
<img src="/p2.svg" alt=""/>
|
||||||
|
<img src="/txt1.svg" alt=""/>
|
||||||
|
<ul>
|
||||||
|
<li>L'application</li>
|
||||||
|
<li>La randonnées</li>
|
||||||
|
<li>Contact</li>
|
||||||
|
<li className="download">Télecharger</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<header>
|
||||||
|
<div className="headline">
|
||||||
|
<img src="/phone.png" alt=""/>
|
||||||
|
<div className="pub">
|
||||||
|
<h1>Blablabla</h1>
|
||||||
|
<p>Loerm bitsum Loerm bitsum <br/>Loerm bitsumLoerm bitsum <br/>Loerm bitsumLoerm bitsum</p>
|
||||||
|
<div className="buttons">
|
||||||
|
<button className="shite" >Téléchrger</button>
|
||||||
|
<button className="outline">E savoir plus</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div className="pouet">
|
||||||
|
<h2>Lorem Ipsum</h2>
|
||||||
|
<div className="els">
|
||||||
|
<div className="el">
|
||||||
|
<img src="/icon-montagne.svg" alt=""/>
|
||||||
|
<h3>Lorem Ipsum</h3>
|
||||||
|
<div>Loerm bitsum Loerm bitsum <br/>Loerm bitsumLoerm bitsum <br/>Loerm bitsumLoerm bitsum</div>
|
||||||
|
</div>
|
||||||
|
<div className="el">
|
||||||
|
<img src="/icon-mobile.svg" alt=""/>
|
||||||
|
<h3>Lorem Ipsum</h3>
|
||||||
|
<div>Loerm bitsum Loerm bitsum <br/>Loerm bitsumLoerm bitsum <br/>Loerm bitsumLoerm bitsum</div>
|
||||||
|
</div>
|
||||||
|
<div className="el">
|
||||||
|
<img src="/icon-repaires.svg" alt=""/>
|
||||||
|
<h3>Lorem Ipsum</h3>
|
||||||
|
<div>Loerm bitsum Loerm bitsum <br/>Loerm bitsumLoerm bitsum <br/>Loerm bitsumLoerm bitsum</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="pokemon">
|
||||||
|
<div className="pk1">
|
||||||
|
<h2>N'attendes pas !</h2>
|
||||||
|
<p>Telechrger lapplicaiton</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img src="/app-store.svg" alt=""/>
|
||||||
|
<img src="/google-play.svg" alt=""/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<div className="els black">
|
||||||
|
<div className="el">
|
||||||
|
Politique de confidienclité
|
||||||
|
</div>
|
||||||
|
<div className="el">
|
||||||
|
Conditions dutilisasavionts du service
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
<style jsx global>{`
|
||||||
|
html, body {
|
||||||
|
padding: 0;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
`}</style>
|
||||||
|
<style jsx>{`
|
||||||
|
.black {
|
||||||
|
background: #3CB992;
|
||||||
|
padding: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.green {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
position: fixed;
|
||||||
|
width: 96%;
|
||||||
|
padding: 2%;
|
||||||
|
top: 0;
|
||||||
|
background: white;
|
||||||
|
display: flex;
|
||||||
|
z-index: 1001;
|
||||||
|
}
|
||||||
|
nav img {
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
nav ul li {
|
||||||
|
line-height: 2;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
nav ul li.download {
|
||||||
|
background: #3CB992;
|
||||||
|
color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 7px 10px;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 7px 10px;
|
||||||
|
margin: 10px;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.shite {
|
||||||
|
background: white;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.outline {
|
||||||
|
box-shadow: inset 0 0 0 3px white;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Header
|
||||||
|
header {
|
||||||
|
height: 700px;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
background-image: url('/baniere@2x.png');
|
||||||
|
background-size: cover;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
header > img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .headline {
|
||||||
|
position: absolute;
|
||||||
|
top: 20%;
|
||||||
|
left: 0%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-left: 20%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headline .pub {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headline .pub h1 {
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headline .headline img {
|
||||||
|
margin-right: 20px;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Content
|
||||||
|
|
||||||
|
.pouet h2 {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 40px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.els {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el h3 {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pouet {
|
||||||
|
padding: 50px 20px;
|
||||||
|
background: url('/photo-filtre.png');
|
||||||
|
background-position: center center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 50px;
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pk1 * {
|
||||||
|
font-size: 25px;
|
||||||
|
text-align: initial;
|
||||||
|
color: white;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.pk1 p {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default Home
|
BIN
public/Rectangle 6.png
Normal file
After Width: | Height: | Size: 33 KiB |
BIN
public/Rectangle 6@2x.png
Normal file
After Width: | Height: | Size: 128 KiB |
1
public/app-store.svg
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
public/baniere@2x.png
Normal file
After Width: | Height: | Size: 10 MiB |
1
public/google-play.svg
Normal file
After Width: | Height: | Size: 19 KiB |
1
public/icon-mobile.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="71.869" height="119.333" viewBox="0 0 71.869 119.333"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M71.868,110.045V9.264A9.275,9.275,0,0,0,62.6,0H9.264A9.275,9.275,0,0,0,0,9.264V110.069a9.275,9.275,0,0,0,9.264,9.264H62.6a9.311,9.311,0,0,0,9.264-9.288ZM5.973,21.477h59.9V89.3H5.973Zm3.291-15.5H62.6A3.293,3.293,0,0,1,65.9,9.264V15.5H5.973V9.264A3.293,3.293,0,0,1,9.264,5.973ZM5.973,110.045v-14.8h59.9v14.8a3.293,3.293,0,0,1-3.291,3.291H9.264a3.293,3.293,0,0,1-3.291-3.291Zm0,0"/><path class="a" d="M97.767,312.449H85.65a3,3,0,0,0,0,6H97.767a3,3,0,0,0,0-6Zm0,0" transform="translate(-55.786 -210.888)"/></svg>
|
After Width: | Height: | Size: 670 B |
1
public/icon-montagne.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="139.932" height="79.844" viewBox="0 0 139.932 79.844"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M139.078,73.006,85.608,1.71a4.274,4.274,0,0,0-6.838,0L56.6,31.27,47.8,19.532a4.274,4.274,0,0,0-6.838,0L.855,73.006a4.274,4.274,0,0,0,3.419,6.838H135.659a4.274,4.274,0,0,0,3.419-6.838ZM12.822,71.3,44.377,29.219l8.8,11.738a4.274,4.274,0,0,0,6.838,0L82.186,11.4l44.926,59.9Zm0,0" transform="translate(0)"/></svg>
|
After Width: | Height: | Size: 471 B |
1
public/icon-repaires.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="107.781" height="107.781" viewBox="0 0 107.781 107.781"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M53.891,0a53.891,53.891,0,1,0,53.891,53.89A53.951,53.951,0,0,0,53.891,0Zm0,101.557a47.666,47.666,0,1,1,47.666-47.666,47.72,47.72,0,0,1-47.666,47.666Zm0,0"/><path class="a" d="M161.28,103.209a3.112,3.112,0,0,0-4.215-1.268l-35.028,18.835a3.114,3.114,0,0,0-1.268,1.268l-18.828,35.021a3.112,3.112,0,0,0,4.162,4.242h0l.014-.007.038-.021L141.2,142.459a3.1,3.1,0,0,0,1.268-1.267l18.753-34.935c.041-.071.08-.141.116-.215l.025-.048h0a3.1,3.1,0,0,0-.078-2.785Zm-48.971,47.717,11.965-22.254,10.288,10.289Zm26.656-16.364-10.289-10.289,22.252-11.966" transform="translate(-77.72 -77.72)"/></svg>
|
After Width: | Height: | Size: 746 B |
1
public/p2.svg
Normal file
After Width: | Height: | Size: 7.9 KiB |
BIN
public/phone.png
Normal file
After Width: | Height: | Size: 71 KiB |
BIN
public/photo-filtre.png
Normal file
After Width: | Height: | Size: 1.8 MiB |
1
public/txt1.svg
Normal file
After Width: | Height: | Size: 7.6 KiB |