Commit 81d9314a authored by Florent's avatar Florent

change to punch

parent ecafb8df
output/
.DS_STORE
# Learn more about ignoring files: https://help.github.com/articles/ignoring-files
# Ignore generated output from the source code repository.
# Instead, push it to its own upstream repository (eg. Github pages).
output
# Ignore npm package dependencies
node_modules
This diff is collapsed.
{
"template_dir": "templates",
"content_dir": "contents",
"output_dir": "output",
"server": {
"port": 9009
},
"bundles": {
"/css/all.css": [
"/css/normalize.css",
"/css/main.css",
"/css/site.less"
]
}
}
{
"title": "Les membres",
"description": "Retrouvez l'ensemble des roles et leurs fonctions au sein de l'association",
"members": [
{
"name":"Clément VILLAIN",
"role":"Président",
"img_url":"assets/img/clem.png",
"description":"Grand adepte de Python et autres joyeusetés, je m'essaie à tout ce qui touche de près ou de loin à l'algorithmique et aux mathématiques. Je suis en charge de l'association et m'efforce de garder tous ces lurons dans leur cage."
},
{
"name":"Valentin FAMELART",
"role":"Vice-Président",
"img_url":"http://www.gravatar.com/avatar/9a94cce4ac9781d4e02c62df37308fd2.png",
"description":""
},
{
"name":"Alexandra KIENTZ",
"role":"Trésorière",
"img_url":"assets/img/alexandra.jpg",
"description":"Elève ingénieure en première année, mon travail est de gérer le budget de l'association (it's payback time!). J'apprécie l'algo, et mon langage préféré reste le bon vieux C et ses segfaults."
},
{
"name":"José-Alexandre MAYAN",
"role":"Administrateur Réseau",
"img_url":"http://eistiens.net/media/img/users/avatars/mayanjosea.jpg",
"description":"Élève-ingénieur en première année, je suis passionné de sécurité. Mon travail est de m'assurer que les services ne fonctionnent pas tous en même temps, et que le débit en CY106 ne dépasse pas les 100kb par seconde. Je vais aussi m'occuper du club de Reverse Engineering à la rentrée 2014-2015."
},
{
"name":"Antoine GIRARD",
"role":"Responsable Communication",
"img_url":"assets/img/neeev.jpg",
"description":"Élève en classe préparatoire, je suis passionné d'informatique et de nouvelles technologies. Je m'occupe de toute la partie communication de l'association ainsi que de certains projets comme les EisTV (télévisions d'information du campus de Cergy)."
},
{
"name":"Florent CLAPIÉ",
"role":"Responsable WEB",
"img_url":"assets/img/flo.jpg",
"description":"Grand passioné de ride en tout genre, j'aide à la partie Web de l'association."
},
{
"name":"Thomas Henn",
"role":"Administrateur Réseau",
"img_url":"assets/img/thomas.png",
"description":"Élève-ingénieur en deuxième année, passionné par la Science et l'Informatique, je m'efforce d'en apprendre toujours plus. Je participe au développement et à la maintenance des serveur de l'association."
}
]
}
{
"title": "ATILLA - EISTI",
"description": "L'Association des Technologies Internet et du Logiciel Libre ou Alternatif",
"features": [
{
"title": "OpenSource",
"description":"L'un des premiers buts d'ATILLA est de promouvoir le logiciel libre et de défendre l'internet libre. Nous soutenons des associations telles que la Quadrature du Net ou l'APRIL afin de sensibiliser les étudiants à ces questions.",
"icon":"fa-heart"
},
{
"title": "Hacking",
"description":"La passion de la bidouille est un point commun des membres d'ATILLA, nous faisons en sorte de toujours porter des projets innovants mêlant à la fois électronique et programmation.",
"icon":"fa-laptop"
},
{
"title": "Formations",
"description":"Que serait l'EISTI sans les formations ATILLA ! Forte de ses membres passionnés par divers technologies qu'ils souhaitent partager durant des sessions gratuites de formation.",
"icon":"fa-trophy"
}
],
"partners": [
{"name": "debian", "img_url": "c01_mini.png"},
{"name": "FOSDEM", "img_url": "c02_mini.png"},
{"name": "Mozilla", "img_url": "c03_mini.png"},
{"name": "Python", "img_url": "c04_mini.png"},
{"name": "Quadrature", "img_url": "c05_mini.png"},
{"name": "April", "img_url": "c06_mini.png"},
{"name": "?", "img_url": "c10_mini.png"},
{"name": "Arduino", "img_url": "c09_mini.png"},
{"name": "Société générale", "img_url": "c07_mini.png"},
{"name": "EISTI", "img_url": "c08_mini.png"}
],
"forge": [
{
"name": "EISTIENS.NET",
"description":"Le réseau social des étudiants de l'EISTI made by ATILLA, un site dynamique construit à l'aide du framework DJANGO.",
"icon":"fa-globe"
},
{
"name": "EISTV",
"description":"ATILLA a mis en place un système d'affichage dynamique contrôlé par l'intermédiaire d'une interface web. Chaque bâtiment de l'école dispose d'au moins une EisTV.",
"icon":"fa-desktop"
},
{
"name": "HACKATON",
"description":"Nous organisons et participons à divers hackatons, le Steria Hacking Challenge et le Hacking Week sont des événements incontournables à ATILLA.",
"icon":"fa-eye"
},
{
"name": "FOSDEM",
"description":"Le plus grand rassemblement de développeurs du monde du libre qui se déroule à Bruxelles est un passage obligé pour tout membre d'ATILLA qui se respecte.",
"icon":"fa-linux"
},
{
"name": "ROBOTIQUE",
"description":"Nos membres sont aussi des passionnés de robotique dont les projets ont été primés dans plusieurs concours inter-écoles.",
"icon":"fa-cog"
},
{
"name": "CLUSTER",
"description":"En construisant notre propre cluster de serveurs nous avons acquis une indépendance en matière d'infrastructure nous permettant d'expérimenter avec les dernières technologies.",
"icon":"fa-sitemap"
}
]
}
This diff is collapsed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/img/favicon.ico">
<title>ATILLA - Association des Technologies Internet et du
Logiciel Libre ou Alternatif</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/main.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and
media queries --> <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"
href="http://atilla.org"><img src="assets/img/logo.png"
height="60"></a> </div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">ACCUEIL</a></li>
<li><a href="about.html">A PROPOS</a></li>
<li><a href="forge.html">FORGE</a></li>
<li class="active"><a href="formations.html">FORMATIONS</a></li>
<li><a href="http://blog.atilla.org">BLOG</a></li>
<li><a data-toggle="modal" data-target="#myModal"
href="#myModal"><i class="fa fa-envelope-o"></i></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div id="blue">
<div class="container">
<div class="row centered">
<div class="col-lg-8 col-lg-offset-2">
<h4>WE WORK HARD TO ACHIEVE EXCELLENCE</h4>
<p>AND WE ARE HAPPY TO SHARE IT</p>
</div>
</div><!-- row -->
</div><!-- container -->
</div><!-- bluewrap -->
<div class="container desc">
<div class="row">
<br><br>
<div class="col-lg-6 centered">
<img src="assets/img/p03.png" width="300px" alt="">
</div><!-- col-lg-6 -->
<div class="col-lg-6">
<h4>FORMATION GIT</h4>
<p>Git est un outil de gestion de code source extrêmement
puissant. Il permet à un grand nombre de contributeurs de
coder en même temps sur un projet grâce à une gestion
décentralisée des sources.</p>
<p>La formation introduit en douceur à la manipulation de
git, ainsi qu'aux bonnes pratiques à adopter.</p>
<i class="fa fa-circle-o"></i> Le site de l'outil : <a href="http://git-scm.com/"></a><br/>
<i class="fa fa-link"></i> <a href="#">Lien vers la présentation</a>
</div>
</div><!-- row -->
<br><br>
<hr>
<br><br>
<div class="row">
<div class="col-lg-6 centered">
<img src="assets/img/p02.png" width="300px" alt="">
</div><!-- col-lg-6 -->
<div class="col-lg-6">
<h4>FORMATION LATEX</h4>
<p>LaTeX est un outil permettant de formater des documents
de manière professionnelle et ainsi d'obtenir un rendu
quasiment parfait (typographiquement parlant).</p>
<p>Déjà abordé en cours, la formation redonnera les bases de
la redaction en LaTeX ainsi que quelques notions plus
avancées.</p>
<p>
<i class="fa fa-circle-o"></i> Site de l'outil : <a href="http://www.latex-project.org/"> ici</a>.<br/>
<i class="fa fa-link"></i> <a href="#">Lien vers la présentation</a>
</p>
</div>
</div><!-- row -->
</div><!-- container -->
<div id="r">
<div class="container">
<div class="row centered">
<div class="col-lg-8 col-lg-offset-2">
<h4>NOUS SOMMES DES ÉTUDIANTS
PASSIONNÉS. PARTAGEONS CETTE PASSION.</h4>
<p>Chacun des membres d'ATILLA dispose d'une
palette de connaissances et de spécialités qu'il
est prêt à partager. Mutualiser ses expertises
nous permet de réaliser toute sorte de projets
afin d'améliorer le quotidien des étudiants de
l'EISTI et améliorer l'infrastructure de
l'association.</p>
</div>
</div><!-- row -->
</div><!-- container -->
</div><!-- r wrap -->
<!-- FOOTER -->
<div id="f">
<div class="container">
<div class="row centered">
<div class="col-md-5">
<h4>Services :</h4>
<ul>
<div class="row fluid">
<div class="col-md-4">
<li><a href="http://paste.atilla.org">paste.atilla.org</a></li>
<li><a href="http://pad.atilla.org">pad.atilla.org</a></li>
</div>
<div class="col-md-4">
<li><a href="http://doc.atilla.org">doc.atilla.org</a></li>
<li><a href="http://rer.atilla.org">rer.atilla.org</a></li>
</div>
<div class="col-md-4">
<li><a href="http://edt.atilla.org">edt.atilla.org</a></li>
</div>
</div>
</ul>
</div>
<div class="col-md-5">
<a href="https://twitter.com/CY106"><i class="fa
fa-twitter"></i></a>
<a href="https://www.facebook.com/groups/172750229447684/"><i class="fa
fa-facebook"></i></a>
<a href="http://gitlab.etude.eisti.fr/groups/atilla"><i class="fa
fa-git-square"></i></a>
</div>
</div><!-- row -->
</div><!-- container -->
</div><!-- Footer -->
<!-- MODAL FOR CONTACT --> <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">contact us</h4>
</div>
<div class="modal-body">
<div class="row centered">
<p>We are available 24/7, so do not hesitate to
contact us.</p>
<p>
Avenue du Parc<br/> Paris, France<br/> +33 1
30 17 08 46<br/> contact@atilla.org
</p>
<div id="mapwrap">
<iframe height="300" width="100%" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="https://www.google.es/maps?t=m&amp;ie=UTF8&amp;ll=49.034689,2.070966&amp;spn=0.004741,0.013078&amp;z=17&amp;output=embed"></iframe>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger"
data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Bootstrap core JavaScript
================================================== --> <!-- Placed
at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- Piwik -->
<script type="text/javascript">
var
_paq=_paq||[];_paq.push(["setDocumentTitle",document.domain+"/"+document.title]),_paq.push(["trackPageView"]),_paq.push(["enableLinkTracking"]),function(){var
t=("https:"==document.location.protocol?"https":"http")+"://www.eistiens.net/stats/";_paq.push(["setTrackerUrl",t+"piwik.php"]),_paq.push(["setSiteId",2]);var
e=document,a=e.createElement("script"),p=e.getElementsByTagName("script")[0];a.type="text/javascript",a.defer=!0,a.async=!0,a.src=t+"piwik.js",p.parentNode.insertBefore(a,p)}();
</script>
<noscript><p><img src="http://www.eistiens.net/stats/piwik.php?idsite=2"
style="border:0;" alt="" /></p></noscript> <!-- End Piwik Code -->
</body>
</html>
This diff is collapsed.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Not Found :(</title>
<style>
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
html { padding: 30px 10px; font-size: 20px; line-height: 1.4; color: #737373; background: #f0f0f0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, input { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
body { max-width: 500px; _width: 500px; padding: 30px 20px 50px; border: 1px solid #b3b3b3; border-radius: 4px; margin: 0 auto; box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; background: #fcfcfc; }
h1 { margin: 0 10px; font-size: 50px; text-align: center; }
h1 span { color: #bbb; }
h3 { margin: 1.5em 0 0.5em; }
p { margin: 1em 0; }
ul { padding: 0 0 0 40px; margin: 1em 0; }
.container { max-width: 380px; _width: 380px; margin: 0 auto; }
/* google search */
#goog-fixurl ul { list-style: none; padding: 0; margin: 0; }
#goog-fixurl form { margin: 0; }
#goog-wm-qt, #goog-wm-sb { border: 1px solid #bbb; font-size: 16px; line-height: normal; vertical-align: top; color: #444; border-radius: 2px; }
#goog-wm-qt { width: 220px; height: 20px; padding: 5px; margin: 5px 10px 0 0; box-shadow: inset 0 1px 1px #ccc; }
#goog-wm-sb { display: inline-block; height: 32px; padding: 0 10px; margin: 5px 0 0; white-space: nowrap; cursor: pointer; background-color: #f5f5f5; background-image: -webkit-linear-gradient(rgba(255,255,255,0), #f1f1f1); background-image: -moz-linear-gradient(rgba(255,255,255,0), #f1f1f1); background-image: -ms-linear-gradient(rgba(255,255,255,0), #f1f1f1); background-image: -o-linear-gradient(rgba(255,255,255,0), #f1f1f1); -webkit-appearance: none; -moz-appearance: none; appearance: none; *overflow: visible; *display: inline; *zoom: 1; }
#goog-wm-sb:hover, #goog-wm-sb:focus { border-color: #aaa; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); background-color: #f8f8f8; }
#goog-wm-qt:focus, #goog-wm-sb:focus { border-color: #105cb6; outline: 0; color: #222; }
input::-moz-focus-inner { padding: 0; border: 0; }
</style>
</head>
<body>
<div class="container">
<h1>Not found <span>:(</span></h1>
<p>Sorry, but the page you were trying to view does not exist.</p>
<p>It looks like this was the result of either:</p>
<ul>
<li>a mistyped address</li>
<li>an out-of-date link</li>
</ul>
<script>
var GOOG_FIXURL_LANG = (navigator.language || '').slice(0,2),GOOG_FIXURL_SITE = location.host;
</script>
<script src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js"></script>
</div>
<!-- MODAL FOR CONTACT -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">contact us</h4>
</div>
<div class="modal-body">
<div class="row centered">
<p>We are available 24/7, so do not hesitate to contact us.</p>
<p>
Avenue du Parc<br/>
Paris, France<br/>
+33 1 30 17 08 46<br/>
contact@atilla.org
</p>
<div id="mapwrap">
<iframe height="300" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.es/maps?t=m&amp;ie=UTF8&amp;ll=49.034689,2.070966&amp;spn=0.004741,0.013078&amp;z=17&amp;output=embed"></iframe>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- Piwik -->
<script type="text/javascript">
var _paq=_paq||[];_paq.push(["setDocumentTitle",document.domain+"/"+document.title]),_paq.push(["trackPageView"]),_paq.push(["enableLinkTracking"]),function(){var t=("https:"==document.location.protocol?"https":"http")+"://www.eistiens.net/stats/";_paq.push(["setTrackerUrl",t+"piwik.php"]),_paq.push(["setSiteId",2]);var e=document,a=e.createElement("script"),p=e.getElementsByTagName("script")[0];a.type="text/javascript",a.defer=!0,a.async=!0,a.src=t+"piwik.js",p.parentNode.insertBefore(a,p)}();
</script>
<noscript><p><img src="http://www.eistiens.net/stats/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
</body>
</html>
<!-- FOOTER -->
<div id="f">
<div class="container">
<div class="row centered">
<div class="col-md-5">
<h4>Services :</h4>
<ul>
<div class="row fluid">
<div class="col-md-4">
<li><a href="http://paste.atilla.org">paste.atilla.org</a></li>
<li><a href="http://pad.atilla.org">pad.atilla.org</a></li>
</div>
<div class="col-md-4">
<li><a href="http://doc.atilla.org">doc.atilla.org</a></li>
<li><a href="http://rer.atilla.org">rer.atilla.org</a></li>
</div>
<div class="col-md-4">
<li><a href="http://edt.atilla.org">edt.atilla.org</a></li>
</div>
</div>
</ul>
</div>
<div class="col-md-5">
<a href="https://twitter.com/CY106"><i class="fa fa-twitter"></i></a>
<a href="https://www.facebook.com/groups/172750229447684/"><i class="fa fa-facebook"></i></a>
<a href="http://gitlab.etude.eisti.fr/groups/atilla"><i class="fa fa-git-square"></i></a>
</div>
</div><!-- row -->
</div><!-- container -->
</div><!-- Footer -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{description}}">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/img/favicon.ico">
<title>{{title}}</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/main.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://atilla.org"><img src="assets/img/logo.png" height="60"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html">ACCUEIL</a></li>
<li><a href="about.html">À PROPOS</a></li>
<li><a href="http://learn.atilla.org" target="_blank">FORMATIONS</a></li>
<li><a href="http://blog.atilla.org" target="_blank">BLOG</a></li>
<li><a data-toggle="modal" data-target="#myModal" href="#myModal"><i class="fa fa-envelope-o"></i></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
{{> header }}
<div role="main">
</div>
{{> footer }}
{{> header }}
<div id="blue">
<div class="container">
<div class="row centered">
<div class="col-lg-8 col-lg-offset-2">
<h4>LEARN MORE ABOUT US</h4>
<p>WE ARE COOL PEOPLE</p>
</div>
</div><!-- row -->
</div><!-- container -->
</div><!-- bluewrap -->
<div class="container w">
<div class="row centered">
<br><br>
{{#members}}
<div class="col-lg-3">
<h4>{{role}}</h4>
<img class="img-circle" src="{{img_url}}" width="110" height="110" alt="">
<h4>{{name}}</h4>
<p>{{description}}</p>
</div><!-- col-lg-3 -->
{{/members}}
</div><!-- row -->
</div><!-- container -->
<!-- PORTFOLIO SECTION -->
<div id="dg">
<div class="container">
<div class="row centered">
<h4>NOS COMPÉTENCES</h4>
<br>
<!-- First Chart -->
<div class="col-lg-3">
<canvas id="canvas" height="130" width="130"></canvas>
<br>
<script>
var doughnutData = [
{
value: 80,
color:"#3498db"
},
{
value : 20,
color : "#ecf0f1"
}
];
var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData);
</script>
<p><b>Python</b></p>
</div><!-- /col-lg-3 -->
<!-- Second Chart -->
<div class="col-lg-3">
<canvas id="canvas2" height="130" width="130"></canvas>
<br>
<script>
var doughnutData = [
{
value: 70,
color:"#3498db"
},
{
value : 30,
color : "#ecf0f1"
}
];
var myDoughnut = new Chart(document.getElementById("canvas2").getContext("2d")).Doughnut(doughnutData);
</script>
<p><b>Web Development</b></p>
</div><!-- /col-lg-3 -->
<!-- Third Chart -->
<div class="col-lg-3">
<canvas id="canvas3" height="130" width="130"></canvas>
<br>
<script>
var doughnutData = [
{
value: 50,
color:"#3498db"
},
{
value : 50,
color : "#ecf0f1"
}
];
var myDoughnut = new Chart(document.getElementById("canvas3").getContext("2d")).Doughnut(doughnutData);
</script>
<p><b>Java</b></p>
</div><!-- /col-lg-3 -->
<!-- Fourth Chart -->
<div class="col-lg-3">
<canvas id="canvas4" height="130" width="130"></canvas>
<br>
<script>
var doughnutData = [
{
value: 60,
color:"#3498db"
},
{
value : 40,
color : "#ecf0f1"
}
];
var myDoughnut = new Chart(document.getElementById("canvas4").getContext("2d")).Doughnut(doughnutData);
</script>
<p><b>Système et Réseau</b></p>
</div><!-- /col-lg-3 -->
<!-- First Chart -->
<div class="col-lg-3">
<canvas id="canvas5" height="130" width="130"></canvas>
<br>
<script>
var doughnutData = [
{
value: 80,
color:"#3498db"
},
{
value : 20,
color : "#ecf0f1"
}
];
var myDoughnut = new Chart(document.getElementById("canvas5").getContext("2d")).Doughnut(doughnutData);
</script>
<p><b>Algorithmique</b></p>
</div><!-- /col-lg-3 -->
<!-- Second Chart -->
<div class="col-lg-3">
<canvas id="canvas6" height="130" width="130"></canvas>
<br>
<script>
var doughnutData = [
{
value: 70,