Skip to content
Snippets Groups Projects
Commit 9735ce6a authored by Sofiane Lasri's avatar Sofiane Lasri
Browse files

Création de la page des véhicules

parent a2d5a1b0
Branches
No related tags found
No related merge requests found
WSR/static/images/garage_1_dalle.jpg

604 KiB

...@@ -9,6 +9,9 @@ ...@@ -9,6 +9,9 @@
// scss-docs-start import-stack // scss-docs-start import-stack
// Configuration // Configuration
@import "../bootstrap-5.3.0/functions"; @import "../bootstrap-5.3.0/functions";
$red: #D41010;
@import "../bootstrap-5.3.0/variables"; @import "../bootstrap-5.3.0/variables";
@import "../bootstrap-5.3.0/variables-dark"; @import "../bootstrap-5.3.0/variables-dark";
@import "../bootstrap-5.3.0/maps"; @import "../bootstrap-5.3.0/maps";
...@@ -61,6 +64,11 @@ body { ...@@ -61,6 +64,11 @@ body {
line-height: 1; line-height: 1;
} }
.bg-blurry-trans-black {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
}
// Other // Other
header { header {
display: flex; display: flex;
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
} }
.vitrine { .vitrine {
margin-top: 32px; margin-top: map-get($spacers, 4);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: map-get($spacers, 3); gap: map-get($spacers, 3);
...@@ -221,3 +221,49 @@ footer { ...@@ -221,3 +221,49 @@ footer {
text-decoration: none; text-decoration: none;
} }
} }
.cars-showcase {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: map-get($spacers, 3);
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(152, 152, 152, 0.25);
backdrop-filter: blur(16px)
}
.card {
width: auto;
.header {
margin-bottom: map-get($spacers, 2);
border: $white 2px solid;
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
}
.content {
.title {
color: $white;
font-size: 1.4rem;
}
.desc {
color: $light-gray;
line-height: 1;
font-size: 0.9rem;
}
}
}
}
\ No newline at end of file
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>World Series Racing</title> <title>{% block title %}{% endblock %}</title>
{% compress css %} {% compress css %}
<link type="text/x-scss" href="{% static 'scss/app.scss' %}" rel="stylesheet" media="screen"> <link type="text/x-scss" href="{% static 'scss/app.scss' %}" rel="stylesheet" media="screen">
{% endcompress %} {% endcompress %}
...@@ -26,7 +26,8 @@ ...@@ -26,7 +26,8 @@
{% block content %}{% endblock %} {% block content %}{% endblock %}
<footer class="container"> <footer class="container-fluid bg-blurry-trans-black">
<div class="container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="logo"> <div class="logo">
...@@ -47,6 +48,7 @@ ...@@ -47,6 +48,7 @@
<p>Juin 2023 - Sofiane LASRI-TRIENPONT<br><a href="/admin">Connexion à l'administration</a></p> <p>Juin 2023 - Sofiane LASRI-TRIENPONT<br><a href="/admin">Connexion à l'administration</a></p>
</div> </div>
</div> </div>
</div>
</footer> </footer>
<script type="text/javascript"> <script type="text/javascript">
// Si le footer n'est pas tout en bas de la page car il y a peu de contenu // Si le footer n'est pas tout en bas de la page car il y a peu de contenu
......
{% extends 'base.html' %} {% extends 'base.html' %}
{% load static %} {% load static %}
{% block title %}World Series Racing{% endblock %}
{% block content %} {% block content %}
<div class="container vitrine"> <div class="container vitrine">
<div class="main-frame eurostile"> <div class="main-frame eurostile">
......
{% extends 'base.html' %}
{% load static %}
{% block title %}WSR - Véhicules{% endblock %}
{% block content %}
<style>
body {
background-image: url("{% static 'images/garage_1_dalle.jpg' %}");
background-size: cover;
background-position-x: center;
/* Pas bien, mais est-ce pire que de voir les artefacts de DALL-E ? */
background-position-y: -545px;
background-repeat: no-repeat;
}
</style>
<div class="container mt-4">
<div class="p-4 bg-white">
<h4 class="eurostile title text-danger">Nos véhicules</h4>
<p>En compétition, avoir un bon véhicule est essentiel pour gagner. Nous prenons un soin tout particulier à
choisir des partenaires de courses idéals pour nos pilotes.
<br>Chaque voiture est minutieusement préparée et réglée aux besoins des pilotes.</p>
</div>
<div class="p-4 mt-4 bg-blurry-trans-black cars-showcase">
{% for vehicle in vehicles %}
<div class="card">
<div class="header">
<img src="{% get_media_prefix %}{{ vehicle.image }}" alt="{{ vehicle.brand }} {{ vehicle.model }}">
</div>
<div class="content">
<div class="title eurostile">{{ vehicle.brand }}</div>
<div class="desc text-uppercase">{{ vehicle.model }}</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
\ No newline at end of file
...@@ -97,7 +97,14 @@ def races_types(request): ...@@ -97,7 +97,14 @@ def races_types(request):
return None return None
def vehicles(request): def vehicles(request):
return None vehicles = Vehicle.objects.all()
return render(
request,
'vehicles.html',
{
'vehicles': vehicles
}
)
def seasons(request): def seasons(request):
return None return None
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment