<form>
  <div>
    <label for="name">Name</label>
    <input type="text" name="name">
  </div>
  <div>
    <label for="order-no">Order No</label>
    <input type="text" name="order-no">
  </div>
  <div>
    <label for="size">Size</label>
    <input type="text" name="size">
  </div>
  <div>
    <label for="spools">Spools</label>
    <input type="text" name="spools">
  </div>
  <div>
    <label for="prints">Prints</label>
    <input type="text" name="prints">
  </div>
  <div>
    <label for="enlgts">Enlgts</label>
    <input type="text" name="enlgts">
  </div>
  <div>
    <label for="price">Price</label>
    <input type="text" name="price">
  </div>
</form>
<div id="top-middle"></div>
<h1 id="main-kodak">Kodak</h1>
<img id="ko" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/KOnew.png">
<img id="odak" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/odaknew.png">
<h2 id="film">Film</h2>
<h2 id="wallet">Wallet</h2>
<h1 id="sm-title">Kodak Film Wallet</h1>
<img id="blue-box" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/rectangle.png">
<div id="bottom-left">
  <h2>Use<br><span>Kodak</span><br>Film</h2>
  <h3>-To be Sure</h3>
</div>
<div id="bottom-middle"></div>
<img id="girl" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/girlbox.png">
<div id="bottom-right"></div>


<!-- Note to self: Fix id and class names-->


body {
  background-color: #d6c092;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 2fr 1fr;
  color: #203467;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  margin: 0 auto;
  font-family: sans-serif;
  max-width: 1650px;
}

#top-middle,
#bottom-left,
#bottom-right {
  background-color: #203467;
}

#top-middle {
  grid-column: 2;
  grid-row: 1;
}

#bottom-middle {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/108463/background.png);
  grid-column: 2;
  grid-row: 2;
}

#bottom-left {
  display: grid;
  align-items: center;
}

#bottom-left h2 {
  font-size: 45px;
  margin: 0;
  letter-spacing: 5px;
  align-self: end;
}

#bottom-left h2 span {
  font-size: 60px;
}

#bottom-left h3 {
  font-size: 35px;
  margin: 0;
  letter-spacing: 5px;
  align-self: start;
}

#bottom-right {
  grid-column: 3;
  grid-row: 2;
}

form {
  grid-column: 1;
  line-height: 45px;
  display: grid;
  padding: 5% 5% 10% 1%;
}

form div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

input {
  background-color: transparent;
  border: none;
  border-bottom: 1px dashed #203467;
}

h1#main-kodak,
h2#film,
h2#wallet {
  grid-row: 1;
  grid-column: 3;
}

h1#main-kodak {
  justify-self: center;
  align-self: center;
  font-size: 45px;
  letter-spacing: 5px;
}

h2#wallet {
  justify-self: center;
  align-self: end;
  font-size: 40px;
  text-align: center;
  letter-spacing: 14px;
  margin-left: 25px;
  margin-bottom: 90px;
}

h2#film {
  justify-self: center;
  align-self: end;
  font-size: 85px;
  letter-spacing: 15px;
  margin-left: 25px;
  margin-bottom: 120px;
}

#blue-box {
  grid-column: 3;
  grid-row: 1;
  height: 106px;
  width: 30px;
  background-color: #203467;
  align-self: end;
  margin-bottom: 98px;
}

#bottom-left h2,
#bottom-left h3 {
  color: #d6c092;
  text-align: center;
}


#girl {
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 3;
  justify-self: end;
  max-height: 800px;
}

#ko {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin-top: 25px;
  height: 75px;
}

#odak {
  grid-column: 3;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  margin-top: 25px;
  height: 75px;
}

@media (min-width: 1651px) {
  body {
    margin-top: 5%;
  }
}

@media (max-width: 1020px) {
  body {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, auto);
  }

  #girl,
  #top-middle {
    grid-column: 1;
    grid-row: 2;
  }

  #girl {
    height: 500px;
  }
  
  
  h1#sm-title {
    grid-row: 1;
    grid-column: 1 / 3;
    justify-self: center;
    font-size: 7vw;
    letter-spacing: 5px;
  
  }
  
  #odak,
  #ko,
  #blue-box {
    display: none;
  }

  form {
    grid-column: 2;
    grid-row: 2;
  }

  h1#main-kodak {
    display: none;
  }

  h2#film,
  h2#wallet {
display: none;
  }


  #bottom-middle {
    grid-column: 1;
    grid-row: 3;
  }

  #bottom-left {
    grid-column: 2;
    grid-row: 3;
  }

  #bottom-right {
    display: none;
  }
}

@media (max-width: 535px) {
  
  body {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
  }

  h1#main-kodak {
   display: none;

  }
  
   h1#sm-title {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    color: #d6c092;
    font-size: 45px;

  }

  h2#film,
  h2#wallet{
    display: none;
  }

  #top-middle {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  #girl {
    grid-column: 1;
    grid-row: 1;
    height: 200px;
    justify-self: center;
  }

  form {
    grid-column: 1 / 3;
    grid-row: 2;
    padding: 5%;
  }

  #bottom-middle {
    grid-column: 1;
    grid-row: 3;
  }

  #bottom-left {
    grid-column: 2;
    grid-row: 3;
  }

  #bottom-right {
    display: none;
  }
}

@media (min-width: 1021px) {
  h1#main-kodak::first-letter {
    color: #d6c092;
  }

  h1#main-kodak span {
    background: -webkit-linear-gradient(-0deg, #d6c092 50%, #203467 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
    h1#main-kodak {
    display: none;
  }
  
  #sm-title {
    display: none;
  }
}


Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.