Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Créer des onglets en full CSS3 (exemple: fiche de présentation)

    Partagez
    FémininAge : 22Message(s) : 5018

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    10/10  (10/10)
    NyoTheNeko
    le Jeu 17 Juil 2014 - 14:58
    Rappel du premier message :

    Onglets en full CSS3





    Mais oui je vous bombarde de tutos! Maintenant, un petit tuto qui fait suite à mon tuto sur le slideshow, bien que je vais prendre tous les points dont j'ai parlé dans le tuto des slideshow. Donc pas de panique: je ne vous demande pas d'avoir lu quoi que ce soit avant de lire ce tuto!


    Toutes versions ▬ CSS3 & HTML5 ▬ Code mit sous hide & explications en claire


    Voici une rapide explication de comment le tuto est découpé: tout d'abord, je vais parler du principe général que j'utilise pour faire les onglets, pour vous expliquer rapidement comment ça marche. Ensuite, je passerais par un exemple pour montrer ce qu'on peut faire. Pour ce faire, je vais créer une fiche de présentation, car en effet, contrairement au Javascript qui n'est pas utilisable dans les messages,  le CSS3, lui, l'est! Du coup je découperais la deuxième partie en deux: la première sur le HTML et la seconde sur le CSS!

    J'espère que je serais assez claire dans ce tuto, mais en cas de doute, n'hésitez pas à utiliser la section des problèmes en codage!

    Le principe général


    Comme vous pouvez vous l'imaginer, mon but était ici de créer des ognlets similaires au Javascript, c'est à dire qu'on a pas à chaque fois un "nouveau lien" pour chaque onglet qu'on ouvre, contrairement aux :target. C'est pour ça qu'en écrivant sur le slideshow à l'aide des input et des labels, j'ai vite eu l'idée de l'adapter au principe des onglets.

    Le principe est très simple, et pour cela, il faut que je vous explique deux choses: ce qu'est le sélecteur ~ et ce qu'est la pseudo-élément :checked! (Vous retrouverez la même explication dans mon tuto sur le slideshow, mais ici, elle est "en clair" Wink )

    Le pseudo-élément :checked
    Le pseudo-élément checked est utilisé dans le CSS pour les formulaires, plus particulièrement pour les input de types radios (les petits ronds pour les votes quand vous ne pouvez voter que pour un choix) ou pour les types choix multiples (quand vous pouvez voter pour plusieurs choix). Ici, dans notre tutoriel, nous utiliserons uniquement des input de type radio (car on ne veut qu'un seul onglet à la fois).
    En gros, :checked nous permet de voir si un input a été coché ou non. En somme, si nous avons par exemple ceci:
    Code:
    <input name="fiche" id="physique" type="radio" />
    Si dans mon CSS je mets ceci:
    Code:
    #physique:checked ~ label {
    color: white;
    }
    Cela veut dire que quand physique est coché, alors tout label frère sera blanc.

    "Eh!" me direz-vous "mais je sais pas ce que c'est ce  ~ moi!". Bah oui, mais j'y arrive! =P

    Cependant, tout ce que vous avez à retenir de :checked, c'est qu'on regarde lequel a été coché (d'input) et on agit en conséquence.


    Le sélecteur ~
    Ce sélecteur signifie "l'élément frère le plus proche".
    Mais qu'est un élément frère? Eh bien ce sont des éléments qui sont "sur la même ligne verticale" ou plutôt, qui ont la même grandeur d'encapsulation. Cependant, même comme ça, ça ne doit pas vous dire grand chose, alors voici des exemples:

    Exemple:
    Code:
    <div id="un">
     <div id="deux">
     </div>
    </div>
    Ici, un est l'élément père de deux, et deux est l'élément fils de un.
    Code:
    <div id="un">
    </div>
    <div id="deux">
    </div>
    Ici, un est deux sont des éléments frères.

    En somme, si votre code est bien indenté, il est facile de voir quels éléments sont des frères/sœurs, et lesquels sont des parents/enfants les uns des autres. En effet, les frères/sœurs seront sur le même niveau, et les parents/enfants seront sur des niveaux différents!
    Il est à noter que seul les deux éléments qui entourent le ~ doivent être des frères! On peut bien sûr faire appel à d'autres classes avant pour l'élément à gauche du sélecteur (par exemple si on veut sélectionner une class mais à un endroit spécifique du code, par exemple dans un id spécifique) ou alors plus bas dans la hiérarchie pour celui à droite du sélecteur. Par exemple .hallow #machin p .important ~.livres #chouette marche, tanr que .important (qui est le fils d'un p qui lui-même est le fils de #machin, qui lui-même est le fils de .hallow) est frère de .livres, le code va marcher, et effectivement s'exécuter sur #chouette qui se trouve dans .livres!


    Et voilà, maintenant que vous connaissez ces deux petites choses, on peut commencer avec les choses sérieuses!
    Tout d'abord, commençons donc avec une div tout simple, qui va entourer tout notre système d'onglets. C'est important, car cela nous permettra de facilement appeler par le CSS les input, si on ne veut pas mettre une class.
    Ensuite, nous allons créer autant de input que nous voulons d'onglet, en leur donnant à chacun un id particulier. Je rappelle qu'un id est UNIQUE, donc ne doit pas se trouver ailleurs sur la page!
    Pour vous donner un exemple, j'utilise déjà la fiche de présentation que je vais faire plus tard. Pour elle, j'ai cinq onglets, donc cinq input! Ils seront tous de type radio, et auront le même nom: la seule chose qui les différencie est l'id.


    Maintenant: tout ce que vous ajoutez, mais surtout tout ce que vous voulez pouvoir change au click sur l'onglet doit se trouver en dessous des input. En effet, grâce au sélecteur que nous avons vu plus tôt, nous pourrons facilement choisir tout et n'importe quoi qui se trouve à la SUITE des input.
    Du coup, je vous conseille toujours mettre les input tout en haut de votre conteneur principal d'onglets, le reste, même s'il ne change pas au gré des onglets, pourra être après: ça ne rajoute pas des lignes de CSS, ce n'est pas plus difficile, etc.

    Bref, maintenant que nous avons nos input, nous devrions ajouter nos label. Les labels, ce sont les "boutons" qui vont nous permettre d'aller à un onglet à un autre. En effet, lorsqu'un label qui correspond à un input, est cliqué, eh bien c'est comme si on avait coché l'input correspondant. Cela vous rappelle quelque chose? Eh bien oui! C'est ce qui va nous permettre "d’appeler" le :checked dans le CSS!
    Pour faire correspondre un lable à n input, il suffit de mettre dans l'attribut "for" du label, l'id de l'input correspondant.
    Cependant, pour la pratique, vous devriez mettre tous les labels dans une seule et meme div d'une certaine classe, notamment si vous voulez leur donner à tous ne même allure lorsqu'ils sont actif, non actifs ou au passage de la souris!

    Donc niveau code, on aurait ça:

    Vous voyez également que je leur ai donné à chacun deux classes (mettre class="lab hist" par exemple, signifie que l'élément est à la fois de la classe lab ET de la classe hist).

    Maintenant, il vous suffit de placer tout ce que vous voulez dans vos onglets avant ou même après les label mais toujours après les input. Je vous conseillerais cependant de toujours mettre un div conteneur de tout les trucs changeant dans vos onglets pur facilement leur donner des position, ou des changements globaux, comme la taille, etc.
    Pour mon code futur, j'aurais quelque chose comme ça:


    Maintenant, parlons rapidement du CSS.
    Tout d'abord, il faut savoir que les inut ne nous sont utiles à rien "visuellement" parlant. C'est pru cela que la première chose qu'on va faire, c'est de les "cacher" à l'aide d'un display. Cependant, attention de ne pas le faire sur les input seul, mais uniquement sur les input de votre fiche, ou sinon, vous serez incapable de créer des sujets ou envoyer des messages, vu que les boutons envoyer, prévisualiser et les titres sont TOUS des input.
    Donc pour l'instant on a ça:


    Maintenant, pour ce qui est de l'effet lors du click du bouton de l'onglet, c'est ici qu'on va utiliser le sélecteur ~ tout comme :checked. Prenons par exemple, si je veux modifier le label "Infos" quand je clique dessus, pour bien indiquer que c'est sur CE label que je suis (comme l'onglet actif en Javascript) il me suffit d'écrir:

    Ici, je dis: lorsque l'élément à id informations et coché (checked) alors le plus proche frère de classe boutons, verra son fils de classe lab ET infos modifié ainsi: sa couleur deviendra rouge.

    C'est le même principe avec tout! Imaginons que j'ai une image de class="imag infos" que je veux aussi modifier lorsque #informations:checked, alors j'écris:


    Bien sûr, il faudrait de façon optimale qu'à la "base", c'est à dire que quand le label est non-coché, l'élément qui sera modifié (dans nos deux exemples le label d'informations puis l'image d'informations) ait une autre allure, et si possible, tous la même.  On pourrait par exemple penser à une opacité à 0 pour toutes les images quand l'input correspondant n'est pas coché, ou un display: none pour le contenu des onglets. C'est pour cela que les "double classes" sont utiles: dans mon exemple, j'aurais toutes les images qui seront de classe imag, et chacune des images aura une classe supplémentaire différente: infos, phys, car, hist et ecr. Cela me permettra donc de donner une allure générale à toutes mes images en mettant un:

    Qui me permet de toutes les rendre invisibles, et le code plus haut me permet de les rendre visible seulement quand le on input est coché.

    J'espère donc que tout ceci est assez claire: c'est vraiment la base de ce qu'il faut savoir, et si vous avez compris, l'exemple à la suite ne vous sera pas nécessaire. Cependant, si vous n'avez pas très bien compris, j'espère que l'exemple qui va suivre sera assez compréhensible pour que vous puissiez faire par vous même par la suite!

    Exemple: faire une fiche de présentation


    Pour cette exemple voilà ce que je vais vous montrer comment faire. Comme vous pouvez le voir, les labels sont donc les différentes parties usuelles d'une présentation (Infos, Physique, Caractère, Histoire et Derrière l'écran) et autant le texte interne que l'image du haut change.
    Si vous avez bien lu ce qu'il y a plus haut, vous pouvez vous imaginer plus ou moins comment j'ai fait tout ça mais malgré tout, je vais vous expliquer pas à pas!

    Le HTML


    Rappelez-vous plus haut, j'ai dit que ma base était ceci:


    Vu que je veux en faire une fiche de présentation, je vais tout de suite ajouter deux choses: le Nom et Prénom et une petite citation:

    Ce qui donne, sachant que je veux mettre le nom sous l'image et qui "empiète" sur l'image:


    Maintenant, il est temps de rajouter les images. Je vais créer des div avec deux classes, comme expliqué plus haut: la class imag pour chacune d'entre elle, et leur classe qui leur est "propre" qui va me permettre de la changer au gré de boutons.

    Vous remarquerez que j'ai mit tout de suite dans la balise style l'image de fond. De cette façon, les membres pourront changer les images comme bon leur semble. C'est aussi la raison pour laquelle j'ai mit des balises div et non pas des balises img, car on ne sait jamais la taille des images que vont nous donner les membres. Je redimensionne ici la largeur automatiquement dans le CSS, mais je déteste donner une hauteur et une largeur fixe, qui déformerait alors les images. Je préfère donc mettre une div. C'est donc une préférence personnelle: vous n'êtes pas obligés de faire comme moi.

    Maintenant, rajoutons les div qui contiendront nos descriptions physique, mental, l'histoire et les infos (tant RP que joueur). Ce sera le même principe que celui des images: je donne une classe générale à tous mes contenus qui s'appelle justement contenu et une class qui leur est spécifique. Vu que je n'utilise jamais les classes spécifiques aux images ou au contenu seules pour quoi que ce soit, et que j'écris toujours dans CSS leur deux classes (donc par exemple .imag.infos ou .contenu.info et jamais .infos seul) j'ai mit la même classe "spécifique" tant à l'image qu'au contenu correspondant.
    J'ai le droit de le faire: une classe n'est pas un id, et donc, n'a pas à être unique! Cependant, faites bien attention de ne PAS spécifier dans le CSS de choses pour els classes communes à des choses qui n'ont rien à voir, mais bien d'utiliser les deux classes qui les décrivent!

    Quoiqu'il en soit, voilà tout le HTML maintenant que j'ai ajouté le contenu de chaque onglet:


    Il est à noter que j'ai également deux link de polices de Google Fonts qui sont ajoutées à ma présentation, mais vus devriez les mettre dans votre overall_header. Ces deux polices sont Abel et Lobster.

    Le CSS


    Maintenant, il est temps de passer au CSS de ma fiche!

    Tout d'abord, on va mette en forme la fiche de façon tout à fait normale. Du coup, ça ne tient que du CSS dont vous avez l'habitude et de mettre la fiche en forme comme on veut.

    Tout d'abord, on va cacher les input en haut de fiche. On ne veut pas qu'ils apparaissent, parce qu'ils sont un peu moche, mais aussi et surtout parce qu'ils ne sont pas utiles. On  a donc ceci:


    Ensuite, je crée la fiche. Bords arrondis, un fond, une taille, je la centre. Rien de bien compliqué.


    Maintenant, je vais aussi mettre en forme tous els "invariants" de la fiche. C'est à dire, tout ce qui ne va pas changer au gré des onglets. POour moi, c'est le titre et la citation. Je les mets donc en forme:



    Maintenant, on a les labels (qui sont donc nos titre des onglets), ainsi que le contenu à mettre en forme. Là, ça devient un peu plus corsé, parce qu'on veut que ça change.
    Cependant, ce n'est pas si compliqué que cela. En effet, on va mettre en forme simplement comme s'il n'y avait pas d'onglets. Donc on va simplement mettre en forme les différents éléments, comme si on faisait une fiche normale.

    Je commence par les images. Je vais donc leur donner des tailles (vu qu'elles sont dans des div), ainsi que de mettre une taille pour l'image de fond. Je les place alors toutes au bon endroit.

    Petite subtilité ici: j'ai le conteneur "images" que je emts en relative, simplement parce que je veux créer un effet d'apparition en fondu pour les onglets. Du coup, il faut que toutes mes images ("imag") à l'intérieur aient une position absolue et se trouve au même endroit.

    Pourquoi? Eh bien tout simplement parce que je devrais ensuite les mettre en opacité 0, mais que cela ne va pas les "effacer". C'est à dire qu'elles feront toujours la même taille, et donc, resteront à la même "place".
    Si vous voulez éviter ceci, et que vous ne souhaitez pas forcément d'effet de fondu, vous pouvez tout simplement utiliser à la place de mes opacity et visibility, un display: none; puis un display: block; pour refaire apparaître.

    Notez que cela sera pareil pour mes contenus plus bas.


    Je mets également tout de suite l'opacité à 0 et la visibilité à invisible. En effet, je ne veux faire apparaître mes images que lorsque le bon onglet est sélectionné. Cependant, si vous voulez voir le résultat pour votre fiche avant d'avoir activé les onglets, juste pour voir à quoi ça ressemble, vous pouvez effacer ces deux lignes.


    Mettons également les lables, ou les titres d'onglets, en forme. Ici, on les met en forme quand les onglets sont non-sélectionnés, mais aussi lorsqu'on passe la souris sur eux. Je mets également le cursor: pointer;  pour que l'on voie que le label est cliquable, et représente donc un onglet.
    Avec l'aide de mon conteneur "boutons" je vais aussi faire en sorte que les labels soient bien centrés.


    À présent, je vais mettre en place et en forme la partie de la contenue de ma fiche. Tout d'abord, vu que je veux un effet d'apparition en fondu, je dois donner une hauteur à mon contenuer "interne" et le mettre en position relative. Les "contenu" devront également avoir une hauteur prédéfinie et un overflow: auto; pour que le texte ne dépasse pas. Comme pour les images, je les mets tout de suite l'opacité à 0 et la visibilité à invisible, vu que je ne veux faire apparaître mon contenu que lorsque le bon onglet est sélectionné.

    Si vous n'aimez pas les barres de navigation/scroll pour les longs contenus, vous pouvez très bien supprimer le positionnement absolu des "contenu" et plutôt que d'utiliser opacity: 0; et visibility: hidden;, vous pouvez utiliser display: none;. Vous n'aurez cependant plus d'apparition en fondu.


    Enfin, dernière partie de la mise en forme de base: je vais mettre un petit effet sur ce que je mets en gras dans la fiche. Je veux une autre couleur.


    Il est donc temps de modifier selon quel onglet est changé. En fait, c'est très simple à comprendre avec les explications de plus haut. Vu qu'on a bien fait en sorte que les input soient frères aux classes "boutons", "images" et "interne", il suffit pour chaque bon input/onglet (donc ce qu'on a décrit avec une id, qui deviendra donc #informations ) de faire apparaître ou modifier le bon élément.

    Ici, vu qu'on a utilisé des classes similaires pour chaque éléments (donc .infos, .phys, .car, .hist et .ecr), on a n'a qu'à changer la classe qui précède. Pour plus de sécurité cependant, j'ai utilisé la "double-classe" comme ceci: .lab.infos. Cependant, au lieu de .fiche #informations:checked ~ .boutons .lab.infos vous auriez pu simplement écrire .fiche #informations:checked ~ .boutons .infos.

    Si vous avez décidé d'utiliser le display: none; plutôt que l'opacité et la visibilité, n'oubliez pas ici d'utiliser un display: block; plutôt que le code actuel!



    Voici donc le CSS complet et commenté:


    Dernière édition par NyoTheNeko le Sam 2 Jan 2016 - 16:40, édité 5 fois


    FémininAge : 21Message(s) : 108

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    MPGuenette
    le Sam 11 Juin 2016 - 21:47
    merci
    FémininAge : 23Message(s) : 290
    Ylkhana
    le Sam 11 Juin 2016 - 22:05
    Super tuto sur lequel j'ai pu me baser pour créer les prédéfinis de #Copenholm. Encore merci !

    Cliquez pour l'aperçu en action !
    FémininAge : 20Message(s) : 61
    Karmixi
    le Dim 12 Juin 2016 - 19:43
    Merci :)
    FémininAge : 27Message(s) : 9
    C-sshi
    le Dim 19 Juin 2016 - 17:41
    Tout est si bien expliqué, c'est génial !!
    Merci infiniment pour ce tuto :)


    No fear of pain, no fear of hurt. Only with you here will I be able to live. Without you I am just as if I have lost my life, unable to move forward, unable to move backward
    MasculinAge : 24Message(s) : 42

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Rizhskaya.
    le Jeu 23 Juin 2016 - 18:55
    Merci pour le tuto :)
    FémininAge : 19Message(s) : 34
    SectumSempra
    le Sam 25 Juin 2016 - 7:25
    merci :coeur:
    FémininAge : 18Message(s) : 103
    Harmonia
    le Lun 27 Juin 2016 - 5:51
    Merci beaucoup !
    MasculinAge : 22Message(s) : 23
    Lumen
    le Jeu 21 Juil 2016 - 1:20
    Merci beaucoup Very Happy
    FémininAge : 23Message(s) : 83

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Lamire
    le Lun 25 Juil 2016 - 1:57
    Merci~~
    MasculinAge : 25Message(s) : 3
    Ikara
    le Dim 31 Juil 2016 - 18:25
    Merci
    FémininAge : 24Message(s) : 190

    Les Guildes
    Guilde des Conteurs:
    7/30  (7/30)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    0/10  (0/10)
    Linaewen
    le Ven 5 Aoû 2016 - 6:49
    OMG Merci merci merci '-'
    FémininAge : 19Message(s) : 48
    Sapphire
    le Mer 10 Aoû 2016 - 20:48
    Merci ! C'est ce que je cherchais à faire, vu que je suis une bille en JS...
    FémininAge : 25Message(s) : 21
    LKD
    le Mer 24 Aoû 2016 - 15:54
    merci ça va beaucoup m'aider
    FémininAge : 22Message(s) : 36
    Elena Chase
    le Jeu 25 Aoû 2016 - 14:14
    Je veux bien en voir plus, merci ! x)
    FémininAge : 15Message(s) : 250

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kovu
    le Dim 25 Sep 2016 - 11:19
    Merci !


    MasculinAge : 16Message(s) : 36
    Vetrox
    le Dim 25 Sep 2016 - 20:31
    merci
    MasculinAge : 20Message(s) : 106

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Yukimura Esuki
    le Sam 8 Oct 2016 - 16:26
    Merci ! Very Happy
    MasculinAge : 27Message(s) : 150

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Applauze
    le Dim 9 Oct 2016 - 10:05
    Merci beaucoup pour ce tutoriel. Mais, si nous voulons le mettre dans une template tel que view_topic_body, est-ce la même démarce, ou cela sera plus compliqué ? Je parle bien évidemment sur un forum. Mais pour l'instant, je vais me baser sur celui-ci car je sens qu'il va beaucoup m'aider. C'est un tutoriel qui est très utile et le résultat est juste parfait. J'ai cherché pendant longtemps de faire des onglets en CSS3 uniquement, mais je ne trouvais pas.. Il me demandait toujours du JavaScript, or c'est un language que je maîtriste pas tout-à-fait. Mais bon, tout ça pour te féliciter et te remercier. Tes connaissances me seront utiles.
    FémininAge : 21Message(s) : 92
    Black Moon
    le Lun 17 Oct 2016 - 15:15
    Merci :)
    FémininAge : 22Message(s) : 47
    Memorian
    le Mar 18 Oct 2016 - 14:31
    merci!
    FémininAge : 21Message(s) : 22

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    zazou974
    le Mar 25 Oct 2016 - 17:47
    super, c'est exactement ce que je cherchais à faire, merci. :hug:
    FémininAge : 23Message(s) : 58
    Dayaxa
    le Dim 6 Nov 2016 - 16:44
    super *_*


    Bloup.
    FémininAge : 21Message(s) : 29

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Mini BN
    le Dim 6 Nov 2016 - 18:43
    J'ai besoin des codes pour mieux comprendre ton tuto :3 Merci beaucoup à toi de l'avoir diffusé ♥
    FémininAge : 24Message(s) : 187
    Kanae
    le Mar 8 Nov 2016 - 6:18
    Han ! Depuis le temps que je cherche quelque chose comme ça ! :hug:

    Merci beaucoup pour ce tuto ! Par contre, il est un peu difficile à aborder pour des débutants je trouve, ça va me demander pas mal d'efforts. Comme l'on dit, on a rien sans rien...
    MasculinAge : 34Message(s) : 29

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Yttel
    le Jeu 10 Nov 2016 - 23:01
    Merci
    Contenu sponsorisé
    Aujourd'hui à 5:39

      La date/heure actuelle est Sam 3 Déc 2016 - 5:39