Foundation 6: Création d'un Panel

Dans cette vidéo nous allons apprendre comment créer un panel avec Foundation 6

Code source :

Fichier index.html :

 <!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <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">
    <title>Apprendre DEV</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>

  <body >  
    <div class="off-canvas-wrapper">
      <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
          <div class="title-bar" data-responsive-toggle="menu-principal-horizontal" data-hide="medium">
            <div class="title-bar-left">
              <button class="menu-icon" type="button" data-open="menu-principal-responsive"></button>
              <span class="title-bar-title">Apprendre DEV</span>
            </div>

          </div>

          <nav  class="off-canvas position-left" id="menu-principal-responsive" data-off-canvas >
                      <!-- Close button -->
            <button class="close-button" aria-label="Close menu" type="button" data-close>
              <span aria-hidden="true">&times;</span>
            </button>

            <ul  class="dropdown vertical menu" data-responsive-menu="accordion">
               <li class="active">  <a href="index.html">Accueil</a> </li>
               <li>  <a href="#" >Language </a>
                  <ul class="menu vertical">
                       <li><a href="#">PHP</a></li>
                       <li><a href="java.html">JAVA</a></li>
                       <li><a href="#">C</a></li>
                       <li><a href="#">C++</a></li>
                       <li><a href="#">C#</a></li>
                   </ul>
               </li>
               <li>  <a href="#" >Framework PHP</a>
                   <ul class="menu vertical">
                       <li><a href="#">Symfony</a></li>
                       <li><a href="#">Laravel</a></li>
                       <li><a href="#">Cakephp</a></li>
                       <li><a href="#">Yii</a></li>
                   </ul>
               </li>
               <li>  <a href="#" >Framework JS </a>
                   <ul class="menu vertical">
                       <li><a href="#">Backbone.js</a></li>
                       <li><a href="#">AngularJS</a></li>
                       <li><a href="#">React</a></li>
                       <li><a href="#">Meteor</a></li>
                   </ul>
               </li>
               <li >  <a href="#" >CMS </a>
                   <ul class="menu vertical">
                       <li><a href="#">Drupal</a></li>
                       <li><a href="#">Wordpress</a></li>
                       <li><a href="#">Joomla</a></li>
                       <li><a href="#">Prestashop</a></li>
                   </ul>
               </li>
               <li>  <a href="#" >ERP</a>
                   <ul class="menu vertical">
                       <li><a href="#">Odoo</a></li>
                       <li><a href="#">Dolibarr</a></li>
                   </ul>
               </li>
               <li>  <a href="#" >Logiciel</a>
                   <ul class="menu vertical">
                       <li><a href="#">Adobe Premier</a></li>
                       <li><a href="#">Illustrator</a></li>
                       <li><a href="#">InDesign</a></li>
                       <li><a href="#">Gimp</a></li>
                       <li><a href="#">Sublimtext</a></li>
                       <li><a href="#">Notepad++</a></li>
                   </ul>
               </li>
             </ul> 
          </nav>  

            <!-- ************************** -->
            <!--  Barre de menu Horizontal  -->
            <!-- ************************** -->

          <nav class="top-bar" id="menu-principal-horizontal">
            <div  class="row column"> 
             <ul  class="dropdown menu" data-dropdown-menu>
               <li class="menu-text">Apprendre DEV</li>
               <li  class="active">  <a href="index.html">Accueil</a> </li>
               <li>  <a href="#" >Language </a>
                  <ul class="menu vertical">
                       <li><a href="#">PHP</a></li>
                       <li><a href="java.html">JAVA</a></li>
                       <li><a href="#">C</a></li>
                       <li><a href="#">C++</a></li>
                       <li><a href="#">C#</a></li>
                   </ul>
               </li>
               <li>  <a href="#" >Framework PHP</a>
                   <ul class="menu vertical">
                       <li><a href="#">Symfony</a></li>
                       <li><a href="#">Laravel</a></li>
                       <li><a href="#">Cakephp</a></li>
                       <li><a href="#">Yii</a></li>
                   </ul>
               </li>
               <li>  <a href="#" >Framework JS </a>
                   <ul class="menu vertical">
                       <li><a href="#">Backbone.js</a></li>
                       <li><a href="#">AngularJS</a></li>
                       <li><a href="#">React</a></li>
                       <li><a href="#">Meteor</a></li>
                   </ul>
               </li>
               <li >  <a href="#" >CMS </a>
                   <ul class="menu vertical">
                       <li><a href="#">Drupal</a></li>
                       <li><a href="#">Wordpress</a></li>
                       <li><a href="#">Joomla</a></li>
                       <li><a href="#">Prestashop</a></li>
                   </ul>
               </li>
               <li>  <a href="#" >ERP</a>
                   <ul class="menu vertical">
                       <li><a href="#">Odoo</a></li>
                       <li><a href="#">Dolibarr</a></li>
                   </ul>
               </li>
               <li>  <a href="#" >Logiciel</a>
                   <ul class="menu vertical">
                       <li><a href="#">Adobe Premier</a></li>
                       <li><a href="#">Illustrator</a></li>
                       <li><a href="#">InDesign</a></li>
                       <li><a href="#">Gimp</a></li>
                       <li><a href="#">Sublimtext</a></li>
                       <li><a href="#">Notepad++</a></li>
                   </ul>
               </li>
             </ul> 
            </div> 
          </nav>
    

          <!-- ************************** -->
          <!--  Contenu page web  -->
          <!-- ************************** -->
        <div class="off-canvas-content" data-off-canvas-content>
            <!-- Page content -->

            <!-- ********************* 	-->
			<!--        Carrousel   	-->
			<!-- ********************* 	-->

	        <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-timer-delay="3000" data-orbit data-options="animInFromLeft:fade-in; animInFromRight:fade-in; animOutToLeft:fade-out; animOutToRight:fade-out;">

	          <ul class="orbit-container">
	              <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
	              <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
	              <li class="is-active orbit-slide">
	                <img class="orbit-image" src="img/drupal-8_carousel.png" alt="Space">
	                <figcaption class="orbit-caption">Apprendre Drupal8 de A à Z</figcaption>
	              </li>
	              <li class="orbit-slide">
	                <img class="orbit-image" src="img/gimp_carousel.png" alt="Space">
	                <figcaption class="orbit-caption">Apprendre le Design avec Gimp</figcaption>
	              </li>
	              <li class="orbit-slide">
	                <img class="orbit-image" src="img/prestashop_carousel.png" alt="Space">
	                <figcaption class="orbit-caption">Le Cms e-commercxe</figcaption>
	              </li>
	              <li class="orbit-slide">
	                <img class="orbit-image" src="img/laravel_carousel.png" alt="Space">
	                <figcaption class="orbit-caption">Le Framework PHP</figcaption>
	              </li>
	          </ul>
	          <nav class="orbit-bullets">
	              <button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
	              <button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
	              <button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
	              <button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
	          </nav>
	        </div>

	        <!-- ********************* -->
			<!-- 		contenu 	   -->
			<!-- ********************* -->
	        <div class="row">

	            <div class="small-12 medium-6 large-4 columns">
	              <div class="thumbnail">
	                <img src="img/programmation-logo_thumbnail.png" alt="programmation">
	                <div>
	                  <h3>Programmer</h3>
	                  <p>Découvrez la joie de la programmation du php au java en passant par le C.</p>
	                  <p class="text-right"> <a class="small button" href="#" role="button">Détail</a> </p>

	                </div>
	              </div>  
	            </div>

	            <div class="small-12 medium-6 large-4 columns">
	              <div class="thumbnail">
	                <img src="img/frameworkphp-logo_thumbnail.png" alt="framework php">
	                <div>
	                  <h3>Framework PHP</h3>
	                  <p>Vous voulez développer efficacement avec PHP, utiliser un Framework</p>
	                  <p class="text-right"><a class="small button" href="#"role="button">Détail</a> </p>
	                </div>
	              </div>  
	            </div>

	            <div class="small-12 medium-6 large-4 columns">
	              <div class="thumbnail">
	                <img src="img/frameworkjs-logo_thumbnail.png" alt="Framework javascript">
	                <div>
	                  <h3>Framework JS</h3>
	                  <p>Technologie du moment! Apprendre un Framewok JS est indisponsable</p>
	                  <p class="text-right"><a class="small button"  href="#" role="button">Détail</a> </p>
	                </div>
	              </div>  
	            </div>

	            <div class="small-12 medium-6 large-4 columns">
	              <div class="thumbnail">
	                <img src="img/erp-logo_thumbnail.png" alt="ERP">
	                <div>
	                  <h3>ERP</h3>
	                  <p>Vos applications de gestion d'entreprise. De la gestion de caisse au RH</p>
	                  <p class="text-right"><a href="#" class="small button" role="button">Détail</a> </p>
	                </div>
	              </div>  
	            </div>

	            <div class="small-12 medium-6 large-4 columns">
	              <div class="thumbnail">
	                <img src="img/cms-logo_thumbnail.png" alt="Sytème de gestion de contenu">
	                <div>
	                  <h3>CMS</h3>
	                  <p>Créer un site web en trois click, il suffit d'utiliser un CMS</p>
	                  <p class="text-right"><a href="#" class="small button" role="button">Détail</a> </p>
	                </div>
	              </div>  
	            </div>

	            <div class="small-12 medium-6 large-4 columns">
	              <div class="thumbnail">
	                <img src="img/logiciel-logo_thumbnail.png" alt="Logiciel de développement">
	                <div>
	                  <h3>Logiciel</h3>
	                  <p>Pour développer il faut des outils. Explorer vos logiciels préférés!</p>
	                  <p class="text-right"><a href="#" class="small button" role="button">Détail</a> </p>
	                </div>
	              </div>
	            </div>

	        </div>

	        <div class="row">
	        	<ul class="accordion" data-accordion>
	        		<li class="accordion-item is-active" data-accordion-item>
			           	<h1 class="accordion-title">Quoi de 9 <span class="success badge">3</span></h1>
			           	<div class="accordion-content" data-tab-content>
			           	    <div class="media-object">
			           	        <div class="media-object-section">
			           	              <div class="thumbnail">
			           	                <a href="#">
			           	                  <img  src="img/cms-logo_panel.png" alt="news cms">
			           	                </a>
			           	              </div>
			           	        </div>      
			           	        <div class="media-object-section">
			           	          <h4>Drupal Theming</h4>
			           	          <span class="success label">Nouveau</span>
			           	          <p>Une nouvelle sur le theming de Drupal 8. Nous allons créer un simple template, ensuite nous allons les ajouter dans le dossier theme.... <a href="#">Plus</a></p>
			           	        </div>
			           	    </div>
			           	    <div class="media-object">
			           	        <div class="media-object-section">
			           	            <div class="thumbnail">
			           	              <a href="#">
			           	                <img src="img/programmation-logo_panel.png" alt="apprendre php">
			           	              </a>
			           	            </div>
			           	        </div>  
			           	        <div class="media-object-section">
			           	          <h4 >Nouvelle formation de PHP</h4>
			           	          <p>Dans la partie de cette formation nous allons apprendre comment manipuler les tableaux. Ensuite on va passer à la programmation orienté objet de php...<a href="#">Plus</a></p>
			           	        </div>
			           	    </div>
			           	    <div class="media-object">
			           	        <div class="media-object-section">
			           	            <div class="thumbnail">
			           	              <a href="#">
			           	                <img src="img/erp-logo_panel.png" alt="apprendre erp">
			           	              </a>
			           	            </div>
			           	        </div>  
			           	        <div class="media-object-section">
			           	          <h4 >Odoo</h4>
			           	          <p>Un nouveau tutoriel sur odoo, la dernière fois nous avons vu comment l'insttalé sur Debian 8, cette fois-ci nous allons apprendre l'installation sur Ubuntu server 14.04.... <a href="#">Plus</a></p>
			           	        </div>
			           	    </div>
			           	</div>
			        </li>   	
		        </ul>   	
            </div> 

					<!-- ********************* -->
					<!-- 		footer         -->
					<!-- ********************* -->

	        <footer>
		        <div class="row small-up-2 medium-up-3 large-up-6">
		            <div class="column">
		                <h4>Language</h4>
		                <ul >
		                        <li><a href="#">PHP</a></li>
		                        <li><a href="#">JAVA</a></li>
		                        <li><a href="#">C</a></li>
		                        <li><a href="#">C++</a></li>
		                        <li><a href="#">C#</a></li>
		                </ul>
		            </div> 
		            <div class="column">
		                <h4>Framework PHP </h4>
		                <ul>
		                      <li><a href="#">Symfony</a></li>
		                      <li><a href="#">Laravel</a></li>
		                      <li><a href="#">Cakephp</a></li>
		                      <li><a href="#">Yii</a></li>
		                </ul>
		            </div>              
		            <div class="column">
		                <h4>Framework JS </h4>
		                <ul>
		                      <li><a href="#">Backbone.js</a></li>
		                      <li><a href="#">AngularJS</a></li>
		                      <li><a href="#">React</a></li>
		                      <li><a href="#">Meteor</a></li>
		                </ul>
		            </div>
		            <div class="column">
		                <h4>CMS </h4>
		                <ul>
		                      <li><a href="#">Drupal</a></li>
		                      <li><a href="#">Wordpress</a></li>
		                      <li><a href="#">Joomla</a></li>
		                      <li><a href="#">Prestashop</a></li>
		                </ul>
		            </div>
		            <div class="column">
		                <h4>ERP </h4>
		                <ul>
		                      <li><a href="#">Odoo</a></li>
		                      <li><a href="#">Dolibarr</a></li>
		                </ul>
		            </div>
		            <div class="column">
		                <h4>Logiciel </h4>
		                <ul>
		                      <li><a href="#">Adobe Premier</a></li>
		                      <li><a href="#">Illustrator</a></li>
		                      <li><a href="#">InDesign</a></li>
		                      <li><a href="#">Gimp</a></li>
		                      <li><a href="#">Sublimtext</a></li>
		                      <li><a href="#">Notepad++</a></li>
		                </ul>
		            </div>   
		        </div>    
	        </footer>

        </div>
      </div>
    </div>   
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>