सीएसएस टीम मेम्बर्स कार्ड

अनुशंसित

8 March 2024

एचटीएमएल सीएसएस नैवबार टेम्पलेट

30 August 2024

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

सीएसएस टीम मेम्बर्स कार्ड

अनुशंसित

एचटीएमएल सीएसएस नैवबार टेम्पलेट

3D कार्ड होवर प्रभाव

एनिमेटेड सीएसएस इनपुट

index.html

styles.css

main.js

अनुशंसित

एचटीएमएल सीएसएस नैवबार टेम्पलेट

3D कार्ड होवर प्रभाव

एनिमेटेड सीएसएस इनपुट

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js