adding personnes page

nuitdelinfo_2021/views/index.py

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

static/css/layouts/personnes.css

@@ -0,0 +1,5 @@
+.personnal-info {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}

static/css/style.css

@@ -130,7 +130,7 @@ nav {
           justify-content: space-between;
   position: fixed;
   top: 0;
-  z-index: 9999;
+  z-index: 9990;
   left: 0;
   width: -webkit-fill-available;
 }
@@ -254,6 +254,7 @@ nav .right .search:hover {
   padding: 30px;
   padding-top: 100px;
   height: 100vh;
+  z-index: 9999;
   width: -webkit-fill-available;
   background: rgba(0, 0, 0, 0.9);
   top: 0;
@@ -384,4 +385,105 @@ nav .right .search:hover {
   font-size: 20px;
   margin-left: 15px;
 }
+
+.personnal-info {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: left;
+      -ms-flex-pack: left;
+          justify-content: left;
+  margin-top: 50px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.personnal-info img {
+  width: 250px;
+  border: 2px solid #efefef;
+}
+.personnal-info .infos {
+  margin-left: 60px;
+}
+.personnal-info .infos p:first-child {
+  font-size: 30px;
+}
+
+.biographie {
+  margin-top: 50px;
+}
+
+.timeline-container {
+  background: #303030;
+  padding: 15px 50px;
+  margin-top: 50px;
+  padding-right: 0;
+}
+.timeline-container .point-content .titre {
+  font-size: 20px;
+}
+.timeline-container .point-content .date {
+  color: #00E8C2;
+  font-style: italic;
+  font-size: 15px;
+}
+.timeline-container .point-content .desc {
+  margin-top: 20px;
+}
+.timeline-container .timeline {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  overflow: auto;
+  position: relative;
+  padding: 20px 0;
+}
+.timeline-container .timeline::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+.timeline-container .timeline .stroke {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  width: 280%;
+  height: 3px;
+  z-index: 10;
+  background: #efefef;
+}
+.timeline-container .timeline .point {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 20%;
+          flex: 1 0 20%;
+  z-index: 15;
+  position: relative;
+}
+.timeline-container .timeline .point span {
+  top: -15px;
+  left: 35%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  position: absolute;
+}
+.timeline-container .timeline .point a {
+  display: block;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  padding: 5px 10px;
+  background: #efefef;
+  border-radius: 50%;
+}
+.timeline-container .timeline .point a:hover, .timeline-container .timeline .point a.active {
+  color: #00E8C2 !important;
+  background: #00E8C2;
+}
 /*# 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","../scss/layouts/quicksearch.scss"],"names":[],"mappings":"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","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","../scss/layouts/personnes.scss"],"names":[],"mappings":"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","file":"style.css"}

static/scss/layouts/nav.scss

@@ -6,7 +6,7 @@ nav{
   justify-content: space-between;
   position: fixed;
   top: 0;
-  z-index: 9999;
+  z-index: 9990;
   left: 0;
   width: -webkit-fill-available;
   .logo{

static/scss/layouts/personnes.scss

@@ -0,0 +1,83 @@
+.personnal-info{
+  display: flex;
+  justify-content: left;
+  margin-top: 50px;
+  align-items: center;
+  img{
+    width: 250px;
+    border: 2px solid $light;
+  }
+  .infos{
+    margin-left: 60px;
+    p:first-child{
+      font-size: 30px;
+    }
+  }
+}
+
+.biographie{
+    margin-top: 50px;
+}
+.timeline-container{
+  background: $background2;
+  padding: 15px 50px;
+  margin-top: 50px;
+  padding-right: 0;
+  .point-content{
+    .titre{
+      font-size: 20px;
+    }
+    .date{
+      color: $accent;
+      font-style: italic;
+      font-size: 15px;
+    }
+    .desc{
+      margin-top: 20px;
+    }
+  }
+  .timeline{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  overflow: auto;
+  position: relative;
+  padding: 20px 0;
+  &::-webkit-scrollbar{
+    width: 0;
+    height: 0;
+  }
+  .stroke{
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateX(-50%);
+    width: 280%;
+    height: 3px;
+    z-index: 10;
+    background: $light;
+  }
+  .point{
+    flex: 1 0 20%;
+    z-index: 15;
+    position: relative;
+    span{
+      top: -15px;
+      left: 35%;
+      transform: translateX(-50%);
+      position: absolute;
+    }
+    a{
+      display: block;
+      width: fit-content;
+      padding: 5px 10px;
+      background: $light;
+      border-radius: 50%;
+      &:hover, &.active{
+        color: $accent !important;
+        background: $accent;
+      }
+    }
+  }
+}
+}

static/scss/layouts/quicksearch.scss

@@ -4,6 +4,7 @@
   padding: 30px;
   padding-top: 100px;
   height: 100vh;
+  z-index: 9999;
   width: -webkit-fill-available;
   background: rgba(0,0,0,0.9);
   top: 0;

static/scss/style.scss

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

templates/index.html

@@ -10,7 +10,8 @@
         <h2>Articles récents</h2>
         <div class="flex-card">
             <div class="card">
-                <div class="img-container">
+                <div class="inner">
+                    <div class="img-container">
                     <img src="{% static 'images/sauvetage.png' %}">
                 </div>
                 <div class="content">
@@ -18,9 +19,11 @@
                     <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="img-container">
+                <div class="inner">
+                    <div class="img-container">
                     <img src="{% static 'images/sauvetage.png' %}">
                 </div>
                 <div class="content">
@@ -28,9 +31,11 @@
                     <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="img-container">
+                <div class="inner">
+                    <div class="img-container">
                     <img src="{% static 'images/sauvetage.png' %}">
                 </div>
                 <div class="content">
@@ -38,6 +43,7 @@
                     <p class="titre">Sauvetage risqué en côte d'Ivoire</p>
                     <a class="btn" href="">Voir l'article</a>
                 </div>
+                </div>
             </div>
         </div>
     </section>

templates/personnes.html

@@ -0,0 +1,70 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block content %}
+    <section>
+        <h1>Personnes</h1>
+        <div class="personnal-info">
+            <img src="{% static "images/pesquet.jpg" %}">
+            <div class="infos">
+                <p>Thomas Pesquet</p>
+                <p>43 ans</p>
+            </div>
+        </div>
+        <p class="biographie">Insérer une biographie, Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Curabitur ultrices, massa at tincidunt auctor, dolor lorem accumsan augue, a blandit
+             urna diam in leo. Vestibulum in commodo lectus. Fusce congue lacinia pharetra.
+             Suspendisse imperdiet vehicula odio, eu varius ante accumsan ullamcorper.
+            Donec sodales urna felis, eu iaculis lectus facilisis vel. Sed facilisis, neque eget
+             varius interdum, velit est pellentesque tellus, id auctor urna ex id sapien.</p>
+
+        <div class="timeline-container">
+            <div class="timeline">
+                <div class="stroke"></div>
+                <div class="point">
+                    <a class="active" href="#">a</a>
+                    <span>20/20/2020</span>
+                </div>
+                <div class="point">
+                    <a href="#">a</a>
+                    <span>20/20/2020</span>
+                </div>
+                <div class="point">
+                    <a href="#">a</a>
+                    <span>20/20/2020</span>
+                </div>
+                <div class="point">
+                    <a href="#">a</a>
+                    <span>20/20/2020</span>
+                </div>
+                <div class="point">
+                    <a href="#">a</a>
+                    <span>20/20/2020</span>
+                </div>
+                <div class="point">
+                    <a href="#">a</a>
+                    <span>20/20/2020</span>
+                </div>
+                <div class="point">
+                    <a href="#">a</a>
+                    <span>20/20/2020</span>
+                </div>
+                <div class="point">
+                    <a href="#">a</a>
+                    <span>20/20/2020</span>
+                </div>
+                <div class="point">
+                    <a href="#">a</a>
+                    <span>20/20/2020</span>
+                </div>
+            </div>
+            <div class="point-content">
+                <p class="titre">Sauvetage en côte d'Ivoire</p>
+                <p class="date">Le 20/20/2020</p>
+                <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Curabitur ultrices, massa at tincidunt auctor, dolor</p>
+            </div>
+        </div>
+
+    </section>
+    {% include 'quicksearch.html' %}
+{% endblock %}