html-css

[void anvil]

Le js se charge pas non plus

[robust obsidian]

hello avec du code c mieux

(ce n'est pas forcement moi qui vais te répondre car je dois aller dormir, je me réveille tôt demain donc)

[void anvil]

Pas compris

[void anvil]

Ok

[robust obsidian]

envoie ton code mdr

[void anvil]

Ah oui mais lequel home.html?

[robust obsidian]

la ou la page ne s'affiche pas corectement si c'est sur home alors envoie home

[void anvil]

Sur toutes le pages…

[robust obsidian]

il est publier ton site ??

[void anvil]

J’envoie server.js avec alors?

[void anvil]

Oui

[robust obsidian]

envoie le lien je regarde demain

[void anvil]

Ok

https://deldevcode.org

[robust obsidian]

ok a demain si pas de reponse de qqun d'autre

[void anvil]

À demain

[void anvil]

Maintenant home ça va mais pas les autres

[void anvil]

Après quelques modif ca marche plus

probleme réglé j'ai fais que des erreurs bete

[robust obsidian]

ok super 👍

[hearty quail]

Bonjour, quelqu'un serai comment enlever l'effet blanc a chaque fois qu'on change de page sur le site parce que j'ai l'impression qu'on me jette une flash en meme temps mdr..

[robust obsidian]

ton navigateur en theme noir ou en utilisant PHP pour faire un loader

[dull dome]

C'est un site web statique ou dynamic ?

[dusky sonnet]

salut j'ai essayer plusieurs mais je n'arrive pas à avoir ce resultat en html css

resultat que j'ai

et le resultat que je veux

[dull dome]

utilise un display flex qui contient le texte est l'icon pour chaque element

[dull dome]

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[dusky sonnet]

Merci, ça a marché

[hard wyvern]

Bonjour à tous, j'espère vous allez bien ! Je reviens demander de l'aide sur du CSS, en gros je pense être sur la bonne voie mais j'ai l'impression qu'il me manque un truc.
Je suis en train de faire un Footer et j'essaye de faire en sorte d'aligner les éléments.
Je veux reproduire ceci :

Et pour l'instant je suis arrivé à faire que ceci ( je me concentre sur la partie en marron clair et pour le choix des couleurs je verrais après c'est juste pour voir si ça marche bien ) :

Mon Code :

[languid pasture]

Alors pour faire c'est simple il vas falloir fais des display flex contenant des 3 élément donc en gros par exemple t'aura ton footer container qui sera la parent

Et ensuite t'aura ta partie droit millieu et gauche dans des div et tu mettre et justice content Space aroud ou between celon se que tu veux tu tes les 2 et voilà

[languid pasture]

Et pour faire les barres je te conseiller de mettre 2 after en absolute et ensuite tu créer un traie que tu vas rotate pour le mettre droit voilà bg

[hard wyvern]

Merci pour tes explications, en vrai tu aurais du temps pour bien m'expliquer en vocal ? Sinon merci beaucoup 😉
Dans l'idée mon HTML va ressembler à ca dans les grandes lignes ?

[true schooner]

slt pour un petit projet je récupère les abo d'une chaine YT, mais je voudrais avoir un affichage animé comme l'exemple ci-dessous
https://codepen.io/chriscoyier/pen/NWNJpdJ

le problème c'est que l'exemple est en css et je voudrais pourvoir une animation en js qui s'incrémente avec les abo récup sans le hover

je sais pas si c'est clair mais merci quand meme d'avance

déso mauvais channel

[sly abyss]

hey, est ce qu'il y aurait quelqun qui sait comment est ce que je peut faire l'espece d'ombre bleue avec tailwind?

[brave jay]

Salut ! Tu mets un cercle en absolute avec un blur 🙂

[sly abyss]

okay je vais essayer de faire sa merci 👍

c'est good merci bg

[void anvil]

dr bg

[formal edge]

Hey quelqu'un saurais me dire quand je fais un linear gradient sur mon body ca me fais ca ?

[ashen falcon]

html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}

[void anvil]

Et mais c’est quoi ce hasard?! On a la mm pp et le même « style » de pseudo

[void anvil]

moi je dis que c'est ton jumeaux/âme sœur donc fonce mek

Wow tu crois

Nan c’est pas possible il mort à la naissance

[void anvil]

mais n'a tqt

[storm violet]

Ça veut dire que c’est pas une original hehe

[dusky sonnet]

salut, j'aurais besoin d'aide pour mettre le bouton dans mon input mais j'arrive pas à trouver la solution

le résultat que je veux

ce que moi j'ai

[formal edge]

et bien oui très belle pp en tout cas xD

[storm violet]

Met le bouton dans la même div et enlève le shadow

Div input button

Au lieu de div input div button

[dusky sonnet]

ca marche tjr pas

[storm violet]

Met ton Button en absolute ?

[brave jay]

En gros ton input doit ne pas avoir de background ni de border, et c’est ta div parent qui aura la background et le border

[dusky sonnet]

mdrrr il disparait quand je le met en absolute

[dusky sonnet]

je vais essayer

[storm violet]

Snox sauras mieux t’aider que moi j’ai pas l’ordi devant moi

[dusky sonnet]

merci de l'aide en tout cas

[dusky sonnet]

en gros je dois pas avoir de border ni de background dans le .input-email input

[brave jay]

C’est ça, le border tu le met dans input-email

[storm violet]

Border sur ta div et le bg que sur input email button

[dusky sonnet]

merci pour votre aide

[storm violet]

Ça a marcher ?

[dusky sonnet]

oui merci

[void anvil]

J'ai fait un truc qui dis un max d'informations sur vous je peux encore l'améliorer

[void anvil]

• Séparer en plusieurs fonctions
• Faire un affichage plus propre pour les données affichés

[storm violet]

Je peut pas voir je suis sur tel

Tu peut réaliser ou demander à réaliser une maquette de design

A un web designer

[formal edge]

mais c'est payant nan ?

[storm violet]

Bah si tu en trouve un gratuit

#poster-une-recherche

[formal edge]

merci

[languid pasture]

Non pas besoin de payer ou même de faire cette demande si tu veux des idées tu peux aller sur behance et marqué Front-End et tu auras une multidude de site deja fait qui sera inspirant

tu peux même aller sur youtube et chercher des DEV qui font des challenges et tu essaye de recopier le site finale voila voila

[void anvil]

Moi si tu veux je fais gratuitement

[rocky thistle]

Estce quel que me aider a creater sa?/ can someone help me make something like this please.

[void anvil]

tu veux qu'on te le fasse ?

[rocky thistle]

Nah uh

Ces tro dificli3 pour moi

[tame forge]

Le français aussi apparemment

Tu peux lire le salon #poster-une-recherche si tu souhaites que quelqu’un le fasse à ta place

[void anvil]

Fait gaffe y’a un faute d’orthographe dans ton bouton subscribe

[brave jay]

<style>
            body {
                font-family: "Roboto", sans-serif;
                max-width: 1200px;
                margin: 20px auto;
                padding: 20px;
                background-color: #f7f7f7;
                color: #333;
                line-height: 1.6;
            }

            h1 {
                font-size: 2rem;
                color: #2c3e50;
                margin-bottom: 20px;
                text-align: center;
            }

            h2 {
                font-size: 1.5rem;
                color: #3498db;
                margin-bottom: 10px;
                border-bottom: 2px solid #3498db;
                padding-bottom: 5px;
            }

            button {
                display: block;
                width: 100%;
                max-width: 300px;
                margin: 20px auto;
                padding: 15px;
                background-color: #3498db;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 18px;
                transition: background-color 0.3s;
            }

            button:hover {
                background-color: #2980b9;
            }

            #output {
                background-color: #fff;
                padding: 20px;
                margin-top: 20px;
                border: 1px solid #ddd;
                border-radius: 5px;
            }

            .creator {
                font-style: italic;
                text-align: right;
                margin-top: 20px;
                color: #7f8c8d;
            }

            .data-section {
                margin-bottom: 20px;
                padding: 15px;
                background-color: #ecf0f1;
                border-radius: 5px;
            }

            .data-item {
                display: flex;
                justify-content: space-between;
                padding: 5px 0;
                border-bottom: 1px solid #ccc;
            }

            .data-label {
                font-weight: bold;
                color: #2c3e50;
            }

            .data-value {
                margin-left: 10px;
                color: #34495e;
            }

            #loading {
                display: none;
                text-align: center;
                font-size: 1.2rem;
                color: #3498db;
                margin-top: 20px;
            }

            #loading img {
                display: block;
                margin: 0 auto;
                width: 50px;
                height: 50px;
            }
        </style>```

C'est cadeau

[storm violet]

Snox meilleur assistant

[void anvil]

Ok merci

[zinc frigate]

Non mais je crois il est anglais à la base

Il a personal discord dans sa bio

Et les « Nah uh » ça fait un peu anglais je trouve

[storm violet]

il est bien anglophone XD

[void anvil]

Do you speak English?

[tame forge]

Yes

[void anvil]

Ah ok I thought you spoke French

[tame forge]

Ouais mais quand même, placer un 3 dans un mot faut le faire

[tame forge]

I’m French but I speak english too 😉

[storm violet]

its a fr channel we don't speak english here guys

[void anvil]

Ah ok

[zinc frigate]

Oui mais ca se trouve il se rappelle plus de l'orthographe

apres il aurait pu faire google translate

mais moi par exemple comme je suis en qwerty, j'ai pas les accents donc on a l'impression je sais pas ecrire

[open saffron]

Salut à tous.
Cela touche aux 2 domaines donc je ne sais pas trop où poster cela mais j'ai besoin d'aide à propos de l'installation de la boutique intégrée à GMod "Prometheus" svp.
J'ai installé mon serveur GMod sur VPS, ainsi qu'un petit site hébergé sur la même machine dans lequel j'ai glissé Prometheus. Or je rencontre un souci lors de la connexion à la DB avec localhost. Voici l'erreur :

[Prometheus repeated error of 20:33:41 - 19/08/2024] DB Connection failed! Error msg: Can't connect to local server through socket '/tmp/mysql.sock' (2)

Malgré mes nombreuses tentatives l'erreur revient toujours. Quelqu'un aurait une idée ?
Merci à vous.

[hard wyvern]

Bonjour à tous,

J'ai un soucis concernant une image que je veux rendre interactive en mettant des boutons cliquables qui permettent d'affiche un bloc de texte.
J'ai réussi à trouver un code simple d'utilisation et j'ai appliqués les changements nécessaires et d'abord je le teste dans un projet à part mais quand je veux l'intégrer dans mon site tout est décalé

Je met en pièce le code de base si quelqu'un peut m'aider à comprendre pourquoi ce serait cool 😉

[drowsy cobalt]

salut j'ai besoins de toi, j'ai un probleme sa fait 1h je suis dessus sa m'enerve

je débute en html

et je voudrais vous demandez comment on cadre bien les photo dans le carousel ?

car ci dessus on voit bien que la photos est mal placé

[bleak tartan]

Yo explique directement ton problème ici afin que la communauté puisse t'aider ^^

[drowsy cobalt]

        <div class="movie-grid">
            <a href="pages/the-mandalorian.html" class="movie-card">
                <img src="https://th.bing.com/th/id/R.a4b35d44b2b0b69a34bc237c8e92e14c?rik=%2fLW9z%2fdtmQv6hA&pid=ImgRaw&r=0" alt="The Mandalorian">
                <h4>The Mandalorian</h4>
            </a>

j'ai ce code la, mais il m'amène a sa http://127.0.0.1:5500/pages/pages/the-mandalorian.html il me rajoute pages/pages/the-mandalorian.html comment je peux faire je comprend pas ?

[drowsy cobalt]

@bleak tartan je les mis jsute au dessus

[brave jay]

            <a href="/the-mandalorian.html" class="movie-card">
                <img src="https://th.bing.com/th/id/R.a4b35d44b2b0b69a34bc237c8e92e14c?rik=%2fLW9z%2fdtmQv6hA&pid=ImgRaw&r=0" alt="The Mandalorian">
                <h4>The Mandalorian</h4>
            </a>```

[void anvil]

Qui peut me donner idée pour faire un truc on html CSS et JavaScript

[brave jay]

fait un tamagotchi

[void anvil]

Asie

[void anvil]

Juste dis moi c'est qu'elle jore de tamagotchi jore une version personnel pour toi

[dusky sonnet]

salut j'aimerais savoir pourquoi le bouton ce positionne comme ca

le resultat que je veux

[last cedar]

tu peut vocal pour voir ?

[dusky sonnet]

oui

[solid hull]

Pourquoi le résultat

ne ressemble pas à ça

?

[ashen falcon]

Met un display: flex; sur ton resgister-link

[calm void]

Hello, petite question sur mon formulaire de login, j'ai mis en required chaque input avec leur type mais j'ai un utilisateur qui a réussi à s'inscrire en mettant un 1 à la place du mail est-ce que quelqu'un aurait une explication à cela ?

[errant cypress]

Hello, required check si ton input est pas vide, pour check ça tu mets type="email", là avec ça (le required et le type email) checkera si ton input est pas vide et si il a la forme d'un email ex : [e-mail]

[opaque thorn]

J ai une question c est quoi ton thème ?

Et tu es sur vs ?

[calm void]

C'est ce que j'ai fait c'est pour sa que je comprends pas comment la personne a fait

[brave jay]

Tu peux changer le html sur chrome et donc bypass ces check. C’est pour ça qu’il faut tout Check côté back

[calm void]

Ah ok, je vois je ferais la modification alors merci !

[true schooner]

slt, j'ai un ptit problème avec mon site NextJS et tailwind css, j'arrive pas a centrer des élément (screen a l'appuis), je voudrai centrer le text par rapport au svg a droite

*ping me pls

[true schooner]

Problème réglé

[languid solstice]

Display flex

Align item center

[unreal sparrow]

Bonjour, (j'espère ne pas me tromper de salon 😅) alors voila. Je suis en train de créer une plateforme de cours (pour étudiant), et j'aimerais utiliser un svg pour remplir un bloc (cela représenterait le taux de réussite de l'utilisateur sur cette fiche de révision). Donc j'ai bien le svg, j'ai bien le pourcentage de réussite, mais par contre impossible de trouver comment augmenter la hauteur d'un svg...

Voila mon code (ci joint)

Et le peux de css appartenant à ma wave :

    .progress-wave {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px; /* Largeur fixe de la vague */
        height: 150px;
        overflow: hidden;
        position: absolute;
        bottom: 0;
    }```

Merci d'avance !

[robust obsidian]

un svg n'est pas une image donc elle s'ajuste automatiquement, c'est à dire que si tu mets la longueur à 300px, la hauteur va être proportionnel à la longueur.

[unreal sparrow]

Yep, malheureusement ce n'est pas le cas. Mon bloc .progress-wave prend bien la hauteur voulu, mais le svg ne fait pas cette hauteur (or c'est ce que je voudrais)

Le .progress-wave ce n'est que le bloc parent de mon svg (ce n'est pas mon svg)

[twilit fox]

vous avez des conseil à me donner ?

[unreal sparrow]

C'est plutôt jolie, niveau couleur j'aime bien, même si je trouve cela peut-être un peu vide. Mais sinon vraiment pas mal ! Bravo

[twilit fox]

je débute en CSS merci x) bah en vrai ouais j'aimerais bien mettre un logo en haut à droite sinon je sais pas trop, peut-être remplis le footer

[unreal sparrow]

Ahh bah c'est vraiment pas mal pour un début, après je parlais plus sur le remplissage du main (Le user Lookup et le form fait un peux vide tout seul)

[twilit fox]

j'ai mis le boutton de connexion

[twilit fox]

@eternal stag excuse moi bg mais toi t'aurais améliorer quoi au niveau du formulaire ?

désolé pour le ping mais j'ai vu un peu ton talent en UI

[eternal stag]

Hello! Mon talent en Ul carrément ahah
Je ne suis pas le meilleur hein :)
Mais ps de soucis, hésites pas à passer en private si tu veux, pour m'expliquer un peu ton projet etc parce que j'ai pas trop suivi ducoup
^^

[river obsidian]

Salut vous avez pas des idees de site a faire pour s'entrainer ?

[storm folio]

https://godly.website/
https://httpster.net/
https://www.webdesign-inspiration.com/
https://dribbble.com/shots/popular/web-design

[shrewd ledge]

Hello vs aurez des cours pr niveau intermédiaire en css et html ?

[sour badger]

Si tu un bon niveau en anglais je te conseil codeacademy

[shrewd ledge]

Mais c'est payant nan n

[sour badger]

Moi j’ai fait la version gratuite pour la formation de sql c pas mal franchement

[shrewd ledge]

Mais ca va jsqua un niveau avance ou pas ?

[sour badger]

Je crois oui

[shrewd ledge]

Pour l'instant je suis sur youtube avec une serie de video

[storm folio]

Codecademy c'est bien et sinon openclassroom après le dev web c'est surtout de la pratique qu'il faut

[shrewd ledge]

Et ta des sites pour t'entraîner avc des exemples ?

[storm folio]

hum

t'essaye d'en recréer

[dusty onyx]

il y a W3 school aussi

[storm folio]

Oui mais bon l'interface d'apprentissage est pas top..

[robust obsidian]

https://fr.w3docs.com/ C'est un peu mieux

@shrewd ledge

[viscid copper]

Deja ton header doit etre dans ton body

tu devrais avoir quelque chose comme ca

<!DOCTYPE html>
<html>
  <head>
    <title>Time Web</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <header>
      <p>Time Web</p>
    </header>
    <p>Heure en temps réel :</p>
    <div id="clock">00:00:00.00</div>
    <p>UTC +01:00 (heure francaise)</p>
  </body>
  <script src="script.js"></script>
</html>

[viscid copper]

de rien si tu as des questions n hesite pas

[rose basin]

bonjour ya til possibilité de maider sur un problème je suis actuellement en train de dv une animation en css pour une quête mais je dois faire en sorte que l'animation se passe quand je mes ma souris dessu siune personne pourai maider ou mexpliquer en voc

[dusky sonnet]

salut quelqu'un m'expliquer comment faire ça ?

le gradient

[robust obsidian]

bonjour alors tout d'abord essayez un peu de chercher sur google ça éviterait ces questions parce que c'est très simple de trouver un tuto. Surtout ne le prenez pas mal mais il faut d'abord chercher avant de poser des questions.

[dusky sonnet]

je suis completement d'accord avec toi, j'ai chercher mais j'ai pas trouvé

[robust obsidian]

linear gradient sur mdn

t'as toute la documentation

[dusky sonnet]

merci

[wooden mountain]

Salut à tous je suis entrain de réaliser un site mais je comprend pas quelque choses je sais qui faut un API mais comment faire bonne questions entre les dernier ajout et les utilisateur qui on mis en vente et sur le site vitrine aussi

[robust obsidian]

Tu utilise quoi comme autre langage de programmation que le html et le CSS

[wooden mountain]

java

[robust obsidian]

#javascript-typescript

[quasi cave]

Java n'est pas javascript j'imagine que c'est plutôt https://discord.com/channels/223070469148901376/781299002695483442 que tu voulais link

[storm folio]

Je pense que en disant Java il parlais de Javascript, je vois mal quelqu'un qui fait le back de son site en Java demander quelque chose comme ça ,bien que pas impossible 🤣

[quasi cave]

C’est vrai peut etre un raccourci de langage mais mauvaise habitude je faisais la même au début

[steep stratus]

@austere lark J'avoue qu'il me laisse perplexe, c'est autorisé ça ? ^

[void anvil]

Maël.. t'es partout

[steep stratus]

Oui

[void anvil]

J'ai compris pour quoi

https://i.imgur.com/EQtLOnw.png

[steep stratus]

[brave jay]

allez c'est parceque je vous aimes bien ! :). https://codingfantasy.com/games/flexboxadventure/play

[sour badger]

Wow

Ça a l’air bien en regardant l’aperçu du lien

[ancient jackal]

Hello j'aurais une question a propos de tailwind CSS

[void anvil]

oui

[void anvil]

Par rapport a quoi pour taildwindcss

[ancient jackal]

en gros j'ai ça: flex-col md:flex md:flex-row justify-around items-center

sauf que quand je mets le navigateur en mode phone, donc pour vérifier le responsive, ça reste en flex-direction:row;

[void anvil]

essaie avec ça
flex flex-col md:flex-row justify-around items-center

[ancient jackal]

nan aucun effet

[void anvil]

Apres tu n'a pas sm

flex flex-col sm:flex-col md:flex-row justify-around items-center

[ancient jackal]

j'ai deja essayer non plus

[void anvil]

Envoie juste ta nav

[ancient jackal]

<footer class="py-10 flex justify-center">
            <div class="container">
                <div class="flex flex-col sm:flex-col md:flex-row justify-around items-center">
                    <div class="col-auto mb-4 md:mb-0">
                        <img src="{{ asset('img/logo.png') }}" alt="Logo de NexHost">
                    </div>
                    <div class="col-auto flex flex-wrap justify-center md:justify-start items-center">
                        <div class="m-5">
                            <a href="https://twitter.com/NexHostFR" target="_blank"><img src="{{ asset('img/twitter.png') }}" alt="Twitter"></a>
                        </div>
                        <div class="m-5">
                            <a href="https://www.facebook.com/NexHostFR" target="_blank"><img src="{{ asset('img/facebook.png') }}" alt="Facebook"></a>
                        </div>
                        <div class="m-5">
                            <a href="https://www.linkedin.com/company/nexhost" target="_blank"><img src="{{ asset('img/linkedin.png') }}" alt="LinkedIn"></a>
                        </div>
                        <div class="m-5">
                            <a href="https://www.instagram.com/nexhostfr/" target="_blank"><img src="{{ asset('img/instagram.png') }}" alt="Instagram"></a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

[void anvil]

<footer class="py-10 flex justify-center">
    <div class="container">
        <div class="flex flex-col sm:flex-col md:flex-row justify-around items-center">
            <div class="col-auto mb-4 md:mb-0">
                <img src="{{ asset('img/logo.png') }}" alt="Logo de NexHost">
            </div>
            <div class="col-auto flex flex-col sm:flex-row md:flex-row justify-center md:justify-start items-center">
                <div class="m-5">
                    <a href="https://twitter.com/NexHostFR" target="_blank"><img src="{{ asset('img/twitter.png') }}" alt="Twitter"></a>
                </div>
                <div class="m-5">
                    <a href="https://www.facebook.com/NexHostFR" target="_blank"><img src="{{ asset('img/facebook.png') }}" alt="Facebook"></a>
                </div>
                <div class="m-5">
                    <a href="https://www.linkedin.com/company/nexhost" target="_blank"><img src="{{ asset('img/linkedin.png') }}" alt="LinkedIn"></a>
                </div>
                <div class="m-5">
                    <a href="https://www.instagram.com/nexhostfr/" target="_blank"><img src="{{ asset('img/instagram.png') }}" alt="Instagram"></a>
                </div>
            </div>
        </div>
    </div>
</footer>

[ancient jackal]

bah d'accord merci

je vais chercher de mon cote, merci beaucoup

[void anvil]

Je viens de t'envoyez le fix mdr

Prend le code que je t'es donner et sa fixera, c'est pas le meme que tu m'a donner xD

[ancient jackal]

je pense j'ai un problème avec mon nav

[void anvil]

Tu a bien repris tt monde code ?

Parce que j'ai changer t'es div

[ancient jackal]

yep

[void anvil]

et rafraichi ta page avec ctrl f5

[ancient jackal]

Je pense j'ai un problème avec mon nav

Mais merci quand même au moins je sais que sa viens de mon cote

[void anvil]

Apres tu regarde sur quoi ?

Quand tu veux voir t'es breakpont tu fais commennt ?

[ancient jackal]

chrome et edge

je passe par le devtool

[void anvil]

A réduire ? ou a sélectionner format mobile ?

[ancient jackal]

par la barre d'apparail de chrome et d'edge

[void anvil]

oki c'est bon

[ancient jackal]

nan tkt pas je vais chercher moi demain a tête reposer

[brave jay]

100% ton css ne ce met pas a jour

[ancient jackal]

si j'ai deja vérife ça, il se mets a jour, c'est le js qui se le mets a jour

je viens de pull sur une autre machine, de npm run dev

et aucun changement

[ancient jackal]

voila ce que j'ai en gros

[pearl spear]

Bonjour, excusez moi j'ai un problème

Ma copine configure un site pour son portfolio

Le problème étant que une fois le site lancer, la page est trop zoomer par défaut

Pouvez-vous m'aider s'il vous plaît

[void anvil]

Comment ça trop zoomer par default ?

[void anvil]

Tu es bien sûr que tu a récupéré l'intégralité de ce que je t'avais donner hier ?

[void anvil]

On es d'accord que c'est le site qui es trop zoomer et pas ton navigateur ? On sait jamais xD
Sinon envoie ton head

[pearl spear]

Je suis entrain d'essayer un truc avec cette commande

html {
zoom: 0.8;
}

[void anvil]

Alors non on vas éviter les méthodes a la rash xD

Dans le head ta Meta view port

Tu peux la montrer ?

[pearl spear]

Je crois sa marche avec la commande

Genre la c bon

Mais il faut pas faire ça ?

[void anvil]

Non absolument pas

[pearl spear]

Pk (par curiosité)

[void anvil]

Parce que si quelqu'un arrive avec un autre écran bah c'est pas pareil

[pearl spear]

Ah oki

[void anvil]

Tu a ta résolution, mais c'est pas forcément la résolu des autres

[void anvil]

Donc pour toi oui il s'affiche peut être correctement, mais pour un autre sa sera trop petit

[pearl spear]

Okiiii merci !!

[void anvil]

Dans ta balise head

Rajoute

<meta name="viewport" content="width=device-width, initial-scale=1.0">

[pearl spear]

Balise head? (Oui j'y connais pas grand chose)

[void anvil]

Là où y'a la balise <title> tous en haut

Du fichier html

[pearl spear]

Ah la où ta height et tout

[void anvil]

Non

La

Juste en dessous de <title>Accueil</title>

[pearl spear]

Ah désolé je toucher le mauvais ficher TwT

Comme ça?

[robust obsidian]

ui

[pearl spear]

Okii

Toujours le problème TwT

Genre c toujours zoomer

[void anvil]

non tu a fais faute de frape ^^

[pearl spear]

TwT dure les nuit blanche pour moi mdrr

[void anvil]

Tu a écrit
content="widht=device-widh"

je t'es donner
content="width=device-width, initial-scale=1.0">

[pearl spear]

Désolé

[void anvil]

copie colle

ça évite les erreur ^^

[pearl spear]

Merci infiniment

[void anvil]

C'(est good du coups ?

[pearl spear]

Viiii!!!

Merci infiniment

[void anvil]

np

[ancient jackal]

oui totalement

<footer class="py-10 flex justify-center">
            <div class="container">
                <div class="flex flex-col sm:flex-col md:flex-row justify-around items-center">
                    <div class="col-auto mb-4 md:mb-0">
                        <img src="{{ asset('img/logo.png') }}" alt="Logo de NexHost">
                    </div>
                    <div class="col-auto flex flex-col sm:flex-row md:flex-row justify-center md:justify-start items-center">
                        <div class="m-5">
                            <a href="https://twitter.com/NexHostFR" target="_blank"><img src="{{ asset('img/twitter.png') }}" alt="Twitter"></a>
                        </div>
                        <div class="m-5">
                            <a href="https://www.facebook.com/NexHostFR" target="_blank"><img src="{{ asset('img/facebook.png') }}" alt="Facebook"></a>
                        </div>
                        <div class="m-5">
                            <a href="https://www.linkedin.com/company/nexhost" target="_blank"><img src="{{ asset('img/linkedin.png') }}" alt="LinkedIn"></a>
                        </div>
                        <div class="m-5">
                            <a href="https://www.instagram.com/nexhostfr/" target="_blank"><img src="{{ asset('img/instagram.png') }}" alt="Instagram"></a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

[void anvil]

Tu a écrit du code CSS personnalisé pour footer ?

[ancient jackal]

Yep mais c’est celui que toi tu m’a donnée

La base je l’avais faite moi

[void anvil]

Je veux dire dans ton css, tu a ajouter d'autre propriéter hors taildwindcss

[ancient jackal]

Juste mon fond d’étoile

[void anvil]

Tu n'a pas forcer des width sur ton body ou autre ?

[tame knot]

hey folks , i have a question i wanna sent a post request and the headers have title paragraph ext and image the problem when i sent image idk how to handle it , so it doesn't sent correctly , my question is how to send image in a post request

[void anvil]

@tame knot

   <script>
        document.getElementById('uploadForm').addEventListener('submit', function(e) {
            e.preventDefault();

            let formData = new FormData();
            formData.append('title', document.getElementById('title').value);
            formData.append('paragraph', document.getElementById('paragraph').value);
            formData.append('image', document.getElementById('image').files[0]);

            fetch('https://api.example.com/endpoint', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                alert('Form submitted successfully!');
            })
            .catch((error) => {
                console.error('Error:', error);
                alert('An error occurred. Please try again.');
            });
        });
    </script>

use formadata

for bind aliases at entry

https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

[tame knot]

the app is in react

here is my code

 const handleSaveItem = async () => {
    if (editingItem) {
        const itemExists = items[activeSection].find((item) => item._id === editingItem._id);
        const endpointMap = {
            activities: `API`,
            articles: `API`,
            lostItems: `API`,
        };
        const endpoint = itemExists ? `${endpointMap[activeSection]}/${editingItem._id}` : endpointMap[activeSection];

        try {
            const formData = new FormData();
            for (const key in editingItem) {
                formData.append(key, editingItem[key]);
            }

            const response = await fetch(endpoint, {
                method: itemExists ? 'PATCH' : 'POST',
                body: formData
            });

            if (!response.ok) {
                throw new Error('Failed to save item');
            }

            const result = await response.json();
            console.log('Success:', result);

            if (itemExists) {
                handleUpdateItem(editingItem);
            } else {
                setItems((prev) => ({
                    ...prev,
                    [activeSection]: [...prev[activeSection], editingItem],
                }));
            }

            setEditingItem(null); 
        } catch (error) {
            console.error('Error:', error);
        }
    }
};

[ancient jackal]

nop

voici les seul paramètre que j'ai ajouter:

body {
    background: var(--bg-body);
    color: var(--text-body);
}

#stars, #stars2, #stars3 {
    position: fixed; /* Fixe les étoiles pour qu'elles ne bougent pas */
    top: 100%; /* Commence en bas de la page */
    left: 0;
    right: 0;
    bottom: 0; /* Prend toute la hauteur */
    background: transparent; /* Fond transparent */
    pointer-events: none; /* Ignore les événements de souris */
}
  
/* Animations des étoiles */
#stars {
    width: 1px;
    height: 1px;
    animation: animStar 70s linear infinite; /* Durée d'animation augmentée */
}
  
#stars2 {
    width: 2px;
    height: 2px;
    animation: animStar 120s linear infinite; /* Durée d'animation augmentée */
}
  
#stars3 {
    width: 3px;
    height: 3px;
    animation: animStar 150s linear infinite; /* Durée d'animation augmentée */
}
  
  /* Animation des étoiles */
@keyframes animStar {
    from {
        transform: translateY(0); /* Commence au bas */
    }
    to {
        transform: translateY(-200vh); /* Fait défiler sur toute la hauteur de la page */
    }
}

[calm void]

Hello, j'aimerais mettre mon texte il y a 41 min à droite, sauf que j'utilise les flexbox avec touts les texte est ce que quelqu'un aurait une solution fonctionnelle ?

<div class="box2">
                        <p class="title">Julie</p>
                        <p class="message">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex possimus nobis ullam sed vitae magnam?</p>
                        <p class="date">Il y a 41 min</p>
                    </div>```

[robust obsidian]

C'est quoi ton css ??

[calm void]

.card .box2{
display: flex;
flex-direction: column;
justify-content: space-around;
}

[robust obsidian]

Ajoute text-align: end; dans la class .date

[calm void]

ah ouiii merci !

[hallow forge]

est-ce qur vous connaissez des tutos sur ytb d'intégration svp

[steel torrent]

Regarde du côté de Graphikart 😉

[void anvil]

Grafikart*

[hard wyvern]

Bonjour tout le monde, je ne sais pas si c'est l'endroit pour demander, mais vous recommander quoi comme hébergeur web pour la création de projets fictifs ?

[void anvil]

Le.moins chère

[hard wyvern]

Ca va partir sur o2Switch alors merci bien !

[void anvil]

Je peux également te conseille ProjectHeberg.

Tu as une offre pas mal pour 1€/mois.
https://projectheberg.fr/liste-produits/8/

[hard wyvern]

Je vais voir je connais pas du tout merci !

[void anvil]

C'est tout nouveau.

[hard wyvern]

En plus au niveau des pris c'est vraiment pas cher et les retours sont bons ?

[void anvil]

Oui.

Tu peux également demander un VPS.

[hard wyvern]

Très bien merci en tout cas pour tes recommandations je vais continuer à chercher avant de bien me décider

[void anvil]

D'accod, merci. ^^

[tame forge]

Pas vraiment

J'utilisais leurs services en 2021

[void anvil]

Ah.

[void anvil]

Je suis ami avec le fondateur depuis max 1 ans.

[tame forge]

Et donc il a pas pu lancer le projet avant

Et y'avait eu une histoire de rachat ou chaipa quoi il me semble

[void anvil]

Racheter quoi ?

[tame forge]

ben la boite

[void anvil]

Ah, je pense qu'il avait créé de 0.

Merci pour cette information.

[olive heron]

C'est pas ouf du tout

[void anvil]

Il demande pas un hébergement incroyable, il recherche du basique pour faire son dev

[olive heron]

Ah okay sorry alors 😉

[gusty oyster]

Bonjour je suis débutant et j'aimerais de l'aide , comment mettre le logo a gauche du texte et que le texte soit plus centré au milieu du logo

[storm folio]

display: flex;
flex-direction: row-reverse;
align-items: center;

https://developer.mozilla.org/en-US/docs/Web/CSS/display
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

[eager veldt]

Hello

Quelqu'un a une idée d'une bonne couleur pour un fond d'une page web?

[steel torrent]

Noir, type #A9A9A9

[eager veldt]

Okep merci

[steel torrent]

Pas d'soucis !

[eager veldt]

T'a pas du noir un peu?

Je t'avoue le gris comme sa c'est pas foufou

[steel torrent]

Je vais voir

[steel torrent]

#1a181a
Essaie celui-là, c'est plus un noir onyx

[eager veldt]

Okep thank

Il est beaucoup mieux merci bcp

[small imp]

https://flatuicolors.com (#2f3640)
https://www.palettedecouleur.net

[frozen dove]

Hello, est-ce que vous connaissez des jeux faits en HTML, CSS et JavaScript en ligne (donc en version web), mais qui sont un peu poussés, dans le style de Super Mario ou encore Flappy Bird, s'il vous plaît ? C'est pour un projet a mon travail, on me demande de trouver une base pour ensuite tout personnaliser, etc.

[eager veldt]

thank :)

[steel torrent]

Hey, pour mes études, j'ai fait un Snake en TypeScript. Probablement qu'il est faisable en Java Script ?

Sache que oui, c'est possible de faire un Mario et un FB en JS (j'ai vu des personnes faire, mais j'suis pas assez calé en code pour ça)

[frozen dove]

Le problème c'est que la contrainte de mon employeur et que je doit récupérer une base html css javascript sur internet, j'ai pas le droit de tout faire de moi même sinon ce serait trop simple donc je dois chercher des modèles (je suis alternante)

[steel torrent]

Aaaaah

Tu as regardée sur Github ?

[frozen dove]

Oui 😭

mais il n'y a rien qui rentre dans les critères qu'on ma donné

j'ai même regardée sur codepen.io et tout mais r enfin bon c'est pas the site mais bref

[brave jay]

Pourtant tu as pleins de truc sur github … regarde kaboomjs ou rpgjs

[heavy dawn]

bonjours j'aurais une question je voudrait avoir une bordure comme celui la en css mais je sais pas c est quoi comme style de border si quelqu'un peut m'aider a trouver

[robust obsidian]

la bordure de quel obj ?

une bordure arrondie ?

[robust obsidian]

border-radius: 10px;

[pseudo sundial]

il y aun mario kart qui à été fait comme ca, regarde sur youtube : underscord il ocde un jeu mario kart sur un site web, quelque chose comme ca

Voici le lien, il fonctionne pas sur safarie, mais sur chrome c good : https://mario-kart-3-js.vercel.app

Sinon, regarde sur internet jeu en Three.js j'espere que ca va t'aider

[vivid cliff]

Oui possible avec JS

[frozen dove]

Merci, je regarderai ça demain

[frozen dove]

Merci j'y jeterai un coup d'oeil demain

[patent elm]

Bonsoir tlm qui peut m'aider pour une Navbar ?

[void anvil]

Oui ?

WTF pourquoi ça met un champignon 🤣🤣

[austere lark]

C'est @glacial aurora

[void anvil]

C'est quoi l'utilité ? 🤣

[austere lark]

C’est un mini jeu fun chaque saison que j’ai dev, jvais poster plus d’info dans la journée

[next wagon]

Faut nous donner plus d'infos si tu veux qu'on t'aide ! Peux-tu nous partager ton code et une description précise de ton problème ?

[void anvil]

okii

[gusty oyster]

Bonjour, j'aurais besoin d'aide.
Je débute dans le codage et j'aimerai bien quelques aides pour un petit projet que je fais. Résoudre 2/3 problèmes que j'ai.
Si celà est possible en vocale comme ça je peux montrer le code et poser mes questions en même temps

[austere lark]

@drifting lynx je te laisse une pause de 24h pour repenser à ton implication ici, sur un serveur d'entraide

[rancid void]

@eager veldt
Je rajoute juste https://www.radix-ui.com/colors et https://coolors.co
ils sont vraiment très cool !

[eager veldt]

Yes merci beaucoup mec!

[true schooner]

slt, comment je peux faire pour que mon responsive soit "fluide" genre comme un transition-duration ou un truc comme ça (et de doit pouvoir le mettre dans mon body)

[errant cypress]

de tête tu peux mettre une animation à ton body, une transition all 0.5 ease; suffit, puis il te faut les media-queries et c’est good

[brave jay]

Avec tailwindcss tu peux utiliser un truc qui s’appelle fluid

[true schooner]

Merci les gars j'essaye ce soir et jvous dit

[runic python]

@true schooner, Lartaxx a complètement raison.

Il suffit juste de mettre ta transition dans ton body, faire tes media queries après et puis gg

Si tu veux des animations plus complexes tu as les keyframes

[barren rover]

Salut tout le monde ! je viens de débuter le code et j'ai les bases de l'HTML, je vais pas tarder a passer aux bases du CSS mais d'abord je me demandais, j'ai vu les <form> pour interagir avec l'utilisateur mais je me demande par exemple si c'est mon site, ou est ce que je peux avoir accés aux informations rentrées ici ? Peut etre que ca concerne du back end et dans ce cas la j'attendrai de voir ca plus tard mais sinon je veux bien savoir comment ?

[runic python]

Salut ! Le formulaire que tu as vu avec HTML est juste la partie visible (le front-end). Pour accéder aux informations saisies et les traiter, tu as besoin d’une partie back-end qui s’occupera de récupérer ces données et de faire quelque chose avec, comme les enregistrer ou envoyer un email

[storm folio]

Alors en théorie tu peut récupérer les informations avec du JS simple puis faire une requête en AJAX mais sinon si tu utilise par exemple PHP tu peut mettre dans l'attribut action du form, le lien vers une page PHP qui va par la suite récupérer les informations rentrée sois par une requête GET ou POST. Mais concrètement c'est du back pas tellement du front, bien que ça pourrais être utiliser dans le front

[true schooner]

Okkk

[true schooner]

Normalement j'ai bien suivi le get started mais bon...

[errant cypress]

kill le process et refait le

[cobalt holly]

bonjour je dois faire un site responsive en html css, mais je rencontre un problème, quelqu'un pour m'aider ? 😁

[runic python]

Yop ! Je tombe un peu des nues... Comme on voit dans le screen mon span credits le href est complètement décalé sauf que je trouve pas comment régler ça...

          <footer className="relative">
          {/* Footer content */}
          <div className="relative bottom-[-110px] z-10 flex justify-between text-sm max-w-screen-xl mx-auto py-8">
            <div className="text-left space-y-2">
              <Link href="/MentionsLegales" legacyBehavior>
                <a className="block hover:text-primary">Mentions Légales</a>
              </Link>
              <a href="#" className="block hover:text-primary">Discord</a>
              <a href="#" className="block hover:text-primary">Remerciements</a>
            </div>
            <div className="text-right space-y-2">
              <a href="#" className="block hover:text-primary">Connexion au SCP</a>
              <a href="#" className="block hover:text-primary">Connexion au ***</a>
              <a href="#" className="block hover:text-primary">Voter !</a>
            </div>
          </div>

          <div className="text-center py-4">
            <Link href="https://github.com/Vrizix" legacyBehavior>
              <a className="text-primary hover:text-white inline-block">
                <span className="flex items-center justify-center">
                  Développé par Vrizix <FontAwesomeIcon icon={faHeart} className="ml-2 text-red-500" />
                </span>
              </a>
            </Link>
          </div>
        </footer>

Merci d'avance pour l'aide 🙂

[void anvil]

Parle-nous directement de ton problème et partage ton code

[cobalt holly]

je veux que ma maquette ordi passe à cette disposition sur tablette

<div class="content1">
        <div class="article1"></div>
        <div class="article1"></div>
        <div class="article1"></div>
        <div class="article1"></div>
        <div class="article1"></div>
        <div class="article1"></div>
    </div>
    <div class="content2">
        <div class="article2"></div>
        <div class="article2"></div>
    </div>

[void anvil]

Où est le problème?

[cobalt holly]

les carrés ".div article1" se collent et ne se mettent pas sur toute la largeur et hauteur du "content1" en bleu clair

/* ordi */
.content1{
    height: 142px;
    width: 916px;
    margin: auto;
    position: relative;   
    background-color: aquamarine;
    justify-content: space-around;
}


.article1{
    margin-top: 14px;
    float: left;
    margin: auto;
    width: 136px;
    height: 128px;
    margin-left: 20px;
}
    
.article1:nth-of-type(1){
    margin-left: 0;
}

/* tablette */

@media screen and (max-width: 760px) {
    .content1{
        width: 604px;
        height: 365px;
        margin: auto;
        position: relative;
        background-color: aquamarine;
        justify-content: space-around;
    }

    .article1{
        width: 184px;
        height: 173px;
        margin: auto;
        position: relative;
        background-color: black;
    }
}

[dull dome]

Si .content1 est le conteneur des trois div alors utilise justify-content: space-between; dans .content1

[dull dome]

sinon
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/

[polar shale]

Salut 👋
J'ai fait une card que je trouve completement bousillé est ce que quelqu'un aurait des conseils a me donner svp sachant que ma couleur primaire c'est le red-500 de tailwind et le text c'est du gray-800
Merci d'avance

[void anvil]

J'aurais mis le ajouter au niveau du footer

[pseudo sundial]

et fait un items-center pour les logos avec le span

[polar shale]

je l'ai fait mais ça reste comme ça

[pseudo sundial]

Envoie stp le code

Je saurais surement pourquoi ca fait ca

[void anvil]

J'aurais fais comme ça
https://play.tailwindcss.com/1PERn5Wz34

Ou alores

Ou alords comme ça
https://play.tailwindcss.com/iYuzsgXy8g

[polar shale]

Tres tres propre franchement !!

je peux m'en servir ?

[void anvil]

oui

Bien sur a la place du svg tu met ton image

[polar shale]

Ok top ! Merci

[robust obsidian]

C quoi ton css

[shrewd marlin]

pour centrer ton image, il faut un fichier css, là, tu dois en créer un appellé : styles.css
et à l'intérieur tu met :

header img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

normalement ça devrais work

mais je penses que tu commence le html & css, alors concentre-toi sur le wiki MDN dédié au html !

[stoic plume]

Bonjour, quelqu'un peut m'aider sur du .liquid svp ?

#discussion-dev

c'est du html/css à l'intérieur

[void anvil]

C'est une extension pour shopify ça si je dis pas de bêtise

[stoic plume]

Non pas vraiment, c'est du code de thème

Et dans ces fichiers c'est du html/CSS

[void anvil]

Oui mais une extension .liquid sa vient d'un. Site shopify 😂

[stoic plume]

T'appelle quoi par extension toi

[void anvil]

Fichier.liquid

Fin bref tu veux en faire quoi ?

Si tu n'est pas sur un shopyfi le fichier te sert à rien, mais tu peux reproduire le HTML CSS dedans dans un fichier HTML ou css

[stoic plume]

J'ai mis un poste dans #discussion-dev si tu veux regarder 🫣

C'est quoi les champignons 🍄 😂 je me fais suivre

[austere lark]

#1292540113485828198

[stoic plume]

Ahh d'accord, j'avais pas suivi 👀

[void anvil]

https://tenor.com/view/tlou-the-last-of-us-joel-video-game-gif-16648274

[thin merlin]

bonjour, es q'uil y a un moyen d'envoier un mail après un formulaire ex : on me contacte sur mon site via mon formulaire et ca me send un mail ?

[dull dome]

oui il faut utiliser une API mais c'est pas gratuit

[thin merlin]

Ah d’accord merci

[storm folio]

? Non, tu peut utiliser un service externe pour intégrer ton formulaire comme Google form par exemple ou utiliser leur api gratuite ou utiliser PHP et une extension comme phpMailer. Il y a plein de manière de faire, la plus simple php je pense

[storm folio]

Si tu a la possibilité d'avoir une machine avec php utilise php

[dull dome]

Avec PHP, il a pas mal de paramètres à configurer pour que les serveurs mail autorisent l'envoi

[storm folio]

Dans la plus part des offres php un serveur mail est fournis avec

Donc de la configuration pas vraiment

Ça prend grand max 5min à setup

[dull dome]

a ouai ok j'avais pas pensais aux hébergeurs

[storm folio]

Bah en local aussi avec xamp il y a un serveur mail fake il me semble

EasyPHP aussi

[olive wind]

Salut
Il y a différentes options dont certaines qui sont gratuites
Le choix peut se faire en fonction de ton langage utilisé pour le site.
Si tu es en NodeJS, tu peux utiliser NodeMailer ou MailerJS ou en php comme ça été notifié il y a PHPMailer.
Sinon avec ton hébergeur, en fonction de l'abonnement que tu prends tu peux avoir un service de mailer mis à disposition avec un mail custom à ton nom de domaine. Ou encore google form que tu peux intégrer à ton site.

[thin merlin]

D’accord merci beaucoup pour ton explication

[midnight pagoda]

Bonsoir, bonsoir
alors voila, je bloque actuellement sur un problème de sidebar et je ne suis même pas sur que ce soit possible d'y arriver d'une manière simple
j'ai fait un petit schema sur paint pour expliquer, si des dev ont une piste à me donner je suis preneur!

(au passage j'utilise tailwind)

[olive wind]

Hello
C’est quoi qui te bloque exactement là dedans ?

[midnight pagoda]

concrètement ça marche

mais le problème c'est que quand elle est fermée

les icones en bas de la bar ne sont pas centrées

alors on peut le régler MAIS ça fait ça

donc la question c'est est-il possible de mettre un max width sur le container de l'icon qui dépend de la taille de la sidebar quand elle est fermée

[thin merlin]

Bonsoir, y'a t-il une personne qui peux m'aider en html js, le but et de faire un bouton pour faire défiler des box 1page=6box et j'aimerais avoir des boutons suivant et précédent pour faire défiler 8 page

[next wagon]

@midnight pagoda Tu pourrais faire un codepen avec ton code HTML/CSS ?

@thin merlin Aurais-tu un codepen à nous partager avec ton travail actuel, j'ai du mal à comprendre ce que tu veux faire exactement ?

[thin merlin]

C’est quoi un codepen ?

[next wagon]

C'est un site qui te permet de partager du code facilement : https://codepen.io/

[thin merlin]

D’accord je regarde demain merci

[midnight pagoda]

voila, j'ai réécrit l'essentiel https://codepen.io/estuko/pen/gOVRVrE?editors=0010

[next wagon]

Je sais pas si c'est ça que tu veux ?

[midnight pagoda]

Oui, c'est une bonne solution, après cela demande de garder à jour la width de l'icone en haut avec la width de l'icone des items
Merci

[void anvil]

hello je crée un site web, j'ai inséré des images dans mon fichier html mais elles ne se chargent pas quand j'ouvre le fichier, une solution svp ?

[candid wadi]

@void anvil Fais voir ton code 🙂

[void anvil]

ça c'est ce que ça fait au lieu d'afficher l'image, tu sais si l'image ne se charge pas, y'a le texte alternatif qui s'affiche. tu veux voir le bout de code correspondant ?

[candid wadi]

Yep stp + la directory de ton html et de ton image

comme ceci

[void anvil]

oe je remarque que j'ai pas mis les images dans le même dossier que mon fichier html mais j'ai copié le lien des images, ça peut être la cause tu penses ?

[candid wadi]

J'aurais vraiment besoin de voir le code pour le coup pour te dire

[void anvil]

j'ai copié le bout de code correspondant dans un bloc notes, tu peux y voir le lien de l'images et je t'envoie le screen du directory

l'image est directe dans le dossier téléchargements

du coup ?

t'es là ?

[meager beacon]

je te conseille de mettre ton image dans le dossier de ton projet, c'est plus simple et surtout logique

[candid wadi]

Mauvaise structure + mauvais chemin

si t'allais en dehors dans ce cas C:/Users/MachinChouette/Downloads/j.jpg

sauf que dans un projet on ne fait JAMAIS ça

tu crées un dossier dans lequel tu mets ton .html et un dossier img là ou ton .html est

dans le dossier img tu mets j.jpg

puis quand tu fais ta balise <img> dans la source tu mettras img/j.jpg

🙂

[void anvil]

oe je suis en train de faire ça merci

oe c'était ça le problème, j'ai l'air bien con😁

[candid wadi]

et c'est normal, t'as le droit d'être débutant 🙂

c'est ok de faire de la merde au début

[void anvil]

non je suis pas du tout un débutant, je suis développeur java full stack

[candid wadi]

Ah

[void anvil]

nn je rigole

[candid wadi]

J'allais me dire aussi

même en java tu fais pas ça

mdr

[void anvil]

j'ai besoin de changer la taille d'une image et du coup je mets un attribut class pour changer la taille dans le fichier css mais est-ce que c'est à cet endroit que je dois mettre class ?

[candid wadi]

yes ta classe taille_image est bonne, juste nomme ça avec de la logique

[void anvil]

oe mais quand j'actualise le fichier la taille a pas changé

[candid wadi]

fais voir le css?

et fais voir ton import du css dans le html?

[candid wadi]

font size..

Lis la doc

Tu comprends l'anglais ?

[void anvil]

t'inquiète pour l'import c bpn

oe

[candid wadi]

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

bah voilà à quoi sert font-size..

🥲

font = police d'écriture

soit pas ton image

check plutot width et height

[void anvil]

ah oe chui con j'ai confondu avec la taille de l'écriture

est-ce qu'on peut héberger un site comme ça n'importe lequel, si on a envie ?

d'ailleurs comment on héberge un site ?

d'après ce que j'ai lu, il faut faire appel à un hébergeur web mais du coup il faut payer, c'est chiant

[candid wadi]

tu peux l'héberger toi même sur ton pc en public et 24/24 mais ça coutera cher en elec

sinon tu peux héberger en local si c'est juste pour tester en temps réel sur ton pc

live server sur visual studio code fonctionne bien pr ça

[void anvil]

ça sert à quoi d'héberger en local ?

et si je le fais moi-même pour le public, la facture d'électricité va être chère ?

@candid wadi je t'ai envoyé une demande d'ami t'as l'air d'être un bon toi

oe pas la peine de répondre à mes questions j'ai trouvé la rep

[candid wadi]

Je te répondrai volontiers mais malheureusement je suis en plein rush

Je regarde après

[void anvil]

mais en fait, live server, c'est juste pour pas avoir à refresh la page à chaque fois ?

[meager yoke]

bah c'est juste un serveur local ??

setup en vite fait en live

ça t'évite de reload a chaque fois

[brave jay]

Ça loader ta page en local et ça Check les changes

[stone folio]

hello, j'ai un petit soucis avec le front d'un page web, je souhaiterais mettre une image centrée Vertical et Horizontal, et mettre un h1 au dessus

<!DOCTYPE html>
<html>
<head>
    <title>Idle Game</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self'">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="game-title">Idle Card</h1>
        <img src="assets/images/logo.png" alt="Idle Card Logo" class="logo">
    </div>
    <div class="footer">
        <p>Developed by lighscent - v1.0.0</p>
    </div>
</body>
</html>

@font-face {
    font-family: 'CustomFont';
    src: url('assets/fonts/light_pixel-7.ttf') format('truetype');
}

body {
    margin: 0;
    height: 100vh;
    background-color: black;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'CustomFont', sans-serif;
}

.container {
    display: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.game-title {
    font-size: 5em;
    color: white;
}

.logo {
    max-width: 35%;
    max-height: 35%;
}

.footer {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    color: white;
    font-family: 'CustomFont', sans-serif;
}

[void anvil]

ça veut dire quoi le @font-face dans ton code ? De manière plus générale ça veut dire quoi le @ dans le CSS ?

[robust obsidian]

@ c pour definir une class a des elements avec des id

<p id="font-face">hello</p>

(il me semble)

[candid wadi]

Non

enfin pas vraiment

[void anvil]

bah explique alors

non pour les id je crois que c'est #

[brave jay]

On appel ça des at rules

[restive fog]

alors non le @ en css signifie une inclusion de dépendances

[brave jay]

C’est pour définir des comportements spécifiques ou des conditions

[restive fog]

ah merci j'avais pu le mot exact 🤣

[brave jay]

Et dans le cas de font-face c’est que tu définis à ton css que tu importes une nouvelle font et que si l’utilisateur de la pas il doit la download

En gros

[candid wadi]

J’avais pas le temps à ce moment là j’étais sur la route

Mais ça a déjà été fait

J’ai juste dit que non

[polar shale]

Salut 👋
J'ai fait une une page pour en savoir plus sur les écoles que je trouve completement mauvaise est ce que quelqu'un aurait des conseils a me donner svp sachant que ma couleur primaire c'est le red-500 de tailwind et le text c'est du gray-800
Merci d'avance

[meager beacon]

essaie de mettre une description de école, et ajoute des mots dans les informations, car tu lâches
"92156"
"4"
"03/11/2024"
mais y'a pas de mots pour décrire / expliquer

conseil plus personnel : j'aurais mis la photo à gauche et les infos à droite

mais sinon c'est très bien, je vois pas ce qui rend mal

[polar shale]

Ok je vais voir apres pour la déscription un peu chaud sachant que c'est un site collaboratif donc si les gens doivent mettre une description un peu relou

[restive fog]

Nn t'as pas compris ce qu'il te disait mdr

en gros en + de t'es fontawesome ou t'es bootstrap icon

ajouté un text explicatif

du genre: Effective (icon) - int

Création (icon) - date

[meager beacon]

Skema Business School

École de commerce située....

• 🧭 Lieu : 92156
• 🏦 (je sais pas à quoi ça correspond) : 4
• 📅 Rentrée : 03/11/2024

_ _
En gros voilà ce que je t'ai dit

[polar shale]

Oui ça j'avais compris je pensais tu voulais je mette une description en +

[meager beacon]

bah oui, je crois ?

tu m'as un peu perdu mdrr

[restive fog]

bas un subtitle ça ferait pas de mal histoire d'ajouté un peu de context a t'as page x)

rien qu'une petite présentation de l'établissement ce serait pas mal

[polar shale]

J'aimerai bien ausssi mais je ferais ça surement a l'avenir la c'est trop chiant pour les utilisateurs de mettre eux meme leur description

[polar shale]

.

[meager beacon]

ah tu comptais rajouter un espace pour que les utilisateurs mettent leur avis ?

[polar shale]

En gros sur la page tu ajoutes des écoles c'est comme un annuaire des écoles ensuite tu peux cliquer dessus pour avoir + dinfos mais chacun ajoute les écoles qu'il connait nom, url, code postal etc et je vais pas leur dmd actuellement d'ajouter une description ça serait trop chiant pour eux

[meager beacon]

ah d'accord j'avais pas compris le concept d'annuaire

[polar shale]

C'etait pas tres clair aussi ahah

[meager beacon]

t'inquiète pas :) bah essaie comme je t'ai proposé, et regarde si ça te plaît

[polar shale]

Je vais faire ça

[lone copper]

hey

j'ai un petit soucis avec mon code css svp

est-ce que quelqu'un pourrait bien m'aider ?

[olive wind]

Hello, montre le nous ici

[lone copper]

d'acc

[lone copper]

alors j'aimerais mettre une image en arrière-plan de mon site internet, ou alors juste faire un dégradé de couleur, mais y'a rien a y faire : ça marche pas...

j'essaie de mettre le dégradé fade.png ou le background que je vais vous envoyer tt de suite

le premier c le dégradé que j'aimerais mettre dans mon site

pour avoir quelque chose qui ressemble à ça :

[olive wind]

Alors si tu veux faire un dégradé en css tu peux te renseigner sur la propriété background : linear-gradient() et pour mettre une image en fond tu as la propriété background-image: url(path/image)

je ne sais pas si tu as déjà tenté ces deux propriétés, sinon je te laisse les tester et nous redire si ça fonctionne 😉

[light moat]

Salut ya quelq'un qui c'est comment faire afficher le web sur Android avec vsc ? Merci

[pastel birch]

Yo tu veux dire quoi par là pour que le site soit compatible avec un écran de téléphone et de pc ?

[light moat]

Non en fait j'ai téléchargé vsc sur Android et je voudrais avoir la partie web quant je fais du code je voudrais voir le résultat

[pastel birch]

J’ai jamais utiliser tu as regarder si il y avait une partie extension ?

[light moat]

Je mi connais pas je t'avoue

[pastel birch]

Parce que une extension existe sur vscode sur pc c’est live preview je crois et c’est pas mal

[light moat]

A mais la je te parlais de vsc sur Android

[thin merlin]

Hello quelqu'un peux m'aider sur un caroussel svp au 2 slide ca s'affiche mal

[robust obsidian]

[thin merlin]

tes chaud pour m'aider ?

[candid wadi]

Envoie ton code c'est ça qu'il te dit

[thin merlin]

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("slide");
  let dots = document.getElementsByClassName("dot");

  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" current", "");
    dots[i].style.backgroundColor = ""; // Reset background color
  }

  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " current";
  dots[slideIndex-1].style.backgroundColor = "red";

#portfolio {
  padding: 25px 0;
  width: 100%;
  height: 800px;
  z-index: 99;
}

.slide-container {
  position: relative;
  width: 100%;
}

.slide {
  display: none;
  width: 100%;
}

.slide.active {
  display: block;
}

/* Structure de la grille pour chaque slide */
.gridder {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 éléments par ligne */
  grid-template-rows: repeat(2, auto); /* 2 lignes pour 6 éléments */
  gap: 20px; /* Espace entre les items */
}

.grid-item {
  width: 100%; /* Assure que chaque item prend 100% de sa cellule */
}

.img-place img {
  width: 100%;
  height: auto;
}

/* Flèches de navigation */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 3px;
  user-select: none;
}

.next {
  right: 0;
}

/* Style des points de navigation */
.dot-container {
  text-align: center;
  padding: 20px 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot.current, .dot:hover {
  background-color: #ff0000;
}

#portfolio.vg-page {
  padding: 40px 0; /* Par exemple, réduire le padding à 40px */
}

[whole sapphire]

Vous savez comment utiliser les egg de web pour mettre la page du site dessus ou pas car je comprends pas du tout je voudrais faire une offre web pour mon hébergement mais je comprends pas

[candid wadi]

Tu parles de ptero ?

[whole sapphire]

Oui car sans mentir les egg web ji connais rien je c'est mettre des egg mais configurer le eeg web je suis nul

[candid wadi]

Tu connais nginx je suppose ?

car t’as une conf à faire pour que le egg fonctionne

Pour que le trafic arrive jusqu’au deuxième nginx qui est dans ton docker

[next wagon]

Je pense que t'as juste des problèmes dans tes index. On commence à compter à partir de 0 en programmation et le dernier élément d'un tableau est à la position tableau.length - 1. En ayant ça en tête il faudrait que tu retravailles ton code. Déjà tu initialises slideIndex à 1 au départ, je pense que tu souhaites partir de la 1ère image et pas de la seconde ? Donc il faut l'initialiser à 0.

[thin merlin]

ca change un truc merci je vais essayer de trouver

[cloud jay]

Bonjour, quelqu'un aurait réussi à télécharger sur son projet Tailwind, le plugin ESLint Tailwind, je n'arrive pas à configurer le plugin pour qu'il marche ?

[void anvil]

Tu use un framework ?

[cloud jay]

Non aucun, juste avec la nouvelle configuration de ESLint 9 tout a changer

[limpid wren]

Salut tout le monde !
Comment allez-vous ?

J'apprend actuellement le monde du Web. J'ai eu quelques expériences personnelles donc soyer gentils hein :)

J'ai vu que certains site web comme youtube par exemple, discord envoie une embed. Comment ça fonctionne ? J'ai fait des recherches sur google mais j'ai rien trouver sur ce sujet.

Merci pour vos futures réponses. ( Si vous me répondez, un ping s'il vous plaît )

[sudden night]

Si j’ai bien compris, ce que tu cherches c’est les balises Open Graph 😉

[runic python]

Comme Kérian t'as dis, ce sont les balises Open Graph

Exemple :

<meta property="og:title" content="Titre de la page">
<meta property="og:description" content="Description de la page">
<meta property="og:image" content="URL_de_l_image.jpg">
<meta property="og:url" content="https://ton-site.com/">

// Twitter Cards 
<meta name="twitter:card" content="large_image">
<meta name="twitter:title" content="Titre de la page">
<meta name="twitter:description" content="Description de la page">
<meta name="twitter:image" content="URL_de_l_image.jpg">

[limpid wren]

Merci pour vos réponses :)

[austere laurel]

Après 1semaine d’apprentissage de front end environs 3-4h au jour voici mon premier site et je voudrais connaître vos avis

[tame forge]

Il y a plusieurs choses qui ne vont pas, notamment côté règles d'UI/UX (User Interface/User Experience) :

• Tout d'abord, tout ce qui possède une animation au survol doit effectuer une action (ça veut dire que tu retirer tous tes effets des titres, textes, logo, etc)
• Globalement, il y a un problème de contraste sur ton site qui le rend difficile à lire.
• Ton fond est peut-être un peut trop clair, il faudrait que tu l'assombrisse et que tu passe tes titres en blanc.
• Tes boutons sont tous trop proches de la couleur de fond. Quand un utilisateur arrive sur ton site, il doit être guidé par un bouton d'une couleur différente qui l'attire vers l'action de ce bouton (voir image)
• Les ombres sur les textes, c'est non. ça les rends illisible, donc il faut absolument que tu retire ça.
• Tes textes qui passent en arrière plan ne sont pas en soit une mauvaise idée, mais il vont beaucoup trop vite et passe sous ton titre. Quand j'arrive sur ton site, mon regard est immédiatement attiré par ce texte qui apparait. Donc je veux le lire, sauf qu'il est déjà sous un autre texte !
• En suite, pour rendre ton site un peu plus moderne, tu pourrais enlever le cadre des boutons "login"/"register"
• Afin d'apporter une plus grande cohérence, je te conseille de mettre ces deux boutons en français.
• Et enfin, il y a un gros travail d'uniformisation à faire. Tous tes textes ont une couleur différente. Tes icônes de boutons ne sont pas de la même couleur que le texte du bouton (d'ailleurs, je te conseille d'utiliser des icônes monochromes).

J'espère que mon gros pavé va pouvoir t'aider à améliorer tout ça
Je précise, mais c'est déjà un très bon début hein. Je donnes beaucoup de points à améliorer, mais ça ne veut pas dire que ce que tu as fait là c'est nul et c'est à jeter à la poubelle 😉

@austere laurel ||j'ai oublié le reply ||

[austere laurel]

Super je te remercie pour ce retour, je vais essayer de l’améliorer en conséquence !

[pastel birch]

Je trouve ça super !

Surtout pour un début personnellement j'ai encore du mal alors que ça fait un moment que je code ptdr

D'ailleurs salut les gens est-ce que quelqu'un aurais un hébergeur gratuit pour que je puisse tester mes codes html css etc pour moi m'entrainer

[austere laurel]

haha merci, je crois que tu as GitPages pour ça

[robust obsidian]

gratuit... A part le portfolio que github t'offre...

[pastel birch]

d'accord merci bcp l'équipe ou alors sinon je dois crée mon serveur quoi (;

[restive fog]

installe laragon tu pourra tester t'es code host sur ton pc et si jamais tu veux vraiment que des gens y accède t'installe ngrok

[wild stump]

faut surtout pas faire ça si tu as pas de bonne protections sur ton réseau vu qu pour ngrok tu vas devoir exposé ton pc et ton réseau au reste du monde

[restive fog]

Non, ngrok n'expose pas ton PC au monde entier il crée un tunnel temporaire pour accéder à ton serveur local sans laisser d'accès direct. Si tu suis les bonnes pratiques de sécurité, c'est un outil très sûr pour les tests m'enfin bref

comme je l'ai dit dans ma phrase "tu pourra tester", il suffit de lire un minimum et puis je n’ai jamais parlé de production, m'enfin bref

[olive wind]

Si tu as juste juste un front basique à héberger passe par Netlify, tu peux relier ton repo github directement dessus

[wild stump]

Oui et non, oui si ton ngrok est en amont, là si tu trace la requête elle va faire :
ton pc > parcourir ta topologie réseau > ta boxe /routeur > tout les dns qu’il y a entre vous deux > sa boxe/ routeur (jusque là c’est safe) > parcourir sa topologie réseau > ngrok (avec le forward donc safe)

Là où c’est dangereux c’est qu’il va parcourir sa topologie réseau ce qui peut être utile pour trouver un appareil vulnérable.
La bonne façon de faire c’est de tunneler la connexion entre ta boxe et ton pc. Après si tu pense que c’est pas nécessaire fais comme tu veux je ne vais pas me battre !

[wild stump]

Prod ou pas prod un port ouvert c’est un port ouvert

Mais en gros pour que ton ngrok te protège des attaques réseau faut le mettre au niveau de ton load balancer (c’est d’ailleurs pour ça qu’il est prévu)

[pastel birch]

Okkkk je vois

Et laragon c’est quoi en résumé ?

[restive fog]

@wild stump, honnêtement, tu devrais revoir la doc de ngrok et les bases de la cybersécurité parce que là, tu dis n’importe quoi Ngrok ne "parcourt" pas toute la topologie réseau et n’expose pas tout ton réseau. Il crée un tunnel sécurisé entre un port local (comme localhost:3000) et une URL temporaire pour permettre des tests en local, point barre. Le fait de dire qu’il doit être 'mis derrière un load balancer' n’a aucun sens ici, c’est un outil pour le développement, pas pour la production. Le port ouvert par ngrok est sécurisé et ne donne accès qu'à ce qui est spécifiquement exposé, rien de plus. Merci de te renseigner avant de propager de fausses infos.

[void anvil]

Laragon, en gros, c'est un environnement de développement local tout-en-un. Il te permet d'installer facilement un serveur web complet avec Apache, Nginx, MySQL, PHP, etc., sans te prendre la tête avec des configurations compliquées. C’est super léger et rapide, conçu pour Windows, et il inclut tout ce qu’il faut pour lancer des projets en PHP, Node.js, ou même Python.

Son avantage principal, c’est qu’il est hyper simple d'utilisation, avec un seul clic pour démarrer ou arrêter les services, et il est aussi portable : tu peux l'installer sur une clé USB et l'emmener partout.

En résumé, c'est l'outil parfait si tu veux un environnement de dev local sans galérer avec des configs manuelles.

[pastel birch]

Ah d'accord je comprends mieux merci de m'avoir éclairer !

[thin merlin]

Bonjour, je cherche un développeur avec de l’expérience en Htmk CSS et JavaScript pour me résoudre quelques bugs. Je suis prêt à rémunérer le travail si c’est bien fait si intéressé, veuillez me contacter en privé. Merci

[void anvil]

#poster-une-recherche

[thin merlin]

Merci

[wild stump]

update :
effectivement et j'ai relu les documents que j'ai produit a l'époque, et autant pour moi, tu as raison, ngrok poses pas de problème a lui tout seul, il peut en poser si tu le config très mal ou il peut aggraver des problèmes si tu en as déjà mais dans une très large majorité des cas il n'en pose pas.
J'ai surement été biaisé par un ancien travail que j'ai réalisé où on a eu ce genre de problèmes (dis moi si ça t'intéresse et même si là j'ai pas ce qu'il faut je te ferais une démo pour te montrer la situation qu'on avait eu)

[restive fog]

Pas de soucis et oui sur les old de Ngrok c'est fortement possible

[agile helm]

Hello !

[restive fog]

hi

[agile helm]

J ai un petit problème de responsive sur une page que je galère depuis 1 semaine acharné, est ce que quelqu un aurais la motivation de m aider ?

😭

[storm folio]

bah donne ton problème après on verra.. ça sert a rien de demander sans donner le problème

[olive wind]

Faut arrêter d’être aigris comme ça mdr

[olive wind]

Drop ton code ici bg

[storm folio]

Bah faut arreter des poser des questions idiote, c'est un discord d'aide dans le salon html et css puis on demande si quelqu'un peut aider sur du responsive 🤦‍♂️

[austere lark]

Doucement les gars ❤️

[agile helm]

Yes !

Sauf que quand le site est remplis d info perso j t avoue j ai moyen envie de drop xD

[brave jay]

Du coup c’est compliqué de t’aider

On ne connaît pas réellement le problème, donc impossible de t’aider sans informations supplémentaires

[agile helm]

si, mais j aimerais juste eviter de le drop ici

😭

[olive wind]

Sinon crée une demande de missions bg et attends un qu’un développeur y réponde. Tu pourras lui drop dans un salon dédié

[agile helm]

ah pas bete x))

[agile helm]

CSS

@media screen and (max-width: 900px) {
    .footer-content {
        width: 90%;
        text-align: center;
    }

    .div_footer {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    footer {
        padding: 20px 10px;
    }

    footer .copyright {
        margin-top: 25px;
    }
   #logements .logements_header h2 {
        font-size: 1.5rem;
        justify-content: center;

    }
   #logements .logements_header p {
        font-size: 1rem;
        display: flex;
        justify-content: start;
    }
    .box { 
        height: 100%;
    }
    .logements_main {
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        position: absolute;
        margin-top: 30%;
    }
    .carte_lgmt { 
        margin:10px auto;
        width: 80%;
        height: 800px;
    }

    
}```

HTML

<main>
<section id="logements">
<div class="logements_header">
<h2>Nos Logements</h2>
<p>Découvrez nos gites confortables avec vues sur les montagnes.</p>
</div>

        <div class="logements_main">
            <div class="carte_lgmt carte_lgmt1">
                <a href="./tsozal.html" class="carte_lgmt_link">
                    <div class="carte_lgmt_header"></div>
                    <div class="carte_lgmt_main">
                        <p class="carte_lgmt_titre">Tsozal</p>
                        <div class="box box1">
                            <i class="fa-solid fa-person"></i>
                            <p>6 Personnes</p>
                        </div>
                        <div class="box box2">
                            <i class="fa-solid fa-house"></i>
                            <p>150m²</p>
                        </div>
                        <div class="box box3">
                            <i class="fa-solid fa-star"></i>
                            <p>Certifié</p>
                        </div>
                        <div class="box box4">
                            <i class="fa-solid fa-bed"></i>
                            <p>5 Chambres</p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="carte_lgmt carte_lgmt2">
                <a href="./penatsot.html" class="carte_lgmt_link">
                    <div class="carte_lgmt_header"></div>
                    <div class="carte_lgmt_main">
                        <p class="carte_lgmt_titre">Le Penatsot</p>
                        <div class="box box1">
                            <i class="fa-solid fa-person"></i>
                            <p>6 Personnes</p>
                        </div>
                        <div class="box box2">
                            <i class="fa-solid fa-house"></i>
                            <p>150m²</p>
                        </div>
                        <div class="box box3">
                            <i class="fa-solid fa-star"></i>
                            <p>Certifié</p>
                        </div>
                        <div class="box box4">
                            <i class="fa-solid fa-bed"></i>
                            <p>5 Chambres</p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </section>
</main>```

Rendu

J'ai reussi a cacher ce qu il fallais, j arrive pas a faire en sorte d avoir plus de blanc en bg pour pas que les cads prennent sur le footer en vert en bas

et sans tt remonter et cacher le texte en haut

[brave jay]

C’est logement main que tu as mis en absolute c’est pour ça

[agile helm]

et c est lequel qu il faut mettre du coup ?

(me ping)

[olive wind]

Ne mets pas d’absolute du tout, c’est pas nécessaire dans ton cas. Gère juste bien tes flexbox, petit tips : si tu veux pas te prendre la tête pour ton responsive avec les cards, regarde la propriété : flex-wrap.

[agile helm]

ahhh okeyy

[trim crag]

salut je suis nouveaux et novice en html css

[robust obsidian]

tu veux savoir quoi ? par ou commencer ?

[trim crag]

bas deja je sais a quoi sa sert comment faire un site web et je connais presque que tout les termes les reference si c est comme ca qu on les appele

[trim crag]

je voudrais savoir a quoi sert la commande <main> svp,

[brave jay]

c'eset ce qui englobe la partie principale de ton site internet

[trim crag]

merci tu gere $

est ce que ya des live coding les week end en general

[hollow cypress]

Salut les gens, est ce que sa serais difficile de faire une page web avec SA ?

[formal fox]

Techniquement non

moralement oui

[hollow cypress]

Moralement xd

Genre tu pense que je pourrais mettre en pratique tout les bons procéder d'un dev web en fessant sa ?

[formal fox]

Je pense que c'est un peu leger mais pour un premier projet ca te permet de comprendre pas mal de concepts

apres ca depend si tu traites les donnees saisies dans le formulaire

si tu souhaites faire que l'affichage ma reponse est non, mais si tu n'as jamais touche au dev web je te recommande tout de meme de le faire car c'est en faisant que l'on apprend :)

[hollow cypress]

Ok merci de la réponse

Je vais m'y essayer a ce truc visuellement moche

[formal fox]

desole pour les accents et ponctuations, je suis en qwerty

[restive fog]

🤣 😭

[austere laurel]

Je reviens à la pêches aux infos

Jvais changer le p sur l’image de l’accueil et en dessous de découvrir le kit map

[dusky ridge]

J’aime énormément 😍

[austere laurel]

Merci !

[hollow cypress]

Stylé

[tame forge]

C’est déjà beaucoup mieux, mais attention, tu as refais certaines erreurs que je t’avais énoncées

[austere laurel]

Oui je vais régler ça dans l’aprem

[vital nebula]

Hello, des gens s'y connaissent en HTML avec l'association de electronAPI ?

[void anvil]

Ui pourquoi

[robust obsidian]

tu va attendre bro...il est vrm pas connecté courage

[vital nebula]

👀

[vital nebula]

C'est quoi l'intérêt de jumeler electron API avec HTML et pas autre chose ?

[vital nebula]

et aussi est-ce que c'est possible de fusionner du SQL et du HTML ?

Parce que je connais uniquement

python ***
html *
SQL ***```

[wooden haven]

SQL et HTML servent des rôles très différents et ne se combinent pas directement, mais on peut utiliser SQL et HTML ensemble dans une application web pour afficher dynamiquement des données issues d’une base de données dans une page HTML

[vital nebula]

Doit-on utiliser une application externe ? Car je vois beaucoup de gens utiliser PHP mais je ne connais rien du tout à ce sujet.

[void anvil]

Ta question et pas clair, tu veux faire quoi avec électron

[vital nebula]

En gros j'ai crée un panneau de connexion mais je suis pas sur que se soit approprier d'utiliser electron.

Avec se connecter/crée un compte

[void anvil]

Détail ton raisonnement

[vital nebula]

1. Avec Electron création de fenetre : en chargant le fichier index.html
   2.Attendre qu'un utilisateur entre ses identifiant et clique sur "se connecter"
2. Avec Electron, faire une req de SQL pour aller dans une base de donnée, voir si l'utilisateur et le mot de passe correspondent.
3. Si oui, autoriser l'accès, si non indiquer que le mot de passe ou l'utilisateur est mauvais.

[void anvil]

Alors passe par un api externe

Parce qu'on peut récupérer le code local si il est mal chiffrer

Donc compromettre ta bdd et

[trim crag]

quelle extension vs code vous pouver me proposer qui son utile

[robust obsidian]

live server, extansion FR et github

[trim crag]

merci$

[wooden haven]

Ne dite pas n’importe quoi …, vous avez raison sur le fait que cela peut compromettre la BDD mais on peut faire en sorte de ne pas la compromettre….

[wooden haven]

Oui c’est toute à fais possible

[void anvil]

Alors a part que tu peux chopper toute l'app en pure, mdrr je ne laisserais pas trainer d'info DB dedans ^^

[brave jay]

Le code source d’une app électron n’est pas chiffré donc c’est très facile de retrouver les infos db

[wooden haven]

On peut très bien mettre un système de sécurité ….

[brave jay]

On peut mais il est logique de rien mettre de "risqué" coté client.

C'est de la logique et la base de la sécurité informatique.

[vital nebula]

Oui après j'avoue ne vraiment pas m'y connaitre en html

Je sais qu'avec le "inspect element" on trouve tout le code.

Mais j'ai peur d'être perdu avec plus d'un fichier.

La j'ai recommencer un portail sans Electon pour le moment

Ca donne ceci

Mais après j'en ai aucune idée de comment lier la db avec un fichier js à côté ou autre

Je m'y connais pas du tout en html donc voici ce que j'ai pu crée si vous avez des idées n'hésitez pas.

[rare topaz]

salut y'a quelqu'un de dispo pour m'aider avec un devoir la je galère de fou et y'a des trucs que je comprend pas svp

[rare topaz]

t'es chaud de ouf

[vital nebula]

Merci

[pastel birch]

Salut ! Je peux toujours essayer de t'aider dis moi tu galère sur quoi ?

[olive wind]

Hello
Donnes-nous les infos ici

[light moat]

Salut c'est quoi le soucis ?

[vital nebula]

Hello ! Pourquoi quand j'affiche une image, il se passe ceci.
J'ai vérifier le path qui est correct, l'image s'ouvre correctement.

[brave jay]

Montre le dossier où est l’image et ton code 😉

[vital nebula]

C:\xampp\htdocs\projet\Menu_home\Image

[vital nebula]

Mon autre image fonctionne, je l'utilise pour le background.

[brave jay]

Et dans ton code ?

[vital nebula]

ça

<img src="/Menu_home/Image/energy.png" alt="Énergie" style="width: 20px; height: 20px; margin-right: 5px;">

Désolé du ping.

[brave jay]

Mais pourquoi tu supprimes le screen 😄

[vital nebula]

Ah je penais tu le voulais pas

[vital nebula]

Excuse moi

Le code est stocker ici :

[brave jay]

<img src="./Image/energy.png" alt="Énergie" style="width: 20px; height: 20px; margin-right: 5px;">

[vital nebula]

Non

[brave jay]

Le code est bien dans ton fichier home.php ?

[vital nebula]

Yup.

[brave jay]

Tu peux aller dans le menu développeur et source de ton navigateur et tu pourras potentiellement voir le problème

[vital nebula]

Failed to load resource: the server responded with a status of 404 (Not Found)

[vital nebula]

par contre tu m'as appris un truc de zinzin, je savais même pasque tu pouvais faire ça.

le truc pas load est bien sur energy.png:1

[brave jay]

Avec un petit point ./

Peut être que ça va fix

[vital nebula]

genre energy.png./ ?

[brave jay]

Non ./Image

[vital nebula]

Non, ça ne fonctionne pas.

[brave jay]

Alors ca va être compliquer car je ne suis pas sur mon pc, mais regarde dans source dans le menu dev tu auras le chemin

[vital nebula]

Oh c'est bon

je pense le cache de mon pc devais être bug

quand j'ai fermer et relancer vscode

et que j'ai relancer mon script

[vital nebula]

ta solution à fonctionner.

mercii

[brave jay]

Top 🙂

[candid wadi]

z'avez vu l'update de css ? c'est formidable.

https://www.youtube.com/watch?v=A89FMtIkWKc

[quasi cave]

Tu peux disable le cache dans l'inspecteur du navigateur si jamais

[olive heron]

Rien de formidable, c’est juste chouette

[mellow moss]

pourquoi ça fait style IA 😭

genre un peu

beaucoup

[hallow forge]

Bonjour, j'utilise tailwind avec next.js (react.js) et je ne sais pas comment couper le 1/4 bas-droit du cercle et donc avoir plus que 75% du border:

          <div
            className="absolute inset-0 rounded-full bg-gradient-to-t from-[rgba(0,0,0,0)] to-[#05cd99] p-1"
            style={{
              WebkitMask:
                "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
              WebkitMaskComposite: "xor",
              maskComposite: "exclude",
            }}
          ></div>```

https://media.discordapp.net/attachments/358724573497393152/1311318379839357008/Capture_decran_du_2024-11-27_07-04-52.png?ex=67486be8&is=67471a68&hm=b36878e0333e7138f9e45e0f4a9ce52f1f92b8f47755aec66771023e39e6e7de&=&format=webp&quality=lossless

[glossy jackal]

Bonjour j ai regarder une video ytb pour apprendre le css dans celle ci le formulaire est a droite et j ai fais pareil voici le code

    display: grid;
    grid-template-columns: 30% 70%;
  }

.grid img {
    width: 80%;
}

form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: 
    "i1 i2"
    "ta ta"
    "vi bt";
}


input, textarea {
    margin: 5px;
    border: 1px solid darkblue;
    padding: 10px;
    font-size: 1.1rem;
    font-family: "fb", sans-serif;
    border-radius: 1px;
}

textarea {
    grid-area: ta;
    height: 40px;
    resize: none;
}

#btn-submit {
    grid-area: bt;
    cursor: pointer;
    transition: 0.2s;
}

#btn-submit:hover {
    background: #4bc59c;
}```

moi c est a gauche savez vous comment faire c est en display grid

[brave jay]

tu as trouvé ?

[wide rune]

Essaye ça :

    display: grid;
    grid-template-columns: 70% 30%; /* La première colonne (formulaire) est plus large */
    gap: 10px; /* Optionnel : ajoute un espace entre les colonnes */
}```

[hallow forge]

non malheureusement

[brave jay]

  className="absolute inset-0 rounded-full bg-gradient-to-t from-[rgba(0,0,0,0)] to-[#05cd99] p-1"
  style={{
    WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
    WebkitMaskComposite: 'destination-out',
    maskComposite: 'exclude',
  }}
></div>``` test ca

[glossy jackal]

fonctionne pas

[hallow forge]

ça change rien

je veux juste cacher une part de 1/4 (bas-droite) du cercle, comme si t'avais une part de tarte que t'enlève

[brave jay]

Utilise un svg alors ça sera beaucoup plus simple 😉

[tranquil moth]

Salut la team vous allez bien ?Je suis étudiant et j’aurais besoin de votre aide, je dois pour un projet scolaire réaliser une courte interview de 7-8 minutes max avec un développeur front est ce que quelqu’un aurait un peu de temps ça m’aiderait bcp 😁

[meager yoke]

obligatoirement front?? Ou tu peu faire du back?

[tranquil moth]

plutôt front après back c’est très bien aussi

[eager veldt]

Bonsoir j'ai un petit soucis qui à pop tout à coup

Enfaite j'ai essayé de mettre des icons sur un button en utilisant le cdn de flaticon (ce qui a toujours fonctionné) mais la sa marche plus je sais pas pourquoi

à noter que le cdn est importé

[woeful willow]

Bonjour est ce que tu pourrais envoyer ton code d'import ?

[eager veldt]

Hello yes le voici

@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-rounded/css/uicons-solid-rounded.css');

(c'est le css dcp, parce que même un import dans le html sa marche pas)

[paper peak]

il y a pas une histoire de licences ?

<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-rounded/css/uicons-solid-rounded.css'>

Moi ce lien marche

je crois que solid fait partie de la partie payant

[eager veldt]

Yes finalement je l'ai réglé

En mettant la version bold

[grand sleet]

Bonsoir jai fait un site et je suis vraiment débutant en html et css du coup je les complètement fini sauf que quand je me connecte au site avec un autre appareil c’est totalement deformer quelqun aurais la gentillesse de me dire comment je peut faire la responsive merci d’avance

Je suis pret a fournir le code si cela peut aider

[robust obsidian]

avec du media query

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries

[grand sleet]

Merci

[clear escarp]

Comment ça serait possible de faire un site web avec une pixel war (genre r/place)

[feral mist]

Regarde du côté des websockets

https://socket.io par exemple

[clear escarp]

Allez c'est bon tout le monde me dit ça il faut que je comprenne

Merci bg

[feral mist]

Regarde ça

[clear escarp]

Waa je connais déjà pas les bases, je sens que ça va être compliqué

[feral mist]

Prends le temps, pose des questions à ChatGPT si besoin mais c'est sûr que ça ne va pas être super facile si tu n'as pas les bases

Et n'hésite pas à demander de l'aide ici 👍

[clear escarp]

Ah oui cette même personne qui me conseille des logiciels virus xd

[clear escarp]

Merci c'est grv gentil

[heavy dawn]

bonjours je suis a la recherche de quelqu'un qui peut m'aider a faire des responsive j'ai essayer de faire sous format mobile mais j'arrive a le voir si c est bien ou pas

[agile helm]

yup ^^

tu peux envoyer ton resultat / ce que tu veux, et ce que t as actuellement ?

[zinc frigate]

bonsoir, vous avez des conseils pour apprendre html / css ?

[storm coyote]

Chatgpt

[zinc frigate]

Comment ça ?

[heavy dawn]

L’écoute pas

Tu as déjà les base pour utiliser les 2

[zinc frigate]

Oui je me doute

[zinc frigate]

Pas spécialement j’ai de légères bases

Mais sans plus

[heavy dawn]

j ai pas troop compirs

[agile helm]

Pratiquer à fond x)

[agile helm]

Envoyer ton problème en gros ^^

[heavy dawn]

bah je sais pas comment l'adapter sous format mobile

[agile helm]

Tu veux que je t aide sur tout le responsive c est ça ?

[heavy dawn]

Le mieux ouai c’est que tu m’expliques comment sa fonctionne etc parce que j’ai du mal

[agile helm]

yup tu voc ?

[zinc frigate]

Non mais pour faire les bases et aussi des idées de projet débutant

[storm folio]

Quel projet par exemple ?

[eager veldt]

Vous en pensez quoi?

(j'attends vos retours, ce qu'il faut améliorer etc..)

[heavy dawn]

ouai demain tu peut ?

[agile helm]

Euhh dcp ça va être compliqué

En semaine je peux pas trop 😅😅😅

[heavy dawn]

ah

[heavy dawn]

la semaine pro ?

[agile helm]

La saison du ski ouvre

C est quoi que tu comprends pas en fait ?

[heavy dawn]

les responsive

[agile helm]

Oui je sais

Mais encore

[formal fox]

J’aime bien mais le padding à droite n’a pas l’air d’être le même qu’à gauche

Les icônes sont un peu épaisses par rapport à la police

Le titre est un peu serré avec la croix

Peut être aussi trop rapproché des boutons mais ça c’est plutôt un avis perso

Tes icônes n’ont pas le même style aussi

[eager veldt]

Ouais c'est vrai

Je viens de m'en rendre compte

[eager veldt]

Merci pour ton avis c'est sympa

[viral swift]

bonjours quelqu'un connais se type d'interaction ?

[storm folio]

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
Mais généralement c'est fait avec du JS

[viral swift]

merci

[civic kettle]

https://getbootstrap.com/docs/5.0/components/accordion/

[languid nova]

bonsoir à tous

j'espere que vous allez bien

j'ai un petit projet d'etude demandé à réalisé dans 10 jours , et chui besoin d'aide si qqun est libre

[steady gazelle]

Quel est ton prbl

[languid nova]

je veux réaliser une gallerie avec le grid mais y'as des truc que je puisse pas les régler quand tu seras dispo

[storm folio]

Si tu pose pas ton problème clairement personne va pouvoir t'aider

[robust obsidian]

[pine aspen]

hello j'ai un petit soucis avec un code css pour mon travail en but et je n'y arrive pas si qlq veut bien m'aider merciii

je n'arrive pas a faire disparaitre ces fichu barre qui deborde

l'html:

le css

[indigo spade]

@pine aspenSalut, alors j'ai vérifier vite fais ton code et ton problème viens de ton CSS donc j'ai retirer deux lignes (celle qui sont commenter dans le code ci dessous) :

header li {
    border: 2px solid orange;
    /* border-right: none; */
    width: 100%;
}

.navbar li {
    color: orange;
    text-decoration: none;
    transition: all 0.4s;
    display: block;
    /* padding: 5px; */
}

Cela donne une version un peu mieux mais avec encore énormément de problème visuelle malgrès tout a certains endroits (indiquer par l'image envoyer).

j'éspère avoir été utile malgrès le temps d'attente x) Tu as peut être même surement déjà régler le soucis

[pine aspen]

je te remercie vraiment de ta réponse personne ne ma aider et je débute dans l'html et le css

[indigo spade]

Tu apprend en autodidacte ?

[pine aspen]

oui et non j'ai un prof qui nous "apprend"

je précise entre guillemet

[indigo spade]

ahh je vois x) Personnellement j'ai commencer ma formation en septembre (avec quelques connaissance autodidacte que j'avais déjà avant. En tout cas fais attention à ton css car la j'ai regarder et ça va dans tout les sens ^^ (surtout tes border).

Si jamais pour faciliter les choses tu peux utiliser des frameworks simple comme Bulma qui t'aideras vraiment beaucoup ahah (après le but n'est pas d'être dépendant des frameworks faut quand même que tu t'entraines de ton coter)

En tout cas hésite pas à demander si tu as besoin d'aide sur d'autres choses.

[restive fog]

Bulma

Tellement le meilleur fw CSS après tailwind

[next wagon]

Ajoute cette ligne magique au début de ton CSS :

*, *::before, *::after {
  box-sizing: border-box;
}

Ça va corriger ton problème directement et sûrement plein d'autres d'ailleurs.
Et je t'invite à lire cet article : https://www.joshwcomeau.com/css/custom-css-reset/

[pine aspen]

ça marche merci beaucoup de ton aide et de ton temps

[pine aspen]

effectivement ça à alligner mon sous menu de ma barre de nav merci a toi également

est ce que tu peux juste m'explique le petit bout de code car j'ai un oral et je dois détaillé les ligne du code (expliquer a quoi sa sert)

[elfin hollow]

je ne comprend pas pourquoi mon bouton me fait ca

        <button class="contact-me">
            <span class="circle">
                <span class="icon arrow"></span>
            </span>
            <span class="button-text">Contact Me</span>
        </button>```

button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    background: transparent;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
}

button.contact-me {
    width: 12rem;
    height: auto;
}

button.contact-me .circle {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: relative;
    display: block;
    margin: 0;
    width: 3rem;
    height: 3rem;
    background: #282936;
    border-radius: 1.625rem;
}

button.contact-me .circle .icon {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
}

button.contact-me .circle .icon.arrow {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    left: 0.625rem;
    width: 1.125rem;
    height: 0.125rem;
    background: none;
}

button.contact-me .circle .icon.arrow::before {
    position: absolute;
    content: "";
    top: -0.29rem;
    right: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border-top: 0.125rem solid #fff;
    border-right: 0.125rem solid #fff;
    transform: rotate(45deg);
}

button.contact-me .button-text {
    transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem 0;
    margin: 0 0 0 1.85rem;
    color: #282936;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-transform: uppercase;
}

button:hover .circle {
    width: 100%;
}

button:hover .circle .icon.arrow {
    background: #fff;
    transform: translate(1rem, 0);
}

button:hover .button-text {
    color: #fff;
}

normalement :

a la place du lmearn more cest contact me

si quelquun si connais merci de me contacter ou meme ici merci beaucoup bonne soiree

[formal fox]

Si t’as toujours besoin d’aide je peux t’expliquer si tu veux

Hésites pas à me ping si je vois pas

[formal fox]

Ton bouton doit être déplié par défaut ? Car là si tu passes ta souris par dessus c’est le bon comportement non ?

[formal fox]

Sinon le soucis vient peut-être des autres éléments de ta page

[elfin hollow]

cest aussi ce que je me dis

mais je ne trouve pas

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", serif;
    background-color: #e8e8e8;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 10%;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    z-index: 100;
}

.profile-container {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 12px;
}

.profile-image {
    width: 59px;
    height: 48px;
    border-radius: 16px;
    object-fit: cover;
    margin-right: 12px;
}

.profile-text {
    display: flex;
    flex-direction: column;
}

.name {
    font-size: 14px;
    margin: 0;
}

.username {
    font-size: 12px;
    color: #0cc0df;
    margin: 0;
}

.navbar ul {
    display: flex;
    list-style: none;
}

.navbar ul a {
    margin-left: 10px;
    text-transform: capitalize;
    font-size: 13px;
    text-decoration: none;
    color: black;
    position: relative;
}

.navbar ul a::after {
    position: absolute;
    left: 0;
    bottom: -5px;
    content: "";
    width: 0%;
    height: 1.5px;
    background-color: #0cc0df;
    transition: 0.1s ease-out;
}

.navbar ul a:hover::after {
    width: 100%;
}```

jai tout ca en plus du boutton

[elfin hollow]

non que si je passe ma souris

[formal fox]

t'as l'html ?

[elfin hollow]

je trenvoie ça

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">       
    <title>@liamghlt</title>
</head>
    <header>
        <div class="profile-container">
            <img src="./img/IMG_4137.JPG" alt="Photo de profil" class="profile-image">
            <div class="profile-text">
                <p class="name">Liam Grihault</p>
                <p class="username">@liamghlt</p>
            </div>
        </div>
        <div class="navbar">
            <ul>
                <li><a href="#">Works</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Links</a></li>
            </ul>
        </div>
        <button class="contact-me">
            <span class="circle" aria-hidden="true">
            <span class="icon arrow"></span>
            </span>
            <span class="button-text">Contact Me</span>
          </button>
    </header>
<body>
    
</body>

</html>```

[formal fox]

Mets le background-color de ton .button-text sur transparent. Ton soucis c'est que ton texte passe par dessus ton cercle et comme le fond a une couleur il masque ce qu'il y a en dessous.

button.contact-me .button-text {
    // ...
    background-color: transparent;
}

[elfin hollow]

merci ça marche parfait !!!!!

[formal fox]

Continues bien bg

[thin merlin]

Bonsoir, es qu'on peut intégrer du python dans html et le faire blocker une action php ou pas.

Je m'explique mon but et de faire un "recaptcha" maison

Genérer de chiffre demandé l'addition si le calcul est ok on peut envoyer le formulaire de contact.

[storm coyote]

Je ne pense pas que tu puisse intégrer du python à du html, à moins peut être de trouver un transpileur vers du javascript

Après je suis certain que ce que tu veux faire en python peut être fait en js

[wide rune]

Tu peux faire un Backend qui va communiquer avec ton Frontend par l'intermédiaire de JavaScript... Après directement intégré du python dans du HTML j'ai jamais essayé et je pense pas que se soit recommandé...

[restive fog]

RestAPI

[formal fox]

Je pense qu’il débute les gars, doucement x)

[restive fog]

bas doucement chef c'est lui qui demande comment faire on répond mdr la seul façons d'intégrer du python dans du html c'est de faire de l'ajax et d'use flask pour crée une restAPI python

après il existe des libs du genre jinja mais je serais pas dire ce que ça vaut 🤣

[civic kettle]

C'est faisable en php, pourquoi vouloir intégrer du python pour bloquer le post de php, il suffit de le faire en php

[thin merlin]

Car je connais plus le python mais je vais regarder

[civic kettle]

Dans ce cas là je te conseil de te documenter sur le framwork Django de python pour faire du backend a la place de php 😉

[fervent turtle]

qui a des idées de projet pour me perfectionner en html css et js ?

[icy whale]

Tu peux t'inspirer des sites que tu vois au quotidien !

Par exemple sur le site de Apple tu vois un effet super cool ! Tu essaye de le reproduire à l'aide de tes connaissances

tu regardes surtout aussi l'inspecteur des éléments pour comprendre la structure du site par exemple les div pourquoi elles sont misent comme ça tu décoches des éléments dans le css pour voir qu'est ce que ça donne etc..

[fervent turtle]

merci gros tes le seul ta rep mdrr

[icy whale]

Il y a pas de soucis mdrr

Si tu as besoin de conseil hésite pas @fervent turtle

[fervent turtle]

merci gros

[formal fox]

Si tu veux aussi t’entraîner à JS essaie peut-être des trucs un peu interactifs comme un générateur de mots de passes par exemple

[eternal stag]

Bonsoir à tous ! Dans le cadre d’un projet, je cherche quelqu’un qui s’y connaît un peu en scrapping, j’aurais besoin de récupérer des donnés d’un site (tableau) et les extraire au format csv. Si jamais il y a des volontaire pour m’orienter n’hésitez pas !
Merci d’avance ^^

[thin merlin]

bonsoir, regarde il y a une extension web qui est bien faite

[eternal stag]

C’est possible de le faire en automatique quotidiennement ?

[thin merlin]

je pense pas

[formal fox]

Tout est possible :)

T’as besoin de faire quoi plus précisément ?

[eternal stag]

En gros j’ai un site avec un tableau, j’aimerais bien faire un programme qui me permette de récupérer ce tableau et l’exporter sous un fichier csv pour pouvoir l’utiliser plus facilement en traitement de données…

[stone folio]

Un avis?

[meager beacon]

Franchement c'est propre, bien joué
Je te conseillerai juste de centrer l'image des boutons en haut à droite (le bouton vert n'a pas son image centr
Et sinon pourquoi pas mettre les input de la même taille

[icy whale]

J’aurais dit la même chose pour les inputs mais pour le prénom et nom met les sur la même ligne

[thin merlin]

Bsr, vous avez un ou des site ou je peux trouver des animation à mettre quand mon formulaire c'est envoyé svp ?

[robust obsidian]

https://uiverse.io

[thin merlin]

merci bcp

[restive fog]

beaucoup trop fort les gens la dessus

[icy whale]

oui !

[icy whale]

Tu travailles en quel langage ?

[restive fog]

principalement vue + ts mais je me ferme aucune porte x)

pour la parti frontend

[robust obsidian]

bof pas trop faut jsute etre original et que se soit intéressant pour les autres

[icy whale]

Oh ! Comme moi mais je fais pas de ts, c'est vraiment utile ?

[restive fog]

Perso je préfère de loin TypeScript à JavaScript déjà la gestion des objets et des states est tellement plus clean avec TS le typage statique te force à être clean dans ton code, et ça évite plein d’erreurs chiantes niveau opti, ça change pas directement la perf mais ça te pousse à écrire du code plus propre et mieux structuré donc au final t’y gagnes

[icy whale]

Oh ok ! Je comprend, je vais passer en ts sur mon prochain projet alors !

Est-ce que on peut rester en contact, j'ai personne dans mon entourage qui fais du front ^^ @restive fog

[remote flower]

Bonjours, je cherche a scrapper les cartes fut sur le site https://www.futwiz.com/en/ etant nouveau dans le domaine du scrapping j’ai du mal a le faire quelqun peut m’aider merci

[void anvil]

je fais beaucoup de front stv

[icy whale]

Carrément !

[void anvil]

donc add stv que je t'aide

[wide rune]

Moi aussi je fais du front...

[distant thorn]

Vous en pensez quoi ? C'est mon premier site il y a juste css et html :

[icy whale]

Pour un premier site c’est vraiment super !

Si tu veux vite progresser en html, css inspire toi des sites connu

Tu regardes par exemple un effet ou un visuel qui te plaît et tu essaye de le reproduire !

Tu vas t’amuser et apprendre super vite

[distant thorn]

Merci beaucoups pour le conseil !

[distant thorn]

Voici la v2 que j'ai commencé j'ai exécuté ton conseil j'ai fais que le header

[icy whale]

C'est beaucoup mieux !

[restive fog]

simple efficace

[distant thorn]

Merci 😁

[distant thorn]

Merci beaucoup ça fais très plaisir 😁