@@ -1,3 +1,11 @@ | |||
$(document).ready(function () { | |||
console.log('test'); | |||
menuToggle(); | |||
}); | |||
function menuToggle() { | |||
var box = $('.menu-content'); | |||
var button = $('.toggle'); | |||
button.on('click', function(){ | |||
box.toggle('slow'); | |||
}); | |||
} |
@@ -1,3 +1,3 @@ | |||
h1 { | |||
color: red; | |||
#content-page { | |||
margin-top: 150px; | |||
} |
@@ -1,9 +1,100 @@ | |||
#menu { | |||
.navbar-toggler { | |||
background-color: $yellow; | |||
.menu-content { | |||
background-color: #FFF; | |||
display: none; | |||
position: fixed; | |||
height: 100%; | |||
width: 100%; | |||
z-index: 100; | |||
top: 0; | |||
left: 0; | |||
.row-menu { | |||
height: 100%; | |||
.row-toggle { | |||
height: 16%; | |||
} | |||
.row-list { | |||
height: 84%; | |||
nav { | |||
ul { | |||
height: 100%; | |||
margin: 0; | |||
li { | |||
width: 100%; | |||
padding-left: 20%; | |||
padding-right: 15%; | |||
margin-bottom: 8%; | |||
display: inline-block; | |||
a { | |||
color: $green; | |||
font-size: 50px; | |||
font-family: dinbold; | |||
font-weight: bold; | |||
line-height: 50px; | |||
} | |||
&.contact { | |||
margin-bottom: 5%; | |||
a { | |||
border: 2px solid $yellow; | |||
padding: 10px 45px; | |||
font-size: 25px; | |||
} | |||
} | |||
.yellow-trait { | |||
width: 20%; | |||
height: 10px; | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
background-color: $yellow; | |||
} | |||
} | |||
} | |||
} | |||
.col-logo { | |||
.logo { | |||
position: absolute; | |||
top: 50%; | |||
transform: translate(-50%, -50%); | |||
left: 50%; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.space_colla { | |||
color: $yellow; | |||
.menu-fixed { | |||
background-color: #FFF; | |||
height: 150px; | |||
z-index: 2; | |||
.navbar-brand { | |||
width: 50%; | |||
} | |||
.participate { | |||
font-size: 30px; | |||
color: #568b6f; | |||
font-family: dinbold; | |||
border: 2px solid #568b6f; | |||
padding: 8px 10px; | |||
font-weight: bold; | |||
} | |||
.space-collab { | |||
color: $yellow; | |||
font-size: 20px; | |||
font-family: dinbold; | |||
} | |||
} | |||
} |
@@ -5,6 +5,7 @@ $yellow: #fce767; | |||
$red: #e73452; | |||
$orange: #ffcc00; | |||
$blue: #17428c; | |||
$green: #568b6f; | |||
@font-face { | |||
font-family: 'dinregular'; |
@@ -47,9 +47,17 @@ __webpack_require__.r(__webpack_exports__); | |||
/***/ (() => { | |||
$(document).ready(function () { | |||
console.log('test'); | |||
menuToggle(); | |||
}); | |||
function menuToggle() { | |||
var box = $('.menu-content'); | |||
var button = $('.toggle'); | |||
button.on('click', function () { | |||
box.toggle('slow'); | |||
}); | |||
} | |||
/***/ }), | |||
/***/ "./assets/app/frontend/app/app.scss": | |||
@@ -74,4 +82,4 @@ __webpack_require__.r(__webpack_exports__); | |||
/******/ var __webpack_exports__ = __webpack_require__.O(); | |||
/******/ } | |||
]); | |||
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuY29tbW9uLmpzIiwid2VicGFjazovLy8uL2Fzc2V0cy9hcHAvZnJvbnRlbmQvYXBwL2FwcC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2pzL3NjcmlwdC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuc2NzcyJdLCJuYW1lcyI6WyIkIiwiZG9jdW1lbnQiLCJyZWFkeSIsImNvbnNvbGUiLCJsb2ciXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7OztBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUVBO0FBQ0E7Q0FHQTtBQUNBLHVCOzs7Ozs7Ozs7Ozs7Ozs7O0FDWkE7Ozs7Ozs7Ozs7O0FDQUFBLENBQUMsQ0FBQ0MsUUFBRCxDQUFELENBQVlDLEtBQVosQ0FBa0IsWUFBWTtBQUMxQkMsU0FBTyxDQUFDQyxHQUFSLENBQVksTUFBWjtBQUNILENBRkQsRTs7Ozs7Ozs7Ozs7O0FDQUEiLCJmaWxlIjoiYXBwLWZyb250ZW5kLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdlbGNvbWUgdG8geW91ciBhcHAncyBtYWluIEphdmFTY3JpcHQgZmlsZSFcbiAqXG4gKiBXZSByZWNvbW1lbmQgaW5jbHVkaW5nIHRoZSBidWlsdCB2ZXJzaW9uIG9mIHRoaXMgSmF2YVNjcmlwdCBmaWxlXG4gKiAoYW5kIGl0cyBDU1MgZmlsZSkgaW4geW91ciBiYXNlIGxheW91dCAoYmFzZS5odG1sLnR3aWcpLlxuICovXG5cbi8vIGFueSBDU1MgeW91IGltcG9ydCB3aWxsIG91dHB1dCBpbnRvIGEgc2luZ2xlIGNzcyBmaWxlIChhcHAuY3NzIGluIHRoaXMgY2FzZSlcbmltcG9ydCAnLi9hcHAuc2Nzcyc7XG5pbXBvcnQgJy4vYXBwLmpzJztcblxuLy8gc3RhcnQgdGhlIFN0aW11bHVzIGFwcGxpY2F0aW9uXG4vL2ltcG9ydCAnLi9ib290c3RyYXAnOyIsImltcG9ydCAnYm9vdHN0cmFwJztcbmltcG9ydCBcIi4uL2pzL3NjcmlwdFwiO1xuIiwiJChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24gKCkge1xuICAgIGNvbnNvbGUubG9nKCd0ZXN0Jyk7XG59KTtcbiIsIi8vIGV4dHJhY3RlZCBieSBtaW5pLWNzcy1leHRyYWN0LXBsdWdpblxuZXhwb3J0IHt9OyJdLCJzb3VyY2VSb290IjoiIn0= | |||
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuY29tbW9uLmpzIiwid2VicGFjazovLy8uL2Fzc2V0cy9hcHAvZnJvbnRlbmQvYXBwL2FwcC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2pzL3NjcmlwdC5qcyIsIndlYnBhY2s6Ly8vLi9hc3NldHMvYXBwL2Zyb250ZW5kL2FwcC9hcHAuc2NzcyJdLCJuYW1lcyI6WyIkIiwiZG9jdW1lbnQiLCJyZWFkeSIsIm1lbnVUb2dnbGUiLCJib3giLCJidXR0b24iLCJvbiIsInRvZ2dsZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRUE7QUFDQTtDQUdBO0FBQ0EsdUI7Ozs7Ozs7Ozs7Ozs7Ozs7QUNaQTs7Ozs7Ozs7Ozs7QUNBQUEsQ0FBQyxDQUFDQyxRQUFELENBQUQsQ0FBWUMsS0FBWixDQUFrQixZQUFZO0FBQzFCQyxZQUFVO0FBQ2IsQ0FGRDs7QUFJQSxTQUFTQSxVQUFULEdBQXNCO0FBQ2xCLE1BQUlDLEdBQUcsR0FBR0osQ0FBQyxDQUFDLGVBQUQsQ0FBWDtBQUNBLE1BQUlLLE1BQU0sR0FBR0wsQ0FBQyxDQUFDLFNBQUQsQ0FBZDtBQUNBSyxRQUFNLENBQUNDLEVBQVAsQ0FBVSxPQUFWLEVBQW1CLFlBQVU7QUFDekJGLE9BQUcsQ0FBQ0csTUFBSixDQUFXLE1BQVg7QUFDSCxHQUZEO0FBR0gsQzs7Ozs7Ozs7Ozs7O0FDVkQiLCJmaWxlIjoiYXBwLWZyb250ZW5kLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdlbGNvbWUgdG8geW91ciBhcHAncyBtYWluIEphdmFTY3JpcHQgZmlsZSFcbiAqXG4gKiBXZSByZWNvbW1lbmQgaW5jbHVkaW5nIHRoZSBidWlsdCB2ZXJzaW9uIG9mIHRoaXMgSmF2YVNjcmlwdCBmaWxlXG4gKiAoYW5kIGl0cyBDU1MgZmlsZSkgaW4geW91ciBiYXNlIGxheW91dCAoYmFzZS5odG1sLnR3aWcpLlxuICovXG5cbi8vIGFueSBDU1MgeW91IGltcG9ydCB3aWxsIG91dHB1dCBpbnRvIGEgc2luZ2xlIGNzcyBmaWxlIChhcHAuY3NzIGluIHRoaXMgY2FzZSlcbmltcG9ydCAnLi9hcHAuc2Nzcyc7XG5pbXBvcnQgJy4vYXBwLmpzJztcblxuLy8gc3RhcnQgdGhlIFN0aW11bHVzIGFwcGxpY2F0aW9uXG4vL2ltcG9ydCAnLi9ib290c3RyYXAnOyIsImltcG9ydCAnYm9vdHN0cmFwJztcbmltcG9ydCBcIi4uL2pzL3NjcmlwdFwiO1xuIiwiJChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24gKCkge1xuICAgIG1lbnVUb2dnbGUoKTtcbn0pO1xuXG5mdW5jdGlvbiBtZW51VG9nZ2xlKCkge1xuICAgIHZhciBib3ggPSAkKCcubWVudS1jb250ZW50Jyk7XG4gICAgdmFyIGJ1dHRvbiA9ICQoJy50b2dnbGUnKTtcbiAgICBidXR0b24ub24oJ2NsaWNrJywgZnVuY3Rpb24oKXtcbiAgICAgICAgYm94LnRvZ2dsZSgnc2xvdycpO1xuICAgIH0pO1xufSIsIi8vIGV4dHJhY3RlZCBieSBtaW5pLWNzcy1leHRyYWN0LXBsdWdpblxuZXhwb3J0IHt9OyJdLCJzb3VyY2VSb290IjoiIn0= |
@@ -16,7 +16,9 @@ | |||
{% block header %} | |||
{% include 'frontend/header.html.twig' %} | |||
{% endblock %} | |||
{% block body %}{% endblock %} | |||
<div id="content-page"> | |||
{% block body %}{% endblock %} | |||
</div> | |||
{% block footer %} | |||
{% include 'frontend/footer.html.twig' %} | |||
{% endblock %} |
@@ -1,22 +1,69 @@ | |||
<div id="menu" class="fixed-top"> | |||
<div class="collapse" id="navbarToggleExternalContent"> | |||
<div class="p-4"> | |||
<h5 class="text-white h4">Collapsed content</h5> | |||
<span class="text-muted">Toggleable via the navbar brand.</span> | |||
<div id="menu"> | |||
<div class="container-fluid menu-content"> | |||
<div class="row-menu"> | |||
<div class="row row-toggle"> | |||
<div class="col-12"> | |||
<button class="toggle" type="button"> | |||
CLOSE | |||
</button> | |||
</div> | |||
</div> | |||
<div class="row row-list"> | |||
<nav class="col-6"> | |||
<ul> | |||
<li> | |||
<span class="yellow-trait"></span> | |||
<a href="" title="Accueil"> | |||
Accueil | |||
</a> | |||
</li> | |||
<li> | |||
<a href="" title="Cartographie rêvolutionnaire"> | |||
Cartographie rêvolutionnaire | |||
</a> | |||
</li> | |||
<li> | |||
<a href="" title="Planisphère des solutions"> | |||
Planisphère des solutions | |||
</a> | |||
</li> | |||
<li> | |||
<a href="" title="Ressourcerie"> | |||
Ressourcerie | |||
</a> | |||
</li> | |||
<li> | |||
<a href="" title="A propos"> | |||
A propos | |||
</a> | |||
</li> | |||
<li class="contact"> | |||
<a href="" title="Contacts"> | |||
CONTACTS | |||
</a> | |||
</li> | |||
</ul> | |||
</nav> | |||
<div class="col-6 col-logo"> | |||
<img class="logo" src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" alt=""> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<nav class="navbar"> | |||
<a class="navbar-brand" href="#"> | |||
<img src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" width="200" alt=""> | |||
</a> | |||
<a class="participate" href=""> | |||
Participer | |||
</a> | |||
<a class="space_colla" href=""> | |||
Espace collaboratif | |||
</a> | |||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> | |||
<span class="navbar-toggler-icon"></span> | |||
</button> | |||
</nav> | |||
<div class="fixed-top menu-fixed"> | |||
<nav class="navbar"> | |||
<a class="navbar-brand" href="#"> | |||
<img src="{{ 'assets/img/Logo-Aux-Actes-Citoyens.jpg' }}" width="200" alt=""> | |||
</a> | |||
<a class="participate" href=""> | |||
PARTICIPER | |||
</a> | |||
<a class="space-collab" href=""> | |||
Espace collaboratif | |||
</a> | |||
<button class="toggle" type="button"> | |||
TOGGLE | |||
</button> | |||
</nav> | |||
</div> | |||
</div> |
@@ -4,12 +4,80 @@ | |||
{% block title %}Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté{% endblock %} | |||
{% block meta %} | |||
<meta name="title" content="Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté" /> | |||
<meta name="description" content="La plateforme numérique « Aux actes Citoyens » arrive bientôt. En attendant, rejoignez-nous !" /> | |||
<meta name="title" content="Aux Actes Citoyens - Imaginer et construire ensemble le futur du Nord Franche-Comté"/> | |||
<meta name="description" | |||
content="La plateforme numérique « Aux actes Citoyens » arrive bientôt. En attendant, rejoignez-nous !"/> | |||
{% endblock %} | |||
{% block body %} | |||
<div class="container"> | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras iaculis nibh non nisl ornare, ut fringilla tellus | |||
iaculis. Maecenas in dignissim tellus, id consectetur metus. Integer et lorem vitae ante feugiat ultrices in ac | |||
augue. Curabitur a ex id erat venenatis finibus. Pellentesque consequat imperdiet eleifend. Vivamus ornare, | |||
mauris a lacinia consequat, mi turpis rhoncus lorem, ultricies fringilla leo metus eu enim. Vivamus maximus | |||
justo nibh, nec ultrices tortor venenatis in. Pellentesque habitant morbi tristique senectus et netus et | |||
malesuada fames ac turpis egestas. Nullam nec dui eu elit semper sodales quis ac sapien. Sed nibh mauris, | |||
posuere non ultricies nec, malesuada quis nisl. | |||
Sed aliquet quis risus non lobortis. Nulla dolor urna, egestas quis tempor ac, tristique non justo. Quisque non | |||
nisi ut sapien porta dictum. Maecenas aliquam quis risus eget maximus. Etiam quis velit euismod, porttitor ex a, | |||
molestie lectus. Donec viverra sapien quis metus vulputate, sed elementum enim suscipit. Donec semper, orci eget | |||
dignissim convallis, purus elit hendrerit felis, eu interdum massa metus nec eros. | |||
Vivamus maximus elementum dolor. Nulla vulputate orci id elit dignissim bibendum sodales ut nunc. Donec nec | |||
risus varius, elementum felis vitae, facilisis arcu. Vestibulum faucibus a neque ac rhoncus. Morbi scelerisque | |||
dignissim justo id hendrerit. Aenean ullamcorper euismod magna, in lobortis quam ornare non. Aliquam pulvinar, | |||
quam ut posuere malesuada, nisi neque malesuada tellus, in ornare purus justo ut orci. Curabitur quis rutrum | |||
metus. | |||
Praesent venenatis libero nec lobortis iaculis. Etiam tortor velit, interdum sed massa commodo, vestibulum | |||
ultrices nisl. Ut risus dui, suscipit vel eros ut, consectetur vestibulum eros. Quisque tempus rhoncus dolor | |||
porta sagittis. Ut egestas erat quis molestie ultrices. Cras egestas ex eu velit semper efficitur. Praesent | |||
consectetur lacinia lectus, vel efficitur mauris dignissim vel. Suspendisse pharetra elit egestas tincidunt | |||
volutpat. In accumsan at felis nec eleifend. Suspendisse potenti. Nam mollis sodales vulputate. Cras odio justo, | |||
congue ac turpis vitae, vulputate bibendum arcu. Cras vitae justo orci. | |||
Sed pharetra in dolor quis vulputate. Morbi quis sapien lacinia, fermentum dui nec, fermentum ligula. Donec | |||
rutrum, nibh vel laoreet fermentum, sapien sem cursus neque, vel elementum ex eros non lectus. Curabitur semper | |||
egestas vehicula. Vivamus nunc mi, porttitor at fermentum sed, pretium nec tellus. Nunc dui dolor, mollis vel | |||
felis in, vestibulum vulputate lectus. Etiam porttitor est sit amet est dictum, eget aliquam ligula suscipit. | |||
Fusce gravida eros vel magna rutrum, vel consectetur eros consectetur. Vestibulum ante ipsum primis in faucibus | |||
orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices | |||
posuere cubilia curae; Fusce nec porttitor felis, non condimentum ligula. Aliquam elementum auctor libero, vel | |||
porttitor sem fermentum et. Nullam tempor faucibus tellus, in aliquet mi aliquet a. | |||
Etiam velit orci, dictum ut risus egestas, lacinia finibus tellus. In condimentum velit id ex feugiat maximus. | |||
Maecenas lorem purus, consequat eu luctus sit amet, rutrum at lectus. Etiam lobortis tellus et aliquam | |||
consectetur. Morbi porta lacinia dapibus. Donec fermentum nisl vel blandit aliquam. Nullam rhoncus, lorem non | |||
condimentum vulputate, dui est congue nisl, vel porta nulla metus id justo. Nam eu lectus tempor, viverra neque | |||
vitae, congue quam. Mauris imperdiet libero ac odio suscipit, eget vestibulum nunc sagittis. | |||
Fusce elit lectus, suscipit eu tortor eu, dictum tempus tellus. Lorem ipsum dolor sit amet, consectetur | |||
adipiscing elit. Aliquam et eleifend odio. Suspendisse dapibus sem eget metus scelerisque ullamcorper. Sed in | |||
eros posuere, finibus dui vulputate, tempus lacus. Sed erat est, condimentum et ex non, sollicitudin laoreet | |||
lorem. Cras a feugiat est, a malesuada neque. Etiam fringilla risus dolor, sit amet mollis mi efficitur quis. | |||
Etiam nec porta justo. Morbi felis libero, tempor ac congue sed, venenatis et erat. Vestibulum blandit lorem | |||
vitae arcu dignissim rutrum. | |||
Donec posuere placerat massa, viverra elementum quam convallis nec. Praesent quis lacus pellentesque, consequat | |||
orci ac, convallis nisl. Vestibulum finibus ac lacus vel feugiat. Maecenas aliquet tristique augue, eu sodales | |||
nulla pharetra nec. Nunc mauris lorem, ultrices nec consectetur id, venenatis et tortor. Proin ac condimentum | |||
nisl, nec dictum nulla. Mauris pharetra tortor quam, at tincidunt velit molestie eu. Donec elementum elit | |||
consequat enim mattis, id suscipit elit dignissim. Donec malesuada imperdiet augue, non euismod lectus. Mauris | |||
pharetra elit urna, sed consequat ipsum euismod at. Etiam nec consequat augue, eget egestas turpis. Cras | |||
interdum mauris mi, nec dapibus lorem congue vel. Pellentesque mollis risus vitae sem gravida dictum. | |||
Donec rutrum ex at turpis auctor lacinia. Donec et massa est. Quisque erat mauris, ultricies non turpis quis, | |||
hendrerit interdum ipsum. Curabitur mollis auctor lorem sit amet tristique. Cras tempus non lectus a egestas. Ut | |||
a facilisis neque. Fusce sed lectus at diam auctor molestie vel ac velit. Fusce pulvinar dui vel felis lobortis | |||
malesuada. Nulla placerat est risus, eu dictum libero sollicitudin id. Mauris dictum aliquet tortor id maximus. | |||
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam id dui sagittis, | |||
semper odio vel, mattis dui. Nulla pharetra tincidunt diam, eget vulputate risus vehicula at. Phasellus | |||
tincidunt blandit massa, maximus sollicitudin nulla sollicitudin vitae. | |||
Nunc finibus sollicitudin aliquam. Nullam finibus velit sed arcu commodo, id tempor mi placerat. Nulla nec nunc | |||
eleifend, lobortis lorem scelerisque, semper nisi. In sit amet metus vel urna eleifend maximus in eget ante. | |||
Fusce hendrerit lectus libero, eget feugiat eros tincidunt dignissim. Praesent diam eros, tristique et elementum | |||
vitae, accumsan eu erat. Phasellus urna leo, semper vitae ligula sit amet, tristique bibendum mi. | |||
</div> | |||
{% endblock %} |