Carte membres de l'équipe CSS

8,377 webleb

Ouvrir dans l'éditeur Publiez votre code

Recommandé

22 May 2025

Tableau de bord d'administration

12 December 2024

Curseur d'images pour Blogspot CSS3

16 January 2026

Intégration de jeu Flash avec Ruffle Player

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webleb</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
  integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="/css/styles.css">
</head>
<body>
  <section>
    <div class="container flow-content">
      <h2 class="section-title">Our team</h2>
      <ul role="list" class="grid">
        <li>
          <article class="card" data-visible="false">
            <div class="card__front flow-content">
              <img class="card__img mx-auto" src="/img/radiant-gradient.png" />
              <div class="flow-content" data-spacing="sm">
                <p class="card__name">Mark Curry</p>
                <p class="card__position">Software Engineer</p>
              </div>
            </div>
            <div class="card__back flow-content">
              <p class="card__name">Mark Curry</p>
              <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et dictum sem.</q>
              <ul role="list" class="card__social flex-group">
                <li>
                  <a href="#">
                    <i class="fa-brands fa-twitter "></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa-brands fa-linkedin "></i>
                  </a>
                </li>
              </ul>
            </div>
            <footer class="card__footer">
              <button data-card-controller class="card__toggle">
                <i class="fa-solid fa-plus card__toggle-icon"></i>
              </button>
            </footer>
          </article>
        </li>
        <li>
          <article class="card" data-visible="false">
            <div class="card__front flow-content">
              <img class="card__img mx-auto" src="/img/flat-mountains.png" />
              <div class="flow-content" data-spacing="sm">
                <p class="card__name">Michael Edison</p>
                <p class="card__position">Graphic Designer</p>
              </div>
            </div>
            <div class="card__back flow-content">
              <p class="card__name">Michael Edison</p>
              <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et dictum sem.</q>
              <ul role="list" class="card__social flex-group">
                <li>
                  <a href="#">
                    <i class="fa-brands fa-twitter"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa-brands fa-linkedin"></i>
                  </a>
                </li>
              </ul>
            </div>
            <footer class="card__footer">
              <button data-card-controller class="card__toggle">
                <i class="fa-solid fa-plus card__toggle-icon"></i>
              </button>
            </footer>
          </article>
        </li>
        <li>
          <article class="card" data-visible="false">
            <div class="card__front flow-content">
              <img class="card__img mx-auto" src="/img/slanted-gradient.png"/>
              <div class="flow-content" data-spacing="sm">
                <p class="card__name">Wilson Davis</p>
                <p class="card__position">Junior Developer</p>
              </div>
            </div>
            <div class="card__back flow-content">
              <p class="card__name">Wilson Davis</p>
              <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et dictum sem.</q>
              <ul role="list" class="card__social flex-group">
                <li>
                  <a href="#">
                    <i class="fa-brands fa-twitter"></i>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="fa-brands fa-linkedin "></i>
                  </a>
                </li>
              </ul>
            </div>
            <footer class="card__footer">
              <button data-card-controller class="card__toggle">
                <i class="fa-solid fa-plus card__toggle-icon"></i>
              </button>
            </footer>
          </article>
        </li>   
      </ul>
    </div>
  </section>
  <script src="/js/main.js"></script>
</body>
</html>

CSS

:root {
	--clr-primary: teal;
	--clr-secondary: crimson;
	--bg-primary: #0d1a2d;
	--bg-secondary: #14273e;
	--text-primary: #fff;
	--text-secondary: #ccc;
  }
  *,
  *::before,
  *::after {
	box-sizing: border-box;
  }
  * {
	margin: 0;
	font: inherit;
  }
  
  html {
	color-scheme: dark;
  }
  body {
	font-family: system-ui, sans-serif;
	min-height: 100vh;
	background-color: var(--bg-primary);
	color: var(--text-secondary);
  }
  ul:where([role="list"]) {
	list-style: none;
	margin: 0;
	padding: 0;
  }
  section {
	padding-block: clamp(2rem, 5vw, 5rem);
  }
  a {
	color: cyan;
	text-decoration: none;
  }
  .container {
	width: min(100% - 2rem, 65rem);
	margin-inline: auto;
  }
  .grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 
	  repeat(auto-fit, minmax(min(35ch, 100%), 1fr));
  }
  .section-title {
	font-size: clamp(2rem, 5vw, 3rem);
	text-align: center;
	font-weight: bold;
	color: var(--text-primary);
	margin-bottom: 0.5em;
  }
  .flex-group {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
  }
  .flow-content {
	display: grid;
	align-content: start;
	gap: 1rem;
  }
  [data-spacing="sm"] {
	gap: 0.25rem;
  }
  
  .mx-auto {
	width: fit-content;
	margin-inline: auto;
  }
  .card {
	width: min(100% - 2rem, 35ch);
	margin-inline: auto;
	background-color: var(--bg-secondary);
	text-align: center;
	border-radius: 0.5rem;
	position: relative;
	overflow: hidden;
	display: grid;
	gap: 0.5rem;
  }
  
  .card__name {
	font-weight: 700;
	color: var(--text-primary);
  }
  
  .card__position {
	font-style: italic;
  }
  
  .card__img {
	width: 5rem;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var(--text-secondary);
  }
  
  .card__front {
	padding: 2em 2em 2.5em 2em;
	transition: 
	  opacity 250ms ease,
	  transform 450ms ease;
  }
  
  .card[data-visible="false"] .card__front {
	opacity: 1;
	transform: translateY(0);
  }
  
  .card__footer {
	background-color: var(--bg-primary);
	height: 1.5rem;
	position: relative;
	z-index: 5;
  }
  
  .card__back {
	position: absolute;
	padding: 2em 2em 2.5em 2em;
	inset: 0;
	transition: 
	  transform 450ms ease,
	  opacity 150ms ease;
	z-index: 1;
	overflow: auto;
  }
  
  .card[data-visible="false"] .card__back {
	opacity: 0;
	transform: translateY(100%);
	overflow: hidden;
  }
  
  .card[data-visible="true"] .card__front {
	opacity: 0;
	transform: translateY(100%);
	transition: 
	  opacity 150ms ease,
	  transform 450ms ease 50ms;
	  overflow: hidden;
  }
  
  .card[data-visible="true"] .card__back {
	opacity: 1;
	transform: translateY(0);
	transition: 
	  transform 350ms ease,
	  opacity 450ms ease 100ms;
	  overflow: hidden;
  }
  
  .card__social {
	justify-content: center;
	margin-bottom: 2em;
  }
  
  .card__toggle {
	text-align: 1;
	border-radius: 50%;
	width: 3rem;
	aspect-ratio: 1 / 1;
	padding: 0.5em;
	border: 0;
	background-color: var(--clr-primary);
	color: var(--text-primary);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
	transition: background-color 250ms ease;
  }
  
  .card__toggle-icon {
	transition: rotate 250ms ease;
  }
  
  .card[data-visible="true"] .card__toggle {
	background-color: var(--clr-secondary);
	overflow: hidden;
  }
  
  .card[data-visible="true"] .card__toggle-icon {
	rotate: 315deg;
  }