Scrolling Cards Display

INFORMATION & CODE

What the Code Does and How it Works

The code creates a horizontal scrolling card layout for displaying information about several people. Each card contains a circular photograph, a person’s name, a short biographical description, and a longer paragraph. The HTML provides the structure, while the CSS controls the appearance, spacing, colours, sizing, and scrolling behaviour. The JavaScript file is linked but currently contains no code, so it does not perform any additional actions.

The <main> element contains the overall .card-wrapper, which centres the card area and gives the page a light-blue background. Inside it, .card-container holds four individual .card elements. Each card follows the same structure: an image, an <h2> for the name, an <h3> for the biographical description, and a <p> for additional information. The image URLs can be replaced with your own image URLs, and the placeholder text can be replaced with the actual person's information.

The .card-container uses display: flex to place the cards horizontally. Its overflow-x: scroll property allows the user to move left and right through the cards when they do not all fit within the available width. The scroll-snap-type: x mandatory and scroll-snap-align: start properties make the scrolling snap neatly from one card to the next. The custom ::-webkit-scrollbar rules also change the appearance of the horizontal scrollbar.

The .card styles control the individual cards. They are given a white background, rounded corners, padding, and a shadow. The flex: 0 0 100% rule makes each card occupy the full available width of the scrolling container, creating a one-card-at-a-time carousel-style layout. The .image and .image img rules make each person's photograph circular, with a green outer border/background and a white border around the image.

How to Use the Code

To use the code, save the HTML as something such as index.html and the CSS as styles.css in the same folder. Replace the image URLs, names, descriptions, and paragraph text with your own content. You can add or remove .card sections as required. The scripts.js file is not currently needed because it contains no JavaScript, although it can be used later if you want to add features such as navigation buttons, automatic scrolling, or interactive effects.

HTML


                <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Scrolling Cards Display</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main class="card-wrapper">
      <section class="card-container">
        <div class="card">
          <div class="image">
            <img src="https://e-nash.net/photos/bright.jpg" alt="" />
          </div>
          <h2>Persons Name</h2>
          <h3>Persons biographical description</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elite.</p>
        </div>
        <div class="card">
          <div class="image">
            <img src="https://e-nash.net/photos/wise.jpg" alt="" />
          </div>
          <h2>Persons Name</h2>
          <h3>Persons biographical description</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elite.</p>
        </div>
        <div class="card">
          <div class="image">
            <img src="https://e-nash.net/photos/face.jpg" alt="" />
          </div>
          <h2>Persons Name</h2>
          <h3>Persons biographical description</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elite.</p>
        </div>
        <div class="card">
          <div class="image">
            <img src="https://e-nash.net/photos/man.jpg" alt="" />
          </div>
          <h2>Persons Name</h2>
          <h3>Persons biographical description</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elite.</p>
        </div>
      </section>
    </main>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                .card-wrapper {
  display: flex;
  align-items: start;
  justify-content: center;
  padding: 30px;
  margin: auto;
  background: #e3f2fd;
}

::-webkit-scrollbar {
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 25px;
}
::-webkit-scrollbar-thumb {
  background: #00aa00;
  border-radius: 25px;
  scroll-snap-stop: always;
}
::-webkit-scrollbar-thumb:hover {
  background: #008800;
}
.card-container {
  display: flex;
  gap: 60px;
  max-width: 400px;
  width: 100%;
  background: #00cc00;
  border-radius: 12px;
  padding: 30px;
  margin-top: 30px;
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scroll-padding: 30px;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.card-container .card {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  border-radius: 12px;
  background: #fff;
  scroll-snap-align: start;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.card .image {
  height: 150px;
  width: 150px;
  padding: 4px;
  background: #00aa00;
  border-radius: 50%;
}
.image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;
}
.card h2 {
  margin-top: 25px;
  color: #006600;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}
.card h3 {
  margin-top: 19px;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.card p {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

PREVIEW

Persons Name

Persons biographical description

Lorem ipsum dolor sit amet consectetur adipisicing elite.

Persons Name

Persons biographical description

Lorem ipsum dolor sit amet consectetur adipisicing elite.

Persons Name

Persons biographical description

Lorem ipsum dolor sit amet consectetur adipisicing elite.

Persons Name

Persons biographical description

Lorem ipsum dolor sit amet consectetur adipisicing elite.

MENU

INFORMATION & CODE