License explainer inside the upload card (#197)

* Added 'License explainer' column next to upload column

* Added text-secondary for lighter color

* Added 'creative commons license' explainer into the upload card

* Removed card grid for better alignment in all sizes

src/files/templates/upload.html

@@ -3,13 +3,62 @@
 {% block title %}Upload Files{% endblock title %}
 
 {% block content %}
-  <div class="row d-flex justify-content-center align-items-center">
+  <div class="row justify-content-center">
     <div class="col-lg-6 col-sm-8">
       <div class="card">
         <div class="card-header">
           <h5 class="card-title">Upload</h5>
         </div>
-        <div class="card-body">
+        <div class="card-body license-card">
+            <p class="fs-3">Creative Commons licenses</p>
+          <div class="row g-3 justify-content-center my-3">
+            <div class="col-lg-4 d-flex align-items-stretch">
+              <div class="card">
+                <div class="card-body text-center p-4">
+                  <i class="fa-brands fa-creative-commons-zero fa-5x mb-3"></i>
+                  <h5 class="card-title mb-3">CC0 1.0 Universal</h5>
+                  <p class="card-text mb-4 text-secondary">
+                  The creator is giving up their copyright and allowing reusers to distribute, remix, adapt, and build upon the material in any medium or format, even for commercial purposes.
+                  </p>
+                </div>
+                <div class="card-footer">
+                  <a href="https://creativecommons.org/publicdomain/zero/1.0/" class="fw-bold text-decoration-none link-primary" target="_blank">Learn more</a>
+                </div>
+              </div>
+            </div>
+            <div class="col-lg-4 d-flex align-items-stretch">
+              <div class="card">
+                <div class="card-body text-center p-4">
+                  <i class="fa-brands fa-creative-commons-by fa-5x mb-3"></i>
+                  <h5 class="card-title mb-3">Attribution 4.0 International</h5>
+                  <p class="card-text mb-4 text-secondary">
+                  Requires that reusers give credit to the creator. It allows reusers to distribute, remix, adapt, and build upon the material in any medium or format, even for commercial purposes.
+                  </p>
+                </div>
+                <div class="card-footer">
+                  <a href="https://creativecommons.org/licenses/by/4.0/" class="fw-bold text-decoration-none link-primary" target="_blank">Learn more</a>
+                </div>
+              </div>
+            </div>
+            <div class="col-lg-4 d-flex align-items-stretch">
+              <div class="card">
+                <div class="card-body text-center p-4">
+                  <i class="fa-brands fa-creative-commons-sa fa-5x mb-3"></i>
+                  <h5 class="card-title mb-3">Attribution-ShareAlike 4.0 International</h5>
+                  <p class="card-text text-secondary mb-1">
+                  Attribution 4.0 International
+                  </p>
+                  <i class="fa-solid fa-plus fa-2x py-2 text-secondary"></i>
+                  <p class="card-text text-secondary">
+                  If others remix, adapt, or build upon the material, they must license the modified material under identical terms.
+                  </p>
+                </div>
+                <div class="card-footer">
+                  <a href="https://creativecommons.org/licenses/by-sa/4.0/" class="fw-bold text-decoration-none link-primary" target="_blank">Learn more</a>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="row">
             <div class="col mt-3">
                 <p class="fs-3">Metadata</p>

src/static_src/css/bma.css

@@ -9,3 +9,7 @@ main > .container {
     object-fit: cover;
     text-align: center;
 }
+
+.license-card .card-title {
+  min-height: 2.5em;
+}