A Pen by Katie

Thumbnail
This awesome code was written by kathlyn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kathlyn ©
  • HTML
  • CSS
  • JavaScript
    <head>
  <title>Petra's Pet Store</title>
</head>
<!-- https://gdidenver.github.io/jeffco-code-camp/#/ -->
<!-- https://codepen.io/Midajah/pen/MwLyYa?editors=110 -->

<!-- Inline for shapes
     Add more cats
     Add img/shape breaks inbetween sections?
     Add nav links to cats/dogs?
     <strong> links for names
     Bigger link fonts
     Edit her bio
     I got all the </br>s to 1!
-->
<body>
  <h1 class="petra">Petra's Pet Store</h1>
  <div>
  <div class=dog>
    <div class=ear1>
    </div>
    <div class=ear2>
    </div>
    <div class=eye1>
    </div>
    <div class="eye2">
      </div>
    <div class="mouth">
    </div>
  </div>
    <div>
  <div class=cat>
    <div class=ear-1>
    </div>
    <div class=ear-2>
    </div>
    <div class=eye-1>
    </div>
    <div class="eye-2">
      </div>
    <div class="mouth-">
    </div>
  </div>
  <div class="intro">
      <h3>Petra's Pet's specializes in finding the best pet for you and your family. From lizards to puppies, we want to make sure you are getting exactly the right pet!</h3>
      <h3>Animals are available for adoption and other small pets for sale. A partnership with Boulder Humane Society allows for animals to be brought down to the store for local adoptions.</h3>
      <h3>Visit Petra's Pet Store to shop and satisfy all of your pet needs! Who knows, you may end up leaving with a new furry, slithery, or feathery friend!</h3>
  </div>
  <h2 class="about">About Petra</h2>
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTbASndhIiQaDwzOcSatkCzrXCtZ876DeP_VhJ0mY_10-M-nbM0" 
  <div class="float">
      </br>
    </br>
  <p class= "about-info">Petra has always been animal lover and a passion for helping animals of all kind find loving homes. She grew up with dogs, cats, and even many small animals such as guinea pigs as a child. Currently Petra owns a Tabby cat named Stella and a Boxer named Stanley.</p>
  </div>
  </br>
  <h2 class="adopt"> How to Adopt a Pet</h2>
    <div class="adopt-info">
      <ul class="here">
        <li>Step 1: Decide what kind of pet is the best fit for you. Help find what pet is right for you and take the Pet Picker Quiz
        <a href="http://www.animalplanet.com/pets/pet-picker-quiz/" target=blank>here</a>
        </li>
        <li>Step 2: Get all the equipment you'll need. Inventory for common household pets are available here. </li> 
        <li>Step 3: Take your new friend home! Read Tips for the First 30 Days of Adoption for 
        <a href="https://www.petfinder.com/dogs/bringing-a-dog-home/tips-for-first-30-days-dog/" target=blank>dogs</a> and 
        <a href="https://www.petfinder.com/cats/bringing-a-cat-home/tips-for-first-30-days-cat/" target=blank>cats</a>.
      </li>
    </ul>
</div>
  <h2 class="adopt-dog">Adopt a Dog</h2>
  <div class="dogs">
       </br>
  <table border="1">
    <tr>
      <th> 
        <img src="https://www.petango.com/sms/photos/993/b5aa6b4f-bc80-492a-b568-3afdb6474db9.jpg"</th>
      <th> 
        <p><strong> <!--Why isn't <strong> working-->Annie</strong></p>
        <p>Boxer/Mix</p>
        <p>Age: 6 years 6 months</p>
        <p>Sex: Female</p>
        <p>Price: $19.00</p>
        <p>Color: Fawn/White</p>
        <p>Weight: 71 pounds</p>
        <p>Here Since: 06/03/2015</p>
        <p>ID: 18929039</P>
    <th> 
      <img src="https://www.petango.com/sms/photos/993/7462267f-4285-4d07-aa52-db871721d488.jpg"
    </th>
    <th>
      <p>Mia</p>
      <p>Terrier, American Pit Bull/Mix</p>
      <p>Age: 6 years 1 month</p>
      <p>Sex: Female</p>
      <p>Price: $19.00</p>
      <p>Color: Red/White</p>
      <p>Weight: 70 pounds</p>
      <p>Here Since: 06/17/2015</p>
      <p>ID: 28151117</p>
    </th>
    </tr>
    <tr>
      <td> 
        <img src="https://www.petango.com/sms/photos/993/27dea91d-bb4a-4e4c-bf14-b3103792e385.jpg"
      </td>
      <th>     
        <p><strong>Kacee</strong></p>
        <p>Retriever, Labrador/English Mastiff</p>
        <p>Age: 8 years 3 months</p>
        <p>Sex: Female</p>
        <p>Price: $19.00</p>
        <p>Color: Tan</p>
        <p>Weight: 80 pounds</p>
        <p>Here Since: 06/04/2015</p>
        <p>ID: 27721612</p> 
      </th>
      <td>
        <img src="https://www.petango.com/sms/photos/993/221ade4d-5c97-48ee-a3c1-4d2512fc1f67.jpg"
      </td>
      <th>
        <p>June</p>
        <p>Chihuahua, Short Coat/Mix</p>
        <p>Age: 5 years 1 month</p>
        <p>Sex: Female</p>
        <p>Price: $19.00</p>
        <p>Color: Tan</p>
        <p>Weight: 8 pounds</p>
        <p>Here Since: 07/03/2015</p>
        <p>ID: 28295953</p>
      </th>
  </table>
     </div>
<div class="cats">
   <h2 class="adopt-cat">Adopt a Cat</h2>
       </br>
  <table border="3">
    <tr>
      <th> 
        <img src="https://www.petango.com/sms/photos/993/2567b774-f6f9-455c-bb06-38f2f0f5415a.jpg"</th>
      <th>         
        <p><strong>Ceaser</strong></p>
        <p>Domestic Medium Hair/Purebred</p>
        <p>Sidekick</p>
        <p>Age: 5 years 10 months</p>
        <p>Sex: Female</p>
        <p>Price: $10.00</p>
        <p>Color: Brown</p>
        <p>Weight: 10 pounds</p>
        <p>Here Since: 06/23/2015</p>
        <p>ID: 11474365 </p>
    </th>
    </tr>
    <tr>
      <td> 
        <img src="https://www.petango.com/sms/photos/993/c6cdab8c-8bfa-471a-a440-f004983e3b0f.jpg"</td>
      <th>     
        <p><strong>Macy</strong></p>
        <p>Domestic Longhair/Purebred</p>
        <p>Age: 3 years 4 months</p>
        <p>Sex: Female</p>
        <p>Price: $10.00</p>
        <p>Color: Brown/Orange</p>
        <p>Weight: 11 pounds</p>
        <p>Here Since: 07/30/2015</p>
        <p>ID: 16574183</p>
      </th>
  </table>
     </div>
<footer>
  <p><!--Contact Us 303.442.4030--> Copyright &copy; 2015</p>
</footer>
</body>

/*Downloaded from https://www.codeseek.co/kathlyn/a-pen-by-katie-gpqvjJ */
    body{
  background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSmz6sI3Pbipm9jCDL0oH9QK9igdW5w5uiAKqMIfvaJ2fX-xXrN9w);
  background-repeat: no-repeat;
  background-size: 300%;
}

.petra{
  color: #4B0082;
  text-shadow: 3px 3px 6px #EE82EE;
  position: relative;
  text-align: center;
  font-family: Lucida Console;
  font-size: 50px;
}
.dog{
  width: 160px;
	height: 160px;
	background: #522900;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
  position: relative;
  right: -100px;
  transition: transform 1s;
  margin-left: 37%;
}
.dog:hover{
  transform: rotate(360deg);
}
.ear1{
  width: 2px;
	height: 2px;
	border-top: 100px solid #4C331A;
	border-right: 100px solid transparent;
  position: absolute;
  right: px;
  zoom: 60%;
}
.ear2{
  width: 0;
	height: 0;
	border-top: 100px solid #4C331A;
	border-left: 100px solid transparent;
  position: relative;
  right: -160px;
  zoom: 60%;
}
.eye1{
display: block;
   width: 126px; 
   height: 180px;
   background-color: black;
-webkit-border-radius: 63px 63px 63px 63px/
   108px 108px 72px 72px;
  zoom: 20%;
  position: relative;
  right: -150px;
}
.eye2{
  display: block;
   width: 126px; 
   height: 180px;
   background-color: black;
-webkit-border-radius: 63px 63px 63px 63px/
   108px 108px 72px 72px;
  zoom: 20%;
  position: relative;
  right: -500px;
  bottom: 175px;
}
.mouth{
  width: 200px;
	height: 100px;
	background: #4C331A;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
  position: relative;
  left: 160px;
  bottom: 100px;
  zoom: 30%;
}
.cat{
  width: 160px;
  height: 160px;
  background: #5E5E47;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  position: relative;
  right: -100px;
  transition: transform 1s;
  margin-left: 37%;
  display: /*inline; -cat head goes away*/
}
.cat:hover{
  transform: rotate(360deg);
}
.ear-1{
  width: 2px;
	height: 2px;
	border-top: 100px solid #323230;
	border-right: 100px solid transparent;
  position: absolute;
  right: px;
  zoom: 60%;
}
.ear-2{
  width: 0;
	height: 0;
	border-top: 100px solid #323230;
	border-left: 100px solid transparent;
  position: relative;
  right: -160px;
  zoom: 60%;
}
.eye-1{
display: block;
   width: 126px; 
   height: 180px;
   background-color: black;
-webkit-border-radius: 63px 63px 63px 63px/
   108px 108px 72px 72px;
  zoom: 20%;
  position: relative;
  right: -150px;
}
.eye-2{
  display: block;
   width: 126px; 
   height: 180px;
   background-color: black;
-webkit-border-radius: 63px 63px 63px 63px/
   108px 108px 72px 72px;
  zoom: 20%;
  position: relative;
  right: -500px;
  bottom: 175px;
}
.mouth-{
  width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid #DB4D4D;
  position: relative;
  left: 269px;
  bottom: 95px;
  zoom: 25%;
}
.intro{
  font-size: 20px;
}
.about{
  color: #0000FF;
  text-shadow: 3px 3px 6px #2EB8E6;
  font-family: Lucida Sans Unicode;
}
.about-info{
  font-size: 20px;
}
.float{
  float: left;
}
.dogs img {
  width: 200px;
}
.dogs{
  font-size: 15px;
}
.cats {
  display: inline-block;
  font-size: 15px;
}
.cats img {
  width: 200px;
}
.adopt{
  color: #008A2E;
  text-shadow: 3px 3px 6px #33CC33;
}
.adopt-info{
  font-size: 20px;
}
a {
  text-decoration: none;
   font-size: 18px;
  font-color: blue;
}
a:hover {
  font-size: 20px;
}
a:visited {
  color: blue;
}
.adopt-dog{
  color: #990000;
  text-shadow: 3px 3px 6px #FF1919;
  font-family: Comic Sans MS;
}
.adopt-cat{
  color: #CC00CC;
  text-shadow: 3px 3px 6px #FF33FF;
}
footer{
  text-align: center;
}


/*Downloaded from https://www.codeseek.co/kathlyn/a-pen-by-katie-gpqvjJ */
    

Comments