#html-css

1 messages · Page 7 of 1

severe matrix
#

apres comme tu veux

scenic fiber
#

Et c'est les modifs de quoi que je doit mettre ?

severe matrix
#

par exemple dis ton text de navbar c'est quoi la classe

#

<div class="navbar"> sa par exemple

scenic fiber
#

Donc att

severe matrix
#

ok

scenic fiber
#

Je pensais avoir compris, mais je n'arrive pas à le mettre en place

severe matrix
#

ok tu vois dans ton html je vais te faire une demo

# 
<h1 class="ta classe">H1</h1>
#

tu vois dans le h1 avant que ca se ferme ya une "class" et la dedans ya ecris "ta classe" on va l'appeller e text et bas le text tu me donne le text des <li> de ta navbar

scenic fiber
#

Ah ok

# 
        <section id="home">

            <ul>
                <li><a class="AProposDeMoi" href="AProposDeMoi.html">À propos de moi</a></li>
                <li><a class="MesCreations" href="MesCreations.html">Mes Créations</a></li>
                <li><a class="IlMeFontConfiance" href="IlMeFontConfiance.html">Ils me font confiance</a></li>
                <li><a class="MeContacter" href="MeContacter.html">Me contacter</a></li>
            </ul>

        </section>
severe matrix
#

merci

#

un truc comme sa genre

# 
@media(max-width: 992px) {
  .home {
    text-size: 10px
  }
}
scenic fiber
#

Ok je test

severe matrix
#

non c'est pas les trucs exacts que tu doit mettre apres tu réajuste tu fais des menu etc

#

c'est ca qui est bien avec le responsive

scenic fiber
#

Oe je vois

severe matrix
#

Bonsoir pourquoi je ne voit pas le logo discord ?
CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect » href="https://fonts.googleapis.com"> <link rel="preconnect » href="https://fonts.gstatic.com » crossorigin>
    <link href="https://fonts.googleapis.com/css2? family=Poppins:wght@500&display=swap » rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>Ayla'Market</title>
</head>
<body>
    <h1>Bienvenue sur <strong class="Ayla">Ayla'Market</strong></h1>
    <div class="navbar">
        <li class="nav-item">
            <a href="#" class="nav-links">
                <i class="fas-brands fas-discord" style="color: #000000;"></i>
                
            </a>
        </li>
    </div>
</body>
</html>

et svp jugez rien c'est un test pour m'entrainer

hidden delta
#

Tu la trouvés où l'icône ?

severe matrix
#

font awesome

hidden delta
#

T'as importé l'API de fontawesome dans ton code ?

severe matrix
#

non

#

merci je vais tester demain

hidden delta
#

Derien

#

Il faut l'importer pour que sa fonctionne

south cipher
#

Question pour les devs web , comment on exporte sa maquette filma en code css ?

idle sparrow
#

Bonjour, est-ce que quelqu'un sait comment ajouter un moyen de paiement à mon site en utilisant Square ?

brisk forum
south cipher
#

Ok merci

scenic fiber
#

Bonjour, je n'arrive pas à ajouter plusieurs images sur la même page en pouvant les modifiants chacune de leurs côtés pouvez-vous m'aider ?

tender egret
scenic fiber
#

Justement je les utilises sauf que cela fait comme si les images sont colé entre elle

tender egret
#

si elles sont collées met un margin ?

tender egret
scenic fiber
scenic fiber
sick saddle
sick saddle
#

si tu n'apprends pas le css tes sites se limiterons à du texte et des images alignées verticalement

scenic fiber
#

nan mais ducoup c'est bon j'ai trouver mon problème

sick saddle
tender egret
#

@scenic fiber tu sais utiliser CSS ?

scenic fiber
#

Oui pourquoi ?

sick saddle
scenic fiber
#

Si c'est juste que je me demandé pourquoi il me parlé de margin et j'ai compris après

sick saddle
#

donc il t'a proposé de leur appliquer un margin pour remédier à celà

gaunt yoke
#

@scenic fiber si tu cherches à aligner tes images en lignes, évite les margins, c'est pas propre et ça va te causer du soucis
utilise plutot des grids et des gaps, dans ce cas précis ce sera bcp plus propre

scenic fiber
gaunt yoke
#

Essaye de regarder sur google, tu peux aussi utiliser les gaps avec du flex, ça va fonctionner aussi
Dans les 2 cas, évite les margins dans ce genre de cas, car ce ne sera pas bon

un margin on va surtout l'utiliser pour créer une marge sur un élément précis, par exemple entre un texte et un bouton
mais si tu as des éléments qui se répète, comme une galerie photo les marges c'est pas worth, mieux d'utiliser les gaps

scenic fiber
#

Ok merci pour le conseil, je vais me renseigner sur les gaps et les grids

sick saddle
gaunt yoke
#

y a quand meme une différence sur les cas d'utilisation, typiquement toujours sur des exemples d'aligmenet de cards par exemple, je préfère utiliser les grids

sick saddle
#

j'avais pas à me casser la tête pour le responsive etc

gaunt yoke
#

grid est plus relou a utiliser faut l'avouer, mais si tu l'utilises avec tailwind par ex

#

c'est easy win

sick saddle
#

quand je vois ça effectivement grid a vrm l'air plus relou

#

après je suis pas encore tombé sur des cas où il m'était nécessaire d'utiliser grid

#

je verrais à l'occasion (je suis pas fan du web ça me donne mal au crâne)

sturdy grove
#

Il faut s'habituer a grid, c 100x plus robuste qu'en simuler avec flex.

#

Et franchement c pas difficile a comprendre.

hidden delta
#

Salut quelqu'un sait ou je peux améliorer mon css xD ?

copper warren
#

Comment ça ?

#

Genre des sites pour t'entrainer par exemple ?

hidden delta
#

Oui

copper warren
#

frontend mentor

hidden delta
#

Et savoir aussi quel propriétés utilisé pour simplifier au lieu d'une autre

mild cairn
#

Salut qui pour me proposer un projet en html et css svp

rose bronze
formal fox
#

Tu peux faire une gallerie photo, ça te fera prendre en main le responsive et la propriété grid

dusky skiff
#

Pas obligé d'utiliser une grid 👀

mild cairn
#

Merci les gars

scenic fiber
#

Salut, j'ai une question, comment faire pour que mon rendu soit le même sur mon PC que sur m'on téléphone

hidden delta
#

Qui sait comment faire pour avoir des bordures comme cela pour les inputs ?

image.png
dusky skiff
dusky skiff
scenic fiber
dusky skiff
#

Il faut qu'il soit aussi fonctionnel sur mobile

#

Le terme plus exact serait accessible

#

Montre moi ton site je vais te dire

scenic fiber
#

Pense tu qu'il serait possible de vocal 5min pour que je te montre, cela ira mieux je pense ?

dusky skiff
gaunt yoke
scenic fiber
scenic fiber
dusky skiff
#

Si tu veux, sinon si tu me file le lien ou un screen ça fait lz taff je peux t'aider maintenant

#

Mais par contre c'est pas un petit détail le responsive, en tout cas quand tu débutes

#

Ça peut prendre du temps

scenic fiber
scenic fiber
dusky skiff
scenic fiber
#

pas de soucis

dusky skiff
gaunt yoke
dusky skiff
#

Oui Kappa

scenic fiber
dusky skiff
#

Maintenant en général quand je fais un site il est responsive direct à genre 90%, mais malheureusement dans certains cas on est obligés de bouger des elements sinon niveau UX c'est eclatax

Mais du coup @scenic fiber c´est ça que tu vas devoir faire, quitte à faire une maquette, vraiment te demander qu'est-ce qui serait le mieux pour l´experience utilisateur

scenic fiber
dusky skiff
#

Discord n´ont pas eu l'idée d'implémenter le bouton copier sur mobile quand le message est supprimé 🤡

#

Flemme de tout retaper

scenic fiber
#

Oe tkt

dusky skiff
#

En plus t´as un tableau MEGALUL

#

Je sais jamais comment les adapter pour pas que ce soit dégueulasse

scenic fiber
#

J'ai fait sa sous forme de tableau sans faire un tableau. J'ai fait des lignes pour la partie gris

dusky skiff
#

En vrai toi tu peux facilement, tu sais quoi je te montrerais en rentrant ce sera plus simple

dusky skiff
#

Fin plus ou moins

scenic fiber
#

Oui, pas de soucis. S'il faut vocal pour que se soit plus simple, il y a pas de problème

scenic fiber
hidden delta
dusky skiff
#

Si tu parles bien de ce que je pense concernant la 2nde bordure

hidden delta
#

Thx

errant cypress
hidden delta
#

Salut j'ai deux div comment faire pour les display inline ?

errant cypress
#

Salut,

Met une div parent où tu mets ton display inline, et à l’intérieur tu mets tes 2 div enfants, elles hériteront du code parent

hidden delta
errant cypress
hidden delta
# 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

  <title>Frontend Mentor | Newsletter sign-up form with success message</title>

  <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>

  <!-- Sign-up form start -->
<div class="container">
  <div class="second-container">
  <h1>Stay updated!</h1>
  <br>

  <p>Join 60,000+ product managers receiving monthly updates on:</p>
<br>
    <li><i class="fas fa-check-circle"></i>  Product discovery and building what matters</li>
    <li><i class="fas fa-check-circle"></i>  Measuring to ensure updates are a success</li>
    <li><i class="fas fa-check-circle"></i>  And much more!</li>
  <form action="">
<br><br>
 <label>Email adress</label> 
<br>
 <input class="email" type="email" value="email@company.com"> 
</div>
</form>
<br>
 <input class="confirm" type="submit" value="Subscribe to monthly newsletter"> 

</div>
<div class="second-container">
<img src="./assets/images/illustration-sign-up-desktop.svg">
</div>
</div>
  <!-- Sign-up form end -->

  <!-- Success message start -->



  <!-- Success message end -->

</body>
</html>```
tame forge
#

Donc c’est à toi de tenir compte du fait que certaines personnes ai des écrans 32:9 de 1m de large kapp

#

Même si j’avoue que c’est chiant pour tester si tout est ok harold

dusky skiff
gaunt yoke
#

c'est mieux quand meme, allez push et deploy

Screenshot_2023-06-14_at_11.20.38_AM.png
dusky skiff
dusky skiff
gaunt yoke
#

j'ai mis un container à ton app wrapper

#

un max width

dusky skiff
gaunt yoke
#

je sais plus

lapis burrow
#

C'est une valeur sûre

gaunt yoke
#

j'avais mis 90rem je crois

#

ou léger plus

dusky skiff
#

ouais en vrai ça correspond à ce que garder dit

#

environ

lapis burrow
#

(c'est la taille de la majorité des PC)

dusky skiff
#

mais en vrai t'as raison le résultat est quand même mieux

lapis burrow
#

Je vais copier ton portefolio wailrone

gaunt yoke
#

je sais oui

lapis burrow
#

J'aime

dusky skiff
#

Même si c'est responsive

#

Bon je ferais ça ce soir alors

lapis burrow
#

Copier > coller

gaunt yoke
#

responsive ca veut pas dire aller toucher un bout a l'autre de l'écran branleur

dusky skiff
lapis burrow
#

je vais record un bug que j'ai trouvé sur ton site

dusky skiff
#

Ah ouais ? Merci

gaunt yoke
#

on a rien vu garder tkt

lapis burrow
gaunt yoke
lapis burrow
#

MAIS

#

POURQUOI MKV

dusky skiff
#

ça me parait bon

lapis burrow
#

attend je vais reconfig obs

dusky skiff
gaunt yoke
#

ça sert a quoi le carré a droite

#

le truc coloré

dusky skiff
#

à rien

gaunt yoke
#

ah top

dusky skiff
#

combler un espace vide

gaunt yoke
#

ce qui aurait été bien c'est que l'image qui apparait soit la meme qu'en dessous mais en couleur

#

je sais pas si tu vois

lapis burrow
dusky skiff
#

chaud

lapis burrow
dusky skiff
lapis burrow
#

Mais voilà mdrr

dusky skiff
#

En fait enzo c'est un seul svg

#

J'ai juste foutu le svg en background, et avec l'animation je change la position

lapis burrow
#

(je testait d'upload + de 8 Mb)

#

la hard limite pour les non nitro à été monté à 25 Mb

#

Nitro basic 50 Mb

#

Nitro classic 100 Mb

#

Nitro 500 Mb

dusky skiff
#

on a l'impression que ça fait une animation de fou mais c'est juste ça Kappa

image.png
gaunt yoke
#

c'est juste que la ca fout 1 image par dessus l'autre

#

ca aurait été cool que les 2 se suivent

dusky skiff
#

nan y'a qu'une image, mais je vois ce que tu veux dire, j'ai juste à changer l'orientation du dégradé comme ça il bouge aussi

Part_22x.png
#

ça prend ça du coup

image.png
#

mais ouais t'as raison je vais modif ça aussi

gaunt yoke
#

👍

dusky skiff
#

C'est fix

gaunt yoke
#

je viens de tester c'est pareille mais t'embête pas

lapis burrow
#

my bad bug graphique

dusky skiff
#

Ton cache alors

#

Ou tu parles de l'image ?

gaunt yoke
#

de l'image

Screenshot_2023-06-14_at_4.18.35_PM.png
#

la forme a l'intérieur de suit pas celle de derrière

ancient jackal
#

Bonjour, j'ai un petit soucis de flou sur mon responsive, voila le code html en question:

<nav class="navbar-header">
            <div class="main-navlinks">
                <button class="hamburger" type="button" aria-label="Toggle navigation" aria-expanded="false">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <ul class="navlinks-container" style="backdrop-filter: blur(10px);">
                    <li><a href="formation/">Formation</a></li>
                    <li><a href="">Pass</a></li>
                    <li><a href="prompt/">Prompt</a></li>
                </ul>
            </div>
        </nav>

et voici le code css de cette partie:

/* Header */

.header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    padding: 0 20px;
    box-shadow: inset 0px -1px 0px #6F2DA8;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
}

.navbar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.logo {
    width: 60px;
}

.hamburger {
    display: none;
}

.navbar-header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.navbar-header li a {
    font-size: 25px; 
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 14px 25px;
}
# 
@media screen and (max-width: 900px) {
    .navbar-header {
        padding: 15px 20px;
    }

    .logo {
        order: 2;
        margin: 0 auto;
    }

    .main-navlinks {
        order: 1;
        width: auto;
    }

    /* hamburger */
    .hamburger {
        width: 20px;
        height: 20px;
        cursor: pointer;
        border: none;
        display: flex;
        background: transparent;
        align-items: center;
        position: relative;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background: #fff;
        position: absolute;
        pointer-events: none;
        transition: opacity 0.3s 0.15s ease-out;
    }
    .hamburger span:nth-child(1),
    .hamburger span:nth-child(3) {
        transition: transform 0.3s ease-out;
    }

    .hamburger span:nth-child(1) {
        transform: translateY(7px);
    }
    .hamburger span:nth-child(3) {
        transform: translateY(-7px);
    }

    .hamburger.open span:nth-child(1) {
        transform: translate(0) rotate(135deg);
    }
    .hamburger.open span:nth-child(2) {
        opacity: 0;
        transition: opacity 0s ease-out;
    }
    .hamburger.open span:nth-child(3) {
        transform: translate(0) rotate(-135deg);
    }

    .navlinks-container {
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        top: 100%;
        left: 0;
        transform: translateX(-100%);
        height: 100vh;
        padding: 15px 50px 15px 20px;
        border-right: 1px solid #6F2DA8;
        backdrop-filter: blur(10px);
    }
    .open {
        transform: translate(0%);
    }
    
    .navlinks-container li a {
        font-size: 18px;
        margin: 10px 0px;
    }
}

le code du responsive

formal fox
ancient jackal
#

En gros j'ai fait un burger, sur le menu de gauche quand le burger est cliqué il apparait mais normalement j'ai mis cette effet:
backdrop-filter: blur(10px);

mais il ne fonctionne pas

#

tu veux un screen?

dusky skiff
gaunt yoke
#

non t'as mal compris laisse tomber haha

formal fox
ancient jackal
#

En gros la y a un menu qui vient par la gauche avec 3 url et je n'arrive pas a que ce menu de gauche est comme fond un flou

image.png
topaz ledge
ancient jackal
topaz ledge
#

donc oui

ancient jackal
#

le truc est que je voudrais l'utiliser en un flou pour que quand le menu s'ouvre le fond de ce menu soit flou et que l'ont vois pas ce qu'il y a derrière

topaz ledge
#

ahh en gros t'as un menu avec du texte, et c'est le fond de ce menu qui doit être flou ?

#

dans ce cas tu as la propriété backdrop-filter, qui rendra flou ta div mais pas son contenu

backdrop-filter: blur(5px);
ancient jackal
#

juste j'ai déja ça dans mon code et il ne prend pas effet

topaz ledge
#

ah ? Fais voir, de mon côté ça a toujours fonctionné

ancient jackal
topaz ledge
#

nan mais le code

ancient jackal
#

sur cette image le menu et ouvert et le fond n'est pas flou c'est pour ça que j'ai envoie mon message

# 
@media screen and (max-width: 900px) {
    .navbar-header {
        padding: 15px 20px;
    }

    .logo {
        order: 2;
        margin: 0 auto;
    }

    .main-navlinks {
        order: 1;
        width: auto;
    }

    /* hamburger */
    .hamburger {
        width: 20px;
        height: 20px;
        cursor: pointer;
        border: none;
        display: flex;
        background: transparent;
        align-items: center;
        position: relative;
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background: #fff;
        position: absolute;
        pointer-events: none;
        transition: opacity 0.3s 0.15s ease-out;
    }
    .hamburger span:nth-child(1),
    .hamburger span:nth-child(3) {
        transition: transform 0.3s ease-out;
    }

    .hamburger span:nth-child(1) {
        transform: translateY(7px);
    }
    .hamburger span:nth-child(3) {
        transform: translateY(-7px);
    }

    .hamburger.open span:nth-child(1) {
        transform: translate(0) rotate(135deg);
    }
    .hamburger.open span:nth-child(2) {
        opacity: 0;
        transition: opacity 0s ease-out;
    }
    .hamburger.open span:nth-child(3) {
        transform: translate(0) rotate(-135deg);
    }

    .navlinks-container {
        color: #fff;
        background: #000;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: fixed;
        top: 100%;
        left: 0;
        transform: translateX(-100%);
        height: 100vh;
        padding: 15px 50px 15px 20px;
        border-right: 1px solid #6F2DA8;
        backdrop-filter: blur(10px);
    }
    .open {
        transform: translate(0%);
    }
    
    .navlinks-container li a {
        font-size: 18px;
        margin: 10px 0px;
    }
}
ancient jackal
#

c'est bon j'ai trouver un autre moyen

rigid jolt
#

qui pourrai être mon prof html css ? :/

void bough
#

Je peux te faire un gdoc complet de plusieur page sur la base du HTML Css si tu veux

rigid jolt
void bough
#

Vient priver et je te fais sa

lament granite
void bough
#

Pas de soucis

nocturne dagger
#

Bonsoir, si vous m'aidez a trouver comment recharger une image qui se trouve dans un dossier au dessus du fichier index.html, genre src='../media/photo' . Si vous avez une solution en php je suis prenant aussi. Merci

rich hemlock
#

Bonsoir, j'aimerais trouver quelqu'un qui pourrait créer un systeme de vocal sur un site web, il faudrait lier cette vocal à mon serveur minecraft, pour la partie minecraft je m'en occuperai, mais pour le site web je n'y arriverais pas, le but et de faire que chaque joueur qui sont à moins de 50 blocks les uns des autres peuvent se parler, et pour se faire je communiquerais les informations requises directement au site web par une base de donnée SQL, si quelqu'un serait m'aider ce serait au top, merci d'avance !

hazy spade
rich hemlock
copper warren
#

Grafikart

formal fox
rich hemlock
formal fox
#

Comme ça j'aurai utilisé un websocket je pense

#

je me trompe peut-être

severe matrix
#

Bonsoir je comprend pas pourquoi ma nav bar me fais sa et mon hr passe au dessus de la nav bar alors que je l'ai mis apres
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect » href="https://fonts.googleapis.com"> <link rel="preconnect » href="https://fonts.gstatic.com » crossorigin>
    <link href="https://fonts.googleapis.com/css2? family=Poppins:wght@500&display=swap » rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <title>Clic'Market</title>
</head>
<body>
    <div class="navbar">
        <li class="nav-item">
            <a href="#" class="nav-links">
                <a class="discord" href="#">
                    <i class="fab fa-discord fa-lg fa-fw" style="color: #000000;"></i>
                    Discord
                </a>
                <a href="#" class="menu">
                    <i class="fas fa-home" style="color: #000000;"></i>
                    Menu
                </a>
                <a href="#" class="bag">
                    <i class="fas fa-shopping-cart" style="color: #000000;"></i>
                    Panier
                </a>
            </a>
        </li>
    </div>
    
    <div class="line">
        <hr>
    </div>
    <h1>Bienvenue sur <strong class="Clic">Clic</strong><strong>'Market</strong></h1>
    
    
</body>
</html>
image.png
#

CSS

* {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

body {
    height: 100vh;
    background-color: rgb(232, 232, 232);
    background-size: cover;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: black;
    font-size: 20px;
    float: right;

}

a:hover {
    color: rgb(220, 143, 0);
}

.Clic {
    color: rgb(255, 223, 65);
}

a {
    display: flex;
    justify-content: end;
    align-items: center;
    position: fixed;

}
brave jay
dark patio
#

Bonsoir ! Je viens vers vous car j'aimerais faire en sorte que le changement de mes slides soit fluide, j'ai test de mettre des animations et des transitions sur mes class, mais rien ne change ! Quelqu'un aurait une idée ? 🙂

#

Voici mon côté HTML :

<div class="container-content">
  <div class="wrapper-content">
    <div class="item inventory" (click)="onClick('inventory')">
      <p>Inventaire</p>
      <img src="/web/assets/pausemenu/inventory.png" alt="inventory asset">
    </div>
    <div class="item shop">
      <div class="wrapper-carousel" *ngFor="let shopSlide of shopCarousel; let shopIndex = index" (click)="onClick(shopSlide)">
        <div class="carousel-item" *ngIf="shopIndex === currentIndex">
          <div class="container-buttons">
            <div class="button prev" id="button" (click)="prevSlide()">
              <i class="fa-thin fa-arrow-left" id="icon"></i>
            </div>
            <div class="button next" id="button" (click)="nextSlide()">
              <i class="fa-thin fa-arrow-right" id="icon"></i>
            </div>
          </div>
          <div class="container-informations">
            <div class="container-asset">
              <img [src]="shopSlide.src" alt="{{shopSlide.title}}" [class]="shopSlide.name">
            </div>
            <div class="container-texts">
              <h1>{{shopSlide.title}}</h1>
              <h2>{{shopSlide.subtitle}}</h2>
              <div class="container-indicators">
                <span *ngFor="let item of shopCarousel; let shopCarouselSpanIndex = index" [class.active]="shopCarouselSpanIndex === currentIndex"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item discord" (click)="onClick('discord')">
      <p>Rejoignez-nous sur discord !</p>
      <img src="/web/assets/pausemenu/discord.png" alt="discord asset">
    </div>
    <div class="item informations">
    </div>
  </div>
</div>
sly abyss
#

hey est ce qu'il y en a qui savent comment je peut mettre le texte en haut svp

image.png
# 
.all {
  padding-top: 90vh;
  margin: 5vh;
  background-color: #0D1B2A;
  border-radius: 25px;
}```
#

code de la box

# 
<div class="all">
      <h1>header</h1>
    </div>```
#

normalement c sense bien l'afficher

stone minnow
#

Salut, question je suis bloqué depuis un petit moment je dois travailler sur un projet qui existe déja, on ma demande de changer les couleurs de plusieurs éléments appriorie facile mais je ne sais pas pourquoi cela ne marche pas.
Je fais inspecteur d'élement je modifie ca marche mais dans le code je n'y arrive pas.
Ici si je désactive background-color: #da012d;
Je réussi à désactiver tous le rouge et mettre le bleue que je veux mais dans mon code le fichier "theme-orange" pas la ligne de code

image.png
#

Ok c'est bon juste une histoire de cache envie de canner

gaunt yoke
#

d'ailleurs utiliser des marges/padding avec viewport height/viewport width c'est bof

sly abyss
#

Tu ferait comment toi?

gaunt yoke
#

je sais pas ce que tu cherches à faire donc compliqué

mental hull
#

Explique nous ce que tu veux faire @sly abyss

sly abyss
#

Voilà ma maquette

image.png
#

C pas la version finale mais c la seule que g sur tel

gaunt yoke
#

okay mais pourquoi autant de padding ?

#

c'est censé être une card ou c'est la page ? j'ai du mal a comprendre

sly abyss
#

Non c la page et le truc noir c le fond de figma

gaunt yoke
#

ah oui okay tu l'as ouverte sur figma mobile ok

#

Je comprend pas trop pourquoi tu as mis un padding-top: 90vh ?

sly abyss
#

je l'ai refait comme sa ```js
body {
background-color: #1B263B;
display: flex;
align-items: center;
justify-content: center;
}

.all {
display: flex;
align-items: flex-start;
justify-content: center;
position: relative;
background-color: #0D1B2A;
border: 1px solid #0D1B2A;
width: 90vw;
height: 90vh;
top: 5vh;
border-radius: 20px;
}```

#

jsp si c les bonnes techniques mais sa donne a peu pres ce que je veut

gaunt yoke
#

pas utile non

#

tu peux juste mettre un padding sur ton body

#

et dans ton body avoir une div qui aura le background-color bleu foncé + le radius

pastel thicket
#

je voudrais avoir un fond gris foncé comment je fait svp

image.png
vestal sage
#

Salut,
Tiens ça devrait t'aider : https://developer.mozilla.org/fr/docs/Web/CSS/background-color
Et ça aussi https://htmlcolorcodes.com/fr/selecteur-de-couleur/

Gl 😉

background-color - CSS : Feuilles de style en cascade | MDN

La propriété background-color permet de définir la couleur utilisée pour l'arrière-plan d'un élément (celle-ci peut être une couleur transparente).

HTML Color Codes
Sélecteur de Couleur — Codes Couleur HTML

Constatant que la couleur parfaite est plus facile que vous le pensez. Utilisez notre sélecteur de couleur pour découvrir de magnifiques couleurs et harmonies avec des codes de couleur Hex et les valeurs RGB.

pastel thicket
#

et je veux pas une ecriture

mental shell
#

Salut, il te suffit d'ajouter la propriété background-color à ton body ^^

severe matrix
vestal sage
severe matrix
#

Oe je pense que c’est un nouveau et pour la nav bar tuto

#

Parce que là c’est chaud je pense il a commencé aujourd’hui mais tkt Rémi moi aussi je suis passé par la

boreal parcel
#

Bonjour les amis je suis a nouveau web-developer et s’il nya pas de soucis je veux des conseille pour gagner l’argent de ce domaine

severe matrix
eternal jay
#

WIP - Début de la création de mon premier site avec Django

#
  • Tous les éléments sont modifiables & ajoutables par la plateformes admin images comprises
rugged oasis
#

Bonjour tout le monde, il y a plus d'un an, je m'étais codé entièrement mon site internet en html/css, sauf que j'ai tout perdu vu que je n'ai pas pratiqué entre temps, je viens de ré upload mon site, mais j'ai l'erreur suivante, quelqu'un saurait m'aider à la corriger svp? Merci beucoup 😁 🙏

eternal jay
#

@rugged oasis déjà tu as un espace en trop ici : <input type="text " id="human" name="human" required>

#

Essaye de mettre cette condition ça t'assurera que les clés du tableau $_POST sont définies avant d'y accéder.

    // Met ton code de traitement du formulaire ici
} else {
    echo '<p class="error">des valeurs du formulaire sont manquantes !!!</p>';
}```
rugged oasis
#

@eternal jay Salut Spyroz, merci beaucoup pour ta réponse, j'essaye ça ce soir, je te tiens au courant 😊

floral haven
#

Commence par les bases avant d'utiliser ce genre d'outil

woeful summit
eternal jay
eternal jay
copper warren
#

Sympas mais ajoute des transitions sur les card technology marketing parce que la c'est trop brut

dusky skiff
# eternal jay WIP - V2

Pour la première animation force le scroll sinon y´a un changement brusque de la taille de l'écran

#

La scrollbar faut la laisser affichée constamment pour moi, même si elle est vide

tame forge
# eternal jay WIP - V2

Dans ta navbar, rajoute un scale lors du hover pour éviter de décaler tout le reste 👀

#

Mais sinon, très classe

eternal jay
#

merci beaucoup pour vos retours les gars je vais ajuster tte ça !

severe matrix
#

Bonjour comment on fait un bouton de connecter avec Apple mais fonctionnel jsp si c’est en js ou html merci d’avance

copper warren
#

Normalement y'a tout sur cette doc

#

Je peux pas t'aiguiller plus j'ai jamais fais :/

severe matrix
#

Merci

#

Je trouvais pas un site pour sa merci

fiery stirrup
#

yo

#

mon logo se met de cet taille

#

hors j'aimerais le mettre comme ceci :

image.png
tame forge
fiery stirrup
tame forge
#

C’est pas une bonne idée d’utiliser des pixels. Ça marche sur ton pc, mais un mec qui est sur mobile, ça va être plus grand que son écran 👀

#

Sachant que tu mets une width de 100% à ton image

#

Là, t’as tes deux problème ^^

fiery stirrup
tame forge
fiery stirrup
#

dans du coup login img ?

#

parce que du coup quand je met des em dans login img

#

ça agrandit la taille de la box

tame forge
#

Il est là ton problème. Le premier message était plus un avertissement des problèmes futurs que tu pourrais rencontrer ^^

fiery stirrup
#

oui mais j'ai remplacer par EM

#

et ça agrandit qd même

tame forge
#

Puisque tu fais tout en pixels, mets une valeur en pixels

fiery stirrup
#

j'comprends pas trop

#

tu aurais un exemple ?

topaz ledge
#

oui mais faut que tu dise en quoi on peut t'aider

fiery stirrup
#

salut

#

comment faire pour mettre mes texte comme ça ?

sleek python
silent pumice
#

Comment pourrais-je mettre mes deux boutons au centre ?

Capture_decran_2023-07-06_175846.png
brazen furnace
silent pumice
brazen furnace
silent pumice
#

toujours pass :/

Capture_decran_2023-07-06_183046.png Capture_decran_2023-07-06_183106.png
mental shell
#

Salut regarde les propriétés de flexbox

severe matrix
#

et j'ai essaye sa mais sa marche pas

button {
    border: none;
    border-radius: 50%;
  }
fiery stirrup
fiery stirrup
sleek python
fiery stirrup
brave jay
severe matrix
#

Att je me co

tame forge
tame forge
# fiery stirrup

Pour utiliser flex-direction, il faut mettre l'élément en flex : display: flex;

tame forge
# severe matrix

Tu es certains que tu applique le style au bon élément (check avec le devtool)

brave jay
severe matrix
#

ok

#

CSS

button {
    border: none;
    border-radius: 50%;
  }
/*Oe c'est la hess/*

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AylanBot</title>
</head>
<body>
    <button>1</button>
</body>
</html>
silent pumice
#

pourquoi est ce que mon animation de border s'effectue sur mes deux boutons ?

Capture_decran_2023-07-06_220343.png Capture_decran_2023-07-06_220324.png
brave jay
#

ah mais tu n'as pas ajouter le css sur ton html

brave jay
silent pumice
brave jay
#

enleve les classe vetement et accesoire du hover

#

attend envois le css en texte

#

je vais te donner deux exemples

silent pumice
#

``body{background-color: #D4E0CE}

header{text-align:center;
font-size: 80px;
color:#66ACAE;
font-family:"Caprasimo";}

#global {
margin-left: auto;
margin-right: auto;
width: 355px;
padding-top: 15px;
display: flex;}

a:hover{background-color:#D4E0CE;
color: #66ACAE;
border: 5px solid #66ACAE;
transition: all 0.3s}

a:hover{background-color:#D4E0CE;
color: #66ACAE;
border: 5px solid #66ACAE;
transition: all 0.3s}

a{text-decoration:none;
background-color:#66ACAE;
padding: 10px;
font-size: 25px;
color: #D4E0CE;
margin: 10px;
border-radius: 10px``

brave jay
# 
.Vétements {
    transition: all 0.3s
}

.Accesoires {
    transition: all 0.3s
}
.Vétements:hover {
    background-color: #D4E0CE;
    color: #66ACAE;
    border: 5px solid #66ACAE;

}


.Accesoires:hover {
    background-color: #D4E0CE;
    color: #66ACAE;
    border: 5px solid #66ACAE;

}```
silent pumice
severe matrix
frail seal
#

Salut, sur mon site j'ai rajouté la possibilité que quand une personne écrit un texte et qu'il clique sur un bouton, ça envoie le texte dans un paramètre de l'url. Ce qui donne https://mon-site/page1?text1=test. Sauf que je clique sur envoyer, ça rajoute seulement le ? et pas le paramètre ce qui donne : https://mon-site/page1?

        <input class="input" type="text" id="texte_1">
        <input class="input" type="text" id="texte_2">
        <center>
          <button class="button" onclick="connect()">Envoyer le texte</button>
        </center>

<script>
    function connect() {
      var text1= document.getElementById("texte_1").value;
      var text2= document.getElementById("texte_2").value;
      var url = "/login?texte_1=" + encodeURIComponent(text1) + "&texte_2=" + encodeURIComponent(text2);
      window.location.href = url;
    }
  </script>
gaunt yoke
frail seal
# gaunt yoke salut tu peux utiliser le constructeur URL ```js function connect() { const ...

euh non ça ne veut toujours. Entre temps j'ai modifié quelques informations.

Voici mon nouveau code (je t'envoie tout le code comme ça tu me dis si j'ai fais une erreur quelque part car je débute en html/css/js):

<!DOCTYPE html>
<html>
<head>
  <title>Panel Administrateur - Farmcraft</title>
  <link rel="stylesheet" type="text/css" href="/files/css/style.css">
</head>
</head>
<body>
<div class="container">
  <img class="logo" src="/files/images/Farmcraft.png" alt="Logo">
    <div class="form-wrapper">
      <div class="error-box" id="errorBox">
        <span class="error-message" id="errorMessage"></span>
      </div>
      <form id="loginForm" class="form">
        <input class="input" type="text" id="texte_1" placeholder="Identifiant" autocomplete="username">
        <input class="input" type="password" id="password" placeholder="Mot de passe" autocomplete="current-password">
        <input type="button" id="createAccountBtn" value="Créer un compte">
        <center>
          <button class="button" onclick="connect()">Se connecter</button>
        </center>
      </form>
      <p id="result"></p>
    </div>
  </div>
  <video autoplay muted loop id="backgroundVideo">
    <source src="/files/images/background.mp4" type="video/mp4">
  </video>
  <div class="site-sidebar">
    <div class="site-sidebar-content">
      <h3 class="sidebar-title">Panel Administrateur de Farmcraft</h3>
      <p class="sidebar-description">Ce site web est réservé aux modérateurs/administrateurs de Farmcraft</p>
    </div>
  </div>
  <script>
    function connect {
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;
        const url = new URL(window.location.href);
        url.searchParams.set("username", username, "password", password);

        window.location.href = url
      }
  </script>
</body>
</html>```
#

J'utilise un système comme ça pour le login parce que j'utilise un plugin minecraft qui me permet de lier mon site à mon serveur MC. Et le problème c'est que la DB ne peut pas fonctionner avec ce système.

gaunt yoke
#

oui j'avais oublié les () après connect

#

je les ai rajoutés entre temps

#

le searchParams.set() prend juste une clé/valeur
du coup il faudrait que tu en ai 1 pour ta premiere value, et un pour la seconde

frail seal
#

Euh ça ne marche toujours... C'est bien comme ça du coup ?

    function connect() {
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;
        const url = new URL(window.location.href);
        url.searchParams.set("username", username);
        url.searchParams.set("password", password);

        window.location.href = url
      }```
gaunt yoke
#

<input class="input" type="text" id="texte_1" placeholder="Identifiant" autocomplete="username">
change le en id="username"

#

et fais des console.log pour voir si dans ta fonction connect tu récupères bien tout, un log de url etc

#

du débug

frail seal
#

en faisant un log de l'url ça me dit ça...

image.png
frail seal
#

bon bah je ne sais pas ce qui allait pas mais j'ai refait la code de la page et là ça fonctionne

void anvil
#

qui peut m'aider svp j'aimerais obtenir le lien de mon fichier html heberger sur un serveur pterodactyl

#

j'ai vraiment besoin d'aide donc si vous pouvez m'aider je vous remerci

tame forge
wild stump
# silent pumice nan ça marche pas

Alors là c'est parce que ta border du hover se rajoute avec 5px autour de ton élément donc ça pousse les autres élément pour régler ça on va fixer la taille de notre bordure sur la taille de notre élément :
box-sizing: border-box;

tame forge
#

Salut 👋
Je suis en train de créer un site qui permettrait de faire un blindtest. ça reprendrait un peu le principe de Kahoot : un maitre du jeu qui a un écran visible par tous les joueurs, et les joueurs qui se connectent chacun avec leur portable pour rejoindre et jouer la partie.
Je viens de terminer la partie qui permet de rejoindre et configurer la partie, et j'aimerais avoir quelques avis sur le design et le fonctionnement du site. Je ne suis notamment pas parfaitement satisfait de l'UI du panneau de contrôle des paramètres.
Et je ne sais pas trop comment faire pour que les scrollbar arrêtent d'apparaitre alros qu'elles n'ont rien à faire là.

Pour ceux que ça intéressent, le code source est disponible ici : https://github.com/Nonolanlan1007/blindtest

GitHub
GitHub - Nonolanlan1007/blindtest: Lancez facilement une partie de ...

Lancez facilement une partie de blindtest avec vos amis ! - GitHub - Nonolanlan1007/blindtest: Lancez facilement une partie de blindtest avec vos amis !

#

PS : y'a un deploy sur vercel, mais qui n'est pas encore connecté à l'API, donc c'est pas la peine d'essayer x)

gaunt yoke
#

yo! l'idée est cool mais visuellement c'est vieux et cheap c'est dommage!

tame forge
#

Donc jsuis content

lapis burrow
gaunt yoke
lapis burrow
#

c'est un widget Twitch

gaunt yoke
#

ah !

#

ça reste moche, mais du coup ok c'est pas des buttons mais juste une progression sur les votes ok !

lapis burrow
tame forge
wild stump
tame forge
tame forge
copper warren
wild stump
copper warren
#

Bah c'est bien nul

tame forge
#

C'est un peu dans le titre

lapis burrow
copper warren
tame forge
severe matrix
wild stump
copper warren
tame forge
#

Plus sérieusement, je pourrais améliorer quoi ?

severe matrix
#

Jsp en vrai c’est stylé j’ai rien a dire

tame forge
severe matrix
#

De rien

tame forge
#

M*rde

#

Je viens de voir que j'ai remis la même vidéo kapp

lapis burrow
#

Par contre pourquoi t'as pas Aria ?

tame forge
gaunt yoke
#

mais ça reste pabo

tame forge
gaunt yoke
tame forge
gaunt yoke
#

c'est grossier on va dire

#

les polices, les arrondis, les shadows

#

un peu plus de padding dans tes cards pour les faire respirer, réduire la taille de l'icon, ou alors la faire basculer sur le haut

#

le gradient radial du bleu au blanc, c'est pas une mauvaise idée mais pas vers le blanc

tame forge
#

Je vois

#

Je vais essayer de retravailler ça

gaunt yoke
#

gl!

cunning terrace
#

salut, je n'arrive pas à reproduire cet effet, quelqu'un à la solution ?

Capture_decran_2023-07-13_163235.png
tame forge
cunning terrace
tame forge
#

C’est probablement une div en absolute avec un z-index à -1

cunning terrace
native trout
#

Salut, j'essaie depuis plusieurs jour, de cacher la barre sur le coté pour quel passe sous l'overlay grisâtre quand j'ouvre ma modal mais je n'y arrive pas, avec un z-index si mais ça m'enlève les effets que j'ai dessus, quelqu'un aurais la solution ?

Capture_decran_2023-07-14_003237.png
gaunt yoke
#

pour le coup c'est juste une histoire de zIndex

#

ça donne quoi si ta modal a un zIndex plus haut que le reste ?

native trout
gaunt yoke
#

il faudrait du code pour t'aider a trouver ou ça coince

#

là comme ça c'est compliqué

#

prenez l'habitude de faire des reproductions pour qu'on puisse y jeter un oeil

native trout
#

je peux t'envoyer le fichier en m-p parcque je veux bien le copier coller mais j'ai pas de nitro mdrr

gaunt yoke
#

dans le dossier tout est fonctionnel ? je veux dire pas besoin de base de données ou autre, c'est uniquement de l'intégration ?

native trout
gaunt yoke
#

sinon fais un sandbox

#

mais ok tu px me l'envoyer ig

native trout
#

bah j'ai 700 ligne de css c'est compliqué 😅

gaunt yoke
#

ah oui

#

ok trouvé

#

en gros, rajoute sur ton .container

# 
position: relative;
z-index: 1

et sur ton .modal-container

z-index: 20

par ex

#

ne met pas de nombre trop haut, dis toi que 20 c'est car ce sera la 20ème couche plus haute, ca t'en laisse 19 entre les 2

#

bon tu peux très bien mettre 999 pour etre sur que personne prendra le dessus, mais voilà dans l'idée si un jour tu veux un truc encore par dessus tu vas devoir mettre encore plus haut, donc autant rester bas

native trout
# gaunt yoke ok trouvé

merci beaucoup, et oui oui je m'en doute dans tout les cas si jamais j'ai à le modifier je pourrais le faire plus tard, mais c'est bien ce que je pensais je ne mettais pas les z-index dans les container mais dans les modal et aside donc ça ne marchais pas.
Merci encore

gaunt yoke
#

yw!

tiny haven
#

slt

void anvil
#

Quelqu'un peut m'aider s'il vous plaît j'aimerais faire un bot auth2 ou quand les utilisateurs autorisent le bot à accéder à leur compte ça les redirige vers une page ou leur token acces est dans dans page web puis que sa recupère le code et que sa le stocks dans une base de donner et redirige l'utilisateur vert un page pour keur dire que la vérification est terminerj'ai déjà mis ce système en place mais le problème c'est que mon pote était sur repli avant et que tu replie tout automatique et maintenant mon bot est sur un hébergeur qui n'autorise pas la modification de leurs URL et mon site web est sur Netlifi mais ne pas envoyer de requête à l'API car justement mon hébergeur de mon pote qui est aussi mon hébergeur de mon API n'autorise pas la modification de leur URL quelqu'un aurait une autre solution car cela fait une semaine que je suis sur ce projet je n'arrive toujours pas à réparer ce problème cordialement merci de me ping si vous avez une solution

empty tartan
copper warren
#

Avec le code ça serait mieux pour t'aider

#

tu t'es trompé de channel toi c'est du #php

calm void
nimble egret
#

coucou quelqu'un pourrait m'aider ? j'essaye de mettre mon image blend par dessus mon gradient et que l'image recouvre toute la page

image.png
#

vous pouvez m'aider ?

#

jsuis débutante encore du coup j'ai beaucoup de mal

vestal sage
#

Après peut-être si tu mets une width: 100vw; sur ton image ça peut régler le souci

#

Avec un z-index supérieur à celui de ton fond violet pour que l'image passe par dessus

nimble egret
#

Jvais essayer ça merci !

native trout
#

Bonjour, j'aurais besoin d'aide car ma nav n'obéi pas... j'aimerais mettre mes élément li aligner les un par rapport aux autres et au milieux de la nav : <header> <nav> <ul> <li class="accueil"> <a href="index.html">Accueil</a> </li> <li class="menus"> <a href="#">Menus</a> </li> <li class="H-C"> <!-- H-C = Horaires et Contact --> <a href="#">Horaires et Contact</a> </li> </ul> </nav> </header>

    list-style-type: none;
}
nav {
    overflow: hidden;
    background-color: rgb(53, 53, 53);
    position: fixed;
    width: 100%;
}
header li {
    font-size: 1.2em;
    display: inline-block
}
header li a {
    color: #fff;
    text-decoration: none;
    padding: 18px 16px;
    width: 150px;
}```
Merci d'avance
sleek python
native trout
sleek python
native trout
sleek python
tame forge
woeful summit
#

Bonjour, je me baladais sur des sites a la recherche d'idées et je suis tombé sur ce header que je trouve magnifique, vous auriez une idée ou même un code a partager que je vois comment il a fait ?

image.png
storm folio
copper warren
#

F12 si jamais

woeful summit
#

comme c'est une template ils font en sortent que ce soit illisible 💀

copper warren
#

Envoie le liens du template

woeful summit
storm folio
woeful summit
storm folio
#

Pas de soucis

severe matrix
storm folio
#

Oui pas de soucis après le code est pas le plus clean du monde

severe matrix
#

Je sais mais pour le mode téléphone sur site j’ai zappé le blaze je vais mettre sa en vertical

sleek python
severe matrix
#

Oe pardon j’ai oublié

woeful summit
severe matrix
#

J’allais faire ça mais en style que t’avais proposé

#

Mais merci

#

Genre avec les contours gris

vocal olive
#

Salut, est-ce que quelqu'un pourrait m'aider à refaire juste le format de mon exemple d'envoie de mail s'il vous plait

image.png
nocturne dagger
#

S'il vous plait j'ai ce petit rectangle qui s'affiche qd j'essaie d'afficher une image awesome après avoir telecharger le fichier css en local. Dites moi que ça vous est déjà arrivé please

awesome.PNG
vocal olive
#

Salut, comment je pourrai augmenter cette image svp

image.png image.png
storm folio
storm folio
vocal olive
#

je le met comme ça ?

image.png
storm folio
#

tu peut oui

vocal olive
#

sa fon,ctionne po

storm folio
#

bah faut le mettre dans la balise de ton img

#

met width aussi

vocal olive
#

donc a la div en haut ?

storm folio
storm folio
vocal olive
#

mais enfaite que la width

#

change

#

mais height ne change pas

storm folio
#

c'est une image carré faut mettre la même valeur pr les deux

severe matrix
brave jay
severe matrix
#

:/

#

Très gentil

brave jay
#

C’est pas méchant ça s’apprend aussi

severe matrix
#

Moi j’apprenais avec le truc avec 5 épisodes de MiCode

nocturne dagger
storm folio
severe matrix
#

Open classroom je l’utilisait pas

storm folio
#

Dommage y'a plein de formation sympa

native trout
#

Bonjour, désolé pour les yeux des développeurs mais il me fallait un exemple 😅, est-ce que en utilisant le css on peut faire quelque chose dans ce style ?

   .menus {
       min-height: 3400px;
   }
   .carte {
       min-height: 3300px;
   }```
Parce que à part utiliser le js 
```if ($(".demo1").css('display', 'block')){
$(".demo2").css('display', 'none');
}``` avec quelque chose comme ça je vois pas
storm folio
native trout
storm folio
storm folio
native trout
native trout
storm folio
#

pas de soucis

copper warren
brave jay
#

C’est du css

cyan imp
brave jay
#

ah j'ai pas lu pardon

cyan imp
pastel echo
#

bonjour j'ai un etit soucis quand j'essaye de metre un curseur perso sur mon sa ne marche pas voila ce que j'ai miscursor: url(img/crossincircularbutton_80232.png), auto;

tame forge
#

Je pense qu'il doit ya voir une erreur ici déjà x)

pastel echo
#

je essaye deja

storm folio
#

Normale ta pas mit de `` pour l'URL

storm folio
pastel echo
brave jay
#

Salut ! quelqu'un est bon avec les svg ? pour m'aider a le refaire propre

woeful summit
brave jay
#

j'essaye de faire un fond blur

#

ah c'est bon 😄

#

ah enfaite c'est loin dettre parfait

severe matrix
#

Si c’est parfait 👍

#

Juste le côté gauche

brave jay
#

et a droite

#

donc non c'est pas parfait 😉

dusky skiff
# brave jay

met pas le fond sur l'élement svg mais sur le path

#

:)

brave jay
#

c'etait un blur en css et ta proposition ne marche pas 😢

dusky skiff
#

étrange

polar plover
#

salut les gens! dites-moi, pour ceux qui travaillent aussi avec le css, quelle est votre approche personnelle ? prepocessor/ css-in-js / naming convention, vous en utilisez un seul ou plusieurs? et lesquels? merci!

heavy musk
polar plover
#

merci! @heavy musk moi je vais utiliser css modules + bem + postcss

heavy musk
#

Tu devrais utiliser un pré processeur css, c’est vraiment très pratique

#

Et ça te fait gagner énormément de temps

polar plover
#

@heavy musk oui pour ça j'utilise postcss qui remplace sass etc

heavy musk
polar plover
#

ce que j'ai compris c'est que postcss a des plugins qui font le même travail que sass

#

donc autant utiliser postcss et ses plugins

heavy musk
#

Postcss est un utilitaire qui transforme automatiquement ton css pour mieux s’adapter.. effectivement il a des plugins mais qui rentrent dans son cadre d’utilisation.

Un pré processeur à des fonctionnalités différentes de postcss.

Les deux sont différents

#

Avec Sass tu vas pouvoir faire du nesting, créer des pseudo-fonctions css, faire de l’heritage…

polar plover
#

donc à ton avis je devrais utiliser bem+ sass + postcss du coup ? avec css modules

#

mais y'a pas de plugins capables de faire ça dans postcss?

#

je viens de trouver plugin sass pour postcss

#

donc oui effectivement on peut les utilise ensemble du coup

#

si ça rentre dans postcss alors ça me va, j'avais l'intention de tout façon de voir ce que les plugins offrent et installer ceux que j'aime bien, si y'a la possibilité d'avoir la structure comme dans sass alors je veux volontier

heavy musk
#

Non, postcss ne permet pas de faire cela.

Comme je te l’ai expliqué plus haut, ces deux outils ne servent pas le même but.

Postcss est un outil qui va transformer automatiquement ton css. Par exemple en installant autoprefixer comme plugin, tous les préfixes css (comme -webkit-, -moz-, -ms-, etc…) seront automatiquement ajoutés pour garantir la compatibilité inter-navigateur plutôt que d’avoir à tous les ajouter par toi-même.

SASS est un pré processeur CSS.
Il a sa syntaxe propre (SCSS ou SAAS d’ailleurs), il te permet de créer des variables moins verbeuses qu’en css, de faire de l’imbrication de selecteurs, de faire des imports de css entre fichiers, des l’héritage, des opérations mathématiques et j’en passe…

Comme tu le vois, ces deux outils ne servent pas à la même chose, postcss avec chacun de ses plugins résous une problématique particulière qui peut être automatisée tandis que sass lui te permet de changer la manière dont tu vas écrire ton css en apportant de nombreuses fonctionnalités

polar plover
#

@heavy musk merci beaucoup pour cette explication. Je comprends mieux, effectivement j'en ai besoin des deux du coup. merci!

#

mais pourquoi sur internet y'a plein de sites qui parlent de sass VS postcss comme une alternative et non de les utiliser ensemble? @heavy musk

heavy musk
heavy musk
polar plover
#

je vois

#

c'est décidé arls, bem + sass + postcss + css modules 🙂

heavy musk
#

D’ailleurs postcss est un post-processeur, il agit après ton css, contrairement à sass qui lui est un pré-processeur et a donc besoin d’être compilé en css 🙂

polar plover
#

oui effectivement

heavy musk
#

Si jamais tu as d’autres questions, n’hésite pas !

polar plover
#

super merci beaucoup c'est gentil! @heavy musk tu m'as bien aidé à avancer dans ma logique 🙂

frail seal
#

Bonsoir, j'ai fais une animation de bordure sur mon site sauf que je galère un peu...

Comme vous pouvez le voir dans la vidéo, quand je change l'opacité du carré, on voit toute l'animation alors que je voudrais seulement voir comme au tout début de la vidéo sauf que à la place d'avoir un background en couleur, j'aimerais avoir un background transparent sans voir l'animation.

Pouvez-vous m'aider svp ? Merci d'avance

#

je sais pas trop si j'ai bien expliquer 😅

#

Et je suis débutant donc n'hésitez pas à me dire ce qui ne va pas dans mon code

brave jay
gaunt yoke
# frail seal Bonsoir, j'ai fais une animation de bordure sur mon site sauf que je galère un p...

hello
tu pourras pas vraiment le faire via un background opacity ou autre
ce que tu peux tenter c'est de mettre en background image de ta div grise, le meme que ton body, en faisant en sorte qu'il "mirror" exactement le fond

autre suggestion ce serait d'avoir ta div avec ton animation en SVG ou autre, et du coup sans le fond, et que toi tu viennes jouer l'animation dans ton SVG, quelque chose comme ça, j'ai pas testé celui ci je sais pas si ca fonctionnerait mais voilà

#

le 1er me semble être le plus simple et le - compliqué à réaliser

frail seal
gaunt yoke
#

la première chose qui me vient en tête ce serait de mettre un autre élement a l'intérieur en position absolute, height: 100%, width: 100%, top: 0, left: 0

Pour que finalement l'image ai les memes dimensions que ton body

#

mais avec un overflow hidden sur le parent pour pas que ça dépasse de ce bloc gris

#

mais en soit non dsl c'est possible de le faire avec un background transparent mb

#

c'est la meme animation et en background transparent c'est ok

brave jay
gaunt yoke
brave jay
#

Merci

dusky skiff
#

Joyeux anniversaire mec

blissful wedge
#

y'aurai quelqun pour maider a ameliorer la structure de ma page html svp

hollow tundra
blissful wedge
mental hull
void anvil
#

Bonjour, j'aimerais lancer une video au clic d'un icon play positionné sur une image et que l'image disparaisse et laisse place a la vidéo c'est possible ?

#

et quel est le meilleur moyen à utilisé pour l'icon play animé de preference

storm folio
void anvil
storm folio
#

#javascript-typescript mais si tu connais rien sois tu le fais sans comprendre mais c'est pas ouf sois tu apprend avec une formation ou un tuto et tu pourra faire ce que tu veut après

dawn lake
#

salut! je suis en pleine creation de site web et j'aimerais avoir votre avis! je me demande juste comment je pourrais le partager?

sly crest
#

yo, un screen ?

storm folio
dawn lake
#

merci

brave jay
#

🙂

brave jay
tame forge
#

Ta phrase et bourré de fautes et n’a ni queue ni tête et tu ne n’expose pas ton problème donc comment on peut t’aider ? À moins que je sois le seul à ne pas savoir lire dans les pensées 🤷‍♂️

severe matrix
#

Je crois je suis pas sur mais qu’il demande qu’on l’aide en html ou dss

tame forge
severe matrix
#

Je rigolais 😐

high cloud
#

Quelqu'un pourrait m'aider à avoir le certificat ssl sur infinityfree svp

calm void
#

Bonjour, j'essaye de faire en sorte que ma div prennent 100% de la hauteur de ma page mais je n'y arrive pas est-ce que quelqu'un aurait une solution ?

Capture_decran_108.png
austere ginkgo
#

100vh au lieu de 100% il me semble

#

Dans min height

calm void
#

c'était bien sa merci !

solid hull
#

Salut

#

Mon système de grid marche pas :/
Sa s'affiche comme sa: (1ere image)
Et je voudrais que sa s'affiche comme sa: (2eme image ) (la case classement est regroupé c'est normal)
Voici le code:
#gridfirstligne{
display: grid;
grid-template: 2fr 3fr 2fr / 1fr 1fr
}

#profil{
grid-area: 1/1/2/1;
}

#discord{
grid-area: 1/2/1/2;
}

#connection{
grid-area: 1/3/2/3
}

#classements{
grid-area: 2/2/2/2 ;
}

image.png image.png
fleet bough
# solid hull Mon système de grid marche pas :/ Sa s'affiche comme sa: (1ere image) Et je vou...

Salut ! Je t'ai fait un truc qui devrait correspondre à ce que tu veux, n'hésites pas à modifier à ta convenance et me demander si tu as quelconque question !

<div class="container">
    <div class="skin"></div>
    <div class="discord"></div>
    <div class="farm"></div>
    <div class="pvp"></div>
    <div class="connect"></div>
</div>

* {
    margin: 0;
    padding: 0;
}

.container { 
    width: 100vw;
    height: 100vh;
    display: grid;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "skin discord discord connect" "skin farm pvp connect";
}
.skin {
    grid-area: skin;
    background: pink;
}
.discord {
    grid-area: discord;
    background: red;
}
.farm {
    grid-area: farm;
    background: orange;
}
.pvp {
    grid-area: pvp;
    background: green;
}
.connect {
    grid-area: connect;
    background: blue;
}
solid hull
#

Salut, j'ai deux question: comment tu met du code dans discord, et es-que tu as réglé selon l'image 2 ou non,
Merci d'avance

fleet bough
#

Après faudra que tu adaptes, j'ai mis des couleurs vives pour montrer la délimitation

#

ça donne ça

solid hull
#

Merki

fleet bough
solid hull
#

Tu régale

fleet bough
solid hull
#

Je teste

#

Sa a marché mais c'est un peu granf

fleet bough
#

c'était juste histoire de te montrer le système 🙂

#

les div sont flexibles, il suffit que tu mettes les paramètres que tu souhaites !

solid hull
#

Merci de m'avoir apris le :

solid hull
fleet bough
fleet bough
solid hull
fleet bough
#

Si je puis te conseiller, fais déjà ce que tu veux faire et avise par la suite pour le responsive

solid hull
#

ok merci

fleet bough
# solid hull ok merci

Y'a pas de soucis ! Au début c'est un peu galère à comprendre le responsive mais par la suite tu vas gagner en connaissance/assurance et y arriver comme un chef !!

solid hull
#

^^

solid hull
#

Salut, comment je fait en css pour que dans une div:
Mon image s'affiche à gauche et mon texte à droite (Sous forme de liste de haut en bas)

hollow tundra
#

tu as essayé float: left; ?

#

pour l'image ?

#

et text-align: center; pour le texte

solid hull
hollow tundra
#

attend j'essai de la faire

digital swallow
solid hull
digital swallow
#

cela devrais placer tes 2 éléments cote a cote

solid hull
digital swallow
#

c'est ce que tu souhaite ?

solid hull
hollow tundra
#

règle la width de tes éléments et mes align-items: center;

digital swallow
brave jay
#

oh doucement 😮

brave jay
# solid hull

déja met le fond de ta photo en rouge et le fond du texte en vert

#

ensuite ta div parent tu mets justify-content: center puis align-items: center

#

ensuite tu definis la taille de ton image plus ou moins grande

#

par exemple height: 100%

#

et envois le code html parceque je crois que tu as mal fait ton code

solid hull
# 
                       <div class="pro1">
                            <img src=<?=$skin?> alt="Skin de Volcanir_MC" class="skin">
                        </div>
                        <div class="pro1">    
                            <h2  class="mainfont">Pseudo: <?=$pseudo?></h2>
                            <h2 class="mainfont">Grade: <?=$grade?></li>
                            <h2 class="mainfont">Serveur actuel: <?=$sa?></h2>
                        </div>
                </div>```
brave jay
#

tu le fait en ejs ? 😮

solid hull
#

Nan, en html

brave jay
#

ca vient dou ca ? : <?=$pseudo?>

solid hull
brave jay
#

ah c pour ca 😄

storm folio
solid hull
storm folio
#

J'ai pas regardé ton code je t'ai juste dit cmt faire 🤣

solid hull
solid hull
storm folio
bleak tartan
#

Aidezzzz moi a continuer le web j’arrive pas à m’y remettre 😂😭😭

fleet bough
void anvil
#

Vous avez des tuto pour du html / css ?

fleet bough
# void anvil Vous avez des tuto pour du html / css ?

Salut ! Personnellement je trouve que les sites W3Schools et Mozilla Developer sont plutôt sympa pour commencer, c'est expliquer simplement et y'a pas mal d'exemples. Sinon tu as aussi CSS-Tricks que j'aime beaucoup personnellement 😃

lilac haven
#

celui d'openclassrooms n'est pas à négliger

steel idol
#

Salut je développe maintenant en html et css depuis 1 mois je pense, maintenant je me suis aperçu que mon site, sur mobile c'était vraiment moche et ma proportionné, je me demande comment faire pour régler sa

woeful willow
steel idol
void anvil
lilac haven
void anvil
lilac haven
wind kindle
fleet bough
void anvil
#

que je sias pas comment fiar

#

e

fleet bough
# void anvil en soit c'est assez simple l'html c'est surtous le css

C'est ce qu'il se passe le plus souvent, mais déjà tu vas apprendre les différentes notions et après tu vas apprendre à les utiliser ! ne te décourage pas, si je puis me permettre de te conseiller, lance-toi des petits challenges ! Je sais que ça me fait progresser quand j'apprends un nouveau langage, n'hésite pas non plus à chercher sur google si tu bloques sur quelque chose, il faut savoir chercher en ligne quand on fait du web !

#

mais ça va venir, ne t'en fais pas !

void anvil
#

et aussi le js

#

je comprend rien

fleet bough
# void anvil et aussi le js

Fais par étape, commence par le html, le css et seulement après le js, n'apprends pas tout à la fois, c'est pas la bonne sollution !

frigid spade
#

Bonjour je me permet de venir sur ce forum car j'ai un petit soucis en HTML et PHP

#

Je suis entrain de refaire une refonte d'un espace de connexion sauf que petit bug au niveaux CSS ET niveaux php impossible de ce connecter pour le coup

covert verge
#

moyen avec la balisse marquee de faire de gauche a droite et droit a gauche, autrement dit un effet de vas et viens

fleet bough
errant cypress
#

Salut, marquee est obsolète oui, tu peux faire facilement la même chose avec du CSS ou du JS

covert verge
#

ok, merci
mais je suis pas rendu la dans mon cours
😉

lethal star
#

hey, quelqu'un connais un logiciel de dev qui fait comme codepen (actualisation automatique)

lethal star
#

help

#

je fait ça :

#

css:
li { display: inline; } nav { display: inline-block; width: 100%; } .center { text-align: center; } .right { text-align: right; }

#

html:

#

<body> <div class="nav-bar"> <nav> <!-- partie centrée --> <li class="center"><a href="#">home</a></li> <li class="center"><a href="#">à propos</a></li> <li class="center"><a href="#">aide</a></li> <!-- connexion --> <li class="right"><a href="#">connexion</a></li> </nav> </div> </body>

#

mais tout s'aligne a gauche

tame forge
storm folio
tame forge
#

Je l'avais utilisé par le passé, mais impossible de me souvenir du nom 😅

lethal star
#

yay merci

lost coral
#

Bonjour, j’ai une question sa fait quelques jour que je dev un petit site internet en html avec aussi des scripts en Js.
Il y a aussi un outil de traduction ou quand on change la langue cela va chercher les traductions dans un fichier traduction.js
Mon problème est que lorsque je test mon site en local tout fonctionne en revanche, quand je le test en ligne selon certain navigateur et le support ( tel ou PC ) cela fonctionne ou non. Je ne sais pas comment réglé se problème.
Voici le site si vous voulez bien y jeter un coup d’œil : https://istres-airbnb.fabien83560.fr

#

Si vous avez besoin du code n’hésitez pas à me le demander

lethal star
#

c'est du js donc je sais pas trop

lost coral
lethal star
void anvil
#

bonsoir je souhaite crée un site internet et j'aimerais trouvé quelqu'un qui pourrait m'aider dans son développement. c'est un site vitrine donc pas besoin de trucs compliqué

lethal star
#

mmmh, quel style de site ?

wise hamletBOT
#
🔎 Les offres de GCA !

Tu es à la recherche d'un créateur de contenu ?
D'un super développeur pour te faire le nouveau site de l'année, ou encore d'un graphiste pour réaliser le logo de ton serveur ?

Clique ici et tu trouveras ton bonheur !
Il te suffit simplement de créer ton offre en détaillant précisemment ce que tu recherches 👌

lethal star
#

oops c'est vrai, moi meme je l'ai utilisé 🤭

void anvil
sturdy grove
steel idol
# 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700;900&display=swap');

body {
    display: none;
    margin-top: 100px;
    padding: 0;
    color: white;
    background-color: black;
    font-family: "Poppins", sans-serif;
}

.img {
    max-width: 250px;
    max-height: 50px;
    width: auto;
    height: auto;
    margin: 10px
}

.lign {
    backdrop-filter: blur(5px);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
    padding: 9px;
    overflow-x: hidden;
}

h1 {
    text-align: center;
}

.p {
    text-align: center;
    opacity: 0.8;
}

.btn {
    padding: 15px;
    border-radius: 5px;
    background-color: white;
    color: black;
    text-align: center;
    margin: 10px;
    vertical-align: middle;
    user-select: none
}

.btn:hover {
    color: white;
    transition: all 5.5s;
    background-color: #4C4C4C;
    transition: all 2.5s
}

.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.lgbt {
    background: linear-gradient(45deg, #FF0018, #FFA52C, #FFFF41, #008018, #0000F9, #86007D);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.blue {
    color: grey;
}
.card {
    color: white;
    border: 1px solid black;
    border-radius: 10px;
    margin: 10px;
}

.btnY {
    padding: 15px;
    border-radius: 5px;
    background-color: white;
    color: black;
    text-align: center;
    margin: 15px;
    vertical-align: middle;
    user-select: none;
    transition: all 5.5s
}

.btnY:hover {
    color: white;
    background-color: grey;
    transition: all 2.5s
}

.pip {
    font-size: 10px;
    opacity: 0.6;
    margin: 2px
}

.pop {
    font-size: 25px;
    margin: 2px;
}

.imge {
    max-width: 350px;
    max-height: 100px;
    width: auto;
    height: auto;
    margin: 10px;
    
}

.add {
    padding: 40px;
    background-color: #4C4C4C;
    overflow-x: hidden;
}```
frosty rock
warm dock
#

Sur le coté je suis en train de créer un profil. J'aurais aimer que celui ci suivent le mouvement de la souris en restant fixe sur la page. Mais lorsque je descend sur le footer ça me fait un gros espace...

image.png
# 
.profile-section {
    background-color: #f0f0f0;
    padding: 20px;
    border: 1px solid #ddd;
    position: fixed;
    top: 169px; 
    left: 0;
    width: 250px; 
    height: 100%; 
    overflow-y: auto;
    z-index: 1;
}

.profile-section h3 {
    font-size: 18px;
    margin-top: 0;
}


@media (max-width: 1500px) {
    .profile-section {
        display: none;
    }
}```
#

J'ai mis un Top pour pas qu'il empiète sur le header, je pense que le problème vient de là mais impossible a corriger mdrr

#

J'aurais aimer qu'il reste comme ça :

image.png
storm folio
storm folio
sturdy grove
storm folio
#

Bah ta les unité fixe donc les px.. et les unité relative vmax, vh ,vw, % etc.. ( ps : je viens de voir que je me suis trompé à qui répondre c'était le msg en dessous )

steel idol
#

Une note pour mon portfolio ?

Screenshot_20230905-134643.jpg Screenshot_20230905-134655.jpg
gaunt yoke
#

en mobile c'est sympa, mais tu as pas de version desktop?

severe matrix
#

Très stylé tu les as trouvés ou les emojis ?

storm folio
void anvil
#

Bonsoir

storm folio
void anvil
storm folio
void anvil
#

T'a des réponses ?

gaunt yoke
#

c'est la version mobile en 100% quoi

void anvil
#

J'aurais deux petites questions sur les outils de développeur, je recherche un outil pour calculer la résolution de la fenetre quand nous la redimenssionons et un outil qui calcule la distance entre deux élements en pixel.

storm folio
# void anvil T'a des réponses ?

Ah ça je sais pas mais tient

https://chrome.google.com/webstore/detail/smart-page-ruler/nmibbjghlmdiafjolcphdggihcbcedmg/related
ou
https://chrome.google.com/webstore/detail/designer-tools/jiiidpmjdakhbgkbdchmhmnfbdebfnhp/related

Sinon pour la résolution de la fenêtre

image.png image.png
Smart Page Ruler

Smart Page Ruler is the developer tool to measure every element of your web page more precisely. You can get the relative and…

Designer Tools

Measure and align elements within Chrome

void anvil
storm folio
severe matrix
steel idol
#

Croyez moi c'est mon premier 2eme site

gaunt yoke
#

ton premier deuxième

#

c'est marrant dit comme ça :p

steel idol
#

Mais je dois avouer on m'a un peu aider pour la navbar du dessus

#

J'ai passé 1h a essayé de debugger 💀

#

Le premier

steel idol
#

Y'a aussi Google fonts

storm folio
steel idol
storm folio
#

15eur pour ça eh bah dis donc faudrait que je commence a proposer mes services

steel idol
storm folio
#

1er et dernier interface très cheap après l'avant dernier l'ui est louche mais sinon le login c'est clean

lapis burrow
storm folio
#

Je lisais le portfolio en même temps 😂

lapis burrow
#

je vais pas montrer des compétences que je possède pas 😂

storm folio
lapis burrow
#

Inh ?

#

Mais le back ça se montre pas wtf

storm folio
#

Oui je sais ça, mais implémente des fonctionnalité etc.. montre ce que tu peut faire quoi

lapis burrow
storm folio
lapis burrow
#

Étant donné que le site fonctionne en client side

storm folio
#

ah ça c'est une autre histoire

lapis burrow
storm folio
#

Je suis en alternance aussi je comprend 😂

lapis burrow
#

Wordpress, prestashop bof quoi

#

Je suis exploité à 3% de mes capacités là

storm folio
#

Pareil j'entre en BTS SIO là, j'ai failli aller a insta comme toi mais finalement j'ai préférer une autre

lapis burrow
steel idol
#

Jsp pk les gens déteste autant Boostrap c'est une masterclass

lapis burrow
storm folio
lapis burrow
#

c'est "suffisant"

storm folio
steel idol
storm folio
#

Je pref lws

storm folio
lapis burrow
#

Pourquoi je payerais pour un portfolio

steel idol
#

Je vous proposer un petit defis.

Faire une page de connexion responsive en seulement html, css et js. 👀

Libre choix pour le style.

lapis burrow
#

déjà fait

#

c'est easy

#

Ah c'est pas responsive

#

M'en fou ça marche 😂

steel idol
dusky skiff
steel idol
#

Moi je fais des exercices pour m'exercer car au bout de 2 jours sans réviser j'oublie tout 💀

lapis burrow
#

firebase c'est quand même pratique

dusky skiff
storm folio
steel idol
#

Le back quoi

#

Je pref le front c'est plus simple...

storm folio
#

bah ta de tout ta du front comme du back la

#

T'aura besoin de tout faire et te contente pas de la simplicité surtout dans le dev web

storm folio
# steel idol Je pref le front c'est plus simple...

https://www.frontendmentor.io/challenges/nft-preview-card-component-SbdUL_w0U
https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj
https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62

Frontend Mentor
Frontend Mentor | NFT preview card component coding challenge

This HTML & CSS only challenge is perfect for anyone just starting out or anyone wanting a small project to play around with.

Frontend Mentor
Frontend Mentor | Order summary component coding challenge

A perfect project for newbies who are starting to build confidence with layouts!

Frontend Mentor
Frontend Mentor | Stats preview card component coding challenge

This is a great small challenge to help get you used to building to a design. There's no JS in this project, so you'll be able to focus on your HTML & CSS skills.

#

que des projet html/css

steel idol
steel idol
#

Vous pouvez m'aider ?

brave jay
#

si tu nous dit pas pourquoi on ne peut pas non

storm folio
steel idol
#

C bon j'ai pu régler

void anvil
#

yo

#

comment j'peux faire un fond comme ça ?

image.png
gaunt yoke
void anvil
dusky skiff
#

NORDVPN sponsorise ce site web KaPOP

Screenshot_20230907_075229_Brave_-_Nightly.jpg
steel idol
sturdy grove
steel idol
sturdy grove
gaunt yoke
#

fin surtout dans son cas il fait même pas de front

#

il apprend l’intégration web

#

le front ça ne se résume pas qu’à l’html css 😒

steel idol
#

J'ai débuté y'a 1 semaine et demi sinon

golden flume
gaunt yoke
gaunt yoke
#

et même ça être un bon intégrateur web ca demande du boulot, c'est pas juste créer 2/3 trucs qui fait de toi un intégrateur :p

steel idol
gaunt yoke
#

mon avis là dessus c'est que tu vas te planter, passer de html/css à next et vue js (pourquoi les 2 on sait pas) tout ça en 2 semaines

#

c'est juste suivre des tutoriels en recopiant les vidéos, mais have fun 👌

#

avant de faire du vue et du react on passe déjà par le javascript, histoire de comprendre ce qui se passe derrière ses 2 frameworks, de comprendre comment fonctionne le DOM et autre

#

ça se serait si on peut apprendre tout ça en 1 mois lool

steel idol
#

C'est pas comme sa qu'on apprend ?

gaunt yoke
#

honnêtement je n'ai pas envie de te dire que oui ou non, ça dépend de toi, mais en 2 semaines passer des bases de l'intégration web à un framework javascript, ça s'appelle survoler les langages

steel idol
gaunt yoke
#

tu peux pas dire "je commence a maitriser" en l'espace de 2 semaines, je sais pas si tu t'en rends compte lool

steel idol
gaunt yoke
#

🤷 have fun

steel idol
gaunt yoke
#

oui d'accord

golden flume
steel idol
#

Sa n'a rien a avoir avec une demande, je partage juste un code de navbar responsive.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <a href="#" class="title">ADDAMS</a>
        <img src="https://media.discordapp.net/attachments/1117240640586141857/1150022712656412682/menu-btn.png" alt="menu" class="menu">
        <div class="items">
            <ul>
                <li><a href="#">Connection</a></li>
                <li><a href="#">Serveur</a></li>
                <li><a href="#">Invitation</a></li>
            </ul>
        </div>
        <div class="deskop">
            <ul>
                <li><a href="#">Connection</a></li><li><a href="#">Serveur</a></li><li><a href="#">Invitation</a></li>
            </ul>
        </div>
        </nav>
        <header></header>
    <script src="script.js"></script>
</body>
</html>```

## script.js

```js
const m = document.querySelector(".menu")
const div = document.querySelector(".items")

m.addEventListener("click", () => {
 if(div.classList.contains("open")){
      div.classList.remove("open")
    } else {
      div.classList.add("open")
    }
})```

## style.css

```js
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

* {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}

body {
    font-family: "Poppins";
}

header {
    height: 100vh;
    width: 100vw;
    background-image: url(https://media.discordapp.net/attachments/1117240640586141857/1150022712396361738/landscape.jpg);
    background-size: cover;
    overflow: auto;
}

.navbar {
   position: absolute;
   padding: 45px;
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
   width: 100%;
}

.title {
    position: absolute;
    top: 22px;
    left: 20px;
    font-weight: bold;
}

.navbar a {
    color: white;
    font-size: 20px;
}

.navbar .menu {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 35px;
    display: block;
    z-index: 1;
}

.items {
    position: absolute;
    color: white;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
    display: none;
    text-align: center;
    transition: opacity 2.4s ease;
}

.items ul li {
    margin: 25px;
}

.items ul li a {
    text-align: center;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    background-color: red
}

.items.open {
    display: flex;
    opacity: 1
}

.deskop {
    display: none;
}

@media screen and (min-width: 1024px){
    
    .navbar .menu {
        display: none;
    }
    
    .items {
        display: none;
    }
    
    .deskop {
        display: flex;
        position: absolute;
        top: 25px;
        right: 15px;
        align-items: center;
        flex-direction: row;
    }
    .deskop li {
        display: inline;
    }
    
    .deskop a {
        margin: 20px;
        font-size: 12px
    }
    
}```
#

Aussi si vous des conseils pour améliore mon skill je suis preneur 👀

steel idol
severe matrix
#

Pour la deuxième image essaye de moins mettre de blanc en gros que du flou

#

Et les boutons jsp quoi dire mais c’est perturbant

#

Mais j’aime

severe matrix
austere ginkgo
severe matrix
#

Ah merci

gaunt yoke
sturdy grove
sturdy grove
golden flume
#

Hello, vous avez des site pour s'inspirer, genre la j'ai pas d'idée pour le disign de ma topbar pour eviter de toujours faire la meme

brave jay
#

dribbble

austere ginkgo
#

Pinterest

sturdy grove
golden flume
#

Salut, merci pour vos réponses je vais regardé

winter charm
#

Bonjour je suis pas développeur HTML mais j'ai besoin d'un nom de domaine je souhaite l'acheter pour 9.99€ chez One.com

Vous me conseiller de l'acheter ou ?

void anvil
#

Hostinger

#

Ils sont vrm pas cher

winter charm
#

Merci

winter charm
void anvil
#

plans annuels

#

ou mensuel avec hébergements

winter charm
#

Ok

austere lark
frail palm
pulsar valley
#

Bonjour, puis-je solliciter votre avis sur un problème que j'ai rencontré avec mon portfolio ? J'ai consacré beaucoup de temps à positionner tous mes éléments de manière à ce qu'ils s'adaptent correctement au mode responsive. Dans l'inspecteur de code, je peux maintenant visualiser mon site dans toutes les dimensions d'écran possibles, et tout semble parfait. J'étais très satisfait du résultat, mais ensuite, j'ai regardé mon portfolio sur un véritable appareil portable. J'ai alors réalisé que mes éléments ne sont pas correctement positionnés. Quelqu'un pourrait-il m'aider ? Je ne comprends pas pourquoi j'obtiens de bons résultats dans l'inspecteur de code et de mauvais résultats sur un véritable appareil. Voici le lien : https://fischer-j.eu/. Merci !

PortfolioJF

Exploration de mon parcours en tant que développeur web. Plongez dans mes compétences en conception, en codage et en création de sites web qui allient esthétique et performance.

rustic anvil
#

effectivement, il faut souvent user des wv et % ce qui est une catastrophe pour du mobile first, mais bon c'est le monde d'aujourd'hui :) devoir faire son site en 3000ppp puis zoomer à fond pour des écrans 4K ce qui donne n'imp :D
tu peux essayer de faire tout le site pour mobile (l'inspecteur ne prend pas en compte l'abus des ppp malheureusement donc il faudra F5 sur mobile souvent)
puis ajouter des @media pour rendre ton site agréable sur pc :)
c'est chiant mais le résultat sera impeccable pour les deux
là déjà c'est assez bon pour pc (même si trop zoomé) mais ducoup sur tel les elements sont écrasé de fou car 3000ppp environ :s (le pc c'est peut être 92ppp environ)

#

courage, moi j'ai bannis les téléphones de mes sites ^^ trop de problemes, comme à l'époque où on banissait Internet Explorer, car trop de limitations

tame star
golden flume
copper saffron
#

Yo, est-ce que quelqu'un pourrait m'aider svp ? Je bosse sur un site Web actuellement, sans js pour le moment car je suis nul en js (donc full HTML et CSS) et j'essaie de jouer avec les méta-données, pour que quand j'envoie le lien de mon site, ça envoie différentes informations à son sujet, genre le nom, etc... Mais en fait, j'essaie de faire en sorte de mettre une vidéo en mp4 dans les méta-données, mais j'y arrive pas du tout

#

Avec la balise <meta>

storm folio
#

Je vois pas trop ce que t'essaye de faire mais avant de faire un site web je te conseille d'apprendre le JS au moins un peu, surtout en SIO t'en aura besoin

copper saffron
#

Et tu peux interagir avec la vidéo depuis l'embed

#

Mais du coup j'ai fait des tests, j'ai regardé les balises utilisées sur Twitter (merci l'outil d'inspection) et j'ai essayé d'en utiliser certaines

copper saffron
#

C'est pas évident

storm folio
#

Yep après avoir regarder un peu je crois il fait que tu utilise le meta og:video

slender plover
#

hey, je n'arrive pas à afficher une image jpg sur mon site web :
<body>
<img src="images/mon-image.jpg alt="image-test">
</body>

copper saffron
copper saffron
storm folio
copper saffron
#

(pour ma part je met pas de / à la fin et ça marche nickel)

slender plover
storm folio
storm folio
#

?

copper saffron
#

Tu code avec quel logiciel exactement ? Simple curiosité

storm folio
#

intelliji ou vscode

copper saffron
#

je vois

#

tu trouve que c'est lequel le mieux (bien que ca dépende certainement du contexte) ?

copper saffron
# storm folio

de ce que j'ai compris l'image et le fichier html sont tous les deux dans le même dossier

storm folio
#

intelliji j'aime bien mais pour des trucs de test rapide etc.. j'utilise vscode

copper saffron
#

ah oui je vois le problème

storm folio
#

Ouais ducoup c'est

<img src="../images/mon-image.jpg alt="image-test">```
#

Tu doit remonter de un dossier pour après aller dans ton dossier image tu ne peut pas juste y aller cmme ça, tente d'aller te renseigner sur les chemin absolu et relatif :p

slender plover
#

chemin absolu et relatif ?

slender plover
storm folio
tame forge
#

@storm folio

#

Même chose pour YouTube ^^

storm folio
#

Oui mais pour que discord la détecte c'est avec le tag il me semble

#

a voir si discord le fait automatiquement ou pas

tame forge
#

Peut-être, mais si tu met le tag sur ton site, la vidéo ne s’affichera pas sur Discord.

copper saffron
storm folio
#

a voir , j'ai jamais tester goodenough

copper saffron
tame forge
#

:p

storm folio
#

Je viens de regarder et si ton lien pointe directement vers un .mp4 discord affiche l'embed de la vidéo mais que si elle fait moins de 20mb je crois

copper saffron
copper saffron
storm folio
#

ouais voilà

# 
<meta property="og:video:url" content="https://www.youtube.com/embed/Gb9E60E3duU">
<meta property="og:video:secure_url" content="https://www.youtube.com/embed/Gb9E60E3duU">
<meta property="og:video:type" content="text/html">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">```

Dans la partie avec les meta en open graph (og) met le lien de ta video en .mp4 et test ça fonctionnera peut être ![goodenough](https://cdn.discordapp.com/emojis/709865156766728314.webp?size=128 "goodenough")
copper saffron
#

merci mais c'est deja le cas '^^

169485928415699964.png
#

j'étais deja allé voir ce gist XD

storm folio
#

met og:video:url

slender plover
storm folio
#

envoie ton fichier html

slender plover
# 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='remove_recettes.css') }}">
    <title>Salut</title>
</head>
<body>
    <img src="../images/mon-image.jpg" alt="image-test"/>
</body>
</html>
storm folio
#

bah c'est censé s'afficher

slender plover
#

et pourtant j'ai l'icône quand une image ne s'affiche pas avec mon alt juste à côté

copper saffron
#

🤔

#

bizarre

copper saffron
gaunt yoke
copper saffron
#

Oh d'accord je vois, merci pour l'info

copper saffron
#

du coup @storm folio @gaunt yoke j'ai contacté le support de Discord à ce sujet (en précisant dans le formulaire que c'etait pour du dev) histoire d'avoir + de détails, car bon, ca fait 3h que je scroll sur Google et stackoverlfow pour trouver, ils disaient presque tous que c'etait possible d'intégrer une vidéo dans l'embed via le meta, sauf un, donc autant demander à la source des infos

#

je vous tiens au courant dans le doute

gaunt yoke
#

possible ça l’est je sais que loom mette une vidéo dans leur meta etc tu dois je suppose oublier quelque chose

void anvil
vestal sage
#

Salut, dans ton htaccess tu peux add ça :

RewriteRule ^/app/?$ /app/index.php [L]
void anvil
#

Merci je vais tester ça

void anvil
vestal sage
#

Les chemins etc.. sont bons ?

#

Ton .htaccess est bien accessible par ton serveur ?
Et vérifie que la redirection d'url est activée

void anvil
#

il est bien à la racin et il existe un fichier index.php dans le dossier app

RewriteEngine On
 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]
RewriteRule ^([^\.]+)$ $1.html [NC,L]
RewriteRule ^/app/?$ /app/index.php [L]
image.png
vestal sage
#

ton index.php n'est pas dans /app

void anvil
#

Il y en a un pourtant

image.png
sly abyss
#

hey est ce que qlqn pourait m'aider svp je n'arrive pas a centrer cette barre

image.png
#

le code

 <div className="App">
      <NavBar />
      <Form />
      <ListNone />
      <div className="barreSeparation"></div>
      <Complete />
    </div>```