adding personnes page
This commit is contained in:
parent
52d4ef668f
commit
c8f313996d
10 changed files with 275 additions and 7 deletions
|
@ -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)
|
||||
|
|
5
static/css/layouts/personnes.css
Normal file
5
static/css/layouts/personnes.css
Normal file
|
@ -0,0 +1,5 @@
|
|||
.personnal-info {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
|
@ -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 */
|
|
@ -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"}
|
|
@ -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{
|
||||
|
|
83
static/scss/layouts/personnes.scss
Normal file
83
static/scss/layouts/personnes.scss
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -6,4 +6,5 @@
|
|||
@import "layouts/nav.scss";
|
||||
@import "layouts/cards.scss";
|
||||
@import "layouts/quicksearch.scss";
|
||||
@import "layouts/personnes.scss";
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
<h2>Articles récents</h2>
|
||||
<div class="flex-card">
|
||||
<div class="card">
|
||||
<div class="inner">
|
||||
<div class="img-container">
|
||||
<img src="{% static 'images/sauvetage.png' %}">
|
||||
</div>
|
||||
|
@ -19,7 +20,9 @@
|
|||
<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>
|
||||
|
@ -29,7 +32,9 @@
|
|||
<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>
|
||||
|
@ -40,6 +45,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% include 'quicksearch.html' %}
|
||||
{% endblock %}
|
70
templates/personnes.html
Normal file
70
templates/personnes.html
Normal file
|
@ -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 %}
|
Loading…
Reference in a new issue