catLab/index.html at master · AlisonZ/catLab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
  <head>
  <link type="text/css" rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet" type="text/css">
  <title>CatLab</title>
  </head>
  <body>
    <nav>
      <div id="menu">
        <ul id="pages">
          <li id="home" class="selected default"><a href="index.html">HOME</a></li>
          <li id="about" class="default"><a href="about.html">ABOUT</a></li>
          <li id="contact" class="default"><a href="contact.html">CONTACT</a></li>
        </ul>

        <ul id="social">
          <li><img class='socialeffect' src="images/linkedin.png"></li>
          <li><img class='socialeffect' src="images/instagram.png"></li>
          <li><img class='socialeffect' src="images/tweet.png"></li>
          <li><img class='socialeffect' src="images/facebook-icon.png"></li>
        </ul>
      </div>
    </nav>
    <main>
      <div id="banner">
       <ul id="circles">
          <li><div id="filled_circle"></div></li>
          <li><div></div></li>
          <li><div></div></li>
          <li><div></div></li>
         <li><div></div></li>
         <li><div></div></li>
       </ul>
       <img id="banner_image"src="http://placekitten.com/g/960/400"/>
       <div id="float">
          </div>
         <div id="floating_text">
           <h1>Cats in Baskets</h1>
           <p>We've all heard about the Cat in the Hat, but what about cats in baskets? Well, I would never want to ignore those, so here is a little collection of some cats in baskets!</p>
         </div>
        <div id="button">
          <p>MORE</p>
        </div>

      </div>
    </main>

    <!-- THIS MAKES THE BANNER BEFORE THE PICTURES OF CATS -->

<div id="recentKittyBanner">
   <p>Recent Kitty Cats</p>
   <p>    __________  </p>
</div>

<!-- THIS MAKES THE SIDE BY SIDE CAT AND DESCRIPTION PICTURES -->
  <ul class="firstKitty">
    <li>
      <img src="http://placekitten.com/g/674/400"/>
    </li>
    <li>
      <div>
          <h2>Black &amp; White Kitty</h2>
          <h2>________________</h2>
          <p class="date">June 8, 2016</p>
          <p class="location">Location: The Wood Shed</p>
          <p>This picture of the cat was taken out by the wood shed. Look at his fuzzy face! He looks so cool and artsy in black and white, but still so cute!
          </p>
      </div>
    </li>
  </ul>

  <ul class="secondKitty">
    <li>
      <img src="http://loremflickr.com/g/674/400/kitten"/>
    </li>
    <li>
      <div>
          <h2>Kitten on the Counter</h2>
          <h2>________________</h2>
          <p class="date">June 3, 2016</p>
          <p class="location">Location: My Bathroom</p>
          <p class="catbio">He's striped! Look at his little pink nose, it's so cute!And the whiskers!D'awwwww...Don't you just want to scratch behind his little ears?
          </p>
      </div>
    </li>
  </ul>

  <ul class="thirdKitty">
    <li>
      <img src="http://loremflickr.com/g/674/400/cat"/>
    </li>
    <li>
      <div>
          <h2>Feline for you</h2>
          <h2>________________</h2>
          <p class="date">May 30, 2016</p>
          <p class="location">Location: My Bathroom</p>
          <p class="catbio">I didn't even know kittens could have blue eyes! He's fuzzier than usual, and is just a little baby!
          </p>
      </div>
    </li>
  </ul>

  <footer>
      <p>Copyright 2016 &copy; The Kitties, kitty@kitty.cat</p>
    </footer>
  </body>
  <script source="app.js"></script>
</html>