SAE_2A_FA-Reseau_ALICA/php/templates/offres.html

79 lines
2.2 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alica - Offres</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
.offre-container {
margin-bottom: 5%;
}
.offre-img {
max-width: 100%;
}
#titrePrincipal {
padding-bottom: 10px;
border-bottom: 1px solid black;
margin-bottom: 30px;
}
.custom-button {
background-color: #00DBFF;
border-color: #00DBFF;
color: #fff;
}
</style>
</head>
<body>
<header>
{% include "menu.html" %}
</header>
<div class="container mt-4">
<h1 id="titrePrincipal">Offres d'emploi</h1>
{% for offre in offres %}
<div class="offre-container">
<div class="row">
<!-- Première ligne -->
<div class="col-12 col-md-3">
<img src="data:image/png;base64,{{ offre.getImg().getBlob() | base64 }}" class="offre-img">
</div>
<div class="col-12 col-md-9">
<h3>{{ offre.getNom() }}</h3>
<p>Julien Martin</p>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="text-left">{{ offre.getDescription() }}</p>
</div>
</div>
<!-- Quatrième ligne (Localisation) -->
<div class="row">
<div class="col-1">
<img src="assets/location.png" class="img-fluid" title="ville">
</div>
<div class="col-11">
<p>{{ offre.getVille() }}</p>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="button" class="btn btn-outline-primary btn-sm mb-2 custom-button">En savoir plus ></button>
</div>
</div>
</div>
{% endfor %}
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>