Adding the CSS

✍️ Objective - To add design to the category divs

Open the layout.css file, you would be seeing some existing code in it, for now you can ignore it.

Let's add the following css to the end of layout.css file

/* layout.css */

/* ... other existing styles ... */

.container {
  display: flex;
  overflow-x: auto;
  width: 100%;
  padding: 1rem;
}

.category-card {
  flex: 0 0 auto;
  width: 200px;
  margin-right: 1rem;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.category-link {
  text-decoration: none;
  color: inherit;
}

.category-image-wrapper {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}

.category-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-name {
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
}

/* Media queries for responsiveness */

@media (min-width: 480px) {
  .category-card {
    width: calc(50% - 1rem);
  }
}

@media (min-width: 768px) {
  .category-card {
    width: calc(33.333% - 1rem);
  }
}

@media (min-width: 992px) {
  .category-card {
    width: calc(25% - 1rem);
  }
}

@media (min-width: 1200px) {
  .category-card {
    width: 200px;
  }
}

This CSS code snippet provides styling for the category card HTML structure. The main container is a flex container with horizontal scrolling enabled. Each category card has a fixed width, a margin to its right, and some basic styling such as a background color, box-shadow, and border-radius.

Don't remove classnames which start with "dkn-" because they are used by internal functions.

The category link has its text decoration removed and inherits the color from the parent. The category image wrapper has a square aspect ratio and uses the padding-bottom trick to achieve this. The image is positioned absolutely within the wrapper and covers the entire space, maintaining its aspect ratio.

Lastly, the category name has some padding, font size, and font weight adjustments to make it stand out more.

Wohoo! It looks beautiful now, with our CEO Leo lighting up the page with his cuteness. After you've added this, its time to add some functionality to our cards, what if a user clicks on the category card? We could take it to category page, display a message or just shower confetti!

We'll figure it out in the next chapter