Recherche un dev web pour création d'un block

0x

0x

VLdot
Premium
Inscription
18 Février 2014
Messages
172
Réactions
28
Points
16 641
RGCoins
65
Bonjour :RG:
Je recherche un développeur Web pour créer un block (staff) sur mon site.
Un block dans ce style la :
1554299149-nouvelle-image-bitmap.png
 
Trier par date Trier par votes
K1RUA a dit:
Bonjour :RG:
Je recherche un développeur Web pour créer un block (staff) sur mon site.
Un block dans ce style la :
1554299149-nouvelle-image-bitmap.png
Cliquez pour agrandir...
Salut, je veux bien t'aider mais il faudrais également plus de détails veut tu juste l'interface (HTML/CSS/JS) ou aussi côté serveur ? Que représente les flèches ? Je suis a ta dispo si tu a besoin ?
 
Voter positivement 0 Voter négativement
GregMod a dit:
Bonjour je veux bien essayer mais avant il me faudrait plus de détails sur ton site viens pv ^^
Cliquez pour agrandir...
Sun7WeazL a dit:
Salut, je veux bien t'aider mais il faudrais également plus de détails veut tu juste l'interface (HTML/CSS/JS) ou aussi côté serveur ? Que représente les flèches ? Je suis a ta dispo si tu a besoin ?
Cliquez pour agrandir...
Pas besoin de spécialement plus d'infos :xD: Il veut juste un carousel, cf la librairie que j'ai posté ci-dessus ;)
C'est pas du tout compliqué à mettre en place y en a pour une trentaine de minutes à tout casser :p
 
Voter positivement 0 Voter négativement
Sun7WeazL a dit:
Aider pour ? Tu fait copié coller :mmh:
Cliquez pour agrandir...
Ça m'a littéralement pris 15 minutes donc en 1 heure tu aurais eu le temps de comprendre (d)
J'ai juste fait un copier/coller de ce qui était écrit ici:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


Je te conseille de télécharger leur librairie plutôt que d'utiliser les liens "
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
" que j'ai utilisé dans le code, on sait jamais si un jour elle n'est plus en ligne ;)
Derien :troll:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Trop simple</title>
        <link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.css" />
        <link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />
    </head>
    
    <body>
        <div class="container">
            <div class="staff-box">
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                    
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                    
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
                
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                    
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                    
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
                
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                    
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                    
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
                
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                    
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                    
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
                
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                    
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                    
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
                
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                    
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                    
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
                
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                    
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                    
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
                
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                    
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                    
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
            </div>
        </div>
        
        <style>
            body {
                background: #000;
            }
            
            .container {
                margin: 0 auto;
                width: 750px;
            }
            
            .staff {
                width: 180px;
                margin: 0px 10px;
                padding: 10px;
                text-align: center;
            }
            
            .staff-avatar {
                width: 100%;
                height: auto;
            }
            
            .staff-username {
                color: #F9A600;
                font-weight: bold;
            }
            
            .staff-username::before {
                content: '☆';
            }
            
            .staff-rank {
                display: block;
                color: red;
                font-weight: bold;
            }
            
            .staff-description {
                color: #cbcbcb;
                font-size: 12px;
                font-style: italic;
            }
        </style>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://kenwheeler.github.io/slick/slick/slick.min.js"></script>
        <script>
        $(document).ready(function(){
            $('.staff-box').slick({
              dots: true,
              infinite: false,
              speed: 300,
              slidesToShow: 4,
              slidesToScroll: 4,
              responsive: [
                {
                  breakpoint: 1024,
                  settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                  }
                },
                {
                  breakpoint: 600,
                  settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                  }
                },
                {
                  breakpoint: 480,
                  settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                  }
                }
              ]
            });
        });
        </script>
    </body>
</html>
 
Voter positivement 0 Voter négativement
Paul GTP a dit:
Ça m'a littéralement pris 15 minutes donc en 1 heure tu aurais eu le temps de comprendre :d:
J'ai juste fait un copier/coller de ce qui était écrit ici:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


Je te conseille de télécharger leur librairie plutôt que d'utiliser les liens "
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
" que j'ai utilisé dans le code, on sait jamais si un jour elle n'est plus en ligne ;)
Derien :trollface:
Cliquez pour agrandir...

Quel humilité, légende vivante ? Tu sais par définition une légende est je cite "
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
". :trollface:
 
Voter positivement 0 Voter négativement
Salut K1RUA

Ta demande est-elle résolue ?

Si oui, je t'invite à cliquer sur Cette réponse a répondu à ma question sur le message qui t'a aidé pour rajouter le préfixe résolu à la discussion. :)

Bonne soirée,
Avionix
 
Voter positivement 0 Voter négativement
Avionix a dit:
Salut K1RUA
Ta demande est-elle résolue ?
Cliquez pour agrandir...
Non pas vraiment.

Paul GTP a dit:
Ça m'a littéralement pris 15 minutes donc en 1 heure tu aurais eu le temps de comprendre :d:
J'ai juste fait un copier/coller de ce qui était écrit ici:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


Je te conseille de télécharger leur librairie plutôt que d'utiliser les liens "
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
" que j'ai utilisé dans le code, on sait jamais si un jour elle n'est plus en ligne ;)
Derien :trollface:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <title>Trop simple</title>
        <link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.css" />
        <link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />
    </head>
  
    <body>
        <div class="container">
            <div class="staff-box">
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                  
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                  
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
              
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                  
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                  
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
              
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                  
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                  
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
              
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                  
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                  
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
              
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                  
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                  
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
              
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                  
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                  
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
              
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                  
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                  
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
              
                <div class="staff">
                    <img src="https://forwardsummit.ca/wp-content/uploads/2019/01/avatar-default.png" class="staff-avatar" alt="Default avatar" />
                  
                    <span class="staff-username">Paul GTP</span>
                    <span class="staff-rank">Légende vivante</span>
                  
                    <p class="staff-description">Paul GTP est une légende vivante. Le HTML/CSS est beaucoup trop simple pour lui, c'est pour cela qu'il décida de partir coloniser la Lune.</p>
                </div>
            </div>
        </div>
      
        <style>
            body {
                background: #000;
            }
          
            .container {
                margin: 0 auto;
                width: 750px;
            }
          
            .staff {
                width: 180px;
                margin: 0px 10px;
                padding: 10px;
                text-align: center;
            }
          
            .staff-avatar {
                width: 100%;
                height: auto;
            }
          
            .staff-username {
                color: #F9A600;
                font-weight: bold;
            }
          
            .staff-username::before {
                content: '☆';
            }
          
            .staff-rank {
                display: block;
                color: red;
                font-weight: bold;
            }
          
            .staff-description {
                color: #cbcbcb;
                font-size: 12px;
                font-style: italic;
            }
        </style>
      
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://kenwheeler.github.io/slick/slick/slick.min.js"></script>
        <script>
        $(document).ready(function(){
            $('.staff-box').slick({
              dots: true,
              infinite: false,
              speed: 300,
              slidesToShow: 4,
              slidesToScroll: 4,
              responsive: [
                {
                  breakpoint: 1024,
                  settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                  }
                },
                {
                  breakpoint: 600,
                  settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                  }
                },
                {
                  breakpoint: 480,
                  settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                  }
                }
              ]
            });
        });
        </script>
    </body>
</html>
Cliquez pour agrandir...
Merci pour ce code :)
Mais j'ai plus de mal avec l'insertion de ce code sur le site
 
Voter positivement 0 Voter négativement
K1RUA a dit:
Non pas vraiment.


Merci pour ce code :)
Mais j'ai plus de mal avec l'insertion de ce code sur le site
Cliquez pour agrandir...
Alors là je peux pas + t'aider je pense, je t'ai fait un truc passe partout D:
Tu dois copier ceci dans tes balises <head></head>
HTML: 
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />
Mettre ceci tout avant la fin du </body>
HTML: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://kenwheeler.github.io/slick/slick/slick.min.js"></script>
<script>
$(document).ready(function(){
    $('.staff-box').slick({
      dots: true,
      infinite: false,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 4,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });
});
</script>
Comme le code JavaScript l'indique, le carousel se fait sur la class ".staff-box", il faut donc que tu crée un carousel en te servant de la classe staff-box.
HTML: 
<div class="staff-box">
{ton code ici}
</div>
Je t'ai même fourni un code HTML d'exemple avec du code CSS d'exemple que tu peux intégrer où tu veux sur ton site (d)

Tu n'as pas du tout de connaissances en HTML/CSS ? :mmh:
Si tu n'y arrive pas d'autre t'aideront, moi j'ai donné ce que j'avais à donner :xD:
 
Voter positivement 0 Voter négativement
Retour
Haut