html-css

[void anvil]

car bon...

[void anvil]

Je vois pas le probleme

[sturdy solstice]

Je le trouve un peu vide a mon gout..

[void anvil]

beh les bandes noires @void anvil

et les elements

[void anvil]

C'etait volontaire.

Ok je m'en prend pleins la tronche x')

[void anvil]

beh c'est pas très beau à mon gout

mdrr

[void anvil]

ptdr

[sturdy solstice]

Baa oe ça se voit que c volontaire

[void anvil]

C'est ton avis 🙂 D'autres aimerons et toi (d'autres) pas 😉

[sturdy solstice]

;)

[void anvil]

Parce que à part dire que c'est pas beau tu as un autre argument mieux construit ? Ou c'est juste pour le plaisir de dire que c'est pas beau

[void anvil]

non car le reste j'ai rien à dire

[sturdy solstice]

Mdrr

[void anvil]

Tres bien. J'en conclu donc que c'est un jugement débile 🙂

après si t'es pas prêt à recevoir des avis qui sont pas positif à ton goût car rien est parfait dans le monde ( dont ton site ) beh demande pas apart si tu t'attend à reçevoir que tu positif

[void anvil]

Rectification : C'etait un jugement, pas un avis

Un avis c'est expliquer ce qui va pas et dire quoi améliorer

[void anvil]

beh non, c'est le mien donc tu peut pas dire que c'est débile car je trouve tout qui me plait pas

[void anvil]

tu veut que je détails ?

[void anvil]

Volontier 🙂

j'en ai au moins pour la journée, je vais même inspecter ton code !

[void anvil]

Tu es rude dis donc.
Mais va y

redit-moi ton niveau juste pour savoir si je dois compter des élements plus "pro"

[void anvil]

Oulah alors stop ! C'est pas un concours ! J'ai dis plus haut que j'etais débutant. Toi tu te ramene en disant que mon site est nul sans avis constructif.

[void anvil]

oulaa

alors t'a pas compris ce que j'ai dit

[void anvil]

Parce que si ,c'est pour dire "haha toi t débutant et moi pro", je suis pas d'accord !

j'ai dit que j’allais vérifié quelques éléments que seulement à partir d'un niveau que tu les apprends

[void anvil]

Alors autant pour moi.

et j'ai jamais jugé personne

et je suis pas pro, j'ai juste vu des choses plus poussé avec plus d’expérience pour me qualifié au de là d'un "débutant"

et débutant ne signifie pas "grosse merde à chier" mais personne nouvelle dans le domaine

Autant pour moi dans ce cas. Je me suis quelque peu emporté

pas de problème 😉

[void anvil]

Explique donc 😉

je vais analysé ça dessuite

[gaunt yoke]

Le site est cool, un peu vieillot mais cool
Juste par contre il est pas du tout responsive c'est dommage

Tu vas te faire bacher sur le référencement

[void anvil]

Pourtant il fonctionne bien sur telephone (il s'affiche correctement)

[gaunt yoke]

🤔 je test sur tel

[void anvil]

Ah ! J'ai compris

[gaunt yoke]

Yes ok sur tel c'est deja plus fonctionnel

[void anvil]

J'avais mis un width-max: 450px dans un media

Sur mon css

[little depot]

Speculo, pourquoi t'as mit une image pour ton footer ?

[gaunt yoke]

bien vu

[gaunt yoke]

Pas bon de width ton body tu en as pas besoin

[void anvil]

Voila en gros comment je m'y procede pour le responsive

[gaunt yoke]

yes y en a encore pas mal de boulot sur le responsive mais c'est cool au moins tu essayes d'apprendre good luck

[void anvil]

C'est le meme code html

[gaunt yoke]

t'as pas besoin non plus de faire un doublon d'html pour ton responsive

[void anvil]

Te fiche pas de moi et supprime ca s'il te plait 🙂

[gaunt yoke]

?? c'est sur ton site j'ai juste mis l'url

[void anvil]

J'ai compris le probleme mais ce n'est pas a toi de partager ca

[little depot]

Pour ton footer je te conseil de check flex, ce sera mieu qu'une image

[void anvil]

Le footer ne s'affiche pas ?

[little depot]

tu fait deux div avec un justify content beetween et c'est régler

Si, mais une image pour un footer c'est pas fou

[void anvil]

Je comprend :/

[little depot]

Sachant que tu peut remplacer l'image par des div, j'trouve sa dommage de claquer une image

[gaunt yoke]

?? pas compris

[void anvil]

C'est un probleme d'image justement: les gens peuvent enregistrer mes crea

Et moi j'ai pas forcement envie

[gaunt yoke]

Mais elle est sur ton site mec

suffit de clique droit copier l'url, qu'est ce que tu racontes

[void anvil]

D'accord ! Mais normalement il y a une balise permettant de pas faire ca

non ?

[little depot]

soit tu met un truc avec ton nom sur l'image pour faire chier les gens qui veulent le voler, soit t'es obliger de laisse sa comme ça

[gaunt yoke]

en tout cas pas là

[void anvil]

Et comment on empeche ca justement

[gaunt yoke]

Sois tu watermark

Sois tu pourras pas car meme si tu bloques le clique il suffit d'aller dans l'inspecteur puis sources pour voir les éléments chargés

[void anvil]

Bon

Je comprend

Je pense alors que je vais enlever mon site pour corriger ces erreurs

[little depot]

Au pire tu marque speculo au milieu de ton image, et vers le bas tu met l'url de ton portfolio, les gens qui te vole pourront pas l'utiliser sans tes credits dessus

[void anvil]

Je vais regler rapidement ces problemes la :/

Mais la je vais me reposer un peu

1. Ton nom de domaine est mauvais pour le référencement, je te recommande plutôt "speculo.fr".
2. Les bandes noires. Ont peut croire que tu as un écran qui fait 2 pouces... car c'est réduit et à mon gout, ça fait pas très jolie.
3. J'aime bien la page d’accueil seulement les vidéos YouTube qui sont trop réduite en largeur.
4. Quand on glisse sur les vidéos avec la flèche, ça fait une animation qui part du bas pour revenir automatiquement en haut...
5. Les flèches vidéos sont inutiles, ça défile déjà automatiquement.
6. Dans tes créations, les fonds sont trop simplistes, si tu veut resté dans le thème, je te recommandes de faire la même mais tu inverse les couleurs du blanc par noir.
7. Y'a une image sur ton footer, t'aurais pu mettre du texte et le modif avec du css. ( pour le lien behance, t'aurais pu faire une redirection web vers ton profil )+
8. Pour finir, le "All Rights Reserved" tu peut juste mettre un signe copyright avant ton nom.

C'est tout ! @void anvil

[void anvil]

Parfait ! Je prend note

Parfait !

[gaunt yoke]

1. Ton nom de domaine est mauvais pour le référencement, je te recommande plutôt "speculo.fr".

1 - déjà prit
2 - le nom de domaine ne joue pas sur le référencement

[void anvil]

Pour le nom de domaine je trouve que speculo.fr est parfait... Mais je suis obligé de mettre le ac3j car c'est pas moi qui paye mon nom de domaine

[gaunt yoke]

Il va jouer juste dans le sens ou les gens peuvent s'en souvenir plus ou moins, mais il aidera pas à etre mieux indexer

[void anvil]

ah d'accord

[void anvil]

oui mais que les gens s'en rappel c'est plus de visite et plus de visite = meilleur référencement

"Les flèches vidéos sont inutiles, ça défile déjà automatiquement." La je suis pas d'accord. Mais c'est juste cet avis auquel je suis pas chaud

[gaunt yoke]

Yes c'est exactement ce que je viens de dire du coup

Mais donc dans le référencement tel quel ça n'a aucun impact

[void anvil]

Pour finir, le "All Rights Reserved" tu peut juste mettre un signe copyright avant ton nom.
Lui aussi ! Normalement tu paye un abonnement pour mettre "copyright"

En tout cas, merci ! Ca me permettra d'améliorer encore plus

Cependant les problemes qui me revienne toujours à l'oreille c'est le responsive

[gaunt yoke]

Pourquoi tu n'utilises pas des framework ui pour t'aider dans cette tâche ?*

[void anvil]

yep

[gaunt yoke]

ou un utilities au moins

[void anvil]

pas de soucis bg 😉

[void anvil]

Parce que je savais pas que ca existait

[gaunt yoke]

Ah

[void anvil]

Si tu veux m'expliquer je suis ouvert !

[void anvil]

ta boostrap mais je te le recomande pas ( conseil d'ami, tu le prend ou non mais c'est le choix des meilleurs devs à me yeux et c'est pas jojo niveau de l'opti )

[gaunt yoke]

https://getbootstrap.com/ le plus connu qui est très bien pour commencer et comprendre cette logique de framework ui

la version 5 est très bien

[void anvil]

Bah lui je l'utilise

[gaunt yoke]

Ils ont enfin enlevé jquery

Pour débuter c'est good

[void anvil]

la nouvelle oui mais celle d'y a 2 mois même pas y'avais du jquery bien eclatax dans tout les sens et 5k lignes pour 3 boites

[gaunt yoke]

Pourquoi tu utilises pas leur système de colonne alors Speculo ?

5K lignes c'est pas le problème, suffit de purge ton css derrière comme avec n'importe quelle lib

Que ce soit tailwind, element ou bootstrap

[void anvil]

Parce que j'ai tendance à me limiter aux templates de base. Surtout en Motion Design (j'en utilise jamais)

[gaunt yoke]

Ah okay, bah hésite pas à approfondir un peu, ça va grandement t'aider dans la réalisation de ton portfolio, en tout cas te faciliter la vie une fois que tu auras compris comment ça fonctionne (t'inquiète pas c'est relativement simple)

Et sinon Speculo si tu veux un truc plus light, tu as tailwind https://tailwindcss.com/ qui est un utility, il te fournit juste toutes les classes possible (ou presque), un peu plus chiant à prendre en main quand tu ne connais pas ou autre, mais vraiment très cool
Donc que ce soit du flex ou du grid il y en a pour tous les gouts avec tailwind

[void anvil]

Merci infiniment

Je suis entrain de regarder

^^

[gaunt yoke]

Bon courage pour la suite 🙏

[void anvil]

Merci ^^

[iron swan]

pas besoin de payer pour mettre un copyright ^^

en France et dans d'autre pays tout ce que tu produis t'appartiens et t'a direct un copyright dessus

c'est pas payant du tout, par contre si tu as un nom que t'aimerai achété pour faire une boite et éviter qu'on te le piquefaut faire un dépot à l'INPI et là ça va te couter de l'argent, mais à part ça tes créations sont à toi et t'a totalement le droit de foutre un "copyright" sur ta page 🙂

[latent robin]

Plus précisément, en France on est protégé par les droits d'auteur

(donc pas exactement un copyright, mais ça se rapproche dans les faits)

[void anvil]

de +, y'a une lois américaine qui s'applique à l'internationale, la "Digital Millennium Copyright Act" @latent robin

[latent grove]

Salut, j'ai trouver ce code sur internet :

@media (prefers-color-scheme: dark) {
    body {
    background-color: #1c1c1e;
    color: #fefefe;
    }
    a {
    color: #5fa9ee;
    }
    img {
    filter: grayscale(20%);
    }

     .projets {
        background-color: #39393b;
        border: 4px solid; 
        border-top-color:  rgb(231, 62, 209);
        border-left-color:  rgb(156, 48, 142); 
        border-bottom-color: rgba(179,32,158,1); 
        border-right-color: rgb(142, 93, 255);
    }


    #projets a {
        color: #5fa9ee;
    }


    }

pour faire un mode sombre mais j'aimerais qu'il s'active avec un bouton avec une petite lune comme sur la plus part des sites qui utilisent le mode dark mais je ne connais casiment rien au javascript. Si qu'elqun peut m'aider merci.

[limber raptor]

tu peux utiliser ça si tu veux https://medium.com/@haxzie/dark-and-light-theme-switcher-using-css-variables-and-pure-javascript-zocada-dd0059d72fa2

[stoic tulip]

Ce que tu peux faire c'est créer des variables de couleurs en CSS type :

:root {
    --bg-color: #FEFAF6;
    --text1-color: #232320;
    --text2-color: #717073;
    --main-color: #CBA5EA;
    transition: 1s;
}

Du coup tous tes éléments auront des variables sur les attributs color :

.profil-btn {
    font-family: 'Karla', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--text1-color);
    margin-top: 5%;
}

Et utiliser une fonction javascript onclick sur ton bouton type :

const darkmode = document.getElementById('dark-mode');
changeTheme(localStorage.getItem('theme'))
    function changeTheme(theme) {
        switch(theme) {
            case 'dark':
                darkmode.setAttribute('src', 'assets/icones/sun.svg')
                document.documentElement.style.setProperty('--bg-color', '#2c2c30');
                document.documentElement.style.setProperty('--text1-color', '#FFFFFF');
                document.documentElement.style.setProperty('--text2-color', '#959399');
                localStorage.setItem("theme", "dark");
                break;
            case 'light':
                darkmode.setAttribute('src', 'assets/icones/moon.svg')
                document.documentElement.style.setProperty('--bg-color', '#FEFAF6');
                document.documentElement.style.setProperty('--text1-color', '#232320');
                document.documentElement.style.setProperty('--text2-color', '#717073');
                localStorage.setItem("theme", "light");
                break;
            default:
                break;
        }
    }
    darkmode.addEventListener('click', function() {
        if(darkmode.getAttribute('src') === 'assets/icones/moon.svg') {
            changeTheme('dark')
        } else {
            changeTheme('light')
        }

    });

C'est un exemple, ici on change aussi le petit icone et on ajoute même le theme dans le localStorage du navigateur, comme ça quand on change de page et/ou que l'on quitte le site et on revient le lendemain, le thème est sauvegardé 😉

[latent grove]

j'ai deja essayer root seul mais ca fait rien

[stoic tulip]

Relis bien tout

[latent grove]

ca ne fonctionne pas

[stoic tulip]

tu définis juste des variables CSS sur :root,

ces variables là tu vas les utiliser dans ton code CSS

et en JS tu vas juste aller modifier dynamique les variables dans ton root

C'est censé fonctionner c'est ultra basique

[latent grove]

je les utilisent comment dans mon css

[stoic tulip]

regarde ici :

je l'ai envoyé plus haut

.profil-btn {
    font-family: 'Karla', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--text1-color);
    margin-top: 5%;
}

[latent grove]

a comme ca var()

[stoic tulip]

ici tu a var()

[latent grove]

ok

ca me l'affiche directement sur mon site

le boutton n'est pas dans le js

[stoic tulip]

Le bouton tu le crées et dans le js pour moi il a l'ID dark-mode

Après ça se change

adapte le a ton code

Je vais pas non plus te filer un code prémaché à copier/coller

[latent grove]

je sais pas faire de onclick 😅

[stoic tulip]

casse toi les dents un peu dessus, cherche sur internet, faut savoir step-up !

je t'ai filé la fonction

change juste l'ID

[latent grove]

ouiii merci !

ca fonctionne

[stoic tulip]

^^

hésite pas à me donner 300e sur mon paypal.me

(:

[latent grove]

😦

j'ai que 6e

[stoic tulip]

np envoie ça fera l'affaire

:jrigole: j'vais me faire ban apres

Je veux garder mon rôle DevOps wola

[latent grove]

c'est quoi ops

[stoic tulip]

https://fr.wikipedia.org/wiki/Devops

[latent grove]

par contre il est bloquer sur le dark mode xD

[latent grove]

ok

[copper cobalt]

Bonjour j'ai une question, déjà faut savoir que je suis ui designer mais que j'ai fait zéro études (ça évite de me juger sur mes questions) j'ai exporté mon site de Adobe Xd en html, CSS et js sauf que je ne sais absolument pas qu'est-ce que je dois faire avec ensuite pour le rendre fonctionnel et le publier (j'ai pas encore trouvé d'hébergeur j'arrive pas à choisir).
Quelqu'un sait m'expliquer clairement ce que je peux faire ?

[stoic tulip]

Si t'a ton site en html/css/js, tous les fichiers, t'a juste a prendre un nom de omaine, un hébergement. Tu vas recevoir les infos d'accès et t'a plus qu'a upload tous ces fichiers sur l'hébergement

Et le site sera en ligne

C'est super simple ^^

En général peu importe l'hébergeur, ça sera toujours pareil

Y'a que le prix qui change et les specs techniques

[copper cobalt]

Okay par contre les animations marchent pas et j'ai aucune idée du code que c'est derrière, vous savez où je peux le trouver ?

[stoic tulip]

Dans le JS ?

Je sais pas comment est généré le code depuis adobe xd

[copper cobalt]

ouaip

[copper cobalt]

pas grave je me débrouillerais

[void anvil]

https://le-portfolio-speculo.ac3j.fr/

Merci à tout ceux qui m'ont donné des conseils qui m'ont beaucoup servi pour le développement du site ^^ Voila une autre version du site (pas parfaite) mais dans un autre style, couleur et responsive ^^

[quartz thunder]

responsive

🤔

[void anvil]

Test sur téléphone 🤔

🙂

Tu devrais voir ca

[quartz thunder]

ah oui

[stone verge]

Pour ma part non c'est trop large je doit glisser sur le côté pour centrer

[quartz thunder]

idem

enfin y a justeu ns croll horizontal léger

L'animation de ton carousel est buguée par contre

et pas fan de tes box-shadow ils sont trop prononcés

sinon c'est cool

[void anvil]

Un peu ouais :/

Je suis d'accord mais je t'avoue que je sais pas comment regler ca

Sinon ca doit etre une histoire de paquet qui vienne pas assez vite

J'y regarde

[flat reef]

@void anvil Tu fais comment pour détecter tél ou pas ?
Car en vrai ce que tu devrais faire, c'est changer les éléments en fonction du nbre de pixels. Comme ça même sur PC on pourrait voir le responsive déjà et surtout si il y a des PC plus petit que d'autres ou quoi 🤔

[void anvil]

En general, je vais sur l'inspecteur d'element pour regarder si il est compatible laptop, smartphone, tablette

[flat reef]

D'accord, en fait je viens de voir et pas ouf...
Je viens de voir que ton site s'adapte à partir de 450 pixels de largeur... Ce que tu dois faire c'est l'adapter au fur et à mesure, genre en plusieurs étapes.
A partir de xxx pixels on fait ça, à partir de yyy pixels on fait et ainsi de suite

Et c'est pour ça qu'ils ont eu des problèmes Gato et Sharki du fait que aucun appareil n'est dimensionné pareil et c'est justement le but du responsive c'est de réussir à s'adapter à tout écran 😉

[void anvil]

Je comprend 🙂

[flat reef]

Parce que je vois que tu as des éléments qui ne s'adapte pas à cause de ton CSS...

[void anvil]

J'ai un fichier responsive permettant de tout redimmessionner 😉

J'ai mis un seul media query dans mon css et il est en effet à 450px

[flat reef]

Je le vois 😉

[void anvil]

J'en ai ajouté un autre pour laptop. Mais je comprend mieux pourquoi ils ne s'affichent pas correctement

Lui il est en 1280px

Sinon il n'y a plus de role débutant ?

Car on m'a enlever mon role 😉

🙂

[flat reef]

Tiens je te laisse naviguer sur les pages de mon site et nottament sur le Dashboard (tu ajoutes le bot et tu le supprimeras plus tard) et tu essaies de resize l'écran doucement, et tu verras les différentes étapes : https://watchbot.app

[flat reef]

Non en effet 😉 #announcements

[void anvil]

D'accord !

[flat reef]

Quand je parle d'étapes c'est ce que je t'expliqué ici avec les coups des xxx pixels etc...

[void anvil]

En effet je vois ca

[flat reef]

😉

[void anvil]

Tres bien ! merci pour ce commentaire constructif 🙂

[flat reef]

Pas de soucis ✌️

[void anvil]

C'est bien un probleme que j'essaye de regler

[flat reef]

Déjà faire des width fixes @void anvil c'est des mauvaises idées 😉

[void anvil]

Mais j'ai compris maintenant 😉

[flat reef]

ça dépend pour quoi mais tu en mets pour des trucs qui te feront chier pour ton responsive (genre la navbar) ✌️

[gaunt yoke]

met ton service sur le site

[errant cypress]

https://g-ca.fr/offres

tqt

[copper warren]

Si ça peut intéresser des gens : https://www.ecole-du-web.net/p/30-exercices-css

[latent grove]

Bonjour y a t-il un probleme dans mon svg ?

[latent grove]

svp

[quaint dove]

ton probleme ?

[deft burrow]

Quelle est la nature exacte du problème ?
Est-ce que ton SVG fonctionne seul (essaie de l'ouvrir dans ton navigateur) ? Et petit conseil, essaie de toujours rajouter une option alt pour décrire le contenu de l'image, c'est mieux pour le SEO.

[latent grove]

elle ne s'affiche pas ca met le petit logo bizzare

[deft burrow]

quand tu clique droit dessus et tente d'ouvrir l'image, est-ce qu'elle s'affiche?

[latent grove]

ca m'affiche le code du svg

[latent grove]

Les autres fonctionnent bien pourtant

c'est bon j'ai finalement changer de svg

jsp si ca a un rapport mais le code du svg qui fonctionner pas etati de plus de 2000lignes

[deft burrow]

ça pourrait avoir un lien effectivement

le svg était juste trop lent à charger sans doute

[floral crow]

Bonsoir, j'ai un problème: lorsque je rejoins mon serveur avec un loading screen voilà ce que ça m'affiche

Voilà ce que ça doit donner

:

Il y a une partie blanche qui apparait jsp d'ou

[limber vine]

Salut est ce que c'est possible de parametrer un changement de texte hebdomadaire sur son siite ? ou pas svp

[void anvil]

Tu a fait en sorte que l'image fasse tout l'écran ?

[floral crow]

Affirmatif

[void anvil]

Je suis pas très très fort en HTML, mais en voyant ton code je peut être t'aider ^^`

[hybrid stone]

Yo j'arrive pas à afficher mon thème et mon code avec Codemirror :

<!DOCTYPE html>
<html>
    <head>

        <title>CODE EDITOR</title>
        <script src="vendor/codemirror/lib/codemirror.js"></script>
        <link href="vendor/codemirror/lib/codemirror.css" rel="stylesheet"/>
        <script src="vendor/codemirror/mode/xml/xml.js"></script>
        <script src="vendor/codemirror/addon/edit/closetag.js"></script>
        <link src="vendor/codemirror/theme/dracula.css" rel="stylesheet/>
 


    </head>

    <body>

        <textarea id="editor">test</textarea>
        <script>

            var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
                mode: 'xml',
                theme: 'dracula',
                lineNumbers: true,
                autoCloseTags: true
            })

            editor.setSize("250", "150");
        </script>
    </body>

</html>

[gaunt yoke]

<link src="vendor/codemirror/theme/dracula.css" rel="stylesheet/>

manque une "

[hybrid stone]

merci

je suis vraiment aveugle

[gaunt yoke]

oui

[quartz thunder]

stiti

[hybrid stone]

bah ça marche tjr pas 😦

c'est mon thème qui plante

car j'ai mes lignes etc

mais pas mon thème

[gaunt yoke]

t'as juste des erreurs de style ?

[hybrid stone]

non

enfin c'est le module

genre je vais chercher dans le module

<!DOCTYPE html>
<html>
    <head>

        <title>CODE EDITOR</title>
        <script src="vendor/codemirror/lib/codemirror.js"></script>
        <link href="vendor/codemirror/lib/codemirror.css" rel="stylesheet"/>
        <script src="vendor/codemirror/mode/xml/xml.js"></script>
        <script src="vendor/codemirror/addon/edit/closetag.js"></script>
        <link src="vendor/codemirror/theme/dracula.css" rel="stylesheet"/>
 


    </head>

    <body>

        <textarea id="editor">test</textarea>
        <script>

            var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
                mode: 'xml',
                theme: 'dracula',
                lineNumbers: true,
                autoCloseTags: true
            })

            editor.setSize("250", "150");
        </script>
    </body>

</html>```

j'ai ça

et ça sur le browser

[gaunt yoke]

t'as pas des erreurs ou autre ?

[hybrid stone]

nan rien

[floral crow]

Bonjour, je me demande si c'est possible quand on se rend sur un site ça nous met une page aléatoire toute les 10 secondes ?

[hybrid stone]

j'ai trouvé en fait j'ai mis src au lieu de href

Merci quand même 🙂

[sinful nest]

slt tu peux faire un truc avec du js, genre tu fais un conteur et au bout de tant sec tu rediriges sur une de tes pages.
mais juste html/css je vois pas

[floral crow]

Je trouve pas de tutoriel sur internet tu peux m'aider ?

[flat reef]

Mauvais salon 🤔

[sinful nest]

alors je debute js donc tendu

https://www.dewep.net/realisations/compte-a-rebours-en-javascript#:~:text=1 actualisation %3D setTimeout(%22compte_a_rebours,sera%20donc%20ex%C3%A9cut%C3%A9e%20chaque%20seconde.

voila pour le compte a rebour

et voila pour la redirection

http://memo-web.fr/categorie-javascript-120/

[floral crow]

Nickel merci beaucoup !

[sinful nest]

^^

[sturdy solstice]

Salut !
Je suis en train de coder mon portfolio et j'aimerai avoir cet effet de scroll que je trouve trop stylé !
https://lemin08.github.io/Html-css/
Apprendre Le Html Css
Sur se site vous pourrez Apprendre plus sur le Html css
Merc id'avance 🙂 !

voici mon portfolio que je suis en train dde coder 😉

https://www.figma.com/file/RLFOXix4kCgxJNbDvfMlSH/Nitro-H-Website?node-id=0%3A1

[flat reef]

Bonjour
Je viens de regarder un peu et je ne comprends pas trop. C'est un site où tu as mis tes webdesign 🤔

[sturdy solstice]

ici 🙂

[flat reef]

Je n'arrive pas à cliquer dessus

[void anvil]

Salut à tous, est ce que quelqu'un sait comment on met un placeholder qui ne peut pas s'enlever ?

Par exemple sur discord quand on veut changer la couleur du role on peut pas retirer le #

Et j'aimerais bien savoir comment on fait

[flat reef]

Je te laisse jouer avec l'évènement onChange

Si l'utilisateur retire le #, Discord le remet instantanément en mettant value="#"

[dusky skiff]

Je pensais que c'était plus complexe moi

[void anvil]

onChange ?

comme ça ?

[limber raptor]

en gros :

<input type="text" value="#" onchange="yourFunction()">

<script>
  function yourFunction() {
    alert("test wolah");
  }
</script>

@void anvil

[flat reef]

Bah nn haha

[flat reef]

Alors

Tu as réussi @void anvil ?

Tu as pigé le truc ou pas ?

[void anvil]

et bien je navigue entre html php et javascript mais je me débrouille mdr

[flat reef]

Non mais le truc juste au dessus ?

[void anvil]

ah euh le et bien j'ai pas comprit le onChange

[flat reef]

onChange est un évènement qui va s'activer dès que tu vas modifier la case.

Ce que tu dois faire, c'est juste vérifier si la personne retire le #

Si elle le retire, tu as juste à le remettre 😉

[void anvil]

ah ok

[void anvil]

Bonsoir,je n'arrive pas à enlevé l'espace blanc... et je ne comprend pas le soucis

export const HeroSectionTitle1 = styled.div`
 color:#fff;
 font-size: 27.5px;
 margin-top: -352px;
 padding-bottom: 15px;
 margin-left: 113px;
 max-width: 30%;
`

export const HeroSectionDescription = styled.div`
 color:#fff;
 max-width: 25%;
 margin-left: 112px;
 font-size: 16.5px;
 padding-bottom: 34.5px; 
  
   

**veuillez me ping pour m'aidé.. Coeur sur vous ceux qui vont m'aidé **

( c'est un truc simple je pense mais comme je reprend le dev depuissss une longue pause ahah)

[gaunt yoke]

C’est quoi tout ces Margin negatifs etc

[void anvil]

comment dire

sans ça le positionnement des choses ne se placent pas comme je le souhaitent

[gaunt yoke]

Oui mais là c’est clairement pas bon de placer de cette manière

Les -352 de ton écran ça va pas rendre pareille sur chaque écran

Tu veux juste faire un gauche droite ?

[void anvil]

oui c'est sur...

[void anvil]

comment ça ?

[gaunt yoke]

tu veux juste un élément à gauche et un élément à droite quoi ?

[void anvil]

ouaip

en simple oui

[gaunt yoke]

Tu peux juste te faire 2 divs que tu viens flex

Ou faire une grid

[void anvil]

react js

[gaunt yoke]

et alors ça change quoi

C’est pas du react native

Donc tout est compatible

ça reste du web

[void anvil]

okokok

[gaunt yoke]

tu peux tout faire via ton styled components no soucis

[void anvil]

ok j'étais pas sur, je vais supprimé tous ces margins et j'te remontreee

[gaunt yoke]

Yes good luck

[void anvil]

merci !

[gaunt yoke]

https://tailwindcss.com/docs/guides/create-react-app et pour pas trop te faire chier tu peux utiliser tailwind

C’est un très bon utils css qui sera plus opti que ton styled components et plus simple

[void anvil]

oh super merci !

Et petite question comment faire pour rendre ça ->

en ça ->

j'ai essayé 'text-ident' mais ça n'a pas fonctionné

[gaunt yoke]

Normalement naturellement c’est censé à la ligne tu as mis quoi ? Une position absolute avec un width 100% )

?*

[void anvil]

voici mon code ```export const HeroSectionDescription = styled.div`
color:#fff;
margin-left: 112px;
font-size: 16.5px;
padding-bottom: 34.5px;

`

merde

[gaunt yoke]

Ça c’est juste le code de ta partie de gauche ?

[void anvil]

non ça c'est juste le code de ça ->

de cette ligne

et je cherche à la rendre en paragraphe maiss ça veut po :/

[gaunt yoke]

donc ça c’est le code du texte c’est ça ?

[void anvil]

ouaip

[gaunt yoke]

Y a pas un élément au dessus avec du style ?

[void anvil]

si y'a le titre avec le margin négatif que je compte modifié sous peu xd

mais je cherche comme meme à comprendre cela

[gaunt yoke]

Le truc c’est que tu as un truc au dessus qui fait que la div prenne toute la place car naturellement ton texte est censé ce break en fonction de la taille du parent

Tu auras beau mettre un Word break ou autre ça changera rien je pense car ta div prend tout l’écran

[void anvil]

tient voici le code du style d'en haut -> ```export const HeroSectionTitle1 = styled.div color:#fff; font-size: 27.5px; margin-top: -352px; padding-bottom: 15px; margin-left: 113px; max-width: 30%;

( je sais pour le margin négatif j'vais le changé apresss)

[gaunt yoke]

met un background red au block de gauche pour voir quelle taille il prend

Et screen

[void anvil]

okap

merdeee faudrait peut etre que je créer une div qui regroupe le titre/descrip et le btn ?

[gaunt yoke]

Oui car là du coup tu as encore un élément au dessus qui contient tes trucs de gauche donc là la structure est pas bonne

[void anvil]

AH

aaah je croisssss savoirrr

[gaunt yoke]

Ta structure est simple
body
nav
grid
left
title, text, btn
right
img

en gros

[void anvil]

regarde la mienne -> ```import React from 'react'
import { HeroSection,HeroSectionTitle1,HeroSectionDescription,HeroSectionBtn,HeroSectionImage1 } from './HeroSectionElement';
import Logo from '../image2.svg';

const Hero = () => {
return (
<>
<HeroSection>

   <HeroSectionImage1>
    <img src={Logo}/>   
    </HeroSectionImage1>  



    </HeroSection>

    <HeroSectionTitle1>
Un serveur Discord publicitaire original !</HeroSectionTitle1>

<HeroSectionDescription>
Découvrez nos systèmes qui vous permettent de faire évoluer votre projet
et de le mettre en avant en utilisant des techniques inédites !
</HeroSectionDescription>
<HeroSectionBtn>REJOINDRE</HeroSectionBtn>
</>
)
}

export default Hero

[gaunt yoke]

yes bah essaye de la modifier pour avoir un truc qui ressemble à ce que je t’ai envoyé

fais le petit à petit mais avant de faire les détails modifie déjà la base

faut pas poser des fenêtres sur des murs qui tiennent pas 🤪

[void anvil]

yess c'est sur, merci ! je te tien au courant ^^'

oof

[slender crest]

Bonsoir

J'ai un problème sur ma page web

Je n'arrive pas à faire en sorte que mon footer reste en bas de ma page il est au milieu

Pourtant j'ai utilisé :

bottom: 0;

Qqun pourrait-il m'aider svp

[limber raptor]

yop tu peux montrer tout le css de ton footer stp ?

@slender crest

[slender crest]

footer
{
    background-color: black;
    text-align: center;
    position:absolute;
    bottom:0;
    width:100%;
    height:50px;
    padding-top: 20px;
    padding-bottom: 20px;
}```

[limber raptor]

bizarre c'est censé marché 🤔

tu as quoi dans ton footer ? comme balises

[slender crest]

J'ai <p>, <a>, <i>, <span> et <section>

[limber raptor]

hmmm pourquoi une section ?

[slender crest]

C'est prcq j'ai plusieurs logos à mettre dedans

[limber raptor]

essaye de suppr la section pour voir

[slender crest]

ça fait la même chose

[void anvil]

J'ai reproduit ton code et le footer est collé en bs 🤔

en bas

[slender crest]

c'est bizarre

[void anvil]

envoies ton code html qui est dans la balise footer pour voir

[slender crest]

    <footer>
        <p>Utilisation libre des dessins moyennant citation du nom de l'auteur.<p>
        <a class="haut" href="#top">Haut de page</a>
        <section class="resaux"><span title="Mon Instagram"><a target="_blank" href="https://www.instagram.com/draw_ned/"><i class="fab fa-instagram"></i></a></span><span title="Mon Artstation"><a target="_blank" href="https://www.artstation.com/spitfire229"><i class="fab fa-artstation"></i></a></span><span title="Mon Mail"><a href="mailto:******@gmail.com"><i class="far fa-envelope"></i></a></span></section>
    </footer>
</html>

[void anvil]

Et bien , je n'ai aucun probleme moi 🤔

[limber raptor]

tu as quoi au dessus de ton footer @slender crest ?

[slender crest]

J'ai des boutons et un peu de texte au dessus et j'ai mis une margin-top sur un texte pour l'espacer un peu et ça me l'a descendu en dessous

[void anvil]

C'est le margin top qui à fait monter ton footer ?

[slender crest]

Non en fait ça à descendu mo texte en dessous

Dans un premier temps en mettant une petite margin top mon texte était sous mon footer et en l'augmentant c'est descendu en dessous

[void anvil]

hmm

envoies la balise html ou il y à la phrase en dessous du footer et le contenu qui se trouve dedans stp, ainsi que la partie CSS ou il y à le margin

[slender crest]

html

<section class="dessins">
        <div id="dessins"><h1 class="dessins">Dessins</h1></div>
</section>

css

section.dessins
{
    margin-top: 200px;
}

[void anvil]

Alors la

J'ai ça

[slender crest]

Prcq j'ai d'autres éléments dessus

Augmente le margin top

[void anvil]

ah

[slender crest]

Pour quelle descende plus

[void anvil]

Oui je vois

Y'a pas besoin de mettre un margin top aussi elevé

[slender crest]

Nn mais pour que tu vois ce que ça donne

[void anvil]

Oui je sais

Envoies un screen de ta page web (pas le code) je vais essayer de reproduire

sans que la phrase sois en dessous du footer

[slender crest]

Je viens de voir que quand je dézoome la page

le texte à la place et se met au dessus

[void anvil]

Oui c'est normal en faite les pixels sont plus nombreux quand on de-zoom

[void anvil]

donc dessins tu veux mettre ça en dessous de dessins models 3D et animations c'est ça ?

[slender crest]

oui mais avec un peu d'espace

et en dessous il y aura des illustrations du gars

[void anvil]

essaye de mettre retirer le -top à ton margin

[slender crest]

lequel ?

prcq c ce que g fais je crois

[void anvil]

section.dessins{ margin: 200px; }

[slender crest]

C pareil

[void anvil]

En faite tu demandes à ta phrase d'avoir 200 pixels d'écart avec l'élément au dessus de lui, du coup pour y parvenir il doit aller derrière le footer

envoies tout con code html et CSS

[slender crest]

Ok

Je te fais un we transfert ou ici ?

[void anvil]

Un copier coler

coller

[slender crest]

html : index

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Drawned</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://kit.fontawesome.com/*****6a.js" crossorigin="anonymous"></script>
</head>
<body>
    <div id="main">
    <header>
        <div id="top"></div>
        <h1 class="title">DRAWNED</h1>
        <a href="index.html"><img class="pdp" src="https://cdnb.artstation.com/p/assets/images/images/034/174/365/large/charles-kremer-logo-fond-carre.jpg?1611601765" alt="photo de profil de l'artiste"></a>
        <nav>
            <a href="portfolio.html">Portfolio</a>
            <br><br>
            <a href="CV.html">CV</a>
            <br><br>
            <a href="tuto.html">Tuto</a>
            <br><br>
            <a href="logiciels.html">Logiciels</a>
        </nav>
    </header>
    <section class="presentation">
        <h1>Présentation</h1>
        <h3>Je suis un jeune créateur, dessinateur, animateur et codeur a mes heures perdues.<br><br>Je travaille sur de nombreux logiciels de la suite adobe comme Illustrator, Animate Photoshop ou première pro mais aussi des logiciels d'autres factures tel que blender 3D Paint Tool SAI ou clip studio.<br>Je me développe, apprend en total autodidacte et suis en constante recherche de progrès.<br><br>Vous pourrez trouver sur ce site quelques créations que j'ai pu faire sur mon temps libre.<br>La très grande majorité de mes travaux sont inspirés de la culture Nipponne et des mangas en général.<br><br>Vous pourrez retrouver tous mes travaux dans le portfolio ainsi que quelques astuces et Tips dans les sections tuto et bric-à-brac.</h3>
    </section>
</div>
</body>

    <footer>
        <p>Utilisation libre des dessins moyennant citation du nom de l'auteur.<p>
        <a class="haut" href="#top">Haut de page</a>
        <section class="resaux"><span title="Mon Instagram"><a target="_blank" href="https://www.instagram.com/draw_ned/"><i class="fab fa-instagram"></i></a></span><span title="Mon Artstation"><a target="_blank" href="https://www.artstation.com/spitfire229"><i class="fab fa-artstation"></i></a></span><span title="Mon Mail"><a href="mailto:****@gmail.com"><i class="far fa-envelope"></i></a></span></section>
    </footer>
</html>

html: page concerné :

tu as reçu ?

[void anvil]

non

[slender crest]

prvq y a écrit ton message n'a pas pu être envoyé

[void anvil]

le code est peut etre trop gros, envoies le en plusieurs messages

[slender crest]

html : index

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Drawned</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://kit.fontawesome.com/*****6a.js" crossorigin="anonymous"></script>
</head>
<body>
    <div id="main">
    <header>
        <div id="top"></div>
        <h1 class="title">DRAWNED</h1>
        <a href="index.html"><img class="pdp" src="https://cdnb.artstation.com/p/assets/images/images/034/174/365/large/charles-kremer-logo-fond-carre.jpg?1611601765" alt="photo de profil de l'artiste"></a>
        <nav>
            <a href="portfolio.html">Portfolio</a>
            <br><br>
            <a href="CV.html">CV</a>
            <br><br>
            <a href="tuto.html">Tuto</a>
            <br><br>
            <a href="logiciels.html">Logiciels</a>
        </nav>
    </header>
    <section class="presentation">
        <h1>Présentation</h1>
        <h3>Je suis un jeune créateur, dessinateur, animateur et codeur a mes heures perdues.<br><br>Je travaille sur de nombreux logiciels de la suite adobe comme Illustrator, Animate Photoshop ou première pro mais aussi des logiciels d'autres factures tel que blender 3D Paint Tool SAI ou clip studio.<br>Je me développe, apprend en total autodidacte et suis en constante recherche de progrès.<br><br>Vous pourrez trouver sur ce site quelques créations que j'ai pu faire sur mon temps libre.<br>La très grande majorité de mes travaux sont inspirés de la culture Nipponne et des mangas en général.<br><br>Vous pourrez retrouver tous mes travaux dans le portfolio ainsi que quelques astuces et Tips dans les sections tuto et bric-à-brac.</h3>
    </section>
</div>
</body>

    <footer>
        <p>Utilisation libre des dessins moyennant citation du nom de l'auteur.<p>
        <a class="haut" href="#top">Haut de page</a>
        <section class="resaux"><span title="Mon Instagram"><a target="_blank" href="https://www.instagram.com/draw_ned/"><i class="fab fa-instagram"></i></a></span><span title="Mon Artstation"><a target="_blank" href="https://www.artstation.com/spitfire229"><i class="fab fa-artstation"></i></a></span><span title="Mon Mail"><a href="mailto:****@gmail.com"><i class="far fa-envelope"></i></a></span></section>
    </footer>
</html>

[void anvil]

Oui j'ai reçu sa mais pas la page 2

la page concerné

[slender crest]

html page concerné :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Drawned</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://kit.fontawesome.com/***.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="main">
    <header>
        <div id="top"></div>
        <h1 class="title">DRAWNED</h1>
        <a href="index.html"><img class="pdp" src="https://cdnb.artstation.com/p/assets/images/images/034/174/365/large/charles-kremer-logo-fond-carre.jpg?1611601765" alt="photo de profil de l'artiste"></a>
        <nav>
            <a href="CV.html">CV</a>
            <br><br>
            <a href="tuto.html">Tuto</a>
            <br><br>
            <a href="logiciels.html">Logiciels</a>
        </nav>
    </header>
    <h1 class="port">Mon Portfolio</h1>
    <section class="menu"><a href="#dessins"><img class="nav" src="https://cdnb.artstation.com/p/assets/images/images/034/365/775/large/charles-kremer-sans-titre-1.jpg?1612117749" alt="dessins"></a><a href="#modeles3d"><img class="nav" src="https://cdnb.artstation.com/p/assets/images/images/034/365/147/large/charles-kremer-sans-titre-1.jpg?1612116679" alt="modèles 3d"></a><a href="#animations"><img class="nav" src="https://cdnb.artstation.com/p/assets/images/images/034/365/339/large/charles-kremer-sans-titre-1.jpg?1612117016" alt="animations"></a></section>
    <section class="dessins">
        <div id="dessins"><h1 class="dessins">Dessins</h1></div>
    </section>
</div>
</body>

    <footer>
        <p>Utilisation libre des dessins moyennant citation du nom de l'auteur.<p>
        <a class="haut" href="#top">Haut de page</a>
        <section class="resaux"><span title="Mon Instagram"><a target="_blank" href="https://www.instagram.com/draw_ned/"><i class="fab fa-instagram"></i></a></span><span title="Mon Artstation"><a target="_blank" href="https://www.artstation.com/spitfire229"><i class="fab fa-artstation"></i></a></span><span title="Mon Mail"><a href="mailto:****@gmail.com"><i class="far fa-envelope"></i></a></span></section>
    </footer>
</html>

css :

@keyframes animation_titre
{
    0%
    {
        color: red;
    }
    25%
    {
        color: pink;
    }
    50%
    {
        color: lightgreen;
    }
    75%
    {
        color: lightblue;
    }
    100%
    {
        color: lightyellow;
    }
}
*
{
    margin: 0;
    padding: 0;
}
body, html{height: 100%;}
body
{
    text-align: center;
}
#main
{
    max-width: 1280px;
    max-height: 100%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 50px;
}
html
{
    scroll-behavior: smooth;
    background-image: url("mtgn.png");
    background-size: cover;
}
header
{

}
h1.title
{
    background-color: black;
    border-radius: 60%;
    text-align: center;
    font-size: 70px;
    animation-name: animation_titre;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    animation-timing-function: ease;
}
img.pdp
{
    position: absolute;
    height: 100px;
    border: solid;
    border-color: black;
    border-radius: 20%;
    left: 40px;
    margin-top: 40px;
}
img.pdp:hover
{
    filter: blur(2px);
}
nav
{
    position: absolute;
    text-align: left;
    margin-top: 175px;
}
nav a
{
    color: black;
    text-decoration: none;
    font-size: 30px;
    border: solid;
    padding: 5px;
    margin-left: 30px;
}
nav a:hover
{
    color: white;
    filter: blur(2px);
    border-radius: 20%;
}
section.presentation
{
    text-align: center;
    float: left;
    margin-top: 80px;
    margin-left: 300px;
    margin-right: 300px;
}
section.presentation h1
{
    text-align: center;
    font-size: 50px;
    text-decoration: underline;
}
section.presentation h3
{
    color: white;
    background-color: black;
    opacity: 90%;
    border-radius: 10%;
    padding: 15px;
    margin-top: 50px;
}
footer
{
    background-color: black;
    text-align: center;
    position:absolute;
    bottom:0;
    width:100%;
    height:50px;
    padding-top: 20px;
    padding-bottom: 20px;
}

section.resaux
{
    background-color: black;
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
}
section.resaux a
{
    padding-right: 10px;
    padding-left: 10px;
}
section.resaux i
{
    color: grey;
}
.fa-instagram:hover
{
    color: #bc2a8d;
}
.fa-artstation:hover
{
    color: #0292F4;
}
footer p
{
    margin-bottom: 10px;
    color: grey;
}
.fa-envelope:hover
{
    color: white;
}
a.haut
{
    text-align: center;
    text-decoration: none;
    color: grey;
}
a.haut:hover
{
    color: white;
    text-decoration: underline;
}
h1.port
{
    margin-top: 200px;
    font-size: 50px;
    text-decoration: underline;
    text-align: center;
}
section.menu
{
}
img.nav
{
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 350px;
    height: 100px;
    border-radius: 20%;
    border: solid;
    border-width: 10px;
    border-color: black;
}
img.nav:hover
{
    border: solid;
    border-color: white;
    border-width: 10px;
}
section.dessins
{
    margin-top: 200px;
}
h1.dessins
{
    text-align: center;
    font-size: 30px;
    text-decoration: underline;
}

[void anvil]

ok

[slender crest]

Tu as le html index et page concerné plus css ?

[slender crest]

dacc

[void anvil]

Oui

Alors j'ai ça

[slender crest]

C'est pas normal

[void anvil]

C'est portofilo ou il y a un problème pour toi

[slender crest]

Ouo

[void anvil]

Tu m'as donner le code du fichier présentation

[slender crest]

Oui *

[void anvil]

pas du bon fichier en tout cas

[slender crest]

nn en fait c'est normal prcq tu as pas le script pour les logo et limage de fond

[slender crest]

si tu clique sur portfolio

[void anvil]

J'ai pas le meme file C que toi, ça va pas marcher si je clique sur portfolio

[slender crest]

je t'envoie quoi ?

[void anvil]

En tout cas j'ai pas de phrase qui descend en bas du footer 🤷‍♀️

[slender crest]

dans portfolio

[void anvil]

Le code de cette page la #html-css message

[wise hamlet]

Citation de XP489900 posté dans #html-css

Clique sur [📝](#html-css message) pour accéder au message

Quote par Orb#2267 · Jul 21, 2021, 8:21 PM

[slender crest]

bah c'est le code html : page concerné

[slender crest]

ça

[slender crest]

ça

[slender crest]

avec le css

[slender crest]

.

[void anvil]

Ok j'ai recopier le mauvais code

[slender crest]

Tkt aussi dsl j'ai pas optimisé

[void anvil]

C'est pas grave

Ok bon en effet j'ai le meme pb que toi

Ok

Le problème vient de ton footer

en fait le position absolute que tu lui à mit le bloque complètement

du coup quoi qu'il arrive, il ne bougera pas, d'ou le fait que ton texte s'est superposé dessus

[slender crest]

Ok j'enlève juste absolute ?

Je mets quoi à la place ?

[void anvil]

tu mets rien

tu enlèves juste

[slender crest]

ok là il est plus en dessous mais il est superposé

[void anvil]

ok attends

[slender crest]

j'ai mis une margin-top au footer

ça à l'air d'aller

[void anvil]

h1.dessins
{
margin-top: 100px;
text-align: center;
font-size: 30px;
text-decoration: underline;
}

c'est ton margin top qui est au mauvais endroit

[slender crest]

ah nn en fait

[slender crest]

je le mets où ?

[void anvil]

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Drawned</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://kit.fontawesome.com/***.js" crossorigin="anonymous"></script> </head> <body> <div id="main"> <header> <div id="top"></div> <h1 class="title">DRAWNED</h1> <a href="index.html"><img class="pdp" src="https://cdnb.artstation.com/p/assets/images/images/034/174/365/large/charles-kremer-logo-fond-carre.jpg?1611601765" alt="photo de profil de l'artiste"></a> <nav> <a href="CV.html">CV</a> <br><br> <a href="tuto.html">Tuto</a> <br><br> <a href="logiciels.html">Logiciels</a> </nav> </header>

<h1 class="port">Mon Portfolio</h1> <section class="menu"><a href="[#dessins](/guild/223070469148901376/channel/781305530773012510/)"><img class="nav" src="https://cdnb.artstation.com/p/assets/images/images/034/365/775/large/charles-kremer-sans-titre-1.jpg?1612117749" alt="dessins"></a><a href="#modeles3d"><img class="nav" src="https://cdnb.artstation.com/p/assets/images/images/034/365/147/large/charles-kremer-sans-titre-1.jpg?1612116679" alt="modèles 3d"></a><a href="#animations"><img class="nav" src="https://cdnb.artstation.com/p/assets/images/images/034/365/339/large/charles-kremer-sans-titre-1.jpg?1612117016" alt="animations"></a></section> <section class="dessins"> <h1 class="dessins">Dessins</h1> </section> </div> </body> <footer> <p>Utilisation libre des dessins moyennant citation du nom de l'auteur.<p> <a class="haut" href="#top">Haut de page</a> <section class="resaux"><span title="Mon Instagram"><a target="_blank" href="https://www.instagram.com/draw_ned/"><i class="fab fa-instagram"></i></a></span><span title="Mon Artstation"><a target="_blank" href="https://www.artstation.com/spitfire229"><i class="fab fa-artstation"></i></a></span><span title="Mon Mail"><a href="mailto:****@gmail.com"><i class="far fa-envelope"></i></a></span></section> </footer> </html>

ça c'est ton html

[slender crest]

corrigé ?

[void anvil]

oui

[slender crest]

tu as fait quoi ?

[void anvil]

J'ai retirer une div que tu avais mit

[slender crest]

la div main ?

[void anvil]

non la ou il y à les sections

[slender crest]

ok je met a à la place

[void anvil]

et normalement sur ton CSS à la fin tu as h1.dessins

Oui tu mets à la place

[slender crest]

oui

mais attd quel ligne prcq je vois pas

[void anvil]

ok et au dessus de h1.dessins tu as qqchose je crois

ligne 26 je crois

[slender crest]

oui j'ai section.dessins

[void anvil]

ok, sur ton fichier CSS, supprimes ce qu'il y à dans section.dessins

et mets un margin-top: TonNombreDePx; à h1.dessins

[slender crest]

ok mais pour la div je la trouve pas

[void anvil]

et tu dois avoir ça

[slender crest]

oui

[void anvil]

C'est la <div id="dessins"> ici

#html-css message

[wise hamlet]

Citation de XP489900 posté dans #html-css

Clique sur [📝](#html-css message) pour accéder au message
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drawned</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://kit.fontawesome.com/***.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="main">
<header>
<div id="top"></div>
<h1 class="title">DRAWNED</h1>
<a href="index.html"><img class="pdp" src="https://cdnb.artstation.com/p/assets/images/images/034/174/365/large/charles-kremer-logo-fond-carre.jpg?1611601765" alt="photo de profil de l'artiste"></a>
<nav>
<a href="CV.html">CV</a>
<br><br>
<a href="tuto.html">Tuto</a>
<br><br>
<a href="logiciels.html">Logiciels</a>
</nav>
</header>
<h1 class="port">Mon Portfolio</h1>
<section class="menu"><a href="#dessins"><img class="nav" src="https://cdnb.artstation.com/p/assets/images/images/034/365/775/large/charles-kremer-sans-titre-1.jpg?1612117749" alt="dessins"></a><a href="#modeles3d"><img class="nav" src="https://cdnb.artstation.com/p/assets/images/images/034/365/147/large/charles-kremer-sans-titre-1.jpg?1612116679" alt="modèles 3d"></a><a href="#animations"><img class="nav" src="https://cdnb.artstation.com/p/assets/images/images/034/365/339/large/charles-kremer-sans-titre-1.jpg?1612117016" alt="animations"></a></section>
<section class="dessins">
<div id="dessins"><h1 class="dessins">Dessins</h1></div>
</section>
</div>
</body>

Quote par Orb#2267 · Jul 21, 2021, 8:47 PM

[void anvil]

Bonsoirrrrr , je n'arrive pas à reduire la taille de mon image or voici ->

je ne comprend pas, rien ne change ..

[slender crest]

ok je met a

[void anvil]

tu retires la div

[slender crest]

ok

[void anvil]

Pour qu'il n'y ait plus que ça

[slender crest]

mais elle me sert à faire un lien

[void anvil]

ah ok bah remets la alors

[slender crest]

ok

[void anvil]

@void anvil l'image en question elle est dans une div ? un header ? un background ?

il s'agit d'une div voici

et donc l'image dont tu veux modifier la taille c'est celle avec le bonhome avec un truc rouge sur la tête ?

[slender crest]

ça change rien j'ai toujours le pb

[void anvil]

oui c'est la fille + l'écran et le ptit bohnomme ( ils font tous partis de la meme image )

tu as bien retirer le position absolute ? @slender crest

ah d'accord, il y à quelque chose à droite ou à gauche de l'image ? @slender crest

[slender crest]

de quel image ?

[slender crest]

oui

[void anvil]

ah d'accord, il y à quelque chose à droite ou à gauche de l'image ? @void anvil

Me suis tromper de mention dsl x)

tqttt xd

est ce que la fin de ton code CSS ressemble à ça

[slender crest]

ok tkt

[void anvil]

@void anvil *

wsh

[slender crest]

oui

[void anvil]

ah mais ça recouvre toute la page ton image ? @void anvil

non mais c'est censé rendre ça ->

[void anvil]

Eeuuh noon

[slender crest]

oui et quand j'augment le margin-top de h1.dessins ça me le passe dessous

[void anvil]

@void anvil

Tu asa la taille de base de l'image ? @void anvil

Parce que c'est pas normale que le texte sois en dessous si c'est une seule et meme image

@slender crest vérifies si tu as bien ça

à la ligne 26 normalement

[slender crest]

oui exactement

[void anvil]

Et ça

Sur ton fichier html

[slender crest]

oui sauf que j'ai remis la div comme tu m'avais dit

[void anvil]

eenleves la pour voir

[slender crest]

ça ne change rien

[void anvil]

Bon

Envoies moi des screens de ton code CSS

[slender crest]

tout ?

[void anvil]

oui

[slender crest]

ok

voilà

[void anvil]

hmm

tu as quoi au dessus de footer{}dans ton fichier CSS ?

[slender crest]

un code que j'avais mis en commentaire

j'avais essayé mais ça marchais j'avais le même problème

je l'ai gardé au cas où

[void anvil]

tu as qqch comme ça si on compte pas les commentaires ?

[slender crest]

oui

[void anvil]

Ok, je ne vois pas ou est ton pb, dans le pire des cas je vais t'envoyer mon code, il marche donc normalement sur ton PC il devrait marcher aussi

[slender crest]

ah bon mais pourtant tu as dit que ça marchais pas pour toi

[void anvil]

Si

[slender crest]

ah ok bah je veux bien du coup

[slender crest]

oui moi aussi mais augmente le margin-top à 400px

[void anvil]

Je viens de voir le soucis

Normalement à la ligne 27 tu as qqch comme ça

[slender crest]

et meme si tu augmente plus ?

[slender crest]

je check

[void anvil]

Faut que tu supprimes ça

supprimes et c'est bon :D

[slender crest]

ok

[slender crest]

OUI !

[void anvil]

En faite, quand tu mets un height:100%; tu veux dire que l'élément occupe 100% de la page

[slender crest]

Merci beaucoup

[void anvil]

donc ton footer ne pouvait pas descendre

derien x)

[slender crest]

en plus l'ironnie c'est que j'avais mis ça pour régler le probleme

[slender crest]

ahhh ok

Franchement merci énormément ça faisait depuis ce matin je galérais

[void anvil]

Aussi un conseil, quand tu fais du css, fais comme ça

Avec les accolades

ça t'économisera des lignes

derien, tu débutes dans ce domaine ?

[slender crest]

oui c'est vrai je savais que ça marchait et j'ai l'habitude de faire comme ça mais j'avais pas pensé à économiser la place

[slender crest]

ça fait 2-3ans oui je touche un peu à tout et html css c'est ce que je maitrise le plus

[void anvil]

ouais quand tu as un code long c'est mieux

oui, il y a encore du boulot mais ça viendra, comme pour moi mdr

[slender crest]

merci toi ça fait combien de temps ?

[void anvil]

J'avais déja les bases minimum en 2020 mais je m'y suis mit sérieusement début 2021

La j'ai basculer vers le JavaScript et le PHP et cette semaine je vais me lancer sur python

[slender crest]

ok après moi c'est vrai que je fais pas que ça et puis je le fait quand j'ai envie donc ça avance moins vite mais c'est bien

[slender crest]

j'ai fait un peu JavaScript et Python

Notamment des bots discord

[void anvil]

Oui, la motivation à fait que j'apprends vite et bien ,et puis j'aimerais me diriger vers un monde professionnel dans ce domaine

[slender crest]

Moi aussi mais moi c'est dans longtemps

[void anvil]

J'aimerais bien apprendre à faire des bots discord moi, je vais essayer de voir pour en faire un ou en tout cas commencer à le coder avant la fin de l'année

[slender crest]

ouais si tu as besoin d'aide je pourrais 'aider stv

[void anvil]

dans longtemps, tu sais on peut se faire de l'argent très tot dans le milieu du developpement

oui, je n'y manquerais pas x)

[slender crest]

oui c'est vrai

[limber raptor]

Yop tout le monde j'ai un petit soucis avec un dropdown, quand je passe ma souris pour activer le dropdown y'a pas de soucis ça marche mais quand j'essaye de passer ma souris dessus ça le ferme je ne peux pas mettre ma souris dessus pourtant j'ai essayer de remonter le dropdown et tout mais rien ... j'en avais déjà fais ça marchait nickel mais la je vois pas trop le problème 🤔

div.nav-choose-langs { /* la div dropdown */
    pointer-events: none;
    opacity: 0;
    position: absolute;
    background: white;
    border-radius: 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    width: 46px;
}

button#nav-current-lang:hover ~ div.nav-choose-langs { /* activation du dropdown */
    pointer-events: visible;
    opacity: 1;
}

[gaunt yoke]

Car lorsque tu hover #nav-current-lang tu actives .nav-choose-langs , sauf que quand tu passes ta souris sur .nav-choose-langs tu ne hover plus #nav-current-lang

Le plus simple ce serait d'avoir un parent relatif aux 2 (qui contient les 2), comme ca quand tu hover le parent (donc pour le user le button) hop tu actives le dropdown

[limber raptor]

merci beaucoup j'y ai même pas penser 😂

[dusky skiff]

Bien sûr tout le monde sais ça

[acoustic lion]

Bonjour, voilà une définition de la : css position: static;

```La valeur static est la valeur par défaut de la propriété position. Ainsi, par défaut, tous les éléments HTML sont positionnés de manière static. Un élément HTML positionné avec position : static sera positionné selon le flux normal de la page.````

Cependant je souhaite savoir qu'est ce que le flux

[gaunt yoke]

Si je dis pas de betise, ce qu’ils vont appeler le flux c’est juste selon la manière dont tu vas écrire ton code, c’est du cascading

Donc si tu met un header en premier puis un footer puis une div, bah le flux normal de la page c’est que le header sera affiché en premier, le footer en 2eme et la div en 3 eme

ça va garder le même sens que dans ton code (visuellement) alors que avec des positions absolute ça peut complètement venir modifier ce fameux « flux » visuellement

[acoustic lion]

a donc : Un élément HTML positionné avec position : static sera positionné selon le flux normal de la page. est équivaut à dire Un élément HTML positionné avec position : static sera positionné selon selon l'imbriquement des éléments de la page.

[gaunt yoke]

En gros oui

[acoustic lion]

mercii

[acoustic lion]

quelqu'un pourrait m'expliquer en claire la différence en max-width , min-width, width/height s'il vous plait je vois pas trop de différence entre eux et je ne comprend pas leurs utilité entre le max min et le normal ..

[gaunt yoke]

Hello @acoustic lion
En gros le width: permet de définir une taille fixe à ton élément
Le max-width: permet de définir une taille maximum a cet élément, si tu lui met max-width: 300px par exemple, il fera maximum 300px mais pourra aussi etre plus petit si le contenu ne prend pas 300px
Le min width a l'inverse lui c'est pour dire que au minimum il fera 300px, meme si il y a rien dedans

[acoustic lion]

En gros le width: permet de définir une taille fixe à ton élément
c'est à dire fixe ?

[deft burrow]

elle ne changera pas en fonction de la taille de l'écran de l'utilisateur

c'est toujours cette valeur là

max width va permettre de dire "ok ça peut pas dépasser ça mais ça peut aller en dessous si autre chose change"

enfin écran de l'utilisateur c'est pas tout à fait exact, plus en fonction des autres paramètres que tu lui as fournis

[flat reef]

Et pour le height, on reste dans la même logique 😋
Compris ?

[grand pasture]

hein ?

[quartz thunder]

« 13/11/2020 »

[gaunt yoke]

😂

et j'ai surement dis des conneries car je commence par
si je dis pas de bêtise
et comme on le sait si bien: je ne dis que des conneries

[old cobalt]

J'avoue

[strong lynx]

coucou waldory

[languid gazelle]

Bonjour je souhaiterais reproduire cette double hélice dispo sur ce site

https://gethelix.co

mais je n'ai aucune idée de comment elle a été réalisé

[fiery moss]

Bonsoir a vous, j'ai un léger problème liée a l'hébergement de mon site (peu de rapport avec l'html et le css mais c'est en lien) et je me demandais si une personne pouvait m'aider étant donné que les forum ne sont pas super clair a propos de mon problème...
Mon erreur est en rapport avec le FTP voici ce que ça me dit : 421 home directory not available
Merci a vous et bonne soirée ^^

[barren ledge]

Si tu cliques sur les "..." ça donne quoi ?

[fiery moss]

pas grand chose

ah et j'ai oublié de préciser ça me marque également : impossible d'établir une connexion au serveur
mais bon c'est logique je pense

[barren ledge]

C'est quoi comme hebergeur ?

[fiery moss]

Hosteur... vraiment pas un bon choix au final je pense

[barren ledge]

Du coup on dirait un problème de configuration de leurs côté, t'as des actions spécifiques que tu peux faire ?
Aussi je te conseil de faire un ticket client t'auras peut être une reponse / action d'ici demain

[fiery moss]

J'ai fait un ticket et je me suis renseigné en général ça viens de l'hébergeur ce genre de problème mais bon je préfère me renseigner un peu partout... merci de ton aide en tout cas

[barren ledge]

Tu peux pas y faire grand chose malheureusement, étant donner que tu peux pas accéder aux dossiers aux dessus 😕

[languid gazelle]

euh

vous avez une idée comment mettre un espace entre les deux ?

merci d'avance

[void anvil]

<li style="margin-left: 1px;"><MudText Color="Color.Secondary">Documentation</MudText></li>

je sais pas ci ça réglera ton problème mai test quant même

[deft burrow]

dans ton css :

.navbar-items > li {
  margin: 0 2px;
}

.navbar-items c'est le ul donc il faut que tu ailles sur les enfants

[main agate]

.navnar-items li:not(first-child) {
    margin-left: 5px;
}

[deft burrow]

ouais fin là tu complique la requête, il l'adapte comme il veut

[languid gazelle]

merci bcp mais

sas se chevauche mtn

[deft burrow]

flex-direction: row; dans .navbar-items peut-être

[languid gazelle]

change rien

[deft burrow]

nan t'as pas bien modif pardon j'ai pas été assez précis

en gros

ton ancien .navbar-items il était bien

mais il faut que tu rajoute un truc pour cibler ses enfants

donc le margin 0 2px il fallait le mettre dans un truc à part

[low dagger]

Est-il possible de remove (juste cacher) uniquement la scrollbar verticale (j'en ai une verticale et une horizontale) ? Ca a l'air de fonctionner ici, mais la scrollbar horizontale devient transparente en couleur

[languid gazelle]

ah d'accord

j'ai encore le soucis attend je te montre les fichiers taink

ah déja j'ai pas supprimé l'ancien att

[deft burrow]

nan en gros ton fichier css ça doit être

.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.navbar-items {
  display: flex;
  margin: 10px;
}

.navbar-items > li {
  margin: 0 2px;
  flex-direction: row;
}

[languid gazelle]

ah y'a un ordre a respecter en css ?

sa fonctionne merci bcp

[deft burrow]

nan mais ton fichier là il manquait le margin que je t'avais dit

[languid gazelle]

oki

[fickle fjord]

hey des gens ont déjà eu un problème avec le code injecter par live server ?

[sturdy solstice]

Non moi je l'utilise tous les jours et c'est parfait

[old cobalt]

coucou

[old cobalt]

C'est un canvas !

le js est la https://gethelix.co/js/app.js

[last hinge]

Hello, je débute en html-css-js, je pratique le sass en parallèle et je voulais savoir si vous aviez des conseils pour bien débuter, que ce soit des sites ou des petits tips, merci.

[low dagger]

Pour apprendre/t'entrainer avec flexbox :
https://flexboxfroggy.com/#fr
https://the-echoplex.net/flexyboxes/

[void anvil]

Salut salut ! Est ce que vous avez des sites ou on peut trouver des images ? J'en avais avant mais je ne me souviens plus du nom

[sturdy solstice]

Unsplash

Béance

Dribbble

C 'est pas mal et sans droits d'auteur

[void anvil]

Ah ou unsplash je l'utilisais avant, je me souvenais plus du nom du site

Merci beacoup @sturdy solstice

[sturdy solstice]

Dr

C'est vrai que c'est très utile quand t'en as besoin 😉

[last hinge]

Merci beaucoup

[summer tinsel]

Bonjour/Bonsoir
J'ai une question concernant des potentielles étude de développeur web. Je suis actuellement en Terminale spécialité SVT, physique + math complémentaire (équivalent d'une S dans l'ancien programme). Et je me suis découvert, il y a peu, une réelle passion pour le dev web (html css + apprentissage js en cours ==>le tout depuis 1mois et demi). Or maintenant, que je suis plus orienté dans une voie scientifique (médecine, laborantin etc...) et moins dans une voie mathématique (math complémentaire, n'étant pas aussi poussé que la spécialité Math), comment puis-je faire pour, être accepté dans des écoles de développement alors que ces dernières vont privilégier les élèves qui pendant leurs années lycée ont appris le développement scolaire ?

[errant cypress]

suffit de faire tes preuves ^^

des gens peuvent apprendre le dév web mais ne pas être tellement intéressé

[languid gazelle]

non du tout

j'ai des amis qui ont fait une option NSI qui ne leur a servi a rien car la niveau est très faible si c'est c'est ton hobby hors du lycée

de ce que j'ai déjà entendu les entreprises de "devs" recherche avant tout l'expérience que le diplome

[summer tinsel]

ha bon ? c'est un super point ça !

merci beaucoup de vos réponses , ça me rassure @languid gazelle @errant cypress

[errant cypress]

avec plaisir !

[quartz panther]

Bonjour je vien vers vous pour avoir des information pour savoir comment mettre un Gros texte en html

y'a il des site pour convertir ?

ou quelque chose comme ca ?

[flat reef]

Salut l'ami ✌️
Tu veux faire quoi concrètement ? As tu un bon niveau à l'école ?

[flat reef]

Que souhaites tu faire ?

[quartz panther]

Bas poser un énorme texte celui la en gros

mais ci je doit tout faire a la main

[flat reef]

Bah c'est pas possible, enfin je pense 🤔

Mmmh 🤔

Je réfléchis mais je crois pas que ça existe

[summer tinsel]

heyyyy,
Alors oui, niveau notes j'suis bien et je taff fort, j'suis à 16 de moyenne générale à l'année et bac de Francais j'ai eu 12 à l'écrit et 19 à l'oral donc en soit j'suis tranquille. Avant, je voulais travailler dans la recherche, seul petit bémole, j'ai le développement qui a pointé son nez y'a un mois et demi et qui m'a dit "ntm tu fera pas ça, tu vas tomber amoureux de moi, et passer tes journées à m'utiliser" Ducoup, hé bien je suis là, aujourd'hui, à me demander si c'est possible.

[barren ledge]

Comme dit plus haut, c'est pas un soucis, d'ailleurs tu seras potentiellement mieux placer que d'autres étant donner que t'en général

[barren ledge]

Ya des balises html ?

[summer tinsel]

c'est sûr que dis comme ça... Je verais ☺

[wise cosmos]

Bonjour ! Je ne suis pas sûr de l'existence de ça, mais j'ai cru voir qu'on pouvait créer des formes de background en CSS, je m'explique, faire par exemple une forme triangulaire avec la propriété background, est-ce que je me trompe, si quelqu'un peut m'éclairer sur ça ?

[grand radish]

il suffit de créer ton doctype etc et de mettre ca dans une balise p

[grand radish]

https://alvaromontoro.com/blog/67970/drawing-a-triangle-with-css je ne suis pas sûr d'avoir compris ta demande mais tiens

[deft burrow]

Oui
https://www.magicpattern.design/tools/css-backgrounds

[quartz panther]

Bonjour je vien vers vous pour savoir comment on fait pour redimensionnez une image est pas le autre car j'ai modifier la taille de tout les image de mon site

[void anvil]

.

[wise cosmos]

Tu mets une classe à ton image

et tu modif la classe

[deft burrow]

@void anvil une classe c'est un truc utilisable pour sélectionner plusieurs éléments en css et en javascript
pour utiliser une classe ça dépend du langage :
en html:

<div class="uneclasse"></div>

en css:

.uneclasse {
  /* propriétés css genre color ou background */
}

[void anvil]

ok

[quartz panther]

Merci !

[last hinge]

Comment tu as fait pour faire toutes les images avant si tu n'a pas utilisé de class ?

[jolly mango]

Bonsoir, petite question, comment je change la couleur d'un mot contenant un lien vers un autre site ?

Et comment je fais pour le mettre à droite

[patent solstice]

Tu veux changer la couleur du lien ?

[jolly mango]

oui

il ne vas pas avec le fond

[patent solstice]

C'est tout simple la propriété CSS color sur ton <a>

[jolly mango]

Ok ok

Mais s'il y en a plusieurs, et qu'il faut des couleur différentes comment il faut faire ? (Ce n'est pas le cas c'est juste pour apprendre plus)

[patent solstice]

Tu mets un attribut id sur ta balise et tu appliques le CSS uniquement sur ton ID

[jolly mango]

D'accord

Merci beaucoup 😄

[mighty pond]

C’est quoi le contraire de hover ?

J’ai essayé link ça fait une animation au démarrage du site

[patent solstice]

a {
  Sans hover
}

a:hover {
  Avec hover
}```

Aussi simple que ça si j'ai bien compris ta question 😂

[mighty pond]

Non

Enfaite

Je fait une transition pour les boutons et je veux que quand j’enlève ma souris du bouton ça fasse une transition

    color: rgb(20, 16, 65) ;
    background: white;
    transition: 0.3s all;```

[patent solstice]

Que ça revienne à l'état initial avec une transition ?

[mighty pond]

oui

c'est plus dans le js ça nan ?

j'suis même pas sur que ce soit css

[patent solstice]

Tu peux le faire en scss assez facilement avec &::after et &::before
Pour du css pur, faut que je fasse des tests

[mighty pond]

C’est en quel langage ?

[patent solstice]

C'est juste un langage interprété en CSS

[mighty pond]

C’est du css ?

[patent solstice]

Non mais c'est quasi la même chose juste avec features en plus

[mighty pond]

C’est quel langage ?

Ah

En scss

J’avais pas vu

[gaunt yoke]

bah les pseudos elements fonctionne aussi en css

no soucis

[patent solstice]

C'est selon moi la solution la plus simple
Pur CSS ça me semble hard

[gaunt yoke]

yes mais tu aurais fais quoi en scss qui serait hard en css ? 🤔

(oui il y a pleins de truc qu'on peut pas faire, mais juste pour savoir là comment tu voyais le truc)

enfaite ça dépend ce que tu veux faire comme animation @mighty pond, alors oui clairement ce serait plus rapide de juste trigger le mouse leave en js, mais en css ca se fait, tu peux avoir des animations d'entrées et de sortie différentes

[mighty pond]

transition

[gaunt yoke]

https://www.creativejuiz.fr/blog/tutoriels/transitions-css3-mouseover-mouseout tiens tu as 2 exemples là, tu as juste a jouer avec les types de transition par exemple

et ça va changer entre le mouse enter et mouse leave

[patent solstice]

Je veux dire en css pur
Mais avec SCSS du coup j'aurais utilisé un truc du genre &::before et &::after

Ou alors j'ai mal compris la réelle question 😂

[gaunt yoke]

oui mais je comprend pas en quoi c'est hard before et after en css ? 🤔

[mighty pond]

je comprend pas trop

[gaunt yoke]

element::after {}

element {
 &::after {}
}

c'est la seule différence 🤔

[patent solstice]

Si j'ai bien compris tu veux une animation quand tu retires ta souris ?

[mighty pond]

oui

[patent solstice]

Enfin c'est ce que j'ai compris

Oui voilà c'est ça

[mighty pond]

une transition plutôt

[patent solstice]

Du coup ::after et ::before
Et je me suis mal exprimé Enzo

[gaunt yoke]

bah du coup ^ @mighty pond tu as un exemple la

[mighty pond]

j'ai réussi a le faire

mais ça donne le même résultat que :link

j'ai un animation au début

[gaunt yoke]

ça c'est juste le css qui est load apres ton dom

[mighty pond]

oui mais quand je l'enlève y'a pas

[wise cosmos]

Hello, j'utilise SASS, j'ai une animation venant d'un fichier différent de mon main, mais je n'arrive pas à l'utiliser

Je respecte pourtant les règles de SASS à savoir ```css
@keyframes nom
0%
@anim
100%
@anim

Je l'importe depuis l'autre fichier, mais il n'est pas reconnu

Même en le faisant dans ce fichier en question, la keyframes n'est pas reconnu

[gaunt yoke]

donc elle est dans un fichier par exemple toto.sass

et dans ton main.sass (fichier principal) quand tu @use 'toto'

ça ne fonctionne pas ? tu peux pas use la keyframe c'est ça ?

[wise cosmos]

Donc voilà en fait, j'importe le fichier, d'un point de vue technique, je peux utiliser la keyframes

Et pourtant non

Et comme dit, même si je le mets dans le même fichier

Elle n'est pas reconnue

Pour un mixin, j'ai aucun problème pour include

[gaunt yoke]

tu peux montrer exactement le rendu please ?

[wise cosmos]

L'anim est un peu longue, je précise

[gaunt yoke]

car je comprend pas le "point de vue technique, je peux utiliser la keyframe"

du coup c'est quoi juste une erreur de lint ?

Ah oui

[wise cosmos]

L'animation de mon fichier animation

Ahh j'ai prévenu hein

Et dans mon main css @use "./Components/animation"

[gaunt yoke]

Yes okay

[wise cosmos]

Ou import peut importe

[gaunt yoke]

et quand tu veux l'use tu fais juste bounceIt quoi ?

[wise cosmos]

yep

[gaunt yoke]

okay et montre comment tu l'as call stp

[wise cosmos]

J'enlève c'est considéré comme clean :troll:

animation: bounceIt 1000ms linear both```

[gaunt yoke]

Okay ça c'est bon

juste cas de conscience, normalement le from = 0% et to 100%, mais tu peux essayer de les remplacer par 0% et 100% justement ?

j'ai jamais essayé de mélanger le from avec des percentage

meme si je vois pas trop de soucis on sait jamais

[wise cosmos]

Ca n'affecte pas, sur la doc de SASS cette règle est totalement acceptée

[gaunt yoke]

Okay

[wise cosmos]

Et avant j'avais mis en % en plus je crois

[gaunt yoke]

Donc ca vient pas de l'import non plus car meme en la mettant dans le meme fichier ca work pas c'est ça ?

[wise cosmos]

Yep

L'indent est bien respectée en plus :/

[gaunt yoke]

Et quand tu dis ca work pas, t'as une erreur console au build du projet ,

?*

ou ca run bien mais l'animation est pas appliqué

[wise cosmos]

Nope, mon compiler me dit rien

[wise cosmos]

Voilà

[gaunt yoke]

Okay et dans ton inspecteur ton élément contient bien la keyframe ?

[wise cosmos]

Elle est bien là

Petit screen de la doc

[gaunt yoke]

yes enfaite c'est plus sur le float percentage

normalement on peut et c'est meme par default en css 2 ou 3 digits

Mais à voir si la il est bien accepté ou non car en vrai l'animation est bien crée, bien appelé et bien importé

Donc c'est que c'est vraiment la keyframe elle même qui plante

pareille pour etre sur vire peut etre tout les nombres a virgule, juste laisser l'entier et voir

[wise cosmos]

Okay, j'ai essayé avec une petite animation

[gaunt yoke]

histoire d'etre sur

[wise cosmos]

Elle fonctionne

Ca se trouve c'est mon animation qui est éclatée

[gaunt yoke]

Oui possible aussi qu'elle soit juste pas bonne, t'as pas essayé les matrix3d a la main avant ?

[wise cosmos]

@keyframes anima
0%
color: blue
100%
color: blue

[gaunt yoke]

voir si ca fait des changements quand tu les set en dur deja

[wise cosmos]

Pourtant l'indentation est respectée comme celle d'avant

Je vais tester de le faire à la main

[gaunt yoke]

Yes test en 2/3

voir si tu as bien un changement visuel qui apparait

Et si tu veux être fixer

@keyframes anima
    0%
        color: blue
    5.5%
        color: yellow
    27.9%
        color: green
    100%
        color: blue

voir si les . passent en clé d'animation

[wise cosmos]

Sur mon a ça fonctionne pas, mais sur mon h1 ça fonctionne wtf

[gaunt yoke]

l'animation bounce ?

[wise cosmos]

yep

[gaunt yoke]

ils sont pas du style différent ?

car de base a part le block et inline y a rien de différent

[wise cosmos]

Hum je viens de voir

Wait

C'est bien quand je le fais sur mes a ça fonctionne pas

Mais sur mon ul ça fonctionne impec

Bizarre

Pourtant mes a n'ont pas de display différent

[gaunt yoke]

bah le ul est block comme le h1

essaye de display: block ton a pour tester ? 🤔

si tu me dis qu'il y a 0 style c'est une des seules différentes apparentes

[wise cosmos]

Ahah bien vu

Ils devaient être en flex comme le parent

[gaunt yoke]

Ouais en gros ca marche pas sur les inline

mais pas tous, typiquement les img, canvas ca work

trop bizarre

[wise cosmos]

C'est très spécial

Mais au moins ça fonctionne maintenant

Merci beaucoup

Je me trouvais con à bloquer sur des keyframes

[gaunt yoke]

je te rassure y a pas l'air d'avoir d'explication fournis là dessus, pas officiellement en tout cas

[mighty pond]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Minecraft Mais | Accueil>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/accueil.css">
    </head>
    <body>
        <header>
            <img class="logo" src="img/Logo.png" alt="logo">
            <nav>
                <ul class="nav__lnks">
                    <li>
                        <a href="C:\Users\natha\Desktop\Projets\Minecraft Mais\news.html">
                            Accueil
                        </a>
                        <a href="C:\Users\natha\Desktop\Projets\Minecraft Mais\news.html">
                            Discord
                        </a>
                        <a href="C:\Users\natha\Desktop\Projets\Minecraft Mais\news.html">
                            Nouveautés
                        </a>
                    </li>
                </ul>
            </nav>
        </header>
    </body>
</html>

ça output rien

[half obsidian]

C'est à dire ?

[patent solstice]

Parce que tu as mal fermé une balise

<title>Minecraft Mais | Accueil>

Ferme <title> et t'auras un output 😇

[mighty pond]

oui je viens de remarquer

[ivory spear]

Salut salut

Je vien d'apprendre un peu les bases du CSS et du html je sais coder des sites assez simple et j'aimerai savoir où m'orienter pour la suite , merci d'avance

[patent solstice]

Salut !

Ca dépend, quels sont tes objectifs ?

[ivory spear]

Pouvoir progresser dans le développement Web car j'aimerai en faire mon futur métier

[patent solstice]

Si tu es à l'aise avec le HTML et le CSS, tu peux commencer à te pencher un peu sur le javascript

Indispensable dans le dev web aujourd'hui

Si tu veux, t'as le site CodeAcademy qui te permet d'apprendre le javascript tout en pratiquant avec des exos

Très bien fait

[ivory spear]

Merci

Moi j'ai commencé avec openclassroom

[patent solstice]

Openclassroom aussi c'est bien pour avoir les bases

Mais le mieux reste de pratiquer aussi à côté 😇

[ivory spear]

Mais je me demande si il y a des sites pour du css et html plus avancé

Et oui j'essaye même si le css est un peu compliqué par moment 🙃

[patent solstice]

Dans ce cas là, je te conseille CodeAcademy pour ma part, tu vas pouvoir bien t'entrainer !

[ivory spear]

Merci je vais essayer ça :)

Je pense apprendre le html en plus avancé et ensuite partir sur du Javascript

[gaunt yoke]

Codecademy pour du plus avancé ? 🤔 soit ça a drastiquement changé, soit j'appellerai pas ça du avancé

[ivory spear]

Comment ça ?

[gaunt yoke]

Ah oui bordel le site a complètement changé déjà

[patent solstice]

Il a déjà un peu de mal avec du CSS, donc autant pas partir sur du avancé pour le moment

[gaunt yoke]

C'est juste Oursyx que a mon ""époque"" ou j'apprenais sur Codecademy c'était vraiment que les bases des bases

Donc ca a du changer, autant pour moi

[patent solstice]

Oui ça a beaucoup changé depuis, je confirme

[gaunt yoke]

c'est dingue bordel, y a plus rien d'avant, gros glow up

[ivory spear]

Après moi j'ai pas beaucoup d'expérience encore

Mais j'ai les bases

[gaunt yoke]

yes yes no soucis là dessus, c'est juste que vraiment avant codecademy s'arrêtait au base justement, si c'est plus le cas, lets go dessus et bonne progession 💪

[ivory spear]

Merci ✌🏻

[void anvil]

Salut ! la propriété backdrop-filter marche toujours ?

[quartz thunder]

Salut oui pourquoi

[void anvil]

Je crois qu'elle ne fonctionne pas de mon coté

Mon éditeur m'affiche ça

texte en blanc, j'imagine que ça ne l'interprète pas

[quartz thunder]

Quel navigateur?

ah oui

euh je sais pas pk il te le met en blanc mais du coup si tu le vois pas t'es sur quel navigateur?

[void anvil]

opera GX

Comme le texte est en blanc, je me suis dit que le pb vient directement de la propriété

[quartz thunder]

ah bah normalement c'est supporté donc jsp

backdrop-filter: blur(2px);
background: rgba(255, 255, 255, 0.5);

ça marche très bien perso

ouvre l'inspecteur et regarde ce que ça te met dans le style à droite

[void anvil]

Ile me le met bien

bon, ça marche quand meme, merci quand meme x)

[deft orchid]

qui maitrise bien l'html et le css ?

[patent solstice]

Pose ta question 😇

[void anvil]

Pose ta question ici, quelqu’un te répondra 😜

[ancient crag]

Yo, comment je pourrais mettre une police d'écriture sur la base d'un site

[patent solstice]

Faut que tu utilises la propriété CSS font-family

=> https://developer.mozilla.org/fr/docs/Web/CSS/font-family

[ancient crag]

Ya un wiki css ou htlm ?

Merci

[patent solstice]

Le mieux c'est toujours d'en mettre plusieurs

[ancient crag]

Ok merci 🙂

[void anvil]

Salut ! Vous savez comment je peux écrire du code HTML directement sur une page web ? Du genre écrire <h1> sans que mon éditeur interprète cela comme une balise, mais comme un texte à écrire ?

[gaunt yoke]

<code></code> par exemple

[void anvil]

ok mrc

Y'a pas une technique avec des slash ou antislash ?

[patent solstice]

Ça c'est pour échapper les caractères

Pas pour échapper des balises

[void anvil]

Je viens de tester et la balise code marche pas ?

J'ai fais <code><h1></code>

[gaunt yoke]

Sorry essaye <pre></pre>

[void anvil]

Marche pas non plus

[quartz thunder]

Remplace tes < par < et tes > par >

[patent solstice]

Tu peux utiliser les entités :

https://www.w3schools.com/HTML/html_entities.asp

[void anvil]

ok merci

[neon temple]

Yo je viens ici pour savoir si quelqu'un sais comment mettre les Loading Screen compatible avec Awesomium de Gmod sans passer par Chromium car j'ai vu que des serveurs on un loading screen fonctionnel, j'utilise SleekLoad2 en ce moment et je suis sur un VPS.

[opaque charm]

Je travaille avec https://animate.style/ et enfaite j'aimerai que des que la personne quand elle scroll et que elle atterit sur une div, bah ca declanche l'animation

[chrome copper]

@opaque charm c'est avec du js que tu fait ça je crois

[opaque charm]

Oui

Mais ça touche au html et css @chrome copper

puisque les transitions sont en css

[chrome copper]

Quelque tu veux faire en gros

[opaque charm]

En gros

J'ai des images

en bas de mon site

Je scroll

Et je veux que ces images, bah elles remontent vers le haut quand je les traverse (quand je descends et que je passe sur la div)

Je t'avoue il est 00h30 j'ai éteins mon pc, ya moyen de voir ça demain matin ? @chrome copper

[chrome copper]

Moi je suis dans mon lit alors est demain je travaille avec des personne pour des map mais oui je peux je parce @opaque charm

Comme ça j'arrive pas à voir ce que tu veux faire

[opaque charm]

Bah juste que mon pc est éteint et que moi aussi je suis au lit