FED Test HTML & CSS V2

Recreate this image with HTML and CSS

by nimishgoel056

HTML

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

</script>



<div class="container fixedWidth">
    <div class="card">
        <div class=" fontfamily colorgrey text-center bottomMargin">
          <div class="tooltip w3-red"><progress value="0" max="200" id="hop" data-placement="top" data-toggle="tooltip" ></progress>
          <span class="tooltiptext" ><span id = "tooltiptext">
          200</span>$ still needed for this project</span>
</div>
        </div>
        
        <div class="card-body">
            <div class="row">
                <div>
                    <div class="fontfamily colorgrey text-center">
                        <span class="redColor">Only 3 days left</span> to fund this project. <br /><br />
                        <p class="bottomMargin">
                            Join the <b>42</b> other donors who havde already supported this project. Every dollar
                            helps.
                        </p>
                    </div>
                    <div class="row">
                        <div>
                            <form id='foo'>

                                <input class="textboxButtonPadding" type="text" name="amount" id='inputAmount' value=0>
                                <button class="textboxButtonPadding bottomMargin greenBackgroundColor" id="btnmk"
                                    onclick="givenow()">Give
                                    Now</button>
                                <br>
                                <div class="fontfamily" style="margin-left: -22%">
                                    <a id="myBtn" href="#"><i>Why give $50?</i></a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top: 20px">

    </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; 
*/

.fixedWidth {
width: 10rem;
}

.container h4{
  margin-bottom: 10%;
}
.no-padding{
  padding: 0;
}
progress{
  width: 100%;
}

#hop:hover {
    text-decoration:none;
}

.redColor{
color: red;
}
.colorgrey {
color: grey;
}
.greenBackgroundColor{
border-radius: 0.3rem;
color: white;
background-color: #2ed21a;
letter-spacing: 1.2px;
}
.textboxButtonPadding {
padding: 0.7rem;
width: 6rem;
}

.fixedWidth {
  width: 35%;
  border: 1px solid grey;
  padding: 1rem;
}
.bottomMargin {
   margin-bottom: 1rem;
}
.bottomButtonPadding {
padding: 0.4rem;
}
.fontfamily {
font-size: 14px;
font-family: arial,sans-serif;
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.tooltip {
    position: relative;
    display: inline-block;
    width: 100%;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 100%;
    background-color: black;
    color: #fff;
   ...

JavaScript

function price() {
var priceVal = document.forms.foo.getElementsByTagName("input");
alert(priceVal)
console.log(priceVal);
}
$(function () {
    $('#hop').tooltip();
});
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var amount = document.getElementById("amount");

var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

var btnmk = document.getElementById("btnmk");
btnmk.onclick = function(event) {

var inputAmount = document.getElementById("inputAmount");

var tooltiptext = document.getElementById("tooltiptext");
		event.preventDefault();
var hop = document.getElementById("hop");
if(inputAmount && inputAmount.value){
	hop.value = hop.value + parseInt(inputAmount.value);
  tooltiptext.innerHTML = 200-hop.value ;
}

    
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}