You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
site-aurore/index.html

570 lines
31 KiB
HTML

<!DOCTYPE HTML>
<!--
Dimension by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Aurore</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png" />
<link rel="manifest" href="assets/favicon/site.webmanifest" />
<link rel="mask-icon" href="assets/favicon/safari-pinned-tab.svg" color="#5bbad5" />
<link rel="shortcut icon" href="assets/favicon/favicon.ico" />
<meta name="msapplication-TileColor" content="#2b5797" />
<meta name="msapplication-config" content="assets/favicon/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="logo">
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1856.28 1685.96">
<defs>
<style>.cls-1{fill:#cf0f23;}.cls-2{fill:#fff;}.cls-3{fill:#b50101;}.cls-4{fill:#fdfdfd;}.cls-5{fill:#f3c3c8;}</style>
</defs>
<title>logo</title>
<path class="cls-1" d="M3221.95,1964.42c90.88-198.3,123.84-401.12,48.23-612.4-72.62-202.91-232.79-369.8-434.57-447.17-454.35-174.2-971.76,131.33-1020.51,621-13.39,134.47,8.48,270.42,65.4,393.13,28.31,61,67.49,115.68,107.88,169.47,22.87,30.46,12,14.25,28.36,39,1.5,2.28-44.12,98.66-61.43,133.09-69.65-69.57-131.76-142.75-178.77-229.9-9.3-17.23-86.13-207.53-81.8-208.1-20,41.89,32.91,321.81,40,353.16-27.73-44.9-73.42-236.32-83.18-353.78-2.7-32.46-2-93.62,5.11-167.16,11-114.65,22.75-232.29,59.5-342.09,37.38-111.69,103.72-191.19,164.11-288.31-33.81,13.44-166.78,142.1-261.28,234.35,49-99.75,195.84-236.58,267.28-292.26,87.24-68,186.75-114.37,283.68-165.13,82.52-43.22,190.9-72.64,287.83-82.07,72.05-7,145.21-7.44,217.06,2.25a925.12,925.12,0,0,1,100.23,19.29c31.67,7.91,52.42,14.66,101.63,30.67-15.21-11-148.33-69.45-298.71-153.75,135.5,36.75,294.39,113.06,335.14,136.07,92.83,52.43,178.42,120.32,251.76,197.63,59.39,62.61,114.73,124,158.68,200,51.89,89.77,110.37,211.56,110.37,317.69,8.52-19.65,10.58-106.67,10.41-123.26-.63-60.91-18.17-165.69-27.1-225.67,20.21,51.29,35,136.81,38.59,154.88a1007.84,1007.84,0,0,1,15.7,114.56,1144.92,1144.92,0,0,1,3.44,119c-.37,16.36-2.34,32.58-3,48.91-.17,4.55-1.14,14.28-1.11,19.52-40.32,232.33-88.11,490.35-282.38,651.83-12.12-25.74-75.4-104.55-60.31-126.45,58-84.16,55.45-78.94,69.93-99.36" transform="translate(-1619 -617.75)"/>
<polygon class="cls-2" points="1519.07 1501.6 1557.8 1585.54 1569.65 1610.71 1520.71 1658.87 1489.16 1685.96 1471.85 1681.66 1455.19 1642.95 1438.33 1606.35 1421.52 1569.64 1405.05 1533.12 1392.65 1507.17 1379.22 1477.46 1351.25 1417.3 1329.15 1369.46 1306.68 1320.72 1284.8 1272.79 1263.29 1225.5 1241.13 1177.44 1219.12 1129.55 1195.71 1078.99 1173.33 1029.07 1160.85 1002.12 1159.1 1000.71 1009.33 1001.06 886.04 1002 881.18 993.36 820.18 895.64 815.24 884.18 830.21 884.29 1082.59 882.82 1107.02 882.81 960.11 562.48 928.72 627.32 896.56 696.88 815.35 884.3 753.56 884.04 683.79 884.41 876.88 457.83 939.35 322.44 960.94 278.76 1000.76 366.57 1051.93 480.42 1088.41 559.81 1105.47 599.52 1142.13 679.61 1161.63 723.43 1198.18 801.39 1226.85 864.75 1257.75 932.43 1283.71 989.43 1320.12 1067.53 1350.98 1136.34 1379.79 1198.45 1428.94 1306.27 1457.72 1368.42 1483.68 1425.42 1505.66 1472.43 1519.07 1501.6 1519.07 1501.6 1519.07 1501.6"/>
<polyline class="cls-2" points="737.66 1052.19 708.41 1118.49 691.63 1154.74 668.22 1208.2 644 1261.45 621.08 1312.24 605.38 1347.08 583.14 1398.24 553.13 1464.94 548.58 1462.77 529.63 1454.25 479.76 1431.84 451.26 1419.09 443.39 1415.97 479.83 1335.86 498.63 1293.75 509.52 1269.14 527.58 1228.91 547.08 1186.06 561.33 1152.65 570.83 1131.82 582.97 1104.07 599.24 1067.56 621.43 1017.21 625.66 1004.64 756.7 1003.9 756.67 1003.95 756.67 1003.95 756.67 1003.95"/>
<polygon class="cls-3" points="756.67 1003.95 756.7 1003.9 751.3 993.36 688.68 893.02 683.79 884.41 753.56 884.04 815.35 884.3 815.24 884.19 822 895.58 881.18 993.36 886.04 1002 875.13 1002.56 772 1003.95 756.67 1003.95 756.67 1003.95"/>
<path class="cls-4" d="M3163,1201.32c3.5,1.2,3.34,4.42,5.14,7.74C3163.42,1206.41,3163.42,1206.41,3163,1201.32Z" transform="translate(-1619 -617.75)"/>
<path class="cls-5" d="M2179.67,797.88c-.07.51,0,1.4-.23,1.46-1.12.34-1.24-.58-1.41-1.36A2.28,2.28,0,0,1,2179.67,797.88Z" transform="translate(-1619 -617.75)"/>
<path class="cls-5" d="M1914.4,946.27l-2.29,1.9" transform="translate(-1619 -617.75)"/>
<path class="cls-5" d="M1665.94,1201.84l-1.53,2.24" transform="translate(-1619 -617.75)"/>
<path class="cls-5" d="M2778.1,1618.46c1.49-.65,1.95,0,1.75,1.41Z" transform="translate(-1619 -617.75)"/>
<path class="cls-5" d="M1653.74,1677.93l-.11,2.15C1651.69,1679.26,1651.8,1678.55,1653.74,1677.93Z" transform="translate(-1619 -617.75)"/></svg>
</div>
<div class="content">
<div class="inner">
<h1>Aurore</h1>
<p>Le fournisseur réseau de l'université Paris-Saclay.</p>
</div>
</div>
<nav>
<ul>
<li><a href="#presentation">Présentation</a></li>
<li><a href="#inscription">Inscription & paiement</a></li>
<li><a href="#connexion">Connexion</a></li>
<li><a href="https://intranet.auro.re">Intranet</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#events">Evènements et foyers</a></li>
</ul>
</nav>
</header>
<!-- Main -->
<div id="main">
<!-- Présentation -->
<article id="presentation">
<h2 class="major">Qui sommes-nous ?</h2>
<p>Aurore est une association gérée par des étudiants de l'universitée Paris-Saclay de manière bénévole. Nous nous efforçons de fournir une couverture internet filaire et Wi-Fi très haut débit aux étudiants pour 50€ par an. Tu auras en bonux accés à une boîte mail, la TV et une imprimante.</p>
<h2 class="major">Une question ? Un problème ?</h2>
<p>Que tu sois un nouvel arrivant ou un ancien adhérent, tu trouveras sûrement de l'aide à ton problème sur la <a href="#faq">FAQ</a>. Si tu ne trouves pas de solutions, tu peux toujours <a href="#contact">nous contacter</a>.</p>
<h2 class="major">Envie d'aider ?</h2>
<p>Si tu as envie de découvrir le fonctionnement de tout cela, que ce soit la gestion administrative ou la gestion technique de l'infrastructure, tu es le bienvenu. Tu peux commencer sans avoir de connaissances particulières, tu pourras alors les acquérir en nous rejoignant. Le plus simple pour commencer est de <a href="#contact">nous contacter</a>. À bientôt !</p>
</article>
<!-- Inscription -->
<article id="inscription">
<h2 class="major">Etape 1 : Se connecter ou s'enregistrer en ligne</h2>
<h3>Je dispose déjà d'un compte Aurore Intranet</h3>
<p>Si vous avez déjà un compte en ligne, connectez-vous à l'<a target="_blank" href="https://intranet.auro.re">Intranet</a> avec vos identifiants.</p>
<blockquote>Ne créez pas de nouveau compte si vous en avez déjà un ! Votre connexion ne fonctionnera alors pas correctement. Si vous avez déjà été adhérent à Aurore, vous disposez forcément d'un compte. Si vous avez oublié votre mot de passe, cliquez sur mot de passe oublié. Si vous avez également oublié votre identifiant, contactez-nous par mail.</blockquote>
<h3>Je suis nouveau, je veux m'inscrire à Aurore pour avoir Internet</h3>
<p>Rendez-vous sur l'<a target="_blank" href="https://intranet.auro.re">Intranet</a>, choisissez alors <a target="_blank" href="https://re2o.auro.re/users/new_user/">"Créer un compte"</a>. Remplissez alors les informations demandées puis validez.</p>
<blockquote>Aurore est une association Loi 1901, vous devez en accepter les statuts, le réglement intérieur et leurs annexes. La validation de ce formulaire et le réglement de la cotisation vaut pour adhésion à l'association.</blockquote>
<h2 class="major">Etape 2 : Payer sa connexion</h2>
<h3>En ligne (carte bancaire)</h3>
<div class="image fit">
<img src="images/payer.png" />
</div>
<div class="images">
<div class="image left">
<img src="images/facture.png" />
</div>
<div class="image right">
<img src="images/comnpay.png" />
</div>
</div>
<p>Pour régler, ou prolonger sa cotisation en ligne, choisissez "prolonger ma connexion / pay for a connexion". Vous pourrez alors payer en ligne via notre application de paiement sécurisée.</p>
<blockquote>Important : la cotisation à Aurore se décompose en 10 euros d'adhésion à l'association (obligatoire) et de 5 euros par mois de connexion. Si vous payez pour plus de 8 mois, adhésion et connexion sont plafonés à 50 euros. Attention, l'adhésion (10 euros) n'est PAS remboursable.</blockquote>
<h3>Par chèque ou espèce</h3>
<blockquote>Le règlement par chèque ou espèce s'effectue à la Kfet, vous devrez patienter jusqu'à une de nos permanence, donc les horraires sont disponibles <a target="_blank" href="#">ici</a>.</blockquote>
<h2 class="major">Etape 3 : Vérification</h2>
<p>Sur l'<a target="_blank" href="https://intranet.auro.re">Intranet</a>, lorsque vous avez payé votre cotisation pour bénéficier de l'accès au réseau, le premier cadre sur la page "Mon profil" doit être vert et indiquer "connecté".<br />
Dans le cas contraire, cela signifie que vous n'êtes pas à jour de votre cotisation.</p>
<div class="image fit">
<img src="images/recap.png" />
</div>
</article>
<!-- Connexion -->
<article id="connexion">
<h2 class="major">Sommaire</h2>
<h4><a href="#wi-fi">Connexion Wi-Fi</a></h4>
<ul>
<li><a href="#windows-7">Windows Vista et Windows 7</a></li>
<li><a href="#windows-10">Windows 8, 8.1 et Windows 10</a></li>
<li><a href="#macos">MacOS</a></li>
<li><a href="#android">Android</a></li>
<li><a href="#ios">iOS</a></li>
<li><a href="#linux">Linux</a></li>
<li><a href="#autres">Appareils sans WPA2 Entreprise</a></li>
</ul>
<h4><a href="#filaire">Connexion filaire</a></h4>
<hr />
<h2 id="wi-fi" class="major">Connecter une machine au réseau en Wi-Fi</h2>
<h3>Identifiant et mot de passe</h3>
<p>Aurore utilise un réseau WPA2 entreprise PEAP. Il requiert un login et un mot de passe, les mêmes que pour vous connecter à l'Intranet.</p>
<p>Aucune manipulation sur l'Intranet n'est nécessaire: à la première connexion, votre appareil sera enregistré automatiquement sur votre compte Intranet. Attention cependant, la machine ne DOIT PAS être déjà enregistrée sur un autre compte! Si c'est le cas, tant pis pour vous.</p>
<h3>Me connecter en Wi-Fi sous :</h3>
<h4 id="windows-7" class="submajor">Windows Vista et Windows 7</h4>
<blockquote>
Connectez-vous au réseau "Aurore-Accueil". Ensuite, cliquez <a href="https://ftps.crans.org/pub/logiciels/autoconf/Wifi.exe">ici</a>. Cet exécutable va configurer votre machine, et installer les certificats de sécurité.<br />
Ensuite, sélectionnez le réseau Wi-Fi "Aurore", et entrez directement votre login/mot de passe Intranet. Vous devriez bénéficier d'un accès Internet en moins de 10 minutes.
</blockquote>
<h4 id="windows-10" class="submajor">Windows 8, 8.1 et Windows 10</h4>
<blockquote>
Sélectionnez le réseau Wi-Fi "Aurore".<br />
Entrez directement votre login/mot de passe Intranet. Vous devriez bénéficier d'un accès Internet en moins de 10 minutes.<br />
Si vous avez une alerte de sécurité concernant nos certificats (CA-Cert), ignorez la à la première connexion et validez le certificat.
</blockquote>
<h4 id="macos" class="submajor">MacOS</h4>
<blockquote>
Sélectionnez le réseau Wi-Fi "Aurore".<br />
Entrez directement votre login/mot de passe Intranet. Vous devriez bénéficier d'un accès Internet en moins de 10 minutes.
</blockquote>
<div class="images">
<div class="image left">
<img src="images/macos-1.png" />
</div>
<div class="image right">
<img src="images/macos-2.png" />
</div>
</div>
<h4 id="android" class="submajor">Android</h4>
<blockquote>
Sélectionnez le réseau Wi-Fi "Aurore". <br />
Choisissez en méthode EAP "PEAP", en authentification de phase 2 "Mschapv2" et entrez directement votre login/mot de passe Intranet. Vous devriez bénéficier d'un accès Internet en moins de 10 minutes.<br />
Facultatif : vous pouvez pour plus de sûreté, importer le certificat CA-Cert d'Aurore <a href="https://wiki.crans.org/CransNostalgie/AvantEte2018/WiFi/SousAndroid">ici</a>.
</blockquote>
<div class="images">
<div class="image left">
<img src="images/android-connec1.png" />
</div>
<div class="image right">
<img src="images/android-connec2.png" />
</div>
</div>
<h4 id="ios" class="submajor">iOS</h4>
<blockquote>
Sélectionnez le réseau Wi-Fi "Aurore". <br />
Entrez directement votre login/mot de passe Intranet et acceptez le certificat CA-Cert du réseau Wi-Fi. Vous devriez bénéficier d'un accès Internet en moins de 10 minutes.
</blockquote>
<div class="images">
<div class="image left">
<img src="images/ios-1.png" />
</div>
<div class="image right">
<img src="images/ios-2.png" />
</div>
</div>
<h4 id="linux" class="submajor">Linux</h4>
<blockquote>
Sélectionnez le réseau wi-fi "Aurore".<br />
Choisissez en méthode EAP "PEAP", en authentification de phase 2 "Mschapv2" et entrez directement votre login/mot de passe Intranet. Vous devriez bénéficier d'un accès Internet en moins de 10 minutes.<br />
Facultatif : vous pouvez pour plus de sûreté, importer le certificat CA-Cert du Crans <a href="https://wiki.crans.org/CransNostalgie/AvantEte2018/WiFi/SousLinux">ici</a>. Vous y trouverez également des instructions pour vous connecter sans network manager.
</blockquote>
<div class="images">
<div class="image left">
<img src="images/linux1.png" />
</div>
<div class="image right">
<img src="images/linux2.png" />
</div>
</div>
<h4 id="autres" class="submajor">Appareils ne supportant pas WPA2 entreprise (Xbox, Google Home, ...)</h4>
<blockquote>
Il n'est pas possible de connecter directement au réseau d'Aurore des machines ne supportant pas WPA2 Entreprise.<br />
Le plus simple est alors d'acheter un routeur Wi-Fi (Aurore peut en vendre lors des permanences), de connecter le routeur au réseau "Aurore" et de connecter sa machine au réseau du routeur.
</blockquote>
<h2 id="filaire" class="major">Connecter une machine au réseau par câble</h2>
<h3>Le câble RJ45</h3>
<blockquote>
Chaque chambre dispose d'une prise Ethernet "RJ45". Si nous n'avez pas de câble pour connecter votre ordinateur, un câble vous sera remis GRATUITEMENT en permanence, lors de votre première adhésion. Si vous avez un laptop qui n'a pas de port RJ45, des adaptateurs existent et peuvent être vendu également en permancence pour moins de 20 euros, vous pouvez également vous le procurer par vous même.
</blockquote>
<h4 class="submajor">Connextion automatique (interface Web)</h4>
<blockquote>
Connectez-vous directement sur votre prise Ethernet, dans votre chambre par exemple, un pop devrait s'ouvrir. Si ce n'est pas le cas, cliquez <a href="https://intranet.crans.org/">ici</a>. Identifiez-vous alors avec votre login et mot de passe Crans Intranet.<br />
Le système vous proposera d'identifier votre machine; vous devrez cocher la case pour que votre appareil soit enregistré. "Connexion depuis un nouvel appareil Ethernet. L'enregistrer ?"<br />
Si votre chambre n'est pas à jour, il vous proposera également de l'enregistrer (voir ci-dessous) "Connexion depuis la chambre XXX, est-ce la votre ?". Cochez cette seconde case si elle est présente, et que vous vous connectez depuis votre chambre.<br />
Pour terminer, débranchez quelques secondes et rebranchez votre prise câble Ethernet. Vous devriez bénéficier d'un accès Internet en moins de 10 minutes. Vous devriez également recevoir une notification par email.
</blockquote>
<div class="images">
<div class="image left">
<img src="images/filaire-1.png">
</div>
<div class="image right">
<img src="images/filaire-2.png">
</div>
</div>
<h4 class="submajor">Connexion sans interface Web (routeur, terminal, ...)</h4>
<blockquote>
Sans interface web, vous devrez créer manuellement votre machine filaire. Munissez-vous de l'adresse MAC de votre machine, puis connectez-vous à l'Intranet. Cliquez alors sur créer une machine, renseignez la MAC et laissez les autres paramètres inchangés. Enfin, connectez l'appareil à votre prise.
</blockquote>
</article>
<!-- FAQ -->
<article id="faq">
<h2 class="major">FAQ</h2>
<h4>J'ai perdu mon accès à mon compte Aurore.</h4>
<blockquote>Tu peux réinitialiser ton mot de passe en cliquant <a href="#">ici</a>.</blockquote>
<h4>Je veux recharger mon solde Aurore.</h4>
<blockquote>Tu peux le faire soit au prêt d'un permanencier, soit sur l'<a href="#">Intranet par CB</a>.</blockquote>
<h4>Lorsque je souhaite prolonger ma connexion, on me demande de payer davantage, alors que la connexion à l'année est annoncée à 50€.</h4>
<blockquote>L'adhésion et la connexion pour une année sont en effet proposées à 50€. Nous proposons cependant un forfait au mois, pour 10€ de frais d'adhésion puis 5€ par mois de connexion. Si tu restes toute l'année, payer au mois revient donc plus cher, nous t'encourageons ainsi à payer à l'année pour limiter notre charge de travail.</blockquote>
<h4>Je veux gérer mes machines Wi-Fi ou filaire.</h4>
<blockquote>Tu dois te rendre sur l'<a href="#">Intranet</a>.</blockquote>
<h4>Mon Internet a l'air lent.</h4>
<blockquote>Tu peux commencer par vérifier qu'il n'y a pas de problème global, en regardant notamment sur notre <a href="#">page Facebook"</a> ou notre <a href="#">Twitter</a> si on y a décrit un incident en cours.</blockquote>
<h4>Je travaille tous les jours de 12h ) 20h et ne peux donc pas être disponible pendant une permanence. Suis-je condamné à m'acheter une Livebox ?</h4>
<blockquote>Si tu es déjà adhérent, il te suffit de prolonger ta connexion par Internet. Sinon, nous t'invitons à envoyer un email à cableurs@auro.re en précisant tes disponibilités afin qu'un membre d'Aurore puisse trouver du temps pour s'occuper de toi.</blockquote>
<h4>Y a-t-il une box Aurore ? Comment brancher plusieurs ordinateurs ?</h4>
<blockquote>Nous ne proposons pas de box Internet. Chaque chambre Crous est déjà équipée d'une prise RJ45 sur laquelle tu peux brancher ton ordinateur, et le Wi-Fi est diffusé par des points d'accès répartis dans les bâtiments. Pour brancher plusieurs ordinateurs à la fois, tu peux te procurer un commutateur ("switch") réseau.</blockquote>
<h4>Comment brancher ma console de jeu ?</h4>
<blockquote>Notre réseau Wi-Fi requiert un protocole d'authentification spécial, appelé "WPA2 Entreprise", qui n'est pas toujours supporté par les consoles de jeux. En revanche, se connecter par câble ethernet ne requiert aucun protocole particulier. Une solution consiste donc à se procurer un adaptateur ethernet adapté à ta console. Une solution alternative consiste à créer ton propre réseau WiFi à l'aide d'un ordinateur branché par câble partageant la connexion par WiFi.</blockquote>
<h4>J'ai vu des membres d'Aurore à 23h mais ils n'ont pas voulu régler mon souci d'Internet.</h4>
<blockquote>Les membres de notre association sont bénévoles, et consacrent déjà beaucoup de temps pour l'association , il est important de respecter leur vie privée.</blockquote>
<h4>Je n'arrive pas à me connecter à photos.auro.re, note.auro.re, etc...</h4>
<blockquote>Ces services ne sont pas gérés directement par Aurore mais par des adhérents, en cas de soucis contacter respectivement photos@auro.re, note@auro.re, etc...</blockquote>
<h4>Quels sont les services que vous fournissez ?</h4>
<blockquote>Tu peux trouver une liste de nos services sur l'<a href="#">Intranet</a>. Pour toute information suplémentaire sur un service précis, n'hésites pas à consulter le <a href="#">Wiki</a>.</blockquote>
<h2 id="contact" class="major">Nous contacter</h2>
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-envelope"><span class="label">Mail</span></a></li>
<li><a href="#" class="icon fa-comments"><span class="label">IRC</span></a></li>
</ul>
</article>
<article id="events">
<h2 class="major">Evènements et foyers</h2>
<p>Pas d'évènements prévus à ce jour :(</p>
</article>
<!-- Elements -->
<article id="elements">
<h2 class="major">Elements</h2>
<section>
<h3 class="major">Text</h3>
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
<hr />
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<hr />
<h4>Blockquote</h4>
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
<h4>Preformatted</h4>
<pre><code>i = 0;
while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
</section>
<section>
<h3 class="major">Lists</h3>
<h4>Unordered</h4>
<ul>
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>
<h4>Alternate</h4>
<ul class="alt">
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>
<h4>Ordered</h4>
<ol>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis viverra.</li>
<li>Felis enim feugiat.</li>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis lorem.</li>
<li>Felis enim et feugiat.</li>
</ol>
<h4>Icons</h4>
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
</ul>
<h4>Actions</h4>
<ul class="actions">
<li><a href="#" class="button primary">Default</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions stacked">
<li><a href="#" class="button primary">Default</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
</section>
<section>
<h3 class="major">Table</h3>
<h4>Default</h4>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
<h4>Alternate</h4>
<div class="table-wrapper">
<table class="alt">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
</section>
<section>
<h3 class="major">Buttons</h3>
<ul class="actions">
<li><a href="#" class="button primary">Primary</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button">Default</a></li>
<li><a href="#" class="button small">Small</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button primary icon fa-download">Icon</a></li>
<li><a href="#" class="button icon fa-download">Icon</a></li>
</ul>
<ul class="actions">
<li><span class="button primary disabled">Disabled</span></li>
<li><span class="button disabled">Disabled</span></li>
</ul>
</section>
<section>
<h3 class="major">Form</h3>
<form method="post" action="#">
<div class="fields">
<div class="field half">
<label for="demo-name">Name</label>
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Jane Doe" />
</div>
<div class="field half">
<label for="demo-email">Email</label>
<input type="email" name="demo-email" id="demo-email" value="" placeholder="jane@untitled.tld" />
</div>
<div class="field">
<label for="demo-category">Category</label>
<select name="demo-category" id="demo-category">
<option value="">-</option>
<option value="1">Manufacturing</option>
<option value="1">Shipping</option>
<option value="1">Administration</option>
<option value="1">Human Resources</option>
</select>
</div>
<div class="field half">
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
<label for="demo-priority-low">Low</label>
</div>
<div class="field half">
<input type="radio" id="demo-priority-high" name="demo-priority">
<label for="demo-priority-high">High</label>
</div>
<div class="field half">
<input type="checkbox" id="demo-copy" name="demo-copy">
<label for="demo-copy">Email me a copy</label>
</div>
<div class="field half">
<input type="checkbox" id="demo-human" name="demo-human" checked>
<label for="demo-human">Not a robot</label>
</div>
<div class="field">
<label for="demo-message">Message</label>
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</form>
</section>
</article>
</div>
<!-- Footer -->
<footer id="footer">
<p class="copyright">&copy; Aurore. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
</footer>
</div>
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>