adding articles page

nuitdelinfo_2021/settings.py

@@ -25,7 +25,7 @@ SECRET_KEY = 'django-insecure-85h5=0vw&7e)%9+^n69y!b1ti@7gij_ic3u+66eln838s=!n+l
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = ["3cab-134-214-214-199.ngrok.io", "localhost", "30b2-134-214-214-181.ngrok.io"]
+ALLOWED_HOSTS = ["3cab-134-214-214-199.ngrok.io", "localhost", "3218-134-214-214-181.ngrok.io"]
 
 
 # Application definition

nuitdelinfo_2021/views/index.py

@@ -3,4 +3,4 @@ from django.shortcuts import render
 
 def index(request):
     context = {}
-    return render(request, "index.html", context)
+    return render(request, "articles.html", context)

static/css/style.css

@@ -17,6 +17,8 @@ a {
 
 h1 {
   font-size: 60px;
+  text-align: center;
+  margin: 10px 0;
 }
 
 h2 {
@@ -37,12 +39,41 @@ a.btn {
   border: 2px solid #efefef;
   font-size: 18px;
 }
+a.btn--blue {
+  color: #00E8C2;
+  border-color: #00E8C2;
+}
 
 p {
   margin: 5px 0;
 }
 
-a, p, span {
+input::-webkit-input-placeholder {
+  font-family: "Play", sans-serif;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+  color: #efefef;
+}
+
+input::-moz-placeholder {
+  font-family: "Play", sans-serif;
+  transition-duration: 0.3s;
+  color: #efefef;
+}
+
+input:-ms-input-placeholder {
+  font-family: "Play", sans-serif;
+  transition-duration: 0.3s;
+  color: #efefef;
+}
+
+input::-ms-input-placeholder {
+  font-family: "Play", sans-serif;
+  transition-duration: 0.3s;
+  color: #efefef;
+}
+
+a, p, span, input, input::placeholder {
   font-family: "Play", sans-serif;
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
@@ -54,6 +85,7 @@ a:hover {
 }
 
 .container {
+  padding-top: 100px;
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
@@ -75,6 +107,16 @@ a:hover {
     width: 1170px;
   }
 }
+section {
+  padding-bottom: 50px;
+}
+
+.map {
+  width: 75%;
+  display: block;
+  margin: auto;
+}
+
 nav {
   background-color: #303030;
   padding: 5px 20px;
@@ -86,6 +128,11 @@ nav {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
+  position: fixed;
+  top: 0;
+  z-index: 9999;
+  left: 0;
+  width: -webkit-fill-available;
 }
 nav .logo {
   margin: 0;
@@ -156,13 +203,25 @@ nav .right .search:hover {
   -webkit-box-pack: space-evenly;
       -ms-flex-pack: space-evenly;
           justify-content: space-evenly;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
 }
 .flex-card .card {
-  background: #333333;
   -webkit-box-flex: 0;
-      -ms-flex: 0 1 25%;
+      -ms-flex: 0 1 33%;
-          flex: 0 1 25%;
+          flex: 0 1 33%;
-  margin-bottom: 30px;
+  margin-bottom: 70px;
+}
+.flex-card .card .inner {
+  margin: 0 30px;
+  background: #333333;
+}
+.flex-card .card .inner:hover img {
+  cursor: pointer;
+  -webkit-filter: grayscale(70%);
+          filter: grayscale(70%);
+  -webkit-transform: scale(1.2) !important;
+          transform: scale(1.2) !important;
 }
 .flex-card .card .img-container {
   width: 100%;
@@ -173,13 +232,6 @@ nav .right .search:hover {
   transition: all ease-in-out 0.3s;
   width: 100%;
 }
-.flex-card .card:hover img {
-  cursor: pointer;
-  -webkit-filter: grayscale(70%);
-          filter: grayscale(70%);
-  -webkit-transform: scale(1.2) !important;
-          transform: scale(1.2) !important;
-}
 .flex-card .card .content {
   padding: 20px;
 }
@@ -195,4 +247,141 @@ nav .right .search:hover {
   margin: auto;
   margin-top: 30px;
 }
+
+#quicksearch {
+  position: fixed;
+  display: none;
+  padding: 30px;
+  padding-top: 100px;
+  height: 100vh;
+  width: -webkit-fill-available;
+  background: rgba(0, 0, 0, 0.9);
+  top: 0;
+  left: 0;
+}
+#quicksearch:target {
+  display: block !important;
+}
+#quicksearch .close {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  -webkit-transition: all ease-in-out 0.3s;
+  transition: all ease-in-out 0.3s;
+}
+#quicksearch .close i {
+  font-size: 70px;
+  color: #efefef;
+}
+#quicksearch .close:hover {
+  -webkit-transform: rotateZ(90deg);
+          transform: rotateZ(90deg);
+}
+#quicksearch .search-bar {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin-top: 30px;
+}
+#quicksearch .search-bar input {
+  width: 80%;
+  background: transparent;
+  color: #efefef;
+  font-size: 30px;
+  border: none;
+  border-bottom: 3px solid #efefef;
+  padding: 15px;
+}
+#quicksearch .search-bar input::-webkit-input-placeholder {
+  color: #d3d2d2;
+  font-size: 30px;
+}
+#quicksearch .search-bar input::-moz-placeholder {
+  color: #d3d2d2;
+  font-size: 30px;
+}
+#quicksearch .search-bar input:-ms-input-placeholder {
+  color: #d3d2d2;
+  font-size: 30px;
+}
+#quicksearch .search-bar input::-ms-input-placeholder {
+  color: #d3d2d2;
+  font-size: 30px;
+}
+#quicksearch .search-bar input::placeholder {
+  color: #d3d2d2;
+  font-size: 30px;
+}
+#quicksearch .search-bar i {
+  font-size: 50px;
+  color: #efefef;
+  cursor: pointer;
+}
+#quicksearch .fast-search {
+  margin-top: 50px;
+}
+#quicksearch .fast-search h2 {
+  text-align: center;
+  font-size: 35px;
+}
+#quicksearch .fast-search .flex-search {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: space-evenly;
+      -ms-flex-pack: space-evenly;
+          justify-content: space-evenly;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+#quicksearch .fast-search .flex-search .search-col {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 1 30%;
+          flex: 0 1 30%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
+#quicksearch .fast-search .flex-search .search-col:first-child, #quicksearch .fast-search .flex-search .search-col:nth-child(2) {
+  border-right: 2px solid #00E8C2;
+}
+#quicksearch .fast-search .flex-search .search-col .titre {
+  text-align: center;
+  font-size: 28px;
+  color: #00E8C2;
+  margin: 15px 0;
+}
+#quicksearch .fast-search .flex-search .search-col .search-card {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 85%;
+  margin: auto;
+  margin-top: 20px;
+  background: #464646;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+#quicksearch .fast-search .flex-search .search-col .search-card img {
+  width: 50px;
+}
+#quicksearch .fast-search .flex-search .search-col .search-card .name {
+  font-size: 20px;
+  margin-left: 15px;
+}
 /*# sourceMappingURL=style.css.map */

static/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../scss/base/font.scss","../scss/layouts/global.scss","../scss/base/colors.scss","style.css","../scss/base/mixins.scss","../scss/layouts/nav.scss","../scss/layouts/cards.scss"],"names":[],"mappings":"AAAQ,8EAAA;AACA,yEAAA;ACDR;EACI,yBCDS;EDET,UAAA;EACA,SAAA;AEGJ;;AFAA;EGLE,iCAAA;EHOE,cCJI;ACOR;;AFAA;EACI,qBAAA;AEGJ;;AFAA;EACI,eAAA;AEGJ;;AFAA;EACI,eAAA;AEGJ;;AFAA;EACI,eAAA;AEGJ;;AFAA;EACI,cAAA;EACA,0BAAA;EAAA,kBAAA;EACA,uBAAA;EACA,cC3BI;ED4BJ,kBAAA;EACA,yBAAA;EACA,eAAA;AEGJ;;AFAA;EACI,aAAA;AEGJ;;AFAA;EGpCE,+BAAA;EHsCE,iCAAA;UAAA,yBAAA;EACA,cCxCI;AC2CR;;AFAA;EACI,yBAAA;AEGJ;;AFAA;EACE,mBAAA;EACA,kBAAA;EACA,kBAAA;EACA,iBAAA;AEGF;;AFDA;EACE;IACE,YAAA;EEIF;AACF;AFFA;EACE;IACE,YAAA;EEIF;AACF;AFFA;EACE;IACE,aAAA;EEIF;AACF;AE1EA;EACE,yBAAA;EACA,iBAAA;EACA,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,qBAAA;MAAA,iBAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,8BAAA;AF4EF;AE3EE;EACE,SAAA;EACA,eAAA;EACA,eAAA;EDRF,iCAAA;ECUE,cHPI;EGQJ,kBAAA;AF6EJ;AE3EE;EACE,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,mBAAA;AF6EJ;AE5EI;EACE,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,mBAAA;AF8EN;AE7EM;EACE,eAAA;EACA,cHlBA;EGmBA,eAAA;AF+ER;AE3EE;EACE,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,uBAAA;MAAA,oBAAA;UAAA,sBAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,mBAAA;AF6EJ;AE5EI;EACE,WAAA;EACA,eAAA;EACA,yBAAA;EACA,iCAAA;UAAA,yBAAA;AF8EN;AE7EM;EACE,qBHlCC;ACiHT;AE5EI;EACE,cHrCE;EGsCF,eAAA;EACA,kBAAA;EACA,eAAA;EACA,iCAAA;UAAA,yBAAA;AF8EN;AE7EM;EACE,cH5CC;AC2HT;;AG9HA;EACE,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,8BAAA;MAAA,2BAAA;UAAA,6BAAA;AHiIF;AGhIE;EACE,mBJFU;EIGV,mBAAA;MAAA,iBAAA;UAAA,aAAA;EACA,mBAAA;AHkIJ;AGjII;EACE,WAAA;EACA,gBAAA;AHmIN;AGlIM;EACE,wCAAA;EAAA,gCAAA;EACA,WAAA;AHoIR;AGhIM;EACE,eAAA;EACA,8BAAA;UAAA,sBAAA;EACA,wCAAA;UAAA,gCAAA;AHkIR;AG/HI;EACE,aAAA;AHiIN;AGhIM;EACE,cJtBC;EIuBD,kBAAA;EACA,eAAA;AHkIR;AGhIM;EACE,eAAA;AHkIR;AGhIM;EACE,YAAA;EACA,gBAAA;AHkIR","file":"style.css"}
+{"version":3,"sources":["../scss/base/font.scss","../scss/layouts/global.scss","../scss/base/colors.scss","style.css","../scss/base/mixins.scss","../scss/layouts/nav.scss","../scss/layouts/cards.scss","../scss/layouts/quicksearch.scss"],"names":[],"mappings":"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","file":"style.css"}

static/scss/base/colors.scss

@@ -1,5 +1,7 @@
 $background: #414142;
 $background2: #303030;
 $background3: #333333;
+$background4: #464646;
 $accent: #00E8C2;
-$light: #efefef;
+$light: #efefef;
+$light2: #d3d2d2;

static/scss/layouts/cards.scss

@@ -1,10 +1,21 @@
 .flex-card{
   display: flex;
   justify-content: space-evenly;
+  flex-wrap: wrap;
   .card{
-    background: $background3;
+    flex: 0 1 33%;
-    flex: 0 1 25%;
+    margin-bottom: 70px;
-    margin-bottom: 30px;
+    .inner{
+      margin: 0 30px;
+      background: $background3;
+      &:hover{
+      img{
+        cursor: pointer;
+        filter: grayscale(70%);
+        transform: scale(1.2) !important;
+      }
+    }
+    }
     .img-container{
       width: 100%;
       overflow: hidden;
@@ -13,13 +24,6 @@
         width: 100%;
       }
     }
-    &:hover{
-      img{
-        cursor: pointer;
-        filter: grayscale(70%);
-        transform: scale(1.2) !important;
-      }
-    }
     .content{
       padding: 20px;
       .date{

static/scss/layouts/global.scss

@@ -15,6 +15,8 @@ a{
 
 h1{
     font-size: 60px;
+    text-align: center;
+    margin: 10px 0;
 }
 
 h2{
@@ -33,13 +35,17 @@ a.btn{
     padding: 10px 20px;
     border: 2px solid $light;
     font-size: 18px;
+    &--blue{
+      color: $accent;
+      border-color: $accent;
+    }
 }
 
 p{
     margin: 5px 0;
 }
 
-a, p, span{
+a, p, span, input, input::placeholder{
     @include font-play;
     transition-duration: 0.3s;
     color: $light;
@@ -50,6 +56,7 @@ a:hover{
 }
 
 .container {
+  padding-top: 100px;
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
@@ -69,4 +76,14 @@ a:hover{
   .container {
     width: 1170px;
   }
+}
+
+section{
+  padding-bottom: 50px;
+}
+
+.map{
+  width: 75%;
+  display: block;
+  margin: auto;
 }

static/scss/layouts/nav.scss

@@ -4,6 +4,11 @@ nav{
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
+  position: fixed;
+  top: 0;
+  z-index: 9999;
+  left: 0;
+  width: -webkit-fill-available;
   .logo{
     margin: 0;
     cursor: pointer;

static/scss/layouts/quicksearch.scss

@@ -0,0 +1,93 @@
+#quicksearch{
+  position: fixed;
+  display: none;
+  padding: 30px;
+  padding-top: 100px;
+  height: 100vh;
+  width: -webkit-fill-available;
+  background: rgba(0,0,0,0.9);
+  top: 0;
+  left: 0;
+  &:target{
+    display: block !important;
+  }
+  .close{
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    transition: all ease-in-out 0.3s;
+    i{
+      font-size: 70px;
+      color: $light;
+    }
+    &:hover{
+      transform: rotateZ(90deg);
+    }
+  }
+  .search-bar{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 30px;
+    input{
+      width: 80%;
+      background: transparent;
+      color: $light;
+      font-size: 30px;
+      border: none;
+      border-bottom: 3px solid $light;
+      padding: 15px;
+      &::placeholder{
+        color: $light2;
+        font-size: 30px;
+      }
+    }
+    i{
+      font-size: 50px;
+      color: $light;
+      cursor: pointer;
+    }
+  }
+  .fast-search{
+    margin-top: 50px;
+    h2{
+      text-align: center;
+      font-size: 35px;
+    }
+    .flex-search{
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      .search-col{
+        flex: 0 1 30%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        &:first-child, &:nth-child(2){
+          border-right: 2px solid $accent;
+        }
+        .titre{
+          text-align: center;
+          font-size: 28px;
+          color: $accent;
+          margin: 15px 0;
+        }
+        .search-card{
+          display: flex;
+          width: 85%;
+          margin: auto;
+          margin-top: 20px;
+          background: $background4;
+          align-items: center;
+          img{
+            width: 50px;
+          }
+          .name{
+            font-size: 20px;
+            margin-left: 15px;
+          }
+        }
+      }
+    }
+  }
+}

static/scss/style.scss

@@ -5,4 +5,5 @@
 @import 'layouts/global.scss';
 @import "layouts/nav.scss";
 @import "layouts/cards.scss";
+@import "layouts/quicksearch.scss";
 

templates/articles.html

@@ -0,0 +1,126 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block content %}
+    <section>
+        <h1>Articles</h1>
+        <div class="flex-card">
+            <div class="card">
+                <div class="inner">
+                    <div class="img-container">
+                        <img src="{% static 'images/sauvetage.png' %}">
+                    </div>
+                    <div class="content">
+                        <p class="date">16/02/2020</p>
+                        <p class="titre">Sauvetage risqué en côte d'Ivoire</p>
+                        <a class="btn" href="">Voir l'article</a>
+                    </div>
+                </div>
+
+            </div>
+            <div class="card">
+                <div class="inner">
+                    <div class="img-container">
+                        <img src="{% static 'images/sauvetage.png' %}">
+                    </div>
+                    <div class="content">
+                        <p class="date">16/02/2020</p>
+                        <p class="titre">Sauvetage risqué en côte d'Ivoire</p>
+                        <a class="btn" href="">Voir l'article</a>
+                    </div>
+                </div>
+
+            </div>
+            <div class="card">
+                <div class="inner">
+                    <div class="img-container">
+                        <img src="{% static 'images/sauvetage.png' %}">
+                    </div>
+                    <div class="content">
+                        <p class="date">16/02/2020</p>
+                        <p class="titre">Sauvetage risqué en côte d'Ivoire</p>
+                        <a class="btn" href="">Voir l'article</a>
+                    </div>
+                </div>
+
+            </div>
+            <div class="card">
+                <div class="inner">
+                    <div class="img-container">
+                        <img src="{% static 'images/sauvetage.png' %}">
+                    </div>
+                    <div class="content">
+                        <p class="date">16/02/2020</p>
+                        <p class="titre">Sauvetage risqué en côte d'Ivoire</p>
+                        <a class="btn" href="">Voir l'article</a>
+                    </div>
+                </div>
+
+            </div>
+            <div class="card">
+                <div class="inner">
+                    <div class="img-container">
+                        <img src="{% static 'images/sauvetage.png' %}">
+                    </div>
+                    <div class="content">
+                        <p class="date">16/02/2020</p>
+                        <p class="titre">Sauvetage risqué en côte d'Ivoire</p>
+                        <a class="btn" href="">Voir l'article</a>
+                    </div>
+                </div>
+
+            </div>
+            <div class="card">
+                <div class="inner">
+                    <div class="img-container">
+                        <img src="{% static 'images/sauvetage.png' %}">
+                    </div>
+                    <div class="content">
+                        <p class="date">16/02/2020</p>
+                        <p class="titre">Sauvetage risqué en côte d'Ivoire</p>
+                        <a class="btn" href="">Voir l'article</a>
+                    </div>
+                </div>
+
+            </div>
+            <div class="card">
+                <div class="inner">
+                    <div class="img-container">
+                        <img src="{% static 'images/sauvetage.png' %}">
+                    </div>
+                    <div class="content">
+                        <p class="date">16/02/2020</p>
+                        <p class="titre">Sauvetage risqué en côte d'Ivoire</p>
+                        <a class="btn" href="">Voir l'article</a>
+                    </div>
+                </div>
+
+            </div>
+            <div class="card">
+                <div class="inner">
+                    <div class="img-container">
+                        <img src="{% static 'images/sauvetage.png' %}">
+                    </div>
+                    <div class="content">
+                        <p class="date">16/02/2020</p>
+                        <p class="titre">Sauvetage risqué en côte d'Ivoire</p>
+                        <a class="btn" href="">Voir l'article</a>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="inner">
+                    <div class="img-container">
+                        <img src="{% static 'images/sauvetage.png' %}">
+                    </div>
+                    <div class="content">
+                        <p class="date">16/02/2020</p>
+                        <p class="titre">Sauvetage risqué en côte d'Ivoire</p>
+                        <a class="btn" href="">Voir l'article</a>
+                    </div>
+                </div>
+            </div>
+            <a class="btn btn--blue" href="">Charger plus d'articles</a>
+        </div>
+    </section>
+    {% include 'quicksearch.html' %}
+{% endblock %}

templates/base.html

@@ -17,7 +17,7 @@
             </div>
         </div>
         <div class="right">
-            <i class="material-icons search">search</i>
+            <a href="#quicksearch"><i class="material-icons search">search</i></a>
             <img src="{% static 'images/pesquet.jpg' %}">
         </div>
     </nav>

templates/index.html

@@ -1,8 +1,10 @@
 {% extends 'base.html' %}
 {% load static %}
 {% block content %}
+    <h1>Les sauveteurs du Dunkerquois</h1>
     <section>
         <h2>Carte dynamique</h2>
+        <img class="map" src="{% static 'images/map.png' %}">
     </section>
     <section>
         <h2>Articles récents</h2>
@@ -39,4 +41,5 @@
             </div>
         </div>
     </section>
+    {% include 'quicksearch.html' %}
 {% endblock %}

templates/quicksearch.html

@@ -1,10 +1,72 @@
-<!DOCTYPE html>
+{% load static %}
-<html lang="fr">
+<div id="quicksearch">
-<head>
+    <a class="close" href="#">
-    <meta charset="UTF-8">
+        <i class="material-icons">close</i>
-    <title>Title</title>
+    </a>
-</head>
+    <div class="search-bar">
-<body>
+        <input type="text" placeholder="Rechercher...">
-
+        <i class="material-icons">search</i>
-</body>
+    </div>
-</html>
+    <div class="fast-search">
+        <h2>Résultats rapide</h2>
+        <div class="flex-search">
+            <div class="search-col">
+                <p class="titre">Personnes</p>
+                <div class="search-card">
+                    <img src="{% static 'images/pesquet.jpg' %}">
+                    <p class="name">Thomas Pesquet</p>
+                </div>
+                <div class="search-card">
+                    <img src="{% static 'images/pesquet.jpg' %}">
+                    <p class="name">Thomas Pesquet</p>
+                </div>
+                <div class="search-card">
+                    <img src="{% static 'images/pesquet.jpg' %}">
+                    <p class="name">Thomas Pesquet</p>
+                </div>
+                <div class="search-card">
+                    <img src="{% static 'images/pesquet.jpg' %}">
+                    <p class="name">Thomas Pesquet</p>
+                </div>
+            </div>
+            <div class="search-col">
+                <p class="titre">Articles</p>
+                <div class="search-card">
+                    <img src="{% static 'images/sauvetage.png' %}">
+                    <p class="name">Sauvetage risqué en côte d'Ivoire</p>
+                </div>
+                <div class="search-card">
+                    <img src="{% static 'images/sauvetage.png' %}">
+                    <p class="name">Sauvetage risqué en côte d'Ivoire</p>
+                </div>
+                <div class="search-card">
+                    <img src="{% static 'images/sauvetage.png' %}">
+                    <p class="name">Sauvetage risqué en côte d'Ivoire</p>
+                </div>
+                <div class="search-card">
+                    <img src="{% static 'images/sauvetage.png' %}">
+                    <p class="name">Sauvetage risqué en côte d'Ivoire</p>
+                </div>
+            </div>
+            <div class="search-col">
+                <p class="titre">Bateaux</p>
+                <div class="search-card">
+                    <img src="{% static 'images/bateau.jpg' %}">
+                    <p class="name">SNS 147</p>
+                </div>
+                <div class="search-card">
+                    <img src="{% static 'images/bateau.jpg' %}">
+                    <p class="name">SNS 147</p>
+                </div>
+                <div class="search-card">
+                    <img src="{% static 'images/bateau.jpg' %}">
+                    <p class="name">SNS 147</p>
+                </div>
+                <div class="search-card">
+                    <img src="{% static 'images/bateau.jpg' %}">
+                    <p class="name">SNS 147</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>