https://zacharysmith90.github.io/vice-bmi/

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="utf-8">
6    <!-- set the character set -->
7    <meta http-equiv="X-UA-Compatible" content="IE=edge">
8    <meta name="viewport" content="width=device-width, initial-scale=1">
9    <!-- first step to a responsive site -->
10    <title>Black Male Infertility</title>
11
12    <!-- FONT AWESOME -->
13    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
14    <link rel="preconnect" href="https://fonts.googleapis.com">
15    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap" rel="stylesheet">
17    <link rel="stylesheet" href="odometer/theme.css" />
18
19    <!-- Your styles should be called here -->
20    <link rel="stylesheet" href="style.css" />
21
22    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
23    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
24    <!--[if lt IE 9]>
25      	  

25<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

25
26      	  

26<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

26
27      	<![endif]-->
28</head>
29
30<body>
31    <!-- YOUR CONTENT GOES HERE -->
32    
33
34    <div class="container">
35
36<p>The interactive graph below displays each bill my insurance company received for my two operations and my wife&rsquo;s egg extraction, and one round of IVF. For a man in New York, this is what the cost of fertility can look like. This is a low estimate of costs, as insurance companies do not track copays and other out-of-pocket expenses.</p>
37      
38      <div class = "module">
39        <h2>How much does infertility cost?</h2>
40
41        <div class="flex module">
42          <div class="slot invested">
43            <span class="odometer">0</span> days trying to have a child.
44          </div>
45          <div class="slot cost"> $<span class="odometer">0</span> total billed to insurance company.</div>
46          <div class="slot">
47            <img src="images/ivfbills.jpg" alt="A sample of my wife's IVF bills." />
48          </div>
49          <div class="slot main">
50            <h3>Headline</h3>
51            <p>Description of the cost</p>
52            
53            <div class="cost">
54              <p class="hed">Cost: $<span>0</span>
55            </p>
56            </div>
57
58            <div class="buttonBar">
59              <a href="#" class="btn prev"> <&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Back</a>
60              <a href="#" class="btn next">Next &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp></a>
61            </div>
62          </div>
63          <div class="progressContainer">
64            <!-- <p class="hed">Progress</p> -->
65            <div class="progress">
66              <div class="bar"></div>
67              <!-- <div class="value"><span>0</span>%</div> -->
68            </div>
69          </div>
70
71        </div>
72        </div>
73
74
75
76    <!-- Your javascript should be called here -->
77    

77<script src="https://watchjs.tcm.io/js/watch.min.js"></script>

77
78    

78<script src="odometer/odometer.min.js"></script>

78
79    

79<script src="main.js" async></script>

79
80  </body>
81</html>