Pierre Martin
Développeur front-end
<div class="demo">
<div class="cadre-demo">
<div class=entete-photo>
<img src="image.jpg" alt>
</div>
<div class=profil-photo>
<img src="image.jpg" alt>
</div>
<div class=demo-info>
<h3>Pierre Martin </h3>
<h4>Développeur front-end</h4>
<div class=actions>
<a href="">contact</a>
<a href="">portfolio</a>
</div>
</div>
<div class=demo-social>
<a href="" title="Twitter"><svg></svg></a>
<a href="" title="Flux"><svg></svg></a>
<a href="" title="Youtube"><svg></svg></a>
</div>
</div>
</div>
*,*::after,*::before{box-sizing:border-box}
:root{
--grid-card: "entete" minmax(200px,1fr) "corps" 1fr/1fr;
--zone-1:entete;
--zone-2:corps;
--couleur-1:violet;
--couleur-2:#6753ea;
--couleur-3:white;
--couleur-4:#585858;
--gradient:var(--couleur-1),50%,var(--couleur-2);
}
.demo{
margin: 2rem auto;
max-width: 960px;
padding:1rem;
container: carte / inline-size;
}
.cadre-demo {
display:grid;
grid-template:var(--grid-card);
border-radius: 0.5ch;
box-shadow: .05rem .1rem .3rem -.03rem rgba(0, 0, 0, 0.20);
padding:1rem;
background-color:var(--couleur-3);
color:var(--couleur-4)
}
.cadre-demo>*{z-index:1}
.entete-photo{
display:grid;
grid-area:var(--zone-1);
}
.entete-photo::before{
opacity: .5;
content:'';
background: linear-gradient(45deg,var(--gradient));
grid-area: 1/1;
}
.demo-info{
display:grid;
grid-area:var(--zone-2);
}
.entete-photo img{
grid-area:1/1;
height: 100%;
width:100%;
object-fit: cover;
}
.profil-photo{
grid-area:var(--zone-1);
place-self: end start;
margin-bottom: -10cqi;
margin-left:1rem;
}
.profil-photo img{
display:block;
outline:5px solid var(--couleur-3);
width:var(--lg-profil,20cqi);
aspect-ratio:1;
object-fit: cover;
border-radius:9999px;
clip-path: var(--clip-profil)
}
.cadre-demo h3{
place-self: start;
margin:.5rem 0 0 25cqi;
font-size: clamp(1.25rem, 4cqi, 2rem);
}
.cadre-demo h4{
place-self: center;
font-size: clamp(1rem, 3cqi, 1.5rem);
}
.actions{
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap:1rem;
text-align: center;
width: max-content;
place-self:end center;
}
.demo-social{
grid-area:var(--zone-1);
place-self: end;
}
.actions a{
position:relative;
text-transform: uppercase;
font-size: clamp(1rem, 2cqi, 1.25rem);
border-radius: 9999px;
padding:.5rem 2rem;
text-decoration: none;
background-color: var(--bg-bouton,#6753ea);
color:var(--couleur-3);
}
.actions a::after{
content: "";
border-radius:inherit;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 0.25em 0.25em rgba(255, 255, 255, 0.31);
opacity: 0;
transition:opacity .4s linear,box-shadow .4s ease-in;
}
.demo-social{
display: flex;
}
.demo-social a{
display: flex;
margin:.5rem;
}
.demo-social svg{
fill:#5a5a5a;
background-color: var(--couleur-3);
border-radius:.25rem;
width:clamp(1rem, 3cqi, 1.5rem);
height:clamp(1rem, 3cqi, 1.5rem)
}
@container carte (min-width: 640px) {
.cadre-demo {
--grid-card: "entete corps" 300px /auto 300px;
}
.demo-social{
justify-self: center;
}
.profil-photo img{
outline:unset;
--clip-profil:polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
grid-area:1/1;
border-radius:unset;
--lg-profil:100%;
}
.entete-photo img{display:none}
.entete-photo::before{
background:linear-gradient(to right,var(--gradient));
}
.demo-info{
--zone-2:var(--zone-1);
place-self:center;
padding:1rem;
place-content:center;
}
.demo-info>*{margin:1rem 0}
.profil-photo{
display:grid;
margin:unset;
--zone-1:var(--zone-2);
}
.profil-photo::before{
grid-area:1/1;
content:'';
z-index:1;
opacity: .5;
background:linear-gradient(to left,var(--gradient))
}
.cadre-demo h3 {
margin:unset;
justify-self: center;
}
.actions{
--zone-2:var(--zone-1);
}
.actions a{
--bg-bouton:var(--couleur-3);
color:var(--couleur-4);
}
.actions a:is(:focus,:hover)::after{opacity:1}
}
