Styling & BlissLabs updates
diff --git a/index.html b/index.html
index be87f10..2277bdc 100644
--- a/index.html
+++ b/index.html
@@ -375,83 +375,90 @@
</div>
</div>
<!-- START OF BLISSLABS -->
- <div class="py-5 text-light cover" style="background-color: #343a40;">
- <div class="container" style="max-width: 100%;">
- <div class="row">
- <div class="mx-auto col-md-8">
- <h1 class="mb-3">A BlissLabs Project</h1>
- <p class="lead">We are part of a larger community of open-source projects called BlissLabs. Explore more about the other BlissLabs projects below:<br></p>
+ <div class="py-5 text-light cover" style="background-color: #343a40;">
+ <div class="container" style="max-width: 100%;">
+ <div class="row">
+ <div class="col-md-12">
+ <div class="row">
+ <div class="d-flex flex-column justify-content-center p-3 col-md-8 offset-lg-1 align-items-start order-1 order-md-1">
+ <h1 class="mb-3">A BlissLabs Project</h1>
+ <p class="lead">We are part of a larger community of open-source projects called BlissLabs. Explore more about the other BlissLabs projects below:<br></p>
+ <a class="btn btn-primary" target="_blank" href="https://blisslabs.org">Learn More</a>
+ </div>
+ <div class="col-md-4 col-lg-3 order-2 order-md-2 p-0"> <img class="img-fluid d-block justify-content-between align-items-center" src="https://blisslabs.org/images/bliss_labs_logo.svg" style="width: 20vw;"> </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-12">
+ <div class="carousel slide" data-ride="carousel" id="carousel">
+ <div class="carousel-inner">
+ <div id="carousel-slider"> </div>
</div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <div class="carousel slide" data-ride="carousel" id="carousel">
- <div class="carousel-inner">
- <div id="carousel-slider"> </div>
- </div>
- <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
- <span class="carousel-control-prev-icon"></span>
- <span class="sr-only">Previous</span>
- </a>
- <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
- <span class="carousel-control-next-icon"></span>
- <span class="sr-only">Next</span>
- </a>
- </div>
- <!---------------->
- <script>
- $.ajax({
- type: "GET",
- url: "https://api.blissroms.org/api/allprojects",
- contentType: "application/json",
- datatype: "json",
- data: {},
- success: function(data) {
- var newContent = ''; // Variable to hold HTML
- for (var i = 0; i < data.length; i++) { // Loop through object
- if (data[i].project != null) {
- if (i == 0) {
- newContent += '<div class="carousel-item active">';
- } else {
- newContent += '<div class="carousel-item">';
- }
- newContent += '<img class="d-block img-fluid" src="' + data[i].project_avatar + '" style="max-width: auto; height: 350px;"';
- newContent += 'alt="' + data[i].project + ' " style="padding-top: 1.5rem;"/>';
- newContent += '<div class="carousel-caption" style="background: linear-gradient(#343a40 10%, #343a40 100%)!important; padding-top: 120px; margin-left: 350px; ">';
- <!-- newContent += '<div class="item-details">'; -->
- newContent += '<h3 class="zxc" ><b style="font-size: xx-large;">' + data[i].project + '</b></h3>';
- newContent += '<h5 class="zxc" >Project Lead: ' + data[i].project_lead + '</h5>';
- newContent += '<p class="card__text zxc" style=" margin-right: 1.7rem; margin-left: 1.7rem; ">' + data[i].project_description + '</p>';
- if (data[i].project_github != null) {
- newContent += '<a href="' + data[i].project_github + '" target="_blank"><i class="fab fa fa-git p-2" style="font-size: 300%;"></i></a>';
- }
- if (data[i].project_website != null) {
- newContent += '<a href="' + data[i].project_website + '" target="_blank"><i class="fab fa p-2 fa-globe" style="font-size: 300%;"></i></a>';
- }
- <!-- newContent += '</div>'; -->
- newContent += '</div>';
- newContent += '</div>';
+ <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
+ <span class="carousel-control-prev-icon"></span>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
+ <span class="carousel-control-next-icon"></span>
+ <span class="sr-only">Next</span>
+ </a>
+ </div>
+ <!---------------->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+ <script>
+ $.ajax({
+ type: "GET",
+ url: "https://api.blissroms.org/api/allprojects",
+ contentType: "application/json",
+ datatype: "json",
+ data: {},
+ success: function(data) {
+ var newContent = ''; // Variable to hold HTML
+ for (var i = 0; i < data.length; i++) { // Loop through object
+ if (data[i].project != null) {
+ if (i == 0) {
+ newContent += '<div class="carousel-item active" style="padding-block: 10vh;" >';
} else {
- newContent = 'NONE';
+ newContent += '<div class="carousel-item" >';
}
+ newContent += '<img class="d-block img-fluid" src="' + data[i].project_avatar + '" style="margin-left: 10%; height: 35vh;"';
+ newContent += 'alt="' + data[i].project + ' " style="padding-top: 1.5rem;"/>';
+ newContent += '<div class="carousel-caption" style="background: linear-gradient(#343a40 10%, #343a40 100%)!important; padding-top: 50vw; width: 50vw; margin-left: 30vw; bottom: 0px ">';
+ <!-- newContent += '<div class="item-details">'; -->
+ newContent += '<h3 class="zxc" ><b style="font-size: xx-large;">' + data[i].project + '</b></h3>';
+ newContent += '<h5 class="zxc" >Project Lead: ' + data[i].project_lead + '</h5>';
+ newContent += '<p class="card__text zxc" style=" margin-right: 1.7rem; margin-left: 1.7rem; ">' + data[i].project_description + '</p>';
+ if (data[i].project_github != null) {
+ newContent += '<a href="' + data[i].project_github + '" target="_blank"><i class="fab fa fa-git p-2" style="font-size: 300%;"></i></a>';
}
- // Update the page with the new content
- document.getElementById('carousel-slider').innerHTML = newContent;
- },
- error: function(jqXHR, status, err) {
- newContent = 'ERROR: NONE';
- document.getElementById('carousel-slider').innerHTML = newContent;
- alert("Status: " + textStatus);
- alert("Error: " + errorThrown);
+ if (data[i].project_website != null) {
+ newContent += '<a href="' + data[i].project_website + '" target="_blank"><i class="fab fa p-2 fa-globe" style="font-size: 300%;"></i></a>';
+ }
+ <!-- newContent += '</div>'; -->
+ newContent += '</div>';
+ newContent += '</div>';
+ } else {
+ newContent = 'NONE';
+ }
}
- })
- </script>
- <!---------------->
- </div>
+ // Update the page with the new content
+ document.getElementById('carousel-slider').innerHTML = newContent;
+ },
+ error: function(jqXHR, status, err) {
+ newContent = 'ERROR: NONE';
+ document.getElementById('carousel-slider').innerHTML = newContent;
+ alert("Status: " + textStatus);
+ alert("Error: " + errorThrown);
+ }
+ })
+ </script>
+ <!---------------->
</div>
- </div>
+ </div>
</div>
- <!-- END OF BLISSLABS -->
+ </div>
+ <!-- END OF BLISSLABS -->
<div class="py-3 bg-dark">
<div class="container">
<div class="row">