To-Do List remake [Custom]

<div class="container-fluid my-1" style="color:#ffffff;max-width:900px;">
<!--top image-->
 <div class="p-4" style="background-image:url( imglink );height:100px; background-size:cover;  border-top-left-radius:50px;  border-top-right-radius:50px; background-attachment: fixed;">
<!--header (over image)-->
 <p class="text-white" style="font-size: 35px; text-align: center; letter-spacing: 1px;">TO-DO LIST</p>
 </div>

<!--main card-->
  <div class="card p-2 rounded-0 border-0" style="background-color:#000b0f;">

<!--main objectives box-->
   <div class="card p-2 rounded-0 border-0" style="background-color:#043747; border-top-left-radius:25px; border-top-right-radius:25px;">
 <!--main objectives header-->
   <p class="mb-2" style="text-align: center; font-size: 30px;"> <i class="fas fa-star text-white mr-1"></i> Main objectives <i class="fas fa-star text-white ml-1"></i></p>

<!--task 1-->
    <div class="card p-2 rounded-0 border-0 mb-3" style="background-color:#316d82">
 <!--task name & desc-->
    <p style="font-size: 20px; text-align:center">task #1 name here</p>
    <a class="my-1" style="font-size: 15px;">short description of the project or whatever it is</a>
 <!--percent bar-->
     <div class="progress">
      <div class="progress-bar" style="width:50%; background-color:#65d3da; height:20px"><br>
      </div>
     </div>
 <!--percent done-->
    <a class="mt-1" style="font-size: 14px; text-align:right">%done
 <!--progress check/disclaimer icon-->
    <i title=" text " class="fas fa-question-circle tooltipster ml-1"></i></a>
    </div>

<!--task 2-->
   <div class="card p-2 rounded-0 border-0 mb-3" style="background-color:#316d82">
 <!--task name & desc-->
   <p style="font-size: 20px; text-align:center">task #2 name here</p>
   <a class="my-1" style="font-size: 15px;">short description</a>
 <!--percent bar-->
    <div class="progress">
     <div class="progress-bar" style="width:50%; background-color:#65d3da; height:20px"><br>
     </div>
    </div>
 <!--percent done-->
   <a class="mt-1" style="font-size: 14px; text-align:right">%done
 <!--progress check/disclaimer icon-->
   <i title=" text " class="fas fa-question-circle tooltipster ml-1"></i></a>
   </div>

<!--task 3-->
   <div class="card p-2 rounded-0 border-0 mb-3" style="background-color:#316d82">
 <!--task name & desc-->
   <p style="font-size: 20px; text-align:center">task #3 name here</p>
   <a class="my-1" style="font-size: 15px;">short description</a>
 <!--percent bar-->
    <div class="progress">
     <div class="progress-bar" style="width:50%; background-color:#65d3da; height:20px"><br>
     </div>
    </div>
 <!--percent done-->
   <a class="mt-1" style="font-size: 14px; text-align:right">%done
 <!--progress check/disclaimer icon-->
   <i title=" text " class="fas fa-exclamation-circle tooltipster ml-1"></i></a>
   </div>
<!--add more tasks if needed under here-->

 <!---->
  </div>

<!--seperator bar (you can adjust pattern if you know how)-->
  <div class="progress my-2 rounded-0">
   <div class="progress-bar" style="width:100%; background-color:#013344; height:5px"><br>
   </div>
  </div>

<!--side projects box-->
  <div class="card p-2 rounded-0 border-0" style="background-color:#012330; border-bottom-left-radius:25px; border-bottom-right-radius:25px;">
 <!--side projects header-->
  <p class="mb-2" style="text-align: center; font-size: 25px;"> <i class="far fa-star text-white mr-1"></i> Side projects <i class="far fa-star text-white ml-1"></i></p>

<!--minitask 1-->
   <div class="card p-2 rounded-0 border-0 mb-3" style="background-color:#1f586e">
 <!--tast name & desc-->
   <p style="font-size: 19px; text-align:center">minitask #1 name here</p>
   <a class="my-1" style="font-size: 14px;">short description</a>
 <!--percent bar-->
    <div class="progress">
     <div class="progress-bar" style="width:50%; background-color:#65d3da; height:17px"><br>
     </div>
    </div>
 <!--percent done-->
   <a class="mt-1" style="font-size: 13px; text-align:right">%done
 <!--progress check/disclaimer icon-->
   <i title=" text " class="fas fa-question-circle tooltipster ml-1"></i></a>
   </div>

<!--minitask 2-->
   <div class="card p-2 rounded-0 border-0 mb-3" style="background-color:#1f586e">
 <!--task name & desc-->
   <p style="font-size: 19px; text-align:center">minitask #2 name here</p>
   <a class="my-1" style="font-size: 14px;">short description</a>
 <!--percent bar-->
    <div class="progress">
     <div class="progress-bar" style="width:50%; background-color:#65d3da; height:17px"><br>
     </div>
    </div>
 <!--percent done-->
   <a class="mt-1" style="font-size: 13px; text-align:right">%done
 <!--progress check/disclaimer icon-->
   <i title=" text " class="fas fa-question-circle tooltipster ml-1"></i></a>
   </div>

<!--minitask 3-->
   <div class="card p-2 rounded-0 border-0 mb-3" style="background-color:#1f586e">
 <!--task name & desc-->
   <p style="font-size: 19px; text-align:center">minitask #3 name here</p>
   <a class="my-1" style="font-size: 14px;">short description</a>
 <!--percent bar-->
    <div class="progress">
     <div class="progress-bar" style="width:50%; background-color:#65d3da; height:17px"><br>
     </div>
    </div>
 <!--percent done-->
   <a class="mt-1" style="font-size: 13px; text-align:right">%done
 <!--progress check/disclaimer icon-->
   <i title=" text " class="fas fa-question-circle tooltipster ml-1"></i></a>
   </div>
  </div>
 </div>

<!--bottom image-->
 <div class="p-1" style="background-image:url( imglink );height:100px; background-size:cover;  border-bottom-left-radius:50px;  border-bottom-right-radius:50px; background-attachment: fixed;">

 <!--code credit (do not alter/remove!)-->
 <p style="text-align: right; font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource">MCDogWarrior</a></p>
</div>