Tarjeta de miembros del equipo con CSS

8,684 webleb

Abrir en el editor Publica tu código

Recomendado

11 February 2026

Incrustar el juego SnowRider3D Unity (CDN)

20 May 2025

Un código de Skyrreum

5 May 2026

conducción loca

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;
  }