Diamond Card Layout with CSS
Tags: html, css, codenewbie, webdev
Published: 2021-08-15 21:19:42

***Today, I'll show you how to design a diamond card layout (items should be exactly four) with a few steps using HTML and CSS***

**Step 1 - Setting up the HTML structure of the layout**
It is worth knowing that your HTML structure is very important. Poor HTML structure will lead to complications when styling your CSS.
First, let's create a section in our html body for us to construct the layout for the diamond cards. Next, create a container that will hold the cards.

*The simple trick is that the two cards we want to be at the top and bottom of the diamond should be wrapped together in a container, see the code below:*
```html
 <section class="diamond-card">
            <h1>Diamond Card section design with CSS</h1>
            <div class="card-container">
                <div class="card">
                    <div class="card-content card-content-1">
                        <h2>Launch your product</h2>
                        <p>Lorem ipsum dolor sit amet consectetur.</p>
                        <div class="img-container"><img src="images/process-4.svg" alt="process"></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content card-content-2">
                        <h2>Project brief</h2>
                        <p>Lorem ipsum dolor sit amet nhir consectetu nhir adipisicing elit. </p>
                        <div class="img-container"><img src="images/process-1.svg" alt="process"></div>
                    </div>
                    <div class="card-content card-content-3">
                        <h2>Start Developing</h2>
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <div class="img-container"><img src="images/process-3.svg" alt="process"></div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-content card-content-4">
                        <h2>Wireframes & Design</h2>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <div class="img-container"><img src="images/process-2.svg" alt="process"></div>
                    </div>
                </div>
            </div>
 </section>   
```

**Step 2 - Adding CSS styles**
Let's add some basic CSS styles. By default, html elements have margin and padding (usually about 8px) set by the browser. We overwrite these properties using the global selector "*" and setting the values to 0.
```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #fafafa;
  font-family: "Poppins", sans-serif;
}

h1 {
  font-weight: 600;
  color: #7f7e84;
  text-align: center;
  font-size: 2.5rem;
  text-transform: uppercase;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.445);
}

.diamond-card {
  padding: 1rem 0;
}
```

Next, target the "card-container" class and give it a display of flex to arrange the cards side by side on the same row.
```css

.card-container {
  width: 80%;
  margin: 40px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.card {
  flex-basis: 30%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  gap: 30px;
}

.card-content {
  border-radius: 5px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 22px 0 rgba(128, 128, 129, 0.37);
}

.card-content h2 {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 1.3rem;
}
.card-content p {
  color: #5c5b5b;
  font-size: 14px;
}

.img-container {
  margin-top: 10px;
  text-align: right;
}

.img-container img {
  width: 7rem;
}
```

That's basically it! The rest of the styling is up to you
We can go ahead and add some hover effect and border designs to each card:
```css
.card-content:hover {
  cursor: pointer;
  transition: 0.3s;
  transform: scale(1.1);
}

.card-content:hover p {
  color: rgb(34, 34, 34);
}

.card-content-1 {
  border: 3px solid #45d3d3;
}

.card-content-2 {
  border: 3px solid #ea5353;
}

.card-content-3 {
  border: 3px solid #fc4ac1;
}

.card-content-4 {
  border: 3px solid #549ef2;
}

```

There you go. We've just designed a diamond card layout. Play around with it, tweak it. 
![Live screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6y7zxzjwlm7jyfh7crnp.jpg)
You can try and make the design responsive as a challenge.