<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap');
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      align-items: center;
      background: #D8AA96;
      color: rgba(0, 0, 0, 0.8);
      display: grid;
      font-family: 'Montserrat', sans-serif;
      font-size: 14px;
      font-weight: 400;
      height: 100vh;
      justify-items: center;
      weight: 100vw;
    }
    .signup-container {
      display: grid;
      grid-template-areas: "left right";
      max-width: 900px;
    }
    .left-container {
      background: #807182;
      overflow: hidden;
      padding: 40px 0 0 0;
      position: relative;
      text-align: center;
      width: 300px;
    }
    .left-container h1 {
      color: rgba(0, 0, 0, 0.8);
      display: inline-block;
      font-size: 24px;
    }
    .left-container h1 i {
      background: #F7B1AB;
      border-radius: 50%;
      color: #807182;
      font-size: 24px;
      margin-right: 5px;
      padding: 10px;
      transform: rotate(-45deg);
    }
    .left-container .puppy {
      bottom: -5px;
      position: absolute;
      text-align: center;
    }
    .left-container .puppy:before {
      background: #807182;
      content: "";
      height: 100%;
      left: 0;
      opacity: 0.4;
      position: absolute;
      width: 100%;
      z-index: 1;
    }
    .left-container img {
      width: 100%;
      height: 70%;
    }
    .right-container {
      background: #f9c7c2;
      display: grid;
      grid-template-areas: "." ".";
      width: 500px;
    }
    .right-container h1:nth-of-type(1) {
      color: rgba(0, 0, 0, 0.8);
      font-size: 28px;
      font-weight: 600;
    }
    .right-container .set {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
    }
    .right-container input {
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      height: 38px;
      line-height: 38px;
      padding-left: 5px;
    }
    .right-container input, .right-container label {
      color: rgba(0, 0, 0, 0.8);
    }
    .right-container header {
      padding: 40px;
    }
    .right-container label, .right-container input, .right-container .pets-photo {
      width: 176px;
    }
    .right-container .pets-photo {
      align-items: center;
      display: grid;
      grid-template-areas: ". .";
    }
    .right-container .pets-photo button {
      border: none;
      border-radius: 10%;
      height: 38px;
      margin-right: 1px;
      outline: none;
      width: 176px;
    }
    .right-container .pets-photo button i {
      color: rgba(0, 0, 0, 0.8);
      font-size: 16px;
    }
    .right-container .pets-weight .radio-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    .right-container footer {
      align-items: center;
      background: #fff;
      display: grid;
      padding: 5px 40px;
    }
    .right-container footer button {
      border: 1px solid rgba(0, 0, 0, 0.2);
      height: 38px;
      line-height: 38px;
      width: 100px;
      border-radius: 19px;
      font-family: 'Montserrat', sans-serif;
    }
    .right-container footer #back {
      background: #fff;
      transition: 0.2s all ease-in-out;
    }
    .right-container footer #back:hover {
      background: #171A2B;
      color: white;
    }
    .right-container footer #next {
      background: #807182;
      border: 1px solid transparent;
      color: #fff;
    }
    .right-container footer #next:hover {
      background: #171A2B;
    }
    .pets-name label, .pets-breed label, .pets-birthday label, .pets-gender label, .pets-spayed-neutered label, .pets-weight label {
      display: block;
      margin-bottom: 5px;
    }
    .radio-container {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      display: inline-block;
      padding: 5px;
    }
    .radio-container label {
      background: transparent;
      border: 1px solid transparent;
      border-radius: 2px;
      display: inline-block;
      height: 26px;
      line-height: 26px;
      margin: 0;
      padding: 0;
      text-align: center;
      transition: 0.2s all ease-in-out;
      width: 80px;
    }
    .radio-container input[type="radio"] {
      display: none;
    }
    .radio-container input[type="radio"]:checked + label {
      background: #F7B1AB;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
    input[type="file"] {
  opacity: 0;
  width: 0;
  height: 0;
}
  </style>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="/add-pet" method="POST" enctype="multipart/form-data">
    <div class="signup-container">
        <div class="left-container">
          <h1>
            <i class="fas fa-paw"></i>
            PETSURE
          </h1>
          <div class="puppy">
            <img src="https://images.pexels.com/photos/7474573/pexels-photo-7474573.jpeg?auto=compress&cs=tinysrgb&w=600"/>
          </div>
        </div>
        <div class="right-container">
          <header>
            <h1>Let's Save Stray Animals! </h1>
            <div class="set">
              <div class="pets-name">
                <label for="pets-name">Name</label>
                <input id="pets-name" placeholder="Pet's name" type="text" value="" name="name" required/>
              </div>
              <div class="pets-photo">
                <label for="pets-upload">Upload a photo</label><br>
                <button id="pets-upload" onclick="document.getElementById('image').click();">+</button>
                <input type="file" id="image" name="image" value="" required />
              </div>
            </div>
            <div class="set">
              <div class="pets-breed">
                <label for="pets-breed">Breed</label>
                <input id="pets-breed" placeholder="Pet's breed" type="text" name="breed" required></input>
              </div>
              <div class="pets-birthday">
                <label for="pet-age">Age</label>
                <div class="radio-container">
                  <input id="pet-age-adult" name="age" type="radio" value="Adult" required></input>
                  <label for="pet-age-adult">Adult</label>
                  <input id="pet-age-kid" name="age" type="radio" value="Kid"></input>
                  <label for="pet-age-kid">Kid</label>
                </div>
              </div>
            </div>
            <div class="set">
              <div class="pets-gender">
                <label>Gender</label>
                <div class="radio-container">
                  <input id="pet-gender-female" name="gender" type="radio" value="female" required></input>
                  <label for="pet-gender-female">Female</label>
                  <input id="pet-gender-male" name="gender" type="radio" value="male" required></input>
                  <label for="pet-gender-male">Male</label>
                </div>
              </div>
              <div class="pets-birthday">
                <label>Type</label>
                <div class="radio-container">
                  <input id="pet-type-cat" name="type" type="radio" value="Cat" required></input>
                  <label for="pet-type-cat">Cat</label>
                  <input id="pet-type-dog" name="type" type="radio" value="Dog" required></input>
                  <label for="pet-type-dog">Dog</label>
                </div>
              </div>
            </div>
            
            <div class="pets-weight">
              <label for="pet-weight-0-25">Description</label>
                <textarea
                id="desc"
                name="desc"
                value=""
                rows="2"
                placeholder="Description"
                required
                class="radio-container"
              >
              </textarea>
            </div>
          </header>
          <footer>
            <div class="set">
              <button id="back" onclick="window.location.href='{{%url home%}}'">Cancel</button>
              <button id="next" type="submit">Save</button>
            </div>
          </footer>
        </div>
      </div>
      </form>
</body>
</html>