Team : 4 profiles per row
Made image clickable as part of the link
This commit is contained in:
parent
91aa807499
commit
6c22617395
@ -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 }}
|
||||
<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 %}
|
||||
|
@ -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 }}
|
||||
<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 d’un 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 %}
|
||||
|
@ -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.
|
||||
|
||||
J’ai 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 l’accessibilité numérique.
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user