FED Test HTML & CSS V2

Recreate this image with HTML and CSS

by amutsa

HTML

<script src="//use.typekit.net/rzv2mwh.js"></script>
<script>
  try {
    Typekit.load();
  } catch (e) {}

</script>



<div class="container">
  <h1>Recreate this using HTML &amp; CSS</h1>
  <img src="https://s3.amazonaws.com/f.cl.ly/items/2z3C3Z0L2Q0R282p1V0z/Image%202014-12-19%20at%2010.07.09%20AM.png" width="303" />

  <!-- Your HTML goes here -->
  <!-- finished product should be responsive -->
  <!-- Add a click event to 'why give $50' to launch a responsive modal with any content -->
  <!-- DO NOT use any libraries or framework, must be hand coded from scratch e.g. bootstrap -->
  <!-- Add additional functionality e.g. make progress bar move when adding dollar amount -->

  <section>

    <div class="tool-box-wrapper">
      <div class="tool-wrapper">
        <p><strong>$167</strong> still needed for this project</p>
      </div>
    </div>
    <!---->
    <div class="main-box">
      <!--Progress bar-->
      <div class="outer-progress-bar">
        <div class="inner-progress-bar"></div>
      </div>
      <!--Text-->
      <div class="text-content">
        <p><span> <strong>Only 3 days left</strong></span> to fund this project.</p>
        <br>
        <p>
          Join the <strong>42</strong> other donors who have <br>already supported this project. Every<br>dollar helps.
        </p>
        <!--Form-->
        <div class="form-wrapper">
          <form><input type="text" placeholder=" $ 50" value=""></form>
          <a href="#" class="submit-btn float-right">Give Now</a>
        </div>
        <!--Modial-->
        <div>
          <a class="text" href="#modal-content">Why give $50?</a>
          <div id="modal-content" class="modal-wrapper modal">
            <a href="#close" class="close">&times;</a>
            <div>
              <h1> Modal.</h1>
              <div class="landscape">
                <img src="http://www.rossjames.net/port/fas1/Ross-James_fashion1_61.jpg" alt="">
              </div>
            </div>
          </div>
       ...

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
  color: #424242;
  line-height: 1.4;
}

.container {
  margin: 2em auto;
  max-width: 630px;
  text-align: center;
}

/* FONTS:
 font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif; 
*/

/* COLORS: 
  blue: #20A1D4;
  green: #1CBC2C;
  orange: #EF5F3C;
  black: #424242;
  grey: #777;
  light grey: #eaeaea;
*/

.section {
  margin: 4em;
  max-width: 300px;
}

.tool-box-wrapper {
  left: auto;
  position: relative;
  display: block;
}

.tool-box-wrapper .tool-wrapper {
  visibility: visible;
  background: #424242;
  color: #eaeaea;
  text-align: center;
  border-radius: 5px;
  position: relative;
  margin: 0 10em 0.1em 10em;
  bottom: 150%;
}

.tool-box-wrapper .tool-wrapper>p {
  text-align: center;
  color: #eaeaea;
  font-size: 1em;
  padding: 10px;
}

.tool-box-wrapper .tool-wrapper::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 85%;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.main-box {
  display: block;
  height: 280px;
  box-shadow: 1px #eaeaea;
  margin: 0 10em 0 10em;
  border: 1px solid #eaeaea;
  -webkit-box-shadow: inset 0 2px rgba(0, 0, 0, .025);
  box-shadow: inset 0 2px rgba(0, 0, 0, .025);
}

.outer-progress-bar {
  width: 100%;
  height: 12px;
  border: 1px solid #eaeaea;
  -webkit-box-shadow: inset 0 2px rgba(0, 0, 0, .025);
  box-shadow: inset 0 2px rgba(0, 0, 0, .025)
}

.inner-progress-bar {
  width: 80%;
  background: #EF5F3C;
  float: left;
  height: 11px;
}

progress[value] {
  width: auto;
  height: 11px;
  background: #EF5F3C;
  float: left;
}

span {
  font-weight: 500;
  color: #EF5F3C;
}

.text-content {
  padding: 20px;
}

p {
  text-align: left;
  color: #777;
  font-size: 0.9em;
  line-height: 2;
}

/*'why give $50' */

.text {
  display: inline-block;
  float: left;
  font-size: .8em;
  text-align: left;
 ...