Webleb - Snippets de Código -

Publique Seu Código

Recomendado

4 December 2025

Site responsivo de dados de alunos

index.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>

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

Recomendado

Nariz de Ferro

envelope aberto

Site responsivo de dados de alunos

index.html

styles.css

main.js

Recomendado

Nariz de Ferro

envelope aberto

Site responsivo de dados de alunos

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js