SHARE
TWEET

Untitled

Jeloxx Jan 28th, 2020 87 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Catch'em all!</title>
  6.         <link rel="stylesheet" href="style.css">
  7.     </head>
  8.     <body>
  9.         <main>
  10.             <img src="http://images.innoveduc.fr/integration_parcours/css/css_selectors_props/hobbit-house.jpg" alt="Hobbit house" class="hover-effect">
  11.             <p>Photo by conner Bowe on Unsplash</p>
  12.             <img src="http://images.innoveduc.fr/integration_parcours/css/css_selectors_props/hobbit-house-grass.jpg" alt="Hobbit house with grass">
  13.             <p>Photo by Jeff Finley on Unsplash</p>
  14.             <img src="http://images.innoveduc.fr/integration_parcours/css/css_selectors_props/hobbit-house-grey-grass.jpg" alt="Hobbit house with grey grass" class="hover-effect">
  15.             <p>Photo by Tyler Lastovich on Unsplash</p>
  16.         </main>
  17.     </body>
  18. </html>
  19.  
  20. ____________________________________________________________________________________________________________________________
  21. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  22. ____________________________________________________________________________________________________________________________
  23.  
  24. body {
  25.     font-family: 'Courier New', Courier, monospace;
  26. }
  27.  
  28. /* English : Replace the dots below by a selector targeting all the images of the page. */
  29. /* Français : Remplace les points ci-dessous par un sélecteur ciblant toutes les images de la page. */
  30.  
  31. img{
  32.     width: 300px;
  33.     height: 300px;
  34.     border-radius: 5%;      /* English : Replace with a property that makes the image borders look rounded. */
  35.             /* Français : Remplace par une propriété arrondissant les angles de l'image. */
  36. }
  37.  
  38.  
  39.  
  40. /* English : Replace the dots below by a class named "hover-effect" with a :hover pseudo-class. This class has to target the first image and the last image of the page. */
  41. /* Français : Remplace les points ci-dessous par une classe "hover-effect" avec une pseudo-classe :hover. Cette classe doit cibler la première image et la troisième image de la page. */
  42.  
  43. .hover-effect:hover {
  44.     opacity : 0.8;      /* English : Replace with a property responsible for opacity changes. */
  45.                     /* Français : Remplace par une propriété modifiant l'opacité. */
  46.     cursor: pointer;
  47. }
  48.  
  49. /* English : Replace the dots below by a selector targeting the second image of the page. Do not use a class or an id! */
  50. /* Français : Remplace les points ci-dessous par un sélecteur ciblant la seconde image de la page. N'utilise pas de classe ou d'id ! */
  51.  
  52. main :nth-child(3){
  53.         filter: grayscale(1);
  54.         -webkit-filter: grayscale(1);
  55.         };  /* English : Replace with a property that makes the image look black & white. */
  56.                 /* Français : Remplace par une propriété faisant paraître l'image en noir et blanc. */
  57. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top