Commit 3c4dbb24 authored by erreur401's avatar erreur401

decoupe html + template jinja(dure) + route

parent 60ce4861
......@@ -9,9 +9,32 @@ def index():
#return "Hello, World!"
return render_template("home.html")
@app.route("/learn")
def learn():
#return "Hello, World!"
return render_template("learn.html")
@app.route("/login")
def login():
#return "Hello, World!"
return render_template("login.html")
@app.route("/contact")
def contact():
#return "Hello, World!"
return render_template("contact.html")
@app.route("/event")
def event():
#return "Hello, World!"
return render_template("event.html")
#@app.errorhandler(404)
#def not_found(error):
# return render_template('error.html'), 404
if __name__ == '__main__':
app.run(host='0.0.0.0', debug=True)
......@@ -24,7 +24,7 @@ h1, h2, h3, h4, h5 {
}
.spacer {
height: 20px;
height: 50px;
}
body {
......@@ -41,12 +41,16 @@ nav {
nav .logo {
width: 45px;
height: 45px;
background: url(../static/img/logo.png) center center no-repeat;
background: url(../img/logo.png) center center no-repeat;
background-size: contain;
margin: 10px;
display: inline-block;
}
.pageWrap {
min-height: 100vh !important;
}
ul#menuMain li {
display: inline-block;
list-style: none;
......@@ -81,6 +85,7 @@ ul#menuMain li:hover span:before {
}
ul#menuMain li a {
color: #000;
text-decoration: none;
}
ul#menuMain li a:hover {
color: #666;
......@@ -101,6 +106,7 @@ ul#menuSecond li {
}
ul#menuSecond li a {
color: #000;
text-decoration: none;
}
ul#menuSecond li a:hover {
color: #666;
......@@ -166,6 +172,8 @@ ul#menuSecond li a:hover {
.cta-btn {
padding: 20px 0;
align-items: center;
justify-content: center;
}
.homePush h2 {
......@@ -233,17 +241,17 @@ ul#menuSecond li a:hover {
background: red;
}
.tutoItem .tutoBox:hover .green.overTuto:before {
background: url(../static/img/chip.png) no-repeat #90ee90;
background: url(../img/chip.png) no-repeat #90ee90;
background-position: center !important;
background-size: 40%;
}
.tutoItem .tutoBox:hover .blue.overTuto:before {
background: url(../static/img/cncico.png) no-repeat blue;
background: url(../img/cncico.png) no-repeat blue;
background-position: center;
background-size: 40%;
}
.tutoItem .tutoBox:hover .red.overTuto:before {
background: url(../static/img/3dprint.png) no-repeat red;
background: url(../img/3dprint.png) no-repeat red;
background-position: center;
background-size: 40%;
}
......
......@@ -27,7 +27,7 @@ h1, h2, h3, h4, h5 {
}
.spacer {
height: 20px;
height: 50px;
}
body {
......@@ -43,13 +43,17 @@ nav {
.logo {
width: 45px;
height: 45px;
background: url(../static/img/logo.png) center center no-repeat;
background: url(../img/logo.png) center center no-repeat;
background-size: contain;
margin: 10px;
display: inline-block;
}
}
.pageWrap{
min-height: 100vh!important;
}
ul {
&#menuMain li {
display: inline-block;
......@@ -84,6 +88,7 @@ ul {
}
a {
color: #000;
text-decoration: none;
&:hover {
color: #666;
text-decoration: none;
......@@ -103,6 +108,7 @@ ul {
text-align: center;
a {
color: #000;
text-decoration: none;
&:hover {
color: #666;
text-decoration: none;
......@@ -175,6 +181,8 @@ ul {
.cta-btn {
padding: 20px 0;
align-items: center;
justify-content: center;
}
.homePush h2 {
......@@ -242,17 +250,17 @@ ul {
}
&:hover {
.green.overTuto:before {
background: url(../static/img/chip.png) no-repeat #90ee90;
background: url(../img/chip.png) no-repeat #90ee90;
background-position: center !important;
background-size: 40%;
}
.blue.overTuto:before {
background: url(../static/img/cncico.png) no-repeat blue;
background: url(../img/cncico.png) no-repeat blue;
background-position: center;
background-size: 40%;
}
.red.overTuto:before {
background: url(../static/img/3dprint.png) no-repeat red;
background: url(../img/3dprint.png) no-repeat red;
background-position: center;
background-size: 40%;
}
......
......@@ -2,30 +2,30 @@
<html lang="en">
<head>
{% block head %}
{% include 'header.html' %}
<title>{% block title %}beMaker{% endblock title %}</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" href="static/">
{% endblock head %}
</head>
</head>
<body>
<div class="is-typeset">
{% block nav %}
{% include 'menu.html'%}
{% endblock nav %}
<div class="pageWrap">
{% block content %}
{% endblock content %}
</div>
{% block footer %}
{% include 'footer.html' %}
{% endblock footer %}
</div>
<script src="static/"></script>
<script src="../static/node_modules/jquery/dist/jquery.min.js"></script>
<script src="../static/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../static/js/main.js"></script>
</body>
</html>
{% extends "base.html" %}
{% block content %}
<h1> contact us </h1>
<div class="container ">
<dir class="row no-gutters justify-content-md-center">
<div class=" col col-12 col-sm-12 col-md-8 col-lg-8">
<div class="form-area">
<form role="form">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="email" name="email" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
</div>
<div class="form-group">
<textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
<span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>
</div>
<button type="button" id="submit" name="submit" class="btn btn-primary pull-right">Submit Form</button>
</form>
</div>
</dir>
</div>
{% endblock %}
\ No newline at end of file
{% extends "base.html" %}
{% block content %}
<div class="container">
<h1>LES ATELIERS</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="spacer"></div>
<ul class="workshop">
<li>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<div class="img">
<img src="img/3d.png">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="desc">
<h3>Atelier laser pour ado</h3>
<span class="wsdate">24 . 02 . 1985</span> <span class="wsdate">18:30</span> by <a href="#">Bemaker</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<div class="subbtn">
<a href="#">
<button type="button" class="btn btn-info btn-lg">inscription</button>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<div class="img">
<img src="img/CNC.png">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="desc">
<h3>Atelier laser pour ado</h3>
<span class="wsdate">24 . 02 . 1985</span> <span class="wsdate">18:30</span>
by <span><a href="#">Imal</a></span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<div class="subbtn">
<a href="#">
<button type="button" class="btn btn-info btn-lg">inscription</button>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<div class="img">
<img src="img/tuto/servomotor.jpg">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="desc">
<h3>des servos dans le cerveau</h3>
<span class="wsdate">24 . 02 . 1985</span> <span class="wsdate">18:30</span>
by <span><a href="#">OpenFab</a></span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ull
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<div class="subbtn">
<a href="#">
<button type="button" class="btn btn-success btn-lg">a bientot</button>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
{% endblock %}
\ No newline at end of file
<footer>
<div class="container">
<div class="row no-gutter">
<div class=" col col-12 col-sm-12 col-md-6 col-lg-4">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{ clear:left; width:100%;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://bemaker.us17.list-manage.com/subscribe/post?u=cdd8dfbf90bd0195566431e2f&amp;id=e7e8df078e" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_cdd8dfbf90bd0195566431e2f_e7e8df078e" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
</div>
</footer>
\ No newline at end of file
<!-- LOAD BOOTSTRAP -->
<link href="../static/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- LAOD MAIN CSS FILE -->
<link href="../static/css/style.css" rel="stylesheet" media="screen">
<!-- LOAD MD CONTENT SPECIFIC CSS -->
<link href="../static/css/mdcss.css" rel="stylesheet" media="screen">
{% extends "base.html" %}
{% block content %}
yo
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../static/img/jumbo.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../static/img/jumbo.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../static/img/jumbo.png" alt="Third slide">
</div>
</div>
</div>
<div class="homePush">
<div class="row no-gutter">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="container">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="spacer"></div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 ">
<div class='cta'>
<div class="ico">
<img src="img/people.png">
</div>
<h3>Inscription</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 ">
<div class='cta'>
<div class="ico">
<img src="img/hat.png">
</div>
<h3>Decouvrir</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 ">
<div class='cta'>
<div class="ico">
<img src="img/tools2.png">
</div>
<h3> Atelier </h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="row center cta-btn">
<a href="#">
<button type="button" class="btn btn-info btn-lg">en savoir plus</button>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="homePush greyBg">
<h2>LEARN </h2>
<div class="container-fluid">
<div class="row no-gutter">
<div class="col col-12 col-sm-12 col-md-12 col-lg-12">
<div class="row">
<div class="col col-12 col-sm-6 col-md-4 col-lg-3 tutoItem">
<div class="tutoBox">
<img src="https://placeimg.com/640/480/tech">
<div class="overTuto green">
<h4>arduino first step</h4>
<span class="desc">Desciption courte</span>
</div>
</div>
</div>
<div class="col col-12 col-sm-6 col-md-4 col-lg-3 tutoItem">
<div class="tutoBox">
<img src="https://placeimg.com/640/480/tech">
<div class="overTuto red">
<h4>arduino first step</h4>
<span class="desc">Desciption courte</span>
</div>
</div>
</div>
<div class="col col-12 col-sm-6 col-md-4 col-lg-3 tutoItem">
<div class="tutoBox">
<img src="https://placeimg.com/640/480/tech">
<div class="overTuto green">
<h4>arduino first step</h4>
<span class="desc">Desciption courte</span>
</div>
</div>
</div>
<div class="col col-12 col-sm-6 col-md-4 col-lg-3 tutoItem">
<div class="tutoBox">
<img src="https://placeimg.com/640/480/tech">
<div class="overTuto green">
<h4>arduino first step</h4>
<span class="desc">Desciption courte</span>
</div>
</div>
</div>
<div class="col col-12 col-sm-6 col-md-4 col-lg-3 tutoItem">
<div class="tutoBox">
<img src="https://placeimg.com/640/480/tech">
<div class="overTuto blue">
<h4>arduino first step</h4>
<span class="desc">Desciption courte</span>
</div>
</div>
</div>
<div class="col col-12 col-sm-6 col-md-4 col-lg-3 tutoItem">
<div class="tutoBox">
<img src="https://placeimg.com/640/480/tech">
<div class="overTuto green">
<h4>arduino first step</h4>
<span class="desc">Desciption courte</span>
</div>
</div>
</div>
<div class="col col-12 col-sm-6 col-md-4 col-lg-3 tutoItem">
<div class="tutoBox">
<img src="https://placeimg.com/640/480/tech">
<div class="overTuto blue">
<h4>arduino first step</h4>
<span class="desc">Desciption courte</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="homePush workshopList">
<h2>WORKSHOP </h2>
<div class="container">
<ul class="workshop">
<li>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<div class="img">
<img src="img/3d.png">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="desc">
<h3>Atelier laser pour ado</h3>
<span class="wsdate">24 . 02 . 1985</span> <span class="wsdate">18:30</span> by <a href="#">Bemaker</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<div class="subbtn">
<a href="#">
<button type="button" class="btn btn-info btn-lg">inscription</button>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<div class="img">
<img src="img/CNC.png">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="desc">
<h3>Atelier laser pour ado</h3>
<span class="wsdate">24 . 02 . 1985</span> <span class="wsdate">18:30</span>
by <span><a href="#">Imal</a></span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<div class="subbtn">
<a href="#">
<button type="button" class="btn btn-info btn-lg">inscription</button>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<div class="img">
<img src="img/tuto/servomotor.jpg">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div class="desc">
<h3>des servos dans le cerveau</h3>
<span class="wsdate">24 . 02 . 1985</span> <span class="wsdate">18:30</span>
by <span><a href="#">OpenFab</a></span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ull
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<div class="subbtn">
<a href="#">
<button type="button" class="btn btn-success btn-lg">a bientot</button>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
{% endblock %}
{% extends "base.html" %}
{% block content %}
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="../static/img/jumbo.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../static/img/jumbo.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="../static/img/jumbo.png" alt="Third slide">
</div>
</div>
</div>
<div class="tutoWrapper">