diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 66 |
1 files changed, 65 insertions, 1 deletions
@@ -16,6 +16,7 @@ integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous" ></script> + <script src="https://kit.fontawesome.com/ac24e755dd.js" crossorigin="anonymous"></script> <style> .color-preview { width: 2rem; @@ -24,6 +25,19 @@ margin: 1px; cursor: pointer; } + .no-border { + border: none; + } + .no-border:hover{ + border: none; + } + .wd-adjust { + width: 100%; + height: 100%; + max-height: 8rem; + max-width: 8rem; + margin-bottom: 1rem; + } </style> </head> <body> @@ -78,7 +92,57 @@ </ul> </div> </div> - <div class="tab-pane fade" id="customize" role="tabpanel" tabindex="0">...</div> + <div class="tab-pane fade" id="customize" role="tabpanel" tabindex="0"> + <div class="mt-3"> + <p class="lead">Insert Text:</p> + <div class="input-group"> + <input type="text" class="form-control" aria-label="Add Text Here" placeholder="Add Text Here..."> + <span class="input-group-text"> + <button id="add-text" class="no-border" title="Add text"><i class="fa-solid fa-share"></i></button> + </span> + </div> + </div> + <div class="mt-3"> + <p class="lead">Add Picture:</p> + <div class="row w-100 text-center"> + <div class="col-6"> + <img src="images/bia-andrade-PO8Woh4YBD8-unsplash.jpg" class="img-fluid mx-auto d-block wd-adjust rounded" data-bs-toggle="tooltip" data-bs-placement="bottom" alt="Patterns by Bia Andrade" title="Patterns by Bia Andrade" style="cursor:pointer;"> + </div> + <div class="col-6"> + <img src="images/henrik-donnestad-t2Sai-AqIpI-unsplash.jpg" class="img-fluid mx-auto d-block wd-adjust rounded" data-bs-toggle="tooltip" data-bs-placement="bottom" alt="Wave by Henrik Dønnestad" title="Wave by Henrik Dønnestad" style="cursor:pointer;"> + </div> + <div class="col-6"> + <img src="images/jezael-melgoza-7H77FWkK_x4-unsplash.jpg" class="img-fluid mx-auto d-block wd-adjust rounded" data-bs-toggle="tooltip" data-bs-placement="bottom" alt="Tokyo Tower by Jezael Melgoza" title="Tokyo Tower by Jezael Melgoza" style="cursor:pointer;"> + </div> + <div class="col-6"> + <img src="images/nasa-rTZW4f02zY8-unsplash.jpg" class="img-fluid mx-auto d-block wd-adjust rounded" data-bs-toggle="tooltip" data-bs-placement="bottom" alt="Galaxy by NASA" title="Galaxy by NASA" style="cursor:pointer;"> + </div> + <div class="col-6"> + <img src="images/nasa-Yj1M5riCKk4-unsplash.jpg" class="img-fluid mx-auto d-block wd-adjust rounded" data-bs-toggle="tooltip" data-bs-placement="bottom" alt="Astronaut by NASA" title="Astronaut by NASA" style="cursor:pointer;"> + </div> + <div class="col-6"> + <img src="images/orfeas-green-G5A5ZNjS2tE-unsplash.jpg" class="img-fluid mx-auto d-block wd-adjust rounded" data-bs-toggle="tooltip" data-bs-placement="bottom" alt="Pattens by Orfeas Green" title="Pattens by Orfeas Green" style="cursor:pointer;"> + </div> + </div> + <div class="mt-3"> + <label for="formFile" class="form-label">Upload Custom Picture</label> + <input class="form-control" type="file" id="formFile"> + </div> + <p class="mt-3"> + <em> + <small class="copyright"> + Images by: + <underline><a href="https://unsplash.com/@justbia">Bia Andrade</a></underline>, + <underline><a href="https://unsplash.com/@spaceboy">Henrik Dønnestad</a></underline>, + <underline><a href="https://unsplash.com/@jezar">Jezael Melgoza</a></underline>, + <underline><a href="https://unsplash.com/@nasa">NASA</a></underline>, and + <underline><a href="https://unsplash.com/@orpheusmss">Orfeas Green</a></underline>. + All images used in this project are licensed under <a href="https://unsplash.com/license">Unsplash</a>. Please visit <a href="https://unsplash.com">unsplash.com</a> to learn more. + </small> + </em> + </p> + </div> + </div> </div> </div> <div class="col-6"> |