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

0x · 3 Avril 2019

Bonjour

Je recherche un développeur Web pour créer un block (staff) sur mon site.
Un block dans ce style la :

Paul GTP · 5 Avril 2019

Pour les gens qui souhaiteraient l'aider, voici une petite librairie sympa et simple d'utilisation

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

Enysox · 6 Avril 2019

H3X a dit:
Bonjour
Je recherche un développeur Web pour créer un block (staff) sur mon site.
Un block dans ce style la :

Bonjour je veux bien essayer mais avant il me faudrait plus de détails sur ton site viens pv ^^

Weazl · 14 Avril 2019

K1RUA a dit:
Bonjour
Je recherche un développeur Web pour créer un block (staff) sur mon site.
Un block dans ce style la :

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 ?

Paul GTP · 15 Avril 2019

GregMod a dit:
Bonjour je veux bien essayer mais avant il me faudrait plus de détails sur ton site viens pv ^^

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 ?

Pas besoin de spécialement plus d'infos

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

0x · 15 Avril 2019

Paul GTP a dit:
Pas besoin de spécialement plus d'infos 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

Alors aide moi nan ? x)

Weazl · 15 Avril 2019

K1RUA a dit:
Alors aide moi nan ? x)

Aider pour ? Tu fait copié coller :mmh:

Paul GTP · 15 Avril 2019

Sun7WeazL a dit:
Aider pour ? Tu fait copié coller

Ça m'a littéralement pris 15 minutes donc en 1 heure tu aurais eu le temps de comprendre

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

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>

Weazl · 15 Avril 2019

Paul GTP a dit:
Ça m'a littéralement pris 15 minutes donc en 1 heure tu aurais eu le temps de comprendre
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

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.

".

Avionix · 15 Avril 2019

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

0x · 17 Avril 2019

Avionix a dit:
Salut K1RUA
Ta demande est-elle résolue ?

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

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

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>

Merci pour ce code

Mais j'ai plus de mal avec l'insertion de ce code sur le site

Paul GTP · 17 Avril 2019

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

Alors là je peux pas + t'aider je pense, je t'ai fait un truc passe partout

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

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

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

0x

VLdot

Paul GTP

Légende vivante

Enysox

Développeur

Weazl

Membre

Paul GTP

Légende vivante

0x

VLdot

Weazl

Membre

Paul GTP

Légende vivante

Weazl

Membre

Avionix

0x

VLdot

Paul GTP

Légende vivante