查看文件: img2.php

大小: 7.55 KB

类型: application/octet-stream

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
 <style> 
     *,*::after, *::before {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

body {
          background-color: rgb(241 245 249);
        }

main {
          width: 100vw;
          height: 100vh;
          flex-direction: row;
          display: flex;
          justify-content: center;
          align-items: center;
        }

#carouselExampleCaptions {
          width: 40vw;
          height: 100%;

display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

.carousel-inner {
            width: 60%;
        }

.card {
            width: 100%;
            height: 400px;
            border-radius: 10px;
            border: none;
            transition: filter 0.5s ease;
            box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
        }

.card img {
            filter: grayscale(100%);
            width: 100%;
            height: 16em;
            object-fit: cover;
            object-position: 0% 20%;
            border-radius: inherit;
        }

.card:hover img {
          filter: grayscale(0);
        }

.card .name {
            font-size: 1.5em;
            font-weight: 900;
            text-transform: uppercase;
            margin: 0;
            text-align: center;
        }

.card .role {
            font-size: 1.2em;
            margin: 0;
            text-align: center;
        }

.card .work-at {
            font-size: 1em;
            text-align: center;
        }

i.fa-arrow-right,
       i.fa-arrow-left {
          background: orangered;
          padding: 10px;
          border-radius: 100%;
        }

.carousel-indicators [data-bs-target] {
          background-color: orangered;
          width: 10px;
          height: 10px;
          border-radius: 100%;
          transition: opacity, width .6s ease;
        }

.carousel-indicators .active {
            opacity: 1;
            width: 20px;
        }

@media screen and (max-width: 900px){
        #carouselExampleCaptions {
          width: 70vw;
          height: 70vh;
        }

#carouselExampleCaptions::before {
          background: linear-gradient(90deg, #fff 60%, black 100%);
        }

#carouselExampleCaptions::after {
          background: linear-gradient(-90deg, #fff 60%, black 100%);
        }

.card img {
            width: 100%;
            height: 10em;
        }

.card .name {
          margin-top: 1em;
            font-size: 1em;
            font-weight: 700;
        }

.card .role {
            font-size: 0.8em;
        }

.card .work-at {

font-size: 0.6em;
        }
      }
 </style>      
<body>
    <main>
      <section>
        <div id="carouselExampleCaptions" class="carousel slide">
          <section>
            <p>The Team</p>
        </section>
            <div class="carousel-indicators">
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
              <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5" aria-label="Slide 6"></button>
            </div>
            
            <div class="carousel-inner">

<div class="carousel-item active">
                <aside class="card team1">
                    <img src="https://user-images.githubusercontent.com/78242022/283794558-047ca72b-9fe0-42f7-8d8e-09c77d48d3c0.jpg" alt="">
                    <h2 class="name">Tim Spence</h2>
                    <p class="role">Head of Marketing</p>
                    <p class="work-at">Markson Inc</p>
                </aside>
              </div>

<div class="carousel-item">
                <aside class="card team1">
                    <img src="https://user-images.githubusercontent.com/78242022/283794539-fc01d463-7bad-4887-a02a-2b9c3eed891f.jpg" alt="">
                    <h2 class="name">Alan Shin</h2>
                    <p class="role">Co-Founder</p>
                    <p class="work-at">Duper Duper</p>
                </aside>
              </div>

<div class="carousel-item">
                <aside class="card team1">
                  <img src="https://user-images.githubusercontent.com/78242022/283794643-4cea087e-3214-4331-84f8-fde21a8f22db.jpg" alt="">
                  <h2 class="name">Laurel Peng</h2>
                  <p class="role">Head of Corporate</p>
                  <p class="work-at">Development, MCX</p>
              </aside>
              </div>

<div class="carousel-item">
                <aside class="card team1">
                  <img src="https://user-images.githubusercontent.com/78242022/283794585-346ab892-20b2-45b5-9c70-5e99e149e65a.jpg" alt="">
                  <h2 class="name">Brandy Ahn</h2>
                  <p class="role">Overseas Sales</p>
                  <p class="work-at">Newness Golf</p>
                </aside>
              </div>

<div class="carousel-item">
                <aside class="card team1">
                  <img src="https://user-images.githubusercontent.com/78242022/283794595-9f1358ea-5af5-4b69-8295-bde8961fed84.jpg" alt="">
                  <h2 class="name">JoJo Kinis</h2>
                  <p class="role">DevOps Engineer</p>
                  <p class="work-at">Ylyeer</p>
                </aside>
              </div>

<div class="carousel-item">
                <aside class="card team1">
                  <img src="https://user-images.githubusercontent.com/78242022/242978218-d0e4eba2-62f7-4464-b2fb-c89835b6e592.jpg" alt="">
                  <h2 class="name">Alex Anie</h2>
                  <p class="role">Fronted Developer</p>
                  <p class="work-at">Freelancer</p>
                </aside>
              </div>

</div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
              <i class="fa-solid fa-arrow-left"></i>
              <span class="carousel-control-prev-icon visually-hidden" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
              <i class="fa-solid fa-arrow-right"></i>
              <span class="carousel-control-next-icon visually-hidden" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
          </div>
    </section>
  </main>
  </body>
</html>