SHARE
TWEET

Untitled

Lechars Feb 14th, 2020 (edited) 82 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 = "survol">
  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 = "survol">
  15.             <p>Photo by Tyler Lastovich on Unsplash</p>
  16.         </main>
  17.     </body>
  18. </html>
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28. body {
  29.     font-family: 'Courier New', Courier, monospace;
  30. }
  31.  
  32. /* English : Replace the dots below by a selector targeting all the images of the page. */
  33. /* Français : Remplace les points ci-dessous par un sélecteur ciblant toutes les images de la page. */
  34.  
  35. img {
  36.     width: 300px;
  37.     height: 300px;
  38.     border-radius : 10px;      /* English : Replace with a property that makes the image borders look rounded. */
  39.             /* Français : Remplace par une propriété arrondissant les angles de l'image. */
  40. }
  41.  
  42.  
  43.  
  44. /* 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. */
  45. /* 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. */
  46.  
  47. .survol:hover {
  48.     opacity : 0.8;      /* English : Replace with a property responsible for opacity changes. */
  49.                     /* Français : Remplace par une propriété modifiant l'opacité. */
  50.     cursor: pointer;
  51. }
  52.  
  53. /* English : Replace the dots below by a selector targeting the second image of the page. Do not use a class or an id! */
  54. /* 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 ! */
  55.  
  56. img:nth-child(3){
  57.     /*filter: grayscale(100%);*/
  58.     -webkit-filter: grayscale(100%);  
  59.    
  60.     /* English : Replace with a property that makes the image look black & white. */
  61.                 /* Français : Remplace par une propriété faisant paraître l'image en noir et blanc. */
  62. }
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