Menu icon Foundation

My Posts


My Comments

Pierre Crochart commented on Pierre Crochart's post over 4 years

I forgot, here's my HTML and CSS :

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fabulous Fab | Accueil</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
      <body>
          <div class="row">
            <div class="small-9 small-centered columns">
              <h1><img src="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/fabfablogo.png"/>
              </h1>
            </div>
          </div>
          <div class="row">
            <div class="large-2 medium-3 columns">
              <div class="sidebar">
                <ul class="side-nav">
                 <li class="active"><a href="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/index.html">Accueil</a></li>
                  <li><a href="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/discographie.html">Discographie</a></li>
                  <li><a href="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/bio.html">Bio</a></li>
                  <li><a href="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/contact.php">Contact</a></li>
                <div class="social_bar"> 
                  <li><a href="http://deezer.com" class="socialbutton"><img src="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/deezerbutton.png"/></a></li><li><a href="http://twitter.com" class="socialbutton"><img src="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/twitterlogo.png"/></a></li>
                  <li><a href="http://facebook.com" class="socialbutton"><img src="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/facebooklogo.png"/></a></li>
               </div>
             </ul>
             </div>
            </div>

                <!-- Tout ce qui est au-dessus de cette ligne est le squelette du site -->

  <div class="page-wrap"> <!-- sert uniquement pour le sticky footer -->

          <div class="large-10 medium-9 columns">
            <div id="header">   
            <!--<div class="panel"> pour afficher un encadré autour de la div-->
              <h3>On va y arriver ?</h3>
                <p>Random text blablablablabla et on parle pour rien dire lalala et on continue histoire de remplir la case blablabla juste pour écrire quelque chose et remplir que ça fasse un petit peu rempli lalala</p>
             </div>   
            </div>

        <div class="row">
          <div class="large-6 medium-5 columns">
            <div class="panel">
              <div id="news">
                <h2>Actualités</h2>
                  <p>Les dernières nouvelles concernant l'artiste se situeront dans cet encadré. On pourra également, à terme, les retrouver dans l'un des sous menus disponibles dans la bar de navigation à la gauche de la page</p>
                   <div class="row">
                     <div class="large-5 medium-4 columns">
                         <div id="social">
                           <h2>Social</h2>
                             <p>Regroupement des dernières publications de l'artiste sur les réseaux sociaux</p>
                          </div>
                         </div>
                     <div class="large-6 columns">
                         <div id="autre">
                           <h2>Autre chose</h2>
                             <p>Je ne sais pas encore ce qu'il y aura dans cette partie. Mais ce sera probablement génial.</p>
                          </div>
                         </div>
                     </div>                                        
              </div>
            </div>
          </div>


          <div class="large-3 columns">
            <div class="panel">
              <div id="news">
                <h2>Vidéos</h2>
                  <p>Regroupement des dernières vidéos et mixes de l'artiste. Il s'agira essentiellement d'intégration de lecteurs Soundcloud ou de vidéos YouTube</p>
                    <div class="flex-video">
                      <iframe width="560" height="315" src="https://www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
                    </div>
                    <div class="flex-video">
                      <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/203475116&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
                   </div>   
              </div>
            </div>
          </div>
        </div> 
    </div>
<!-- on va essayer de mettre un footer ici -->

    <footer class="site-footer">
      Peterline6© 2015.
    </footer>

body {
  /*background: linear-gradient(to right, rgba(53,106,160,1) 0%,rgba(53,106,160,1) 100%); /* CSS pour le dégradé de couleur en background http://www.colorzilla.com/gradient-editor/*/
  /*background: linear-gradient(to left, rgba(206,220,231,1) 0%,rgba(206,220,231,1) 0%,rgba(206,220,231,1) 5%,rgba(89,106,114,1) 100%);*/
  background-image: url('http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/Image-Background-Fab.png');
  background-color:#697680 ;
  background-position: center center;
  background-repeat: repeat-y;
  z-index: -1;
}

h1 {
  font-size:74px;
  color:rgba(255,255,255,254);
}

#header p {
  color:rgb(255, 239, 239);
}

.socialbutton img {

  height: 50%;
  width: 50%;
}
#header p, #header h3 {
  text-transform: uppercase;
}

.panel {
  border: none;
  border-radius: 7px;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
}

#news h2 {
  color:white;
}
#news p {
  color:black;
}
.sidebar {
  float: left;
  position: relative;

}
.side-nav {
  float: left;
  position: relative;

}
.side-nav li.active > a:first-child:not(.button) {
  color:#B8DBFF;
  text-transform: uppercase;
}
.side-nav li a:not(.button) {
  color:#859EB8;
  text-transform: uppercase;
}

/* Ci-dessous, essai footer */ 
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: 10px; 
}
.page-wrap:after {
  content: "";
  display: block;
}

.site-footer {
  text-align:right;
}
.site-footer, .page-wrap:after {
  height: 10px; 
}

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Pierre Crochart's post over 4 years

I forgot, here's my HTML and CSS :

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fabulous Fab | Accueil</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
      <body>
          <div class="row">
            <div class="small-9 small-centered columns">
              <h1><img src="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/fabfablogo.png"/>
              </h1>
            </div>
          </div>
          <div class="row">
            <div class="large-2 medium-3 columns">
              <div class="sidebar">
                <ul class="side-nav">
                 <li class="active"><a href="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/index.html">Accueil</a></li>
                  <li><a href="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/discographie.html">Discographie</a></li>
                  <li><a href="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/bio.html">Bio</a></li>
                  <li><a href="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/contact.php">Contact</a></li>
                <div class="social_bar"> 
                  <li><a href="http://deezer.com" class="socialbutton"><img src="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/deezerbutton.png"/></a></li><li><a href="http://twitter.com" class="socialbutton"><img src="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/twitterlogo.png"/></a></li>
                  <li><a href="http://facebook.com" class="socialbutton"><img src="http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/facebooklogo.png"/></a></li>
               </div>
             </ul>
             </div>
            </div>

                <!-- Tout ce qui est au-dessus de cette ligne est le squelette du site -->

  <div class="page-wrap"> <!-- sert uniquement pour le sticky footer -->

          <div class="large-10 medium-9 columns">
            <div id="header">   
            <!--<div class="panel"> pour afficher un encadré autour de la div-->
              <h3>On va y arriver ?</h3>
                <p>Random text blablablablabla et on parle pour rien dire lalala et on continue histoire de remplir la case blablabla juste pour écrire quelque chose et remplir que ça fasse un petit peu rempli lalala</p>
             </div>   
            </div>

        <div class="row">
          <div class="large-6 medium-5 columns">
            <div class="panel">
              <div id="news">
                <h2>Actualités</h2>
                  <p>Les dernières nouvelles concernant l'artiste se situeront dans cet encadré. On pourra également, à terme, les retrouver dans l'un des sous menus disponibles dans la bar de navigation à la gauche de la page</p>
                   <div class="row">
                     <div class="large-5 medium-4 columns">
                         <div id="social">
                           <h2>Social</h2>
                             <p>Regroupement des dernières publications de l'artiste sur les réseaux sociaux</p>
                          </div>
                         </div>
                     <div class="large-6 columns">
                         <div id="autre">
                           <h2>Autre chose</h2>
                             <p>Je ne sais pas encore ce qu'il y aura dans cette partie. Mais ce sera probablement génial.</p>
                          </div>
                         </div>
                     </div>                                        
              </div>
            </div>
          </div>


          <div class="large-3 columns">
            <div class="panel">
              <div id="news">
                <h2>Vidéos</h2>
                  <p>Regroupement des dernières vidéos et mixes de l'artiste. Il s'agira essentiellement d'intégration de lecteurs Soundcloud ou de vidéos YouTube</p>
                    <div class="flex-video">
                      <iframe width="560" height="315" src="https://www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
                    </div>
                    <div class="flex-video">
                      <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/203475116&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
                   </div>   
              </div>
            </div>
          </div>
        </div> 
    </div>
<!-- on va essayer de mettre un footer ici -->

    <footer class="site-footer">
      Peterline6© 2015.
    </footer>

body {
  /*background: linear-gradient(to right, rgba(53,106,160,1) 0%,rgba(53,106,160,1) 100%); /* CSS pour le dégradé de couleur en background http://www.colorzilla.com/gradient-editor/*/
  /*background: linear-gradient(to left, rgba(206,220,231,1) 0%,rgba(206,220,231,1) 0%,rgba(206,220,231,1) 5%,rgba(89,106,114,1) 100%);*/
  background-image: url('http://localhost/sites/Mise%20en%20pratique%20PHP/essai%203/img/Image-Background-Fab.png');
  background-color:#697680 ;
  background-position: center center;
  background-repeat: repeat-y;
  z-index: -1;
}

h1 {
  font-size:74px;
  color:rgba(255,255,255,254);
}

#header p {
  color:rgb(255, 239, 239);
}

.socialbutton img {

  height: 50%;
  width: 50%;
}
#header p, #header h3 {
  text-transform: uppercase;
}

.panel {
  border: none;
  border-radius: 7px;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
}

#news h2 {
  color:white;
}
#news p {
  color:black;
}
.sidebar {
  float: left;
  position: relative;

}
.side-nav {
  float: left;
  position: relative;

}
.side-nav li.active > a:first-child:not(.button) {
  color:#B8DBFF;
  text-transform: uppercase;
}
.side-nav li a:not(.button) {
  color:#859EB8;
  text-transform: uppercase;
}

/* Ci-dessous, essai footer */ 
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: 10px; 
}
.page-wrap:after {
  content: "";
  display: block;
}

.site-footer {
  text-align:right;
}
.site-footer, .page-wrap:after {
  height: 10px; 
}

Posts Followed

Following

  • No Content

Followers

  • No Content