Partagez|

[CREAPHY] Code de PA #5

Voir le sujet précédent Voir le sujet suivant Aller en bas

Pyphilia

I am Pyphilia

Messages : 325
Points : 613
Date d'inscription : 03/02/2011
Age : 22

[CREAPHY] Code de PA #5 Empty
MessageSujet: [CREAPHY] Code de PA #5 [CREAPHY] Code de PA #5 EmptySam 14 Mar - 23:24

[CREAPHY] Code de PA #5 Image11

Ressource : jCarrousel.js

Javascript
Code:
(function($) {
   $(function() {
      $('.jcarousel').jcarousel();

      $('.jcarousel-control-prev')
      .on('jcarouselcontrol:active', function() {
         $(this).removeClass('inactive');
      })
      .on('jcarouselcontrol:inactive', function() {
         $(this).addClass('inactive');
      })
      .jcarouselControl({
         target: '-=1'
      });

      $('.jcarousel-control-next')
      .on('jcarouselcontrol:active', function() {
         $(this).removeClass('inactive');
      })
      .on('jcarouselcontrol:inactive', function() {
         $(this).addClass('inactive');
      })
      .jcarouselControl({
         target: '+=1'
      });

      $('.jcarousel-pagination')
      .on('jcarouselpagination:active', 'a', function() {
         $(this).addClass('active');
      })
      .on('jcarouselpagination:inactive', 'a', function() {
         $(this).removeClass('active');
      })
      .jcarouselPagination();
   });
})(jQuery);

PA
Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.1/jquery.jcarousel.min.js" type="text/javascript"></script><script src="https://raw.githubusercontent.com/jsor/jcarousel/master/examples/basic/jcarousel.basic.js" type="text/javascript"></script>
<div id="pa_jc">
                                                   
   <h2>
                        Contexte          
   </h2>
                                   
   <h2 class="rp_titre">
                              Les nouveautés !                        
   </h2>
                                                   
   <h2>
                        Le Staff        
   </h2>
                                     
   <div id="concept">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus massa, gravida sit amet dapibus a, maximus eu nibh. Suspendisse potenti. Nulla eget eros sit amet orci malesuada semper sed ac risus. Etiam id rhoncus justo, quis rutrum tortor. Pellentesque malesuada tellus dignissim, finibus tellus eget, finibus arcu. Duis nisl mauris, feugiat in fringilla quis, congue eu tellus. Integer elementum lacus mauris. Integer sit amet luctus felis, eget finibus quam. Morbi posuere nibh non arcu sagittis, non dapibus tellus dignissim. Nulla a vestibulum odio.    
   </div>
                                                   
   <div id="news">
                                                      
      <div class="jcarousel-wrapper">
                                                         
         <div class="jcarousel">
                                                            
            <ul>
                                                               
               <li>
                                          <img src="http://1.viki.io/c/12699c/ffd6b2b99c.jpg" /> <span class="text">texte texte texte aléatoire</span>                        
               </li>
                                                               
               <li>
                                          <img src="http://upload.wikimedia.org/wikipedia/en/3/3a/Padam_Padam-poster.jpg" /> <span class="text">texte texte texte aléatoire</span>                        
               </li>
                                                               
               <li>
                                          <img src="http://0.viki.io/c/24142c/4132afbc32.jpg" />   <span class="text">texte texte texte aléatoire</span>                        
               </li>
                                                               
               <li>
                                          <img src="http://asianwiki.com/images/e/ec/IRIS_2-0002.jpg" />   <span class="text">texte texte texte aléatoire</span>                        
               </li>
                                                               
               <li>
                                          <img src="http://www.koreandrama.org/wp-content/uploads/2014/10/Birth-of-a-Beauty-Poster2.jpg" />   <span class="text">texte texte texte aléatoire    </span>                    
               </li>
                                                               
            </ul>
                                                            
         </div>
                                  <a class="jcarousel-control-prev" href="#">‹</a> <a class="jcarousel-control-next" href="#">›</a>                        
         <p class="jcarousel-pagination">
                                                        
         </p>
                                                     
      </div>
                                                      
   </div>
                                                   
   <div id="staff">
                               <a href=""><span style="background-image:url(http://img15.hostingpics.net/pics/212909bounce.gif)"></span></a> <a href=""><span style="background-image:url(http://img15.hostingpics.net/pics/295522bounce1.gif)"></span></a> <a href=""><span style="background-image:url(http://img15.hostingpics.net/pics/240826bounce2.gif)"></span></a>                        
   </div>
                                         
   <div id="links_box">
                               <a href="">liens 1</a><a href="">liens 2</a><a href="">liens 3</a><a href="">liens 4</a><a href="">liens 5</a>                        
   </div>
                                   
</div>

CSS
Code:

/**PA BY PYPHI(LIA) @ CREAPHY**/

@import url(http://fonts.googleapis.com/css?family=Aguafina+Script);

/* latin-ext */
@font-face {
  font-family: 'Qwigley';
  font-style: normal;
  font-weight: 400;
  src: local('Qwigley'), local('Qwigley-Regular'), url(http://fonts.gstatic.com/s/qwigley/v6/2Dy1Unur1HJoklbsg4iPJ_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Qwigley';
  font-style: normal;
  font-weight: 400;
  src: local('Qwigley'), local('Qwigley-Regular'), url(http://fonts.gstatic.com/s/qwigley/v6/gThgNuQB0o5ITpgpLi4Zpw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
#pa_jc {

   text-align: center;
}

#pa_jc h2:nth-child(2n+2){
   font-size: 40px;
  font-weight:bold;
   margin: 0 0 -35px 0;
  
}
#pa_jc h2{
  font-weight:200;
  font-size:35px;
   font-family: 'Aguafina Script', cursive;
   margin: 0 0 -45px 0;
   color:#ced85b;
  display:inline-block;
  vertical-align:middle;
  width:31%;
}



#pa_jc > div:not(#links_box) {
   display: inline-block;
   vertical-align:middle;
   margin: 0 10px;
}

#pa_jc #concept, #pa_jc #staff {
   height:180px;
   width:185px;
   box-sizing:border-box;
   border-radius: 5px;
}

#pa_jc #concept {
   background-color: #eee;
   border-bottom: solid 3px #ced85b;
   text-align: justify;
   padding:10px;
   color:#aaa;
   overflow: auto;
   line-height: 10.5px;
   font-family: arial;
   font-size: 12px;
}

#pa_jc #staff > a span {
   display: block;
   height:30.5%;
   border-radius: 2px;
   margin:2% 0;
   background-color: white;
   background-position: center center;
   background-size: 120%;
   border:1px solid transparent;
   opacity: 0.3;

   -moz-transition:all 0.7s;
   -webkit--transition:all 0.7s;
   -ms-transition:all 0.7s;
   -o-transition:all 0.7s;
   transition:all 0.7s;
}

#pa_jc #staff > a span:hover {
   border-color:greenyellow;
   opacity: 0.8;
}

#pa_jc #links_box {
   text-align: center;
  margin-top:10px;
}

#pa_jc #links_box a {
   margin:20px;
  font-family:georgia;
  color:grey;
   font-size: 23px;
  font-style:italic;
  letter-spacing:-2px;
}
#pa_jc #links_box a:hover {cursor:crosshair;}
#pa_jc a.credits {
   margin: auto;
   text-align: center;
   display: block;
   text-decoration: none;
   text-transform: uppercase;
   opacity: 0.5;
   font-size: 10px;
   font-family: arial;
}

.jcarousel-wrapper {
   margin: 20px auto;
   position: relative;
   width: 270px;
   height: 170px;
   border: 10px solid #fff;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: 0 0 2px #999;
   -moz-box-shadow: 0 0 2px #999;
   box-shadow: 0 0 2px #999;
}

/** Carousel **/

.jcarousel {
   position: relative;
   overflow: hidden;
   width: 270px;
   height: 170px;
}

.jcarousel ul {
   width: 20000em;
   position: relative;
   list-style: none;
   margin: 0;
   padding: 0;
}

.jcarousel li {
   float: left;
   position: relative;
   height:170px !important;
  width:270px !important;
}

.jcarousel li .text {
   position: absolute;
   bottom:0;
   left:0;
   background:rgba(0,0,0,0.7);
   padding:5px;
   width:100%;
   font-size: 16px;
   font-family: arial;
   text-align: center;
   color:rgba(255,255,255,0.8);
}

.jcarousel li .text a {
  color:lightgreen;
}

.jcarousel li img {
   width:100% !important;
}

/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
   position: absolute;
   top: 80px;
   width: 30px;
   height: 30px;
   text-align: center;
   background: #4E443C;
   color: #fff !important;
   text-decoration: none;
   text-shadow: 0 0 1px #000;
   font: 24px/27px Arial, sans-serif;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   border-radius: 30px;
}

.jcarousel-control-prev {
   left: -35px;
}

.jcarousel-control-next {
   right: -35px;
}

.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
   display: block;
}

.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
   opacity: .5;
   cursor: default;
}

/** Carousel Pagination **/

.jcarousel-pagination {
   position: absolute;
   bottom: -38px;
   left: 26%;
}

.jcarousel-pagination a {
   text-decoration: none;
   display: inline-block;

   font-size: 11px;
   line-height: 14px;
   min-width: 14px;

   background: #fff;
   border:1px rgba(0,0,0,0.15) solid;
   color: #4E443C;
   border-radius: 14px;
   padding: 3px;
   text-align: center;

   margin-right:6px;

   opacity: .75;
}

.jcarousel-pagination a.active {
   background: #ced85b;
   color: #fff;
   opacity: 1;
   border:none;
}
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

[CREAPHY] Code de PA #5

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Essai-Fond-Pyphilia :: Créaphy :: Codages-
Ne ratez plus aucun deal !
Abonnez-vous pour recevoir par notification une sélection des meilleurs deals chaque jour.
IgnorerAutoriser