Scribd
Upload
230 views2 pages

Pete's Pet Shop HTML Template

This document is the HTML code for a website called Pete's Pet Shop. It includes metadata, links to Bootstrap for styling, and div elements that will display information and a template for pet profiles. When the app.js script runs it will populate the #petsRow div with pet profiles using the #petTemplate. The site allows users to view pets available for adoption and includes their pictures, breeds, ages, locations, and buttons to adopt them.

Uploaded by

Tinashe Tomu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
230 views2 pages

Pete's Pet Shop HTML Template

This document is the HTML code for a website called Pete's Pet Shop. It includes metadata, links to Bootstrap for styling, and div elements that will display information and a template for pet profiles. When the app.js script runs it will populate the #petsRow div with pet profiles using the #petTemplate. The site allows users to view pets available for adoption and includes their pictures, breeds, ages, locations, and buttons to adopt them.

Uploaded by

Tinashe Tomu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head con
tent must come *after* these tags -->
    <title>Pete's Pet Shop</title>

    <!-- Bootstrap -->
    <link href="css/[Link]" rel="stylesheet">

    <!-- HTML5 shim and [Link] for IE8 support of HTML5 elements and media q
ueries -->
    <!-- WARNING: [Link] doesn't work if you view the page via [Link]
    <!--[if lt IE 9]>
      <script src="[Link]
ipt>
      <script src="[Link]
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-push-2">
          <h1 class="text-center">Pete's Pet Shop</h1>
          <hr/>
          <br/>
        </div>
      </div>

      <div id="petsRow" class="row">
        <!-- PETS LOAD HERE -->
      </div>
    </div>

    <div id="petTemplate" style="display: none;">
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="panel panel-default panel-pet">
          <div class="panel-heading">
            <h3 class="panel-title">Scrappy</h3>
          </div>
          <div class="panel-body">
            <img alt="140x140" data-src="[Link]/140x140" class="img-rounded i
mg-center" style="width: 100%;" src="[Link]
content/uploads/2017/01/Golden-Retriever_6.jpg" data-holder-rendered="true">
            <br/><br/>
            <strong>Breed</strong>: <span class="pet-breed">Golden Retrieve
r</span><br/>
            <strong>Age</strong>: <span class="pet-age">3</span><br/>
            <strong>Location</strong>: <span class="pet-location">Warren, M
I</span><br/><br/>
            <button class="btn btn-default btn-adopt" type="button" data-
id="0">Adopt</button>
          </div>
        </div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="[Link]
s"></script>
    <!-- Include all compiled plugins (below), or include individual files as ne
eded -->
    <script src="js/[Link]"></script>
    <script src="js/[Link]"></script>
    <script src="js/[Link]"></script>
    <script src="js/[Link]"></script>
  </body>
</html>

You might also like