index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Pets of Amazee</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700">
  <link href="/index.css" rel="stylesheet">
  <script src="script.js"></script>
</head>
<body>
  <header>
    <h1>Pets of Amazee</h1>
    <p>Say hello to our little friends</p>
  </header>
  <main class="pets">
    <a class="pet" href="#ladybird" id="ladybird">
      <h2>Ladybird</h2>
      <img src="/images/ladybird.jpg" alt="Ladybird" title="Ladybird">
    </a>
    <a class="pet" href="#toby" id="toby">
      <h2>Toby</h2>
      <img src="/images/toby.jpg" alt="Toby (Sydney Silky Terrier cross Maltese)" title="Toby (Sydney Silky Terrier cross Maltese)">
    </a>
    <a class="pet" href="#layla" id="layla">
      <h2>Layla</h2>
      <img src="/images/layla.jpg" alt="Layla the maltipoo" title="Layla the maltipoo">
    </a>
    <a class="pet" href="#mommacat" id="mommacat">
      <h2>Momma Cat</h2>
      <img src="/images/mommacat.jpg" alt="Momma Cat" title="Momma Cat">
    </a>
    <a class="pet" href="#marshmallow" id="marshmallow">
      <h2>Marshmallow</h2>
      <img src="/images/marshmallow.jpg" alt="Marshmallow" title="Marshmallow">
    </a>
    <a class="pet" href="#brooklyn" id="brooklyn">
      <h2>Brooklyn</h2>
      <img src="/images/brooklyn.jpg" alt="Brooklyn" title="Brooklyn">
    </a>
    <a class="pet" href="#powerpuff" id="powerpuff">
      <h2>Buttercup, Blossom, and Bubbles</h2>
      <img src="/images/powerpuff.jpg" alt="Buttercup, Blossom, and Bubbles the guinea pigs" title="Buttercup, Blossom, and Bubbles the guinea pigs">
    </a>
    <a class="pet" href="#betty-gloria" id="betty-gloria">
      <h2>Betty and Gloria</h2>
      <img src="/images/betty-gloria.jpg" alt="Betty and Gloria" title="Buttercup, Blossom, and Bubbles the guinea pigs">
    </a>
    <a class="pet" href="#doug" id="doug">
      <h2>Doug</h2>
      <img src="/images/doug.jpg" alt="Doug the guinea pig" title="Doug the guinea pig">
    </a>
    <a class="pet" href="#fergie" id="fergie">
      <h2>Fergie</h2>
      <img src="/images/fergie.jpg" alt="Fergie the guinea pig" title="Fergie the guinea pig">
    </a>
    <a class="pet" href="#joey" id="joey">
      <h2>Joey</h2>
      <img src="/images/joey.jpg" alt="Joey the guinea pig" title="Joey the guinea pig">
    </a>
    <a class="pet" href="#ada" id="ada">
      <h2>Ada</h2>
      <img src="/images/ada.jpg" alt="Ada the Savannah Cat" title="Ada the Savannah Cat">
    </a>
    <a class="pet" href="#mushu" id="mushu">
      <h2>Mushu</h2>
      <img src="/images/mushu.jpg" alt="Mushu the cavapoo" title="Mushu the cavapoo">
    </a>
    <a class="pet" href="#ellie" id="ellie">
      <h2>Ellie</h2>
      <img src="/images/ellie.jpg" alt="Ellie the tabby x tortoiseshell cat" title="Ellie the tabby x tortoiseshell cat">
    </a>
    <a class="pet" href="#crunchiecat" id="crunchiecat">
      <h2>Crunchie Cat</h2>
      <img src="/images/crunchiecat.jpg" alt="Crunchie the Cat" title="Crunchie the Cat">
    </a>
    <a class="pet" href="#chloe" id="chloe">
      <h2>Chloe</h2>
      <img src="/images/Chloe.jpg" alt="Chloe (aka: Bebelușca)" title="Chloe (aka: Bebelușca)">
    </a>
    <a class="pet" href="#stanley" id="stanley">
      <h2>Stanley</h2>
      <img src="/images/stanley.jpg" alt="Stanley the cat" title="Stanley the cat">
    </a>
    <a class="pet" href="#chip" id="chip">
      <h2>Chip</h2>
      <img src="/images/chip.jpg" alt="Chip the cat" title="Chip the cat">
    </a>
    <a class="pet" href="#chickens" id="chickens">
      <h2>Poppy, Rosie, Ziggy and Honey</h2>
      <img src="/images/chickens.jpg" alt="Poppy, Rosie, Ziggy and Honey" title="Poppy, Rosie, Ziggy and Honey">
    </a>
    <a class="pet" href="#barkley" id="barkley">
      <h2>Barkley</h2>
      <img src="/images/barkley.jpg" alt="Barkley (Groodle/Goldendoodle)" title="Barkley (Groodle/Goldendoodle)">
    </a>
    <a class="pet" href="#leonardo-enrique" id="leonardo-enrique">
      <h2>Leonardo Enrique</h2>
      <img src="/images/leonardo-enrique.jpg" alt="4.5 months old flamingo Leonardo Enrique" title="4.5 months old flamingo Leonardo Enrique">
    </a>
    <a class="pet" href="#vito" id="vito">
      <h2>Vito</h2>
      <img src="/images/vito-goodboy.jpg" alt="Vito Good Old Boy" title="Vito Good Old Boy">
    </a>
    <a class="pet" href="#jerry" id="jerry">
      <h2>Jerry</h2>
      <img src="/images/jerry.jpg" alt="Pomeranian Jerry" title="Pomeranian Jerry">
    </a>
    <a class="pet" href="#pepino" id="pepino">
      <h2>Pepino</h2>
      <img src="/images/pepino.jpg" alt="Pepino" title="Pepino">
    </a>
    <a class="pet" href="#neve" id="neve">
      <h2>Névé</h2>
      <img src="/images/neve.jpg" alt="Névé" title="Névé">
    </a>
    <a class="pet" href="#taicka" id="taicka">
      <h2>Taïcka</h2>
      <img src="/images/taicka.jpg" alt="Taïcka" title="Taïcka">
    </a>
    <a class="pet" href="#otis" id="otis">
      <h2>Otis</h2>
      <img src="/images/otis.jpg" alt="Otis" title="Otis">
    </a>
    <a class="pet" href="#axel" id="axel">
      <h2>Axel</h2>
      <img src="/images/axel.jpg" alt="Axel" title="Axel">
    </a>
    <a class="pet" href="#alleria" id="alleria">
      <h2>Alleria</h2>
      <img src="/images/alleria.jpg" alt="Alleria" title="Alleria">
    </a>
    <a class="pet" href="#angel" id="angel">
      <h2>Angel</h2>
      <img src="/images/angel.jpg" alt="Angel" title="Angel">
    </a>
    <a class="pet" href="#jacky" id="jacky">
      <h2>Jacky</h2>
      <img src="/images/jacky.jpg" alt="Jacky" title="Jacky">
    </a>
    <a class="pet" href="#oskar" id="oskar">
      <h2>Oskar</h2>
      <img src="/images/oskar.jpg" alt="Oskar" title="Oskar">
    </a>
    <a class="pet" href="#nando" id="nando">
      <h2>Nando</h2>
      <img src="/images/nando.jpg" alt="Oskar" title="nando">
    </a>
    <a class="pet" href="#Layla2" id="Layla2">
      <h2>Layla</h2>
      <img src="/images/layla_ashleigh.png" alt="Layla" title="Layla">
    </a>
    <a class="pet" href="#pinky" id="#Pinky">
      <h2>Pinky</h2>
      <img src="/images/pinky.jpg" alt="Pinky" title="Pinky">
    </a>
    <a class="pet" href="#flash" id="#Flash">
      <h2>Flash</h2>
      <img src="/images/Flash.jpg" alt="Flash" title="Flash">
    </a>
    <a class="pet" href="#rudi" id="#Rudi">
      <h2>Rudi</h2>
      <img src="/images/rudi.jpg" alt="Rudi" title="Rudi">
    </a>
    <a class="pet" href="#karli" id="#Karli">
      <h2>Karli</h2>
      <img src="/images/karli.jpg" alt="Karli" title="Karli">
    </a>
    <a class="pet" href="#Blacky-Rosi" id="#Blacky-Rosi">
      <h2>Blacky and Rosi</h2>
      <img src="/images/blacky-rosi.jpg" alt="Blacky and Rosi" title="Blacky and Rosi">
    </a>
    <a class="pet" href="#finn" id="#finn">
      <h2>Finn</h2>
      <img src="/images/Finn.jpg" alt="Finn" title="Finn">
    </a>
    <a class="pet" href="#Millie" id="#Millie">
      <h2>Millie</h2>
      <img src="/images/Millie.jpg" alt="Millie" title="Millie">
    </a>
    <a class="pet" href="#galah" id="#galah">
      <h2>Rescue Galah</h2>
      <img src="/images/RescueGalah.jpg" alt="Galah" title="Galah">
    </a>
    <a class="pet" href="#budgies" id="#budgies">
      <h2>The Budgies - Pip, Fidget, Lemon and Byrd</h2>
      <img src="/images/Fidget-Pip-Lemon-&-byrd.jpg" alt="The Budgies" title="The Budgies">
    </a>
    <a class="pet" href="#poppy" id="#poppy">
      <h2>Poppy</h2>
      <img src="/images/Poppy.jpg" alt="Poppy" title="Poppy">
    </a>
    <a class="pet" href="#anchovy" id="#anchovy">
      <h2>Anchovy Knight Gruneberg</h2>
      <img src="/images/anchovy.jpg" alt="Anchovy" title="Anchovy">
    </a>
    <a class="pet" href="#luna" id="#luna">
      <h2>Luna</h2>
      <img src="/images/luna_amazee.io.jpg" alt="Luna" title="Luna">
    </a>
  </main>
</body>
</html>