fix buttons, add comments

index.html

@@ -13,6 +13,9 @@
             href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
             integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
             crossorigin="anonymous">
+        <link rel="stylesheet" 
+            href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" >
+            
 
         <!-- CDN SCRIPTS -->
         <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
@@ -27,6 +30,7 @@
             integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
             crossorigin="anonymous">
         </script>
+        
 
         <!-- STYLE SHEETS -->
         <link rel="apple-touch-icon" href="icon.png">
@@ -92,16 +96,19 @@
                 <li data-target="#create-carousel" data-slide-to="1"></li>
                 <li data-target="#create-carousel" data-slide-to="2"></li>
             </ol>
-            <div class="carousel-inner">
+            <div class="carousel-inner"> <!-- slides go here -->
                 <div class="carousel-item active">
                     <img class="d-block w-100" src="public/img/ec-1.jpg" alt="First slide">
                 </div>
+
                 <div class="carousel-item">
                     <img class="d-block w-100" src="public/img/ec-2.jpg" alt="Second slide">
                 </div>
+
                 <div class="carousel-item">
                     <img class="d-block w-100" src="public/img/ec-3.jpg" alt="Third slide">
                 </div>
+                
             </div>
             <a class="carousel-control-prev" href="#create-carousel" role="button" data-slide="prev">
                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
@@ -122,9 +129,14 @@
         <div class='block'>
             <span class='section-prompt'>2. Choose something that sounds fulfilling</span>
             <br>
-            <div class='btn'>Research</div>
-            <div class='btn'>Internship</div>
-            <div class='btn'>Off-campus Study</div>
+            <div class='inner-nav'> <!-- Nav options for this block -->
+                <button type="button" class="btn btn-labeled btn-dark">
+                    <span class="btn-label"><i class="fa fa-globe"></i></span> Research</button>
+                <button type="button" class="btn btn-labeled btn-dark">
+                    <span class="btn-label"><i class="fa fa-globe"></i></span> Internship</button>
+                <button type="button" class="btn btn-labeled btn-dark">
+                    <span class="btn-label"><i class="fa fa-globe"></i></span> Off-campus Study</button>
+            </div>
         </div>
 
         <!-- Block 3 -->
@@ -136,8 +148,13 @@
         <div class='block'>
             <span class='section-prompt'>4. What would you like to become?</span>
             <br>
-            <button>Explore</button>
-            <button>Finish + Results</button>
+            <div class='inner-nav'> <!-- Nav options for this block -->
+                <button type="button" class="btn btn-labeled btn-dark">
+                    <span class="btn-label"><i class="fa fa-globe"></i></span> Explore</button>
+
+                <button type="button" class="btn btn-labeled btn-dark">
+                    <span class="btn-label"><i class="fa fa-check"></i></span> Finish!</button>
+            </div>
         </div>
     </body>
 </html>
\ No newline at end of file

public/css/main.css

@@ -17,7 +17,7 @@ body{
     width: 100%;
     background-color: #ccc;
     border: 1px solid black;
-    text-align: center;
+    text-align: left;
 }
 #create-carousel .carousel-inner{
     text-align: center;
@@ -26,8 +26,8 @@ body{
     font-size: 18px;
     margin-left: 20px;
 }
-.btn{
-    width: 100px;
-    height: 100px;
-    background-color: gray;
+.inner-nav{
+    width: 100%;
+    text-align: center;
+    padding-top: 20px;
 }
\ No newline at end of file