J'ai un site à faire en HTML/CSS pour vendredi..

un merci ne serait pas de trop l'ophttps://image.noelshack.com/fichiers/2021/29/3/1626897920-1626897891527-removebg-preview.png

Le 30 juin 2022 à 00:53:09 :
un merci ne serait pas de trop l'ophttps://image.noelshack.com/fichiers/2021/29/3/1626897920-1626897891527-removebg-preview.png

Oui merci clé désolé j'étais aux chiotteshttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

Je vais tester ça

Je viens de débarquer et ça parle de responsive
Pourquoi l'op utilise pas juste Bootstrap ? Pas le droit d'utiliser de frameworks ?
C'est quoi ses consignes ?

Le 30 juin 2022 à 00:55:56 MadeInPolska a écrit :

Le 30 juin 2022 à 00:53:09 :
un merci ne serait pas de trop l'ophttps://image.noelshack.com/fichiers/2021/29/3/1626897920-1626897891527-removebg-preview.png

Oui merci clé désolé j'étais aux chiotteshttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

Je vais tester ça

CASH dans le CHIOTTARD tu es pardonnéhttps://image.noelshack.com/fichiers/2021/29/2/1626743678-oui.png

Le 30 juin 2022 à 00:56:24 :
Je viens de débarquer et ça parle de responsive
Pourquoi l'op utilise pas juste Bootstrap ? Pas le droit d'utiliser de frameworks ?
C'est quoi ses consignes ?

Interdit boostraphttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

<style>

    .container {

        /* Créer une gride de 12 colonnes avec 6 lignes */

        display: grid;

        grid-template-columns: repeat(12, 1fr);

        grid-template-rows: repeat(6, 1fr);

        /* espacement entre les colonnes à 0px */

        grid-column-gap: 0px;

        /* espacement entre les lignes à 0px */

        grid-row-gap: 0px;



        /* le contenu prendre toute la hauteur et largeur de la fenetre du navigatuer */ 

        width: 100vw;

        height: 100vh;



        /* bordure sur tout le contenaire du site comme sur la maquette */

        border: 2px solid black;

    }



    .container .header,

    .container .footer,

    .container div {

        font-size: 20px;

        font-weight: 600;



        /* permet de centrer verticalement le texte et center hozizotalement comme sur la maquette */

        display: flex;

        align-items: center;

        justify-content: center;

    }



    .header {

        /* définir la taille d'un objet de la grille et son emplacement via les bords de sa zone de grille. */

        grid-area: 1 / 1 / 2 / 13;



        border-bottom: 2px solid black;



        height: 60px;

    }



    .content {

        grid-area: 2 / 1 / 4 / 13;



        border-bottom: 2px solid black;



        content: auto;

    }



    .sidebar-left {

        grid-area: 4 / 1 / 6 / 7;



        border-right: 1px solid black;



    }



    .sidebar-right {

        grid-area: 4 / 7 / 6 / 13;



        border-left: 1px solid black;

    }



    .footer {

        grid-area: 6 / 1 / 7 / 13;



        border-top: 2px solid;

    }

</style>

<div class="container">

    <header class="header">header</header>

    <div class="content">content</div>

    <div class="sidebar-left">bar1</div>

    <div class="sidebar-right">bar2</div>

    <footer class="footer">footer</footer>

</div>

si tu veux un truc vite fait avec l'outil de generation, retravaillé vite fait
c'est le mode tablette

Le 30 juin 2022 à 01:04:48 :
<code><style>
.container {
/* Créer une gride de 12 colonnes avec 6 lignes */
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(6, 1fr);
/* espacement entre les colonnes à 0px */
grid-column-gap: 0px;
/* espacement entre les lignes à 0px */
grid-row-gap: 0px;

/* le contenu prendre toute la hauteur et largeur de la fenetre du navigatuer */
width: 100vw;
height: 100vh;

/* bordure sur tout le contenaire du site comme sur la maquette */
border: 2px solid black;
}

.container .header,
.container .footer,
.container div {
font-size: 20px;
font-weight: 600;

/* permet de centrer verticalement le texte et center hozizotalement comme sur la maquette */
display: flex;
align-items: center;
justify-content: center;
}

.header {
/* définir la taille d'un objet de la grille et son emplacement via les bords de sa zone de grille. */
grid-area: 1 / 1 / 2 / 13;

border-bottom: 2px solid black;

height: 60px;
}

.content {
grid-area: 2 / 1 / 4 / 13;

border-bottom: 2px solid black;

content: auto;
}

.sidebar-left {
grid-area: 4 / 1 / 6 / 7;

border-right: 1px solid black;

}

.sidebar-right {
grid-area: 4 / 7 / 6 / 13;

border-left: 1px solid black;
}

.footer {
grid-area: 6 / 1 / 7 / 13;

border-top: 2px solid;
}
</style>
<div class="container">
<header class="header">header</header>
<div class="content">content</div>
<div class="sidebar-left">bar1</div>
<div class="sidebar-right">bar2</div>
<footer class="footer">footer</footer>
</div></code>

si tu veux un truc vite fait avec l'outil de generation, retravaillé vite fait
c'est le mode tablette

En vrai le github que tu a donné au début, c'est parfait c'est la structure que le sujet demande.

Comme j'ai envoyé le sujet complet a plusieurs kheys en mp je poste la dernière partie :

https://image.noelshack.com/fichiers/2022/26/4/1656543855-gggg.png

Le 30 juin 2022 à 01:09:23 :

Le 30 juin 2022 à 01:04:48 :
<code><style>
.container {
/* Créer une gride de 12 colonnes avec 6 lignes */
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(6, 1fr);
/* espacement entre les colonnes à 0px */
grid-column-gap: 0px;
/* espacement entre les lignes à 0px */
grid-row-gap: 0px;

/* le contenu prendre toute la hauteur et largeur de la fenetre du navigatuer */
width: 100vw;
height: 100vh;

/* bordure sur tout le contenaire du site comme sur la maquette */
border: 2px solid black;
}

.container .header,
.container .footer,
.container div {
font-size: 20px;
font-weight: 600;

/* permet de centrer verticalement le texte et center hozizotalement comme sur la maquette */
display: flex;
align-items: center;
justify-content: center;
}

.header {
/* définir la taille d'un objet de la grille et son emplacement via les bords de sa zone de grille. */
grid-area: 1 / 1 / 2 / 13;

border-bottom: 2px solid black;

height: 60px;
}

.content {
grid-area: 2 / 1 / 4 / 13;

border-bottom: 2px solid black;

content: auto;
}

.sidebar-left {
grid-area: 4 / 1 / 6 / 7;

border-right: 1px solid black;

}

.sidebar-right {
grid-area: 4 / 7 / 6 / 13;

border-left: 1px solid black;
}

.footer {
grid-area: 6 / 1 / 7 / 13;

border-top: 2px solid;
}
</style>
<div class="container">
<header class="header">header</header>
<div class="content">content</div>
<div class="sidebar-left">bar1</div>
<div class="sidebar-right">bar2</div>
<footer class="footer">footer</footer>
</div></code>

si tu veux un truc vite fait avec l'outil de generation, retravaillé vite fait
c'est le mode tablette

En vrai le github que tu a donné au début, c'est parfait c'est la structure que le sujet demande.

Comme j'ai envoyé le sujet complet a plusieurs kheys en mp je poste la dernière partie :

https://image.noelshack.com/fichiers/2022/26/4/1656543855-gggg.png

je te l'aurais bien fait mais bon, en vrai ça mets 4 heures pour faire tout le sujet correctement avec toutes les demandes (la note max)
et je dois me lever à 6h pour pisser du code à 8h

je travaillais dans une agence web avant, je claquais du boostrap + jquery pour le front + toutes les animations qui font bien (le graphiste m'expliquait ce qu'il voulait et hop)
mes sites ont été élu plusieurs fois gagnant de concours (le graphiste avait de superbe idée de maquette et moi je gerais tout le bordel pour faire du pixel perfect et des animations à la perfection qui fait tout le detail du site)
ensuite j'ai rage quit et j'ai changé de taff avec un *2 sur mon salaire net , je taff 4h par jours sur les 8 pour du dev bas niveau comme là sur ta demande

Le 30 juin 2022 à 01:18:15 :

Le 30 juin 2022 à 01:09:23 :

Le 30 juin 2022 à 01:04:48 :
<code><style>
.container {
/* Créer une gride de 12 colonnes avec 6 lignes */
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(6, 1fr);
/* espacement entre les colonnes à 0px */
grid-column-gap: 0px;
/* espacement entre les lignes à 0px */
grid-row-gap: 0px;

/* le contenu prendre toute la hauteur et largeur de la fenetre du navigatuer */
width: 100vw;
height: 100vh;

/* bordure sur tout le contenaire du site comme sur la maquette */
border: 2px solid black;
}

.container .header,
.container .footer,
.container div {
font-size: 20px;
font-weight: 600;

/* permet de centrer verticalement le texte et center hozizotalement comme sur la maquette */
display: flex;
align-items: center;
justify-content: center;
}

.header {
/* définir la taille d'un objet de la grille et son emplacement via les bords de sa zone de grille. */
grid-area: 1 / 1 / 2 / 13;

border-bottom: 2px solid black;

height: 60px;
}

.content {
grid-area: 2 / 1 / 4 / 13;

border-bottom: 2px solid black;

content: auto;
}

.sidebar-left {
grid-area: 4 / 1 / 6 / 7;

border-right: 1px solid black;

}

.sidebar-right {
grid-area: 4 / 7 / 6 / 13;

border-left: 1px solid black;
}

.footer {
grid-area: 6 / 1 / 7 / 13;

border-top: 2px solid;
}
</style>
<div class="container">
<header class="header">header</header>
<div class="content">content</div>
<div class="sidebar-left">bar1</div>
<div class="sidebar-right">bar2</div>
<footer class="footer">footer</footer>
</div></code>

si tu veux un truc vite fait avec l'outil de generation, retravaillé vite fait
c'est le mode tablette

En vrai le github que tu a donné au début, c'est parfait c'est la structure que le sujet demande.

Comme j'ai envoyé le sujet complet a plusieurs kheys en mp je poste la dernière partie :

https://image.noelshack.com/fichiers/2022/26/4/1656543855-gggg.png

je te l'aurais bien fait mais bon, en vrai ça mets 4 heures pour faire tout le sujet correctement avec toutes les demandes (la note max)
et je dois me lever à 6h pour pisser du code à 8h

je travaillais dans une agence web avant, je claquais du boostrap + jquery pour le front + toutes les animations qui font bien (le graphiste m'expliquait ce qu'il voulait et hop)
mes sites ont été élu plusieurs fois gagnant de concours (le graphiste avait de superbe idée de maquette et moi je gerais tout le bordel pour faire du pixel perfect et des animations à la perfection qui fait tout le detail du site)
ensuite j'ai rage quit et j'ai changé de taff avec un *2 sur mon salaire net , je taff 4h par jours sur les 8 pour du dev bas niveau comme là sur ta demande

Après pas obligé d'atteindre la note maxhttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

Mais ta façon de faire est sale clé tu dis ta un putain de niveau et tu me nargues tout en me disant que tu ne peux pas m'aiderhttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

Le 30 juin 2022 à 01:20:50 :

Le 30 juin 2022 à 01:18:15 :

Le 30 juin 2022 à 01:09:23 :

Le 30 juin 2022 à 01:04:48 :
<code><style>
.container {
/* Créer une gride de 12 colonnes avec 6 lignes */
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(6, 1fr);
/* espacement entre les colonnes à 0px */
grid-column-gap: 0px;
/* espacement entre les lignes à 0px */
grid-row-gap: 0px;

/* le contenu prendre toute la hauteur et largeur de la fenetre du navigatuer */
width: 100vw;
height: 100vh;

/* bordure sur tout le contenaire du site comme sur la maquette */
border: 2px solid black;
}

.container .header,
.container .footer,
.container div {
font-size: 20px;
font-weight: 600;

/* permet de centrer verticalement le texte et center hozizotalement comme sur la maquette */
display: flex;
align-items: center;
justify-content: center;
}

.header {
/* définir la taille d'un objet de la grille et son emplacement via les bords de sa zone de grille. */
grid-area: 1 / 1 / 2 / 13;

border-bottom: 2px solid black;

height: 60px;
}

.content {
grid-area: 2 / 1 / 4 / 13;

border-bottom: 2px solid black;

content: auto;
}

.sidebar-left {
grid-area: 4 / 1 / 6 / 7;

border-right: 1px solid black;

}

.sidebar-right {
grid-area: 4 / 7 / 6 / 13;

border-left: 1px solid black;
}

.footer {
grid-area: 6 / 1 / 7 / 13;

border-top: 2px solid;
}
</style>
<div class="container">
<header class="header">header</header>
<div class="content">content</div>
<div class="sidebar-left">bar1</div>
<div class="sidebar-right">bar2</div>
<footer class="footer">footer</footer>
</div></code>

si tu veux un truc vite fait avec l'outil de generation, retravaillé vite fait
c'est le mode tablette

En vrai le github que tu a donné au début, c'est parfait c'est la structure que le sujet demande.

Comme j'ai envoyé le sujet complet a plusieurs kheys en mp je poste la dernière partie :

https://image.noelshack.com/fichiers/2022/26/4/1656543855-gggg.png

je te l'aurais bien fait mais bon, en vrai ça mets 4 heures pour faire tout le sujet correctement avec toutes les demandes (la note max)
et je dois me lever à 6h pour pisser du code à 8h

je travaillais dans une agence web avant, je claquais du boostrap + jquery pour le front + toutes les animations qui font bien (le graphiste m'expliquait ce qu'il voulait et hop)
mes sites ont été élu plusieurs fois gagnant de concours (le graphiste avait de superbe idée de maquette et moi je gerais tout le bordel pour faire du pixel perfect et des animations à la perfection qui fait tout le detail du site)
ensuite j'ai rage quit et j'ai changé de taff avec un *2 sur mon salaire net , je taff 4h par jours sur les 8 pour du dev bas niveau comme là sur ta demande

Après pas obligé d'atteindre la note maxhttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

Mais ta façon de faire est sale clé tu dis ta un putain de niveau et tu me nargues tout en me disant que tu ne peux pas m'aiderhttps://image.noelshack.com/fichiers/2022/16/4/1650523535-full-1.png

là je vais aller me coucher
voit avec d'autres khey pour te faire ça

après si tu t'y mets cette nuit et cette journée et vendredi , tu as large moyen d'avoir une bonne note
il faut juste trouver les bons clefs sur google ou simplement github

genre "navbar mobile flex"
https://github.com/fatihwin/ftwnav
c'est exactement ce que tu as besoin

Encore demain tic tac

t'as réussi ?