Improve index.html content

Author: julien-deramond

sass-js/index.html

@@ -25,11 +25,23 @@ <h1 class="h4">
       <h1>Get started with Bootstrap</h1>
       <div class="col-lg-8 px-0">
         <p class="fs-4">You've successfully loaded up a Bootstrap example! It's loaded up with <a href="https://getbootstrap.com/">Bootstrap 5</a> and tooling for compiling our Sass and JavaScript to your needs.</p>
-        <p>If this button appears blue and the link appears purple, you've done it!</p>
+        <p>If this button and this link appear blue, you've done it! You've loaded Bootstrap Sass.</p>
       </div>
 
       <button type="button" class="btn btn-primary me-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">Toggle offcanvas</button>
-      <a href="#" class="text-success">Example link</a>
+      <a href="#" class="text-primary">Example primary link</a>
+
+      <hr>
+
+      <h2>Customize Bootstrap</h2>
+
+      <div class="col-lg-8 px-0">
+        <p class="fs-4">You've successfully <a href="https://getbootstrap.com/docs/5.3/customize/sass/">customized Bootstrap 5</a> by changing red danger color to deep pink!</p>
+        <p>If this button and this link appear pink, you've done it! You've customized Bootstrap danger color.</p>
+      </div>
+
+      <button type="button" class="btn btn-danger me-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">Toggle offcanvas</button>
+      <a href="#" class="text-danger">Example customized danger link</a>
 
       <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
         <div class="offcanvas-header">

sass-js/scss/styles.scss

@@ -33,8 +33,7 @@ $offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
 // Customize some defaults
 $body-color: #333;
 $body-bg: #fff;
-$border-radius: .4rem;
-$success: #7952b3;
+$danger: deeppink;
 
 // Required
 @import "bootstrap/scss/functions";