Devoir 6: La vengeance de Plankton

Ça y est - votre publicité pour M. Krab a été un succès! Alors que des clients se precipitent pour aller au Crabe Croustillant -- remplissant les poches de M. Krab, qui est de bonne humeur depuis que ceci est arrivé -- Plankton regarde son restaurant, le Chum Bucket, se vider une fois de plus.

Ayant vu vos talents de marketing et de design, Plankton vous appelle: il voudrait que vous lui faissiez une affiche publicitaire, mais encore meilleure que celle que vous avez faite pour M. Krabe: il veut que vous y mettiez encore plus de votre touche artistique.

(Plankton a eu trop de pertes recemment, alors il ne peut pas vous payer, mais il vous rassure qu'il vous donnera des coupons pour 2x1 hamburgers...)

Consignes

SVP lisez-les bien, le futur du Chum Bucket dépend de vous! Chaque erreur commise rend la femme de Plankton, Karen l'ordinateur, vraiment triste (cette dernière passerait le Test de Turing).

Où écrire le devoir?

Le but du devoir est de créer du CSS pour la page HTML qui vous est fournie.

Utilisez le code de Code pour la remise du devoir 6 à la section ci-dessus pour les fichiers intitulés devoir6.css et devoir6.html. Notez que seul le fichier devoir6.css sera corrigé. (vous pouvez utiliser toujours un éditeur de texte à part et les coller après sur nano, ou vous pouvez suivre les consignes ici pour utiliser un autre éditeur de texte sur lequel il est plus facile de programmer)
Le devoir est a remettre le vendredi prochain, 25 février, à minuit. Une fois que vous aurez fini, le fichiers doit se retrouver dans le même dossier que où se trouvent vos devoir 1, devoir 2, etc. Il devrait donc être accessible (pas d'erreur forbidden ni not found) aux adresses:

De plus, vous devez vous assurer que vos fichiers ift1005 et tp0 on les permissions drwxr-xr-x et que votre devoir5.css a bien la permission -rw-r--r—, sans quoi nous ne pourrons récuperer votre devoir.

Un tutoriel sur ceci est disponible ici
```
https://www-ens.iro.umontreal.ca/~votreusername/ift1005/tp0/devoir6.css
        
    
    
    
    
    
    
    
    
    
    
```
(ce qui implique que vous devez vous connecter sur arcade pour le deposer)

Encore une fois, si vous n'avez pas lu: Notez que seul le fichier devoir6.css sera corrigé.

Notez que l'adresse complete de cet emplacement sur ssh avec la commande pwd est
```
/home/www-ens/votreusername/public_html/ift1005/tp0/
    
    
    
    
    
    
    
    
    
    
    
```

Code pour la remise du devoir 6

Vous devrez faire deux choses pour setup le devoir:

Créér un fichier devoir6.html que vous NE MODIFIEREZ PAS du tout. Celui-ci vous permettra de voir l'effet de vos styles CSS.
Creer le fichier devoir6.css qui doit se retrouver dans le meme repertoire que votre devoir6.html, un peu comme quand vous avez fait vos styles xsl pour le devoir 4.

L'affichage ne sera pas bizzarre dans ce devoir! Si l'affichage est bizarre, vous avez brisé quelque chose :)

N'oubliez pas que vous pouvez vérifier s'il y a des erreurs dans votre css ici (il y a une case pour cocher "valider CSS"): https://validator.w3.org/nu/#textarea

devoir6.html -> a copier et coller tel quel et a NE PAS modifier


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

        <head>
            <title>Devoir 6</title>
            <link rel="stylesheet" href="devoir6.css">
            <meta charset="UTF-8">
        </head>
        

        <body>
            <!-- NE CHANGEZ PAS LE HTML DU TOUT NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT   -->
            <div class="container" id="principal">
                <div class="section-header">
                    <h1>Venez au chum bucket!</h1>
                    <img id="image-a" alt="un alt special" />
                    <p>
                        <span class="paragraphe-particulier">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim scelerisque pellentesque. Praesent eu leo lorem. Duis aliquet libero sed libero sagittis convallis. Integer at dui ipsum. Nam vitae accumsan sem, id laoreet sem. Aenean pharetra magna ut diam venenatis auctor. <span class="highlighter">Donec varius, nibh et hendrerit sollicitudin</span>, urna velit ultricies est, molestie vulputate est orci in felis.</span>
                        <br><br>
                        Nullam luctus sapien at erat maximus tempor. Sed luctus, lacus sed commodo varius, augue massa vestibulum sapien, et placerat lorem nisi vel ex.
                    </p>
                </div>
                <div class="autre-texte">
                    <p>
                        Phasellus eleifend dui sit amet enim imperdiet vehicula. Integer in ipsum tincidunt, porta enim vitae, congue quam. Nunc tempus arcu nec sodales auctor. Nam pellentesque lobortis risus, posuere tristique <span class="highlighter">odio dignissim at</span>. Integer sit amet ultricies elit, vehicula fringilla ex. Cras a magna id eros fermentum elementum in vitae quam. Nulla ac tempus turpis. Curabitur hendrerit diam nec mi mattis volutpat. Sed venenatis malesuada arcu, ultrices condimentum lectus pellentesque vitae. Nulla venenatis blandit hendrerit.
                        <br><br>
                        Nullam vitae turpis a ligula dignissim mollis. Nunc nisl nisi, laoreet at accumsan non, semper a orci. Integer mi tellus, suscipit quis gravida at, ultrices ut ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, <span class="highlighter">per inceptos himenaeos</span>. Nulla volutpat diam non arcu pellentesque rhoncus. Nullam tincidunt lectus eget nunc sagittis, eu malesuada mauris porta. Nulla posuere neque enim, eget vehicula diam facilisis nec.
                        <br><br>
                    </p>
                </div>
            </div>
            <div class="container" id="secondaire">
                <div class="section-header">
                    <h1>Notre équipe</h1>
                    <img id="image-b" alt="un autre alt special" />
                    <p>
                        <span class="paragraphe-particulier">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim scelerisque pellentesque. Praesent eu leo lorem. Duis aliquet libero sed libero sagittis convallis. Integer at dui ipsum. Nam vitae accumsan sem, id laoreet sem. Aenean pharetra magna ut diam venenatis auctor. <span class="highlighter">Donec varius, nibh et hendrerit sollicitudin</span>, urna velit ultricies est, molestie vulputate est orci in felis.</span>
                        <br><br>
                    </p>
                    <div class="section-speciale">
                        <p>
                            Nullam luctus sapien at erat maximus tempor. Sed luctus, lacus sed commodo varius, augue massa vestibulum sapien, et placerat lorem nisi vel ex.
                        </p>
                    </div>
                </div>
                <div class="autre-texte">
                    <p>
                        Phasellus eleifend dui sit amet enim imperdiet vehicula. Integer in ipsum tincidunt, porta enim vitae, congue quam. Nunc tempus arcu nec sodales auctor. Nam pellentesque lobortis risus, posuere tristique <span class="highlighter">odio dignissim at</span>. Integer sit amet ultricies elit, vehicula fringilla ex. Cras a magna id eros fermentum elementum in vitae quam. Nulla ac tempus turpis. Curabitur hendrerit diam nec mi mattis volutpat. Sed venenatis malesuada arcu, ultrices condimentum lectus pellentesque vitae. Nulla venenatis blandit hendrerit.
                        <br><br>
                        Nullam vitae turpis a ligula dignissim mollis. Nunc nisl nisi, laoreet at accumsan non, semper a orci. Integer mi tellus, suscipit quis gravida at, ultrices ut ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, <span class="highlighter">per inceptos himenaeos</span>. Nulla volutpat diam non arcu pellentesque rhoncus. Nullam tincidunt lectus eget nunc sagittis, eu malesuada mauris porta. Nulla posuere neque enim, eget vehicula diam facilisis nec.
                        <br><br>
                    </p>
                </div>
            </div>
            <div class="container" id="menu">
                <div class="deuxieme-container">
                    <h1>Notre menu</h1>
                    <span class="paragraphe-particulier">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim scelerisque, urna velit ultricies est, molestie vulputate est orci in felis. </span>
                    <div class="hinthint-flexflex">
                        <img id="image-c" class="flexflexhinthint" alt="et encore un autre alt special" />
                        <img id="image-d" class="flexflexhinthint" alt="dude, ceci est aussi un alt" />
                        <img id="image-e" class="flexflexhinthint" alt="et celui la est aussi un alt!" />
                    </div>
                    <h2 id="yuuum">YUUUUUUUUUMMMMMMMM!!!</h2>
                </div>
            </div>
            <!-- NE CHANGEZ PAS LE HTML DU TOUT NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT  NE CHANGEZ PAS LE HTML DU TOUT   -->
        </body>
        

        
            </html>

devoir6.css -> a copier et coller tel quel et a modifier en dessous de \* Votre code en dessous ce ceci :)*/


xxxxxxxxxx
    
    
    
    
        
            
            
            /* NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER */
        
        

        * {
          box-sizing: border-box;
          background-size: cover;
        }
        

        body {
          margin: 0px;
          height: 100vh;
          text-align: justify;
        }
        

        /* [OPTIONNEL] REGARDEZ CECI ET UTILISEZ LES PROPRIETES SUIVANTES SI VOS IMAGES DEBORDENT DE PARTOUT (cette classe-ci n'existe pas dans le html, donc vous devez copier et coller les proprietes width et height ci-dessous pour les utiliser sur vos images) */ 
        .RECOMMENDATION-DE-PROPRIETES-DE-GRANDEUR-POUR-SI-VOUS-METTEZ-DES-IMAGES-QUI-SONT-TROP-GRANDES{
          width: 20%;
          height: 20vw;
        }
        

        
            /* Votre code en dessous ce ceci :)*/

Un mot d'avertissement: le HTML

Ce devoir vous fournit déjà le HTML à utiliser, fait avec soin par votre tpiste :-)

C'est le seul code HTML valide qui peut être utilisé pour ce devoir.

DEUX CHOSES IMPORTANTES:

1. POUR METTRE DES IMAGES DANS LE DEVOIR, VOIR LA SECTION AJOUT D'IMAGES

2. VOUS NE POUVEZ PAS MODIFIER LE HTML POUR AJOUTER VOS PROPRES CLASSES OU ID.

Les éléments que vous pouvez utiliser pour l'affiche

Pour ce devoir, vous devrez avoir:

Au moins 2 attributs color différents,
Au moins 2 attributs flex horizontaux différents
Au moins 4 attributs changeant les tailles d'image et/ou des divs differents
Au moins 2 appels de .classe
Au moins 1 utilisation de l'attribut: background-image: url('votre-lien-de-image-de-fond'); (l'ajout d'images ne compte pas dans ceci)
Au moins 1 image ajoutée, seulement possible avec notre méthode d'ajout d'images

Au moins 2 selecteurs de la liste suivante de selecteurs ci-dessous:

Selecteurs CSS

Selector	Example	Example description
element element	div p	Selects all elements inside elements
element>element	div > p	Selects all elements where the parent is a element
element+element	div + p	Selects the first element that is placed immediately after elements
element1~element2	p ~ ul	Selects every element that is preceded by a element

Source: W3Schools - CSS Selectors

Conseil: si ce n'est pas toujours fait, allez voir la page sur les editeurs de texte locaux. Ça va vraiment vous aider à aller plus vite pour vos devoirs du reste de la session.

Ajout d'images (!!!!!!!!!!!!!!!!!)

ERREUR DE VALIDATEUR: A cause de cette manière d'ajouter des images, vous aurez des erreurs dans votre validateur HTML. Les seules erreurs que vous aurez qui sont attendues seront l'erreur qui se plaint que "votre balise img n'a pas d'attribut src.".

Toute autre erreur indiquée par le validateur est de votre faute

Pour ajouter des images dans votre devoir, nous allons faire un trick css: au lieu d'indiquer la source de l'image dans la balise html (sous src="tonlienici.jpg"), nous allons speficier le contenu de l'image sous le CSS!

Donc:

à la place de faire, dans mon HTML,


x
    
    
    
    
        
            
            
            <img id="chatons" src="mon-image-de-chatons.jpg" alt="chatons-boite"/>

Je fais plutôt dans le HTML:


x
    
    
    
    
        
            
            
            <img id="chatons" alt="chatons-boite"/>

et dans mon CSS:


x
    
    
    
    
        
            
            
            #chatons {
        
        
              content: url("mon-image-de-chatons.jpg");
        
        }

Ceci est une autre manière (moins commune, mais valable) de mettre des images dans votre html. Nous allons l'utiliser vu que on ne modifiera pas le HTML

Vous êtes libres d'ajouter les images que vous voulez MAIS je vous recommande de rester avec le thème de bob l'éponge.

Optionnel: quelques images

Quelques images de bob l'eponge qui s'affichent (vous avez le choix de les utiliser et/ou d'en utiliser d'autres!)

Quelques suggestions d'images normales:


x
    
    
    
    
        
            
            
            

        
        
            "https://i.pinimg.com/736x/c1/8e/88/c18e88be7d3d037fab583cf9f19a3c50--spongebob-squarepants-cartoons-body-weight.jpg"
        
        

        "https://i1.sndcdn.com/artworks-KSzxSeEvgAptMtJ8-HBah4w-t500x500.jpg"
        

        "https://wallpapers-clan.com/wp-content/uploads/2021/03/spongebob-fish-drinking-soda-meme-wallpaper-scaled.jpg"
        
            

        
        "https://yt3.ggpht.com/gcD1KWmeF3E3XMZDbj7x_5uL-bO0mJuROcZPTFzfXOLyveFfzYk46t_n3UT7iVDDJ6ekefP8=s900-c-k-c0x00ffffff-no-rj"
        

        
            "https://i1.sndcdn.com/artworks-000540368046-8nn1wy-t500x500.jpg"

Quelques suggestions d'images de background:


x
    
    
    
    
        
            
            
            "https://images-na.ssl-images-amazon.com/images/S/pv-target-images/d7e724737a882a3017e4f3ea32a38cbd51793f84ebecf25b8d70aee365dff51a._RI_V_TTW_.jpg"
        
        
            

        
        
            "https://wallpapercave.com/wp/acy6hc1.jpg"
        
        
            

        
        
            "http://s3.amazonaws.com/spoonflower/public/design_thumbnails/0331/0464/r2012_0601_2294_shop_preview.png"