Team : 4 profiles per row

Made image clickable as part of the link
This commit is contained in:
Yves Gatesoupe 2021-11-10 18:04:29 +01:00
parent 91aa807499
commit 6c22617395
4 changed files with 33 additions and 19 deletions

View File

@ -4,9 +4,9 @@
<ol class="[ member-list__items ]" reversed>
{% for item in teamListItems %}
<li class="member-list__item">
<img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
<a role="button" href="{{ item.data.url }}" class="btn btn-primary">{{ item.data.name }}&nbsp;
<svg width="18" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.602 5.823L12.05.376a1.357 1.357 0 00-1.875 0 1.295 1.295 0 000 1.84l3.278 3.235H1.326C.587 5.451 0 6.027 0 6.752s.587 1.302 1.326 1.302h12.127l-3.278 3.215a1.295 1.295 0 000 1.84 1.349 1.349 0 001.894 0l5.533-5.427c.246-.242.398-.576.398-.93 0-.353-.133-.687-.398-.93z" fill="#111"></path></svg>
<a href="{{ item.data.url }}" class="">
<img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
<span class="member-name btn btn-primary">{{ item.data.name }}</span>
</a>
<p>{{ item.data.position }}</p>
{% if item.data.positionInternal %}

View File

@ -4,9 +4,9 @@
<ol class="[ member-list__items ]" reversed>
{% for item in teamListItems %}
<li class="member-list__item">
<img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
<a role="button" href="{{ item.data.url }}" class="btn btn-primary">{{ item.data.name }}&nbsp;
<svg width="18" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.602 5.823L12.05.376a1.357 1.357 0 00-1.875 0 1.295 1.295 0 000 1.84l3.278 3.235H1.326C.587 5.451 0 6.027 0 6.752s.587 1.302 1.326 1.302h12.127l-3.278 3.215a1.295 1.295 0 000 1.84 1.349 1.349 0 001.894 0l5.533-5.427c.246-.242.398-.576.398-.93 0-.353-.133-.687-.398-.93z" fill="#111"></path></svg>
<a href="{{ item.data.url }}" class="">
<img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
<span class="member-name btn btn-primary">{{ item.data.name }}</span>
</a>
<p>{{ item.data.position }}</p>
{% if item.data.positionInternal %}
@ -16,9 +16,7 @@
{% endfor %}
<li class="member-list__item info">
<p>Vous êtes porteur dun projet entrepreneurial en numérique et nouvelles technologies ?</p>
<a role="button" href="/nous-rejoindre" class="btn btn-secondary">Rejoignez-nous
<svg width="18" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.602 5.823L12.05.376a1.357 1.357 0 00-1.875 0 1.295 1.295 0 000 1.84l3.278 3.235H1.326C.587 5.451 0 6.027 0 6.752s.587 1.302 1.326 1.302h12.127l-3.278 3.215a1.295 1.295 0 000 1.84 1.349 1.349 0 001.894 0l5.533-5.427c.246-.242.398-.576.398-.93 0-.353-.133-.687-.398-.93z" fill="#fff"/></svg>
</a>
<a role="button" href="/nous-rejoindre" class="btn btn-secondary">Rejoignez-nous</a>
</li>
</ol>
{% endif %}

View File

@ -1,6 +1,6 @@
---
name: 'Yves Gatesoupe'
position: 'Designer Web'
position: 'Développeur Web'
positionInternal: 'Membre'
date: '2020-06-01'
profile: '/images/profiles/yg-profile.jpg'
@ -14,7 +14,7 @@ tags:
- dev
---
Je suis designer web indépendant depuis janvier 2020.
Je suis développeur web indépendant depuis janvier 2020.
Jai construit mon expérience en tant que développeur web front end pour Orange Business Services en contribuant notamment à la mise en place du Bootstrap Orange [Boosted](https://boosted.orange.com) qui est un framework aux couleurs de la marque avec un focus sur laccessibilité numérique.

View File

@ -6,10 +6,10 @@
&__items {
margin-top: 4rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-column-gap: 1.5rem;
grid-row-gap: 6rem;
grid-column-gap: 2rem;
grid-row-gap: 4rem;
}
&__item {
@ -17,15 +17,32 @@
flex-direction: column;
align-items: center;
color: var(--color-dark);
> p {
text-align: center;
}
> .btn {
text-align: center;
}
> a {
display: flex;
flex-direction: column;
text-decoration: none;
}
img {
border-radius: 50%;
height: 17rem;
width: auto;
height: auto;
width: 100%;
padding: 0 1rem;
+ .btn {
margin-top: -1.5rem;
margin-bottom: .5rem;
text-align: center;
align-self: center;
+ p {
font-size: 1.125rem;
@ -38,13 +55,12 @@
flex-direction: column;
background-color: var(--color-white);
color: var(--color-dark);
padding: 2rem;
font-size: 1.5rem;
font-weight: 600;
p {
font-size: 1.2rem;
text-align: center;
margin: 1rem 0 3.125rem;
margin: 2rem 0 3.125rem;
}
}
}