Codes sources du site de l'association de jeunes écolos Prend-en de la graine! Site web temporaire pour versions betas https://www.matthiasrouyer.fr/pedlg
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.
 
 
 

311 lines
18 KiB

<!DOCTYPE html>
<html lang="fr">
<title>Prends-en de la graine, collectif étudiants écolo à Valence</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="collectif écolo Valence, prends-en de la graine, ">
<link rel="icon" type="image/png" sizes="400x400" href="img/logo.png">
<link rel="stylesheet" type="text/css" href="css/w3.css">
<link rel="stylesheet" type="text/css" href="css/font1.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<style>
body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
body {font-size:16px;}
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
.w3-half img:hover{opacity:1}
</style>
<body>
<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-light-green w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font-weight:bold;" id="mySidebar"><br>
<a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:22px">Fermer menu</a>
<div class="w3-container" style="padding-bottom: 15px;">
<a href="index.html"><img style="width: 180px" src="img/logo.png"></a><b>
</div>
<div class="w3-bar-block">
<a href="#pres" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Présentation</a>
<a href="#actions" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Nos actions</a>
<a href="#membres" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Les membres</a>
<a href="#rejoindre" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Nous rejoindre</a>
<a href="#suivre" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Nous suivre</a>
<a href="publication.html" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Nos publications</a>
<a href="#ressource" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Nos ressources</a>
<a href="#contact" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Nous contacter</a>
</div>
<center>
<div style="padding-top: 20px;">
<a href="#"><img style="width: 25px; border: grey 2px solid;" src="img/drapeau_fr.png"></a>
<a href="#"><img style="width: 30px; padding-left: 3px;" src="img/drapeau_en.png"></a>
</div>
</center>
</nav>
<!-- Top menu on small screens -->
<header class="w3-container w3-top w3-hide-large w3-light-green w3-xlarge w3-padding">
<a href="javascript:void(0)" class="w3-button w3-light-green w3-margin-right" onclick="w3_open()"></a>
<span>Valence écolo</span>
</header>
<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:340px;margin-right:40px">
<!-- Header -->
<div class="w3-container" style="margin-top:80px">
<h1 class="w3-jumbo"><b>Découvrez le collectif écolo à Valence</b></h1>
<div id="pres"></div>
<h1 class="w3-xxxlarge w3-text-light-green"><b>Présentation</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<!-- Présentation de l'asso -->
<div class="w3-left-align">
<p>Prends-en de la graine est un collectif à but non lucratif qui souhaite agir en faveur de l'écologie. Il a été créé
en 2020 par des étudiants de Grenoble INP - Esisar, école publique française d'ingénieurs située à Valence (26) dans la Drôme.<br/>
</p>
<h2>La charte du collectif</h2>
<h4>Objectifs et positionnement du collectif</h4>
<h5 id="quest-ce-que-le-collectif-prends-en-de-la-graine">Qu’est-ce que le collectif Prends-en de la graine ?</h5>
<p>C’est un collectif d’étudiants valentinois cherchant à se fédérer autour d’actions écolos de tout type, et permettant aux étudiants de se rencontrer, de s’organiser et de se renseigner joyeusement autour de cet intérêt commun.</p>
<h5 id="quelle-écologie-défendons-nous">Quelle écologie défendons-nous ?</h5>
<p>Le collectif souhaite permettre et encourager une convergence et une émulsion vers une écologie sociale à Valence. Ainsi nous sommes ouverts à toutes formes d’écologie, quelque soit sa radicalité. Nous refusons cependant les jugements dogmatiques sur les opinions et actions des autres, et privilégierons des critiques construites et argumentées, notamment sur des questions d’efficacité.</p>
<h5 id="sommes-nous-une-organisation-politique">Sommes-nous une organisation politique ?</h5>
<p>Dans un certain sens, oui. L’écologie est pour nous indéniablement une question politique, au sens premier du terme <em>: Politikos</em>, désigne ce qui est relatif à l’organisation ou autogestion d’une cité, d’un état et à l’exercice du pouvoir dans une société organisée. Nous concevons donc mal comment l’écologie pourrait ne pas être une question politique.</p>
<p>Néanmoins, nous sommes apartisans : nous souhaitons rester indépendant de tout parti politique. Nous nous autorisons cependant à critiquer, féliciter ou encourager des mesures politiques, si cela est fait en toute indépendance, et dans un consensus des membres du collectif.</p>
<p>Nous souhaitons de manière générale, rester un maximum indépendant (entreprise, école, personnalité…).</p>
<h5 id="quelles-actions-souhaitons-nous-réaliser">Quelles actions souhaitons nous réaliser ?</h5>
<p>Nous sommes ouverts à tous types d’actions : sensibilisation, ateliers, conférences, débats, manifestations, désobéissance civile, paniers de légumes, créations d’alternatives, et tout plein d’autres auquel on ne pense pas encore !</p>
<p>Nous sommes aussi ouvert à soutenir, relayer, participer ou organiser à leur coté, des actions venant d’autres organisations écolos si elles nous plaisent !</p>
<p>Nos actions sont en principe ouvertes à tous et à toutes, et, même si nous ciblons en priorité les étudiants, tu peux participer à nos actions publiques (sauf mention contraire).</p>
<h5 id="et-est-ce-possible-de-rejoindre-le-collectif">Et… est-ce possible de rejoindre le collectif ?</h5>
<p>OUI !! Viens nous rencontrer ! Contacte-nous ! Cela n’engage à rien, c’est gratuit, et on sera enchanté de faire ta connaissance, qui que tu sois, quelles que soient tes positions en matière d’écologie, ton niveau de connaissance sur ce sujet, ton école, le temps que tu as à consacrer au collectif, bref, viens comme tu-es, promis on ne mord pas ! La seule condition est d’être étudiant à Valence, et d’être en accord avec notre charte !</p>
<h4 id="organisation-et-fonctionnement">Organisation et fonctionnement</h4>
<h5 id="comment-est-géré-le-collectif">Comment est géré le collectif ?</h5>
<p>Le collectif cherche à fonctionner en autogestion, c’est-à-dire sans instaurer de rapports hiérarchiques entre ses membres, ce qui implique l’absence de “leader” (notamment sur la base de ce document <a href="https://tinyurl.com/y24mrohg" class="uri">https://tinyurl.com/y24mrohg</a> ) . Cela permet de laisser à chacun le choix et la liberté de s’exprimer et d’entreprendre avec sa part de responsabilité individuelle.</p>
<h5 id="avons-nous-mis-en-place-un-système-de-prise-de-décision">Avons-nous mis en place un système de prise de décision ?</h5>
<p>Nous recherchons constamment le consensus entre les membres du collectif à chaque prise de décision, surtout lorsqu’elles impactent le devenir du collectif. Dans ce but, une action/publication peut être rejetée au nom du collectif si au moins un tiers de ses membres y sont radicalement opposés.</p>
<p>Cependant, nous envisageons que chacun ajoute son pseudo (référant ou non à son prénom) à chaque publication sur les réseaux sociaux du collectif.</p>
<h5 id="quelle-est-notre-rôle">Quelle est notre rôle ?</h5>
<p>Nous n’avons pas de rôle unique. Le but du collectif est d’informer autour de l’écologie, d’organiser des événements (ou en relayer), etc… notre but est avant tout de fédérer autour d’une cause commune !</p>
<a href="Charte.pdf">Télécharger notre Charte (format PDF)</a>
</div>
</div>
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black" style="padding-top:0" onclick="this.style.display='none'">
<span class="w3-button w3-black w3-xxlarge w3-display-topright">×</span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img id="img01" class="w3-image">
<p id="caption"></p>
</div>
</div>
<!-- Toutes nos actions -->
<div class="w3-container" id="actions" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-light-green"><b>Nos actions</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p>Nous souhaitons agir de plusieurs façons:</p>
<ul>
<li>Mettre en place des paniers legumes</li>
<li>Préparer et donner des conférences</li>
</ul>
</div>
<!-- Les membres -->
<div class="w3-container" id="membres" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-light-green"><b>Les membres</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
</div>
<!-- Présentation de la team -->
<div class="w3-row-padding w3-grayscale">
<div class="w3-col m4 w3-margin-bottom">
<div class="w3-light-grey">
<img src="/w3images/team2.jpg" alt="Simon" style="width:100%">
<div class="w3-container">
<h3>Simon</h3>
<p class="w3-opacity">Membre</p>
<p>Étudiant et cool.</p>
</div>
</div>
</div>
<div class="w3-col m4 w3-margin-bottom">
<div class="w3-light-grey">
<img src="img/pp_mat.jpg" alt="Matthias" style="width:100%">
<div class="w3-container">
<h3>Matthias</h3>
<p class="w3-opacity">Membre</p>
<p>Étudiant à Grenoble INP - Esisar<br/>
<a href="https://twitter.com/83Matthias"><i class="fa fa-twitter-square" style="font-size:36px; color: blue;"></i>@83Matthias</a>
</div>
</div>
</div>
<div class="w3-col m4 w3-margin-bottom">
<div class="w3-light-grey">
<img src="/w3images/team3.jpg" alt="Aurélien" style="width:100%">
<div class="w3-container">
<h3>Aurélien</h3>
<p class="w3-opacity">Membre</p>
<p>Étudiant et cool.</p>
</div>
</div>
</div>
</div>
<div class="w3-row-padding w3-grayscale">
<div class="w3-col m4 w3-margin-bottom">
<div class="w3-light-grey">
<img src="img/pp_leo.jpg" alt="Léo" style="width:100%">
<div class="w3-container">
<h3>Léo</h3>
<p class="w3-opacity">Membre</p>
<p>Étudiant et cool.</p>
</div>
</div>
</div>
<div class="w3-col m4 w3-margin-bottom">
<div class="w3-light-grey">
<img src="img/" alt="Camille" style="width:100%">
<div class="w3-container">
<h3>Camille</h3>
<p class="w3-opacity">Membre</p>
<p>Étudiant.</p>
</div>
</div>
</div>
<div class="w3-col m4 w3-margin-bottom">
<div class="w3-light-grey">
<img src="/w3images/team3.jpg" alt="Aurélien" style="width:100%">
<div class="w3-container">
<h3>Aurélien</h3>
<p class="w3-opacity">Membre</p>
<p>Étudiant & cool</p>
</div>
</div>
</div>
</div>
<!-- Nous rejoindre -->
<div class="w3-container" id="rejoindre" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-light-green"><b>Nous rejoindre</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p>Nous souhaitons dans le futur devenir un collectif avec plus de membres, cependant, pour l'instant nous ne pouvons pas
recruter de nouveaux adhérents.</p>
<p>Nous commencerons les recrutements à partir de septembre 2020 au plus tôt.</p>
<p>En attendant, inscrivez-vous à la newslater en cliquant ici <a href="index.html#suivre">je m'inscris à la newslater</a> pour recevoir par mail l'actualité du collectif. </p>
</div>
<!-- Nous suivre sur les réseaux -->
<div class="w3-container" id="suivre" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-light-green"><b>Nous suivre</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p>Nous avons vraiment besoin de votre soutien!</p>
<h3>Suivez-nous sur les réseaux sociaux</h3>
<a href="https://www.facebook.com/Prends-en-de-la-graine-115117806700355"><i class="fa fa-facebook-square" style="font-size:36px; color: blue;"></i></a>
<!-- inscription à la newslater -->
<h3>Inscription à la newslater</h3>
<form action="envoie_mail_pedlg.php?code=2" method="post">
<input type="email" name="mail_newslater" class="w3-input w3-border" placeholder="Adresse mail" required>
<button class="w3-button w3-block w3-padding-large w3-light-green w3-margin-bottom" type="submit">S'inscrire</button>
</form>
</div>
<!-- Nous ressources-->
<div class="w3-container" id="ressource" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-light-green"><b>Nos ressources</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p>Nous vous proposons plusieurs moyens d'accéder à des ressources intéressantes dans le domaine de l'écologie, de l'environnement, du climat ou autre. </p>
<p> </p>
<h2>Notre cloud</h2>
<p>Vous trouverez dans notre cloud toutes les conférences que nous avons réalisés, des rapports intéressants de grandes institutions, etc. <br/><br/>
<a href="#" class="w3-btn w3-green">Accéder au cloud</a>
</p>
<h2>Liens utiles</h2>
<p>Nous vous proposons une liste non exaustive de liens vers des ...</p>
<h3>Les journaux et web-magazine écolo</h3>
<ul class="w3-ul w3-border">
<li>Reporterre - <a href="https://reporterre.net/">https://reporterre.net/</a> (gratuit)</li>
<li>Natura Science - <a href="https://www.natura-sciences.com/">https://www.natura-sciences.com/</a> (gratuit)</li>
<li>Notre planète - <a href="https://www.notre-planete.info/">https://www.notre-planete.info/</a> (1 article gratuit par semaine)</li>
</ul>
<h3>Les associations dans le domaine de l'écologie</h3>
<ul class="w3-ul w3-border">
<li>Greenpeace - <a href="https://www.greenpeace.fr/">https://www.greenpeace.fr/</a></li>
<li>France Nature environnement - <a href="https://www.fne.asso.fr/">https://www.fne.asso.fr/</a> </li>
<li>LPO - <a href="https://www.lpo.fr/">https://www.lpo.fr/</a></li>
<li>Alternatiba - <a href="https://alternatiba.eu/">https://alternatiba.eu/</a></li>
</ul>
<h2>Calculer vos rejets de CO2 en fonction des différents moyens de transports</h2>
<script id="ecolab-transport" data-distanceInitiale="29" src="https://ecolab.ademe.fr/apps/transport/iframe.js"></script>
</div>
<!-- Contact -->
<div class="w3-container" id="contact" style="margin-top:75px">
<h1 class="w3-xxxlarge w3-text-light-green"><b>Nous contacter</b></h1>
<hr style="width:50px;border:5px solid red" class="w3-round">
<p>Vous souhaitez nous poser une question ou simplement avoir un rensignement? n'hésitez pas à nous contacter.</p>
<p>Mail: <a href="mailto:prendsendelagraine@protonmail.com">prendsendelagraine@protonmail.com</a></p>
<form action="envoie_mail_pedlg.php?code=1" method="post" target="_blank">
<div class="w3-section">
<label>Prénon Nom</label>
<input class="w3-input w3-border" type="text" name="nom" required>
</div>
<div class="w3-section">
<label>Email</label>
<input class="w3-input w3-border" type="email" name="mail" required>
</div>
<div class="w3-section">
<label>Sujet</label>
<select class="w3-select w3-border" name="sujet" required>
<option disabled selected>Choisir</option>
<option>Nous rejoindre</option>
<option>Demande de partenariat</option>
<option>Demander une information</option>
<option>Signaler un problème, une erreur, un bug</option>
<option>Autre</option>
</select>
</div>
<div class="w3-section">
<label>Message</label>
<textarea class="w3-input w3-border" name="message" required></textarea>
</div>
<button type="submit" class="w3-button w3-block w3-padding-large w3-light-green w3-margin-bottom">Envoyer le message</button>
</form>
</div>
<!-- End page content -->
</div>
<!-- W3.CSS Container -->
<div class="w3-light-grey w3-container w3-padding-32" style="margin-top:75px;padding-right:58px"><p class="w3-right">Créé par des étudiants qui souhaitent agir pour l'écologie.<br/>
Code source libre sous licence CC BY et disponible ici: <a href="https://git.elukerio.org/mat/site_prends-en-de-la-graine-valence">voir le code source</a></p>
</div>
<script>
// Script to open and close sidebar
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
</script>
</body>
</html>