#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
.navbar {
background-color: #000000;
border-color: 1px solid #000000;
}
.card-box {
border-radius: 2.5rem;
padding-bottom: 10px;
margin-top:25px;
background-color: #000000b0;
box-shadow: 1px 1px 5px 1px grey;
}
.portfolio-item {
/* height: 250px; */
text-align: center;
}
.row {
margin: 0px;
}
h3 {
margin: 10px;
}
.app_rstudio, .app_rstudio-super {
margin-left: 15%;
}
.fa, .far, .fas, .fab {
font-size: 96px;
color: #55b0ff;
margin: 15px;
}<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head lang="en">
<title th:text="${title}"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" media="screen" th:href="@{${bootstrapCss}}" />
<link rel="stylesheet" media="screen" th:href="@{/css/default.css}"/>
<script th:src="@{${jqueryJs}}"></script>
<script th:src="@{${bootstrapJs}}"></script>
</head>
<body>
<img src="https://i.ibb.co/2Ww4xTB/background.png" id="bg" alt="">
<div th:replace="../fragments/navbar :: navbar"></div>
<div class="container" id="applist">
<div class="row" >
<div th:each="app: ${apps}">
<div th:class="${'col-md-4 portfolio-item app_' + app.id}">
<div class="card-box">
<a th:href="@{/app/}+${app.id}">
<i th:class="${app.logoURL}"></i>
</a>
<h3>
<a th:href="@{/app/}+${app.id}" th:text="${app.displayName == null} ? ${app.id} : ${app.displayName}" style="color: #55b0ff;"></a>
</h3>
<a th:if="${app.description != null}" th:href="@{/app_direct/}+${app.id + '/'}" style="color: #55b0ff; font-style: italic;" target="_blank">
<p th:text="${app.description}"></p>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
