Home Explore Help
Sign In
FFDN
/
coin
12
3
Fork 17
Files Issues 55 Pull Requests 6 Wiki
Browse Source

Modifs de la soirée

Sébastien Dufromentel 11 years ago
parent
9b86425096
commit
3951e16f32
7 changed files with 173 additions and 111 deletions
Split View Show Diff Stats
  1. 23 16
      illyse-si-design/abo.html
  2. 18 12
      illyse-si-design/contact.html
  3. 1 0
      illyse-si-design/css/.foundation.min.css.n26qD2
  4. 67 47
      illyse-si-design/css/illyse.css
  5. BIN
      illyse-si-design/favicon.ico
  6. 19 11
      illyse-si-design/index.html
  7. 45 25
      illyse-si-design/infos.html

+ 23 - 16
illyse-si-design/abo.html
View File 

@@ -10,22 +10,28 @@
 
   </head>
 
   <body>
 
 
-  <div class="row large-12 columns">
 
-    <h1><a href="index.html">COIN est un Outil pour un Internet Neutre</a></h1>
 
-    <div class="large-3 columns">
 
-        <h3>Navigation</h3>
 
-      <ul class="side-nav">
 
-          <li><a href="index.html">Tableau de bord</a></li>
 
-          <li><a href="infos.html">Mes informations personnelles</a></li>
 
-          <li class="active">
 
-            <a href="abo.html">Mes abonnements</a>
 
-            <ul><li><a href="adsl.html">"ADSL</a></li>
 
-                <li><a href="vpn.html">VPN</a></li>
 
-            </ul>
 
-          </li>
 
-          <li><a href="contact.html">Contact / Support</a></li>
 
-      </ul>
 
-  </div>
 
+  <div class="large-12 columns">
 
+   <header class="row">
 
+       <h1><a href="index.html">COIN est un Outil pour un Internet Neutre</a></h1>
 
+   </header>
 
+
 
+   <div class="row">
 
+   <div class="hide-for-small-only large-3 columns">
 
+     <nav id="sidebox">
 
+     <h3 id="nav">Navigation</h3>
 
+     <ul class="side-nav">
 
+         <li><a href="index.html">Tableau de bord</a></li>
 
+         <li><a href="infos.html">Mes informations personnelles</a></li>
 
+         <li class="active">
 
+	 	<a href="abo.html">Mes abonnements</a>
 
+		 <ul><li><a href="adsl.html">ADSL</a></li>
 
+                     <li><a href="vpn.html">VPN</a></li>
 
+		 </ul>
 
+		</li>
 
+         <li><a href="contact.html">Contact / Support</a></li>
 
+     </ul>
 
+     </nav>
 
+   </div>
 
 
   <div class="large-9 columns">
 
   <!-- Partie à inclure -->
 
@@ -41,6 +47,7 @@
 
             </div>
 
         </div>
 
     </div>
 
+</div>
 
 
     <script src="js/vendor/jquery.js"></script>
 
     <script src="js/foundation.min.js"></script>

+ 18 - 12
illyse-si-design/contact.html
View File 

@@ -10,18 +10,22 @@
 
   </head>
 
   <body>
 
 
-  <div class="row large-12 columns">
 
-    <h1><a href="index.html">COIN est un Outil pour un Internet Neutre</a></h1>
 
-    <div class="large-3 columns">
 
-      <ul class="side-nav">
 
-          <li><a href="index.html">Tableau de bord</a></li>
 
-          <li><a href="infos.html">Mes informations personnelles</a></li>
 
-          <li>
 
-            <a href="abo.html">Mes abonnements</a>
 
-          </li>
 
-          <li class="active"><a href="contact.html">Contact / Support</a></li>
 
-      </ul>
 
-  </div>
 
+  <div class="large-12 columns">
 
+   <header class="row">
 
+       <h1><a href="index.html">COIN est un Outil pour un Internet Neutre</a></h1>
 
+   </header>
 
+   <div class="row">
 
+   <div class="large-3 columns">
 
+     <nav id="sidebox">
 
+     <h3 id="nav">Navigation</h3>
 
+     <ul class="side-nav">
 
+         <li><a href="index.html">Tableau de bord</a></li>
 
+         <li><a href="infos.html">Mes informations personnelles</a></li>
 
+         <li><a href="abo.html">Mes abonnements</a></li>
 
+         <li class="active"><a href="contact.html">Contact / Support</a></li>
 
+     </ul>
 
+     </nav>
 
+   </div>
 
 
   <div class="large-9 columns">
 
   <!-- Partie à inclure -->
 
@@ -31,6 +35,8 @@
 
         </div>
 
     </div>
 
 
+</div>
 
+
 
     <script src="js/vendor/jquery.js"></script>
 
     <script src="js/foundation.min.js"></script>
 
     <script>

File diff suppressed because it is too large
+ 1 - 0
illyse-si-design/css/.foundation.min.css.n26qD2


+ 67 - 47
illyse-si-design/css/illyse.css
View File 

@@ -1,44 +1,35 @@
 
-/* Structure */
 
+/* Titre général */
 
 
-h1 {
 
-	font-size: 2.5em;
 
+header {
 
 	user-select: none;
 
-	position: fixed;
 
-	height: -0.2em;
 
-	width: 100%;
 
+	/* Navigateurs */
 
+	-moz-user-select: none;
 
+	-webkit-user-select: none;
 
 }
 
-div.large-3, div.large-9 {
 
-	margin-top: 7em;
 
+h1 {
 
+	font-size: 2.2em;
 
+	margin-bottom: 1em;
 
 }
 
 h1:before {
 
+	content: "\\_o<";
 
+	color: #FF6600;
 
+	font-weight: normal;
 
+	font-family: monospace;
 
+	text-align: center;
 
 	font-size: 1.25em;
 
-	margin-left: 1em;
 
-	margin-right: -1em;
 
 	display: block;
 
 	float: left;
 
 	width: 25%;
 
 }
 
 
-/* Navigateurs */
 
-
 
-h1 {
 
-	-moz-user-select: none;
 
-	-webkit-user-select: none;
 
-}
 
-
 
-/* Contenus */
 
-
 
-h1:before {
 
-	content: "\\_o<";
 
-	font-family: monospace;
 
-}
 
 h1:hover:before {
 
 	content: "\\_x<";
 
 }
 
 h1:hover:after {
 
 	content: "PAN Administre les Ninternetz";
 
-	position: fixed;
 
+	position: absolute;
 
 	text-align: center;
 
+	z-index: -1;
 
 	right: 15%;
 
 	left: 25%;
 
 }
 
@@ -47,49 +38,78 @@ h1:hover a {
 
 	opacity: 0.1;
 
 }
 
 
-h2:before {
 
-	content: url(../img/coinitem.png);
 
-	margin-right: 0.25em;
 
-}
 
-
 
-/* Couleurs */
 
-
 
 h1 a, h1:after {
 
 	color: #0086A9;
 
 	font-weight: bold;
 
 }
 
 
-h2 {
 
-	color: #FF6600;
 
-	border-bottom: 2px solid #0086A9;
 
+/* Barre de navigation */
 
+
 
+nav#sidebox {
 
+	position: fixed;
 
+	z-index: 1;
 
 }
 
 
-h1:before {
 
+h3#nav {
 
+	background-color: #E8E8FF;
 
+	border: 1px solid #E0E0E0;
 
+	border-bottom-color: #0086A9;
 
+	padding-bottom: 0.25em;
 
+	text-indent: 0.25em;
 
+	margin-top: 0.25em;
 
+	padding-top: 0.1em;
 
+	margin-bottom: 0;
 
 	color: #FF6600;
 
-	font-weight: normal;
 
 }
 
 
 .side-nav {
 
+	padding: 0;
 
+	padding-top: 0.75em;
 
 	background-color: #E8E8FF;
 
 	border: 1px solid #E0E0E0;
 
-	padding: 0;
 
-}
 
-
 
-.side-nav li:first-child:before {
 
-	content: "Navigation :";
 
-	font-weight: bold;
 
-	display: block;
 
-	margin-left: 1em;
 
-	margin-bottom: 0.5em;
 
-	text-decoration: underline;
 
+	border-top: 0 none transparent;
 
+	margin-top: 0;
 
 }
 
 
 .side-nav a {
 
 	padding: 0 0.5em 0.2em 0.5em;
 
 }
 
 
-.side-nav a:hover, .side-nav li.active a {
 
+.side-nav a:hover,
 
+.side-nav li.active a,
 
+.side-nav li ul li a:hover {
 
 	background-color: #0086A9;
 
 	color: #FFFFFF !important;
 
 	border-radius: 5px;
 
 }
 
+
 
+.side-nav li ul {
 
+	list-style-type: disc;
 
+	padding-top: 0.25em;
 
+}
 
+
 
+.side-nav li ul li a:hover {
 
+	margin-right: 1em;
 
+}
 
+
 
+.side-nav li ul li a {
 
+	padding-left: 0.25em;
 
+	margin-left: -0.25em;
 
+}
 
+
 
+.side-nav li.active li a {
 
+	background-color: transparent;
 
+	color: #0086A9 !important;
 
+}
 
+
 
+/* Titre section principale */
 
+
 
+h2:before {
 
+	content: url(../img/coinitem.png);
 
+	margin-right: 0.25em;
 
+}
 
+
 
+h2 {
 
+	color: #FF6600;
 
+	border-bottom: 2px solid #0086A9;
 
+}

BIN
illyse-si-design/favicon.ico
View File


+ 19 - 11
illyse-si-design/index.html
View File 

@@ -7,20 +7,27 @@
 
     <link rel="stylesheet" href="css/foundation.css" />
 
     <link rel="stylesheet" href="css/illyse.css" />
 
     <script src="js/vendor/modernizr.js"></script>
 
+    <link rel="icon" type="image/png" href="img/coinitem.png" />
 
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
 
   </head>
 
   <body>
 
 
-  <div class="row large-12 columns">
 
-    <h1><a href="index.html">COIN est un Outil pour un Internet Neutre</a></h1>
 
-    <div class="large-3 columns">
 
-    <h3>Navigation</h3>
 
-      <ul class="side-nav">
 
-          <li class="active"><a href="index.html">Tableau de bord</a></li>
 
-          <li><a href="infos.html">Mes informations personnelles</a></li>
 
-          <li><a href="abo.html">Mes abonnements</a></li>
 
-          <li><a href="contact.html">Contact / Support</a></li>
 
-      </ul>
 
-  </div>
 
+  <div class="large-12 columns">
 
+   <header class="row">
 
+       <h1><a href="index.html">COIN est un Outil pour un Internet Neutre</a></h1>
 
+   </header>
 
+   <div class="row">
 
+   <div class="large-3 columns">
 
+     <nav id="sidebox">
 
+     <h3 id="nav">Navigation</h3>
 
+     <ul class="side-nav">
 
+         <li class="active"><a href="index.html">Tableau de bord</a></li>
 
+         <li><a href="infos.html">Mes informations personnelles</a></li>
 
+         <li><a href="abo.html">Mes abonnements</a></li>
 
+         <li><a href="contact.html">Contact / Support</a></li>
 
+     </ul>
 
+     </nav>
 
+   </div>
 
 
   <div class="large-9 columns">
 
   <!-- Partie à inclure -->
 
@@ -37,6 +44,7 @@
 
         </div>
 
     </div>
 
 
+</div>
 
     <script src="js/vendor/jquery.js"></script>
 
     <script src="js/foundation.min.js"></script>
 
     <script>

+ 45 - 25
illyse-si-design/infos.html
View File 

@@ -10,38 +10,58 @@
 
   </head>
 
   <body>
 
 
-  <div class="row large-12 columns">
 
-    <h1><a href="index.html">COIN est un Outil pour un Internet Neutre</a></h1>
 
-    <div class="large-3 columns">
 
-      <ul class="side-nav">
 
-          <li><a href="index.html">Tableau de bord</a></li>
 
-          <li class="active"><a href="infos.html">Mes informations personnelles</a></li>
 
-          <li><a href="abo.html">Mes abonnements</a></li>
 
-          <li><a href="contact.html">Contact / Support</a></li>
 
-      </ul>
 
+ <div class="large-12 columns">
 
+  <header class="row">
 
+      <h1><a href="index.html">COIN est un Outil pour un Internet Neutre</a></h1>
 
+  </header>
 
+  <div class="row">
 
+  <div class="large-3 columns">
 
+    <nav id="sidebox">
 
+    <h3 id="nav">Navigation</h3>
 
+    <ul class="side-nav">
 
+        <li><a href="index.html">Tableau de bord</a></li>
 
+        <li class="active"><a href="infos.html">Mes informations personnelles</a></li>
 
+        <li>
 
+        	<a href="abo.html">Mes abonnements</a>
 
+       	</li>
 
+        <li><a href="contact.html">Contact / Support</a></li>
 
+    </ul>
 
+    </nav>
 
   </div>
 
 
-  <div class="large-9 columns">
 
+<div class="large-9 columns">
 
   <!-- Partie à inclure -->
 
         <div class="row">
 
             <h2>Mes informations personnelles</h2>
 
-            <div class="panel">
 
-                <h3>Me joindre</h3>
 
-                <strong>John Doe</strong><br/>
 
-                55, rue des canards<br/>
 
-                69000 LYON<br/>
 
-                coin [at] illyse [point] org<br/>
 
-                01 01 01 01 01<br/>
 
-            </div>
 
-            <div class="panel">
 
-                <h3>Je suis membre d'illyse</h3>
 
-                <p>et ma cotisation est : <span class="label success">à jour !</span></p>
 
-            </div>
 
-                <a href="#" class="button">Modifier mes informations</a>
 
-                <a href="#" class="button">Mettre à jour ma cotisation</a>
 
+            <div class="row">
 
+                <div class="large-6 columns">
 
+                <div class="panel">
 
+                        <h3>Me joindre</h3>
 
+                        <span class="label">Prénom - Nom</span>&nbsp;<strong>John Doe</strong><br/>
 
+                        <span class="label">Adresse</span>&nbsp;55, rue des canards - 69000 LYON<br/>
 
+                        <span class="label">Email</span>&nbsp;coin [at] illyse [point] org<br/>
 
+                        <span class="label">Téléphone</span>&nbsp;01 01 01 01 01<br/>
 
+                </div>
 
+                </div>
 
+
 
+                <div class="large-6 columns">
 
+                <div class="panel">
 
+                   <h3>Je suis membre d'illyse</h3>
 
+                    <p>et ma cotisation est : <span class="label success">à jour !</span></p>
 
+                </div>
 
+                <div class="panel">
 
+                    <h3>Infos additionnelles</h3>
 
+                    <span class="label">Clé ssh</span> coin.pub
 
+                </div>
 
+                </div>
 
+           </div>
 
+           <div class="row">
 
+           <a href="#" class="button">Modifier mes informations</a>
 
+           <a href="#" class="button">Mettre à jour ma cotisation</a>
 
+           </div>
 
         </div>
 
     </div>
 
-
 
+</div>
 
     <script src="js/vendor/jquery.js"></script>
 
     <script src="js/foundation.min.js"></script>
 
     <script>