This content originally appeared on DEV Community and was authored by Veed - The Hood Developer
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:
<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.
* {
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.
.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:
.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.
You can try and make the design responsive as a challenge.
This content originally appeared on DEV Community and was authored by Veed - The Hood Developer
Veed - The Hood Developer | Sciencx (2021-08-15T21:19:42+00:00) Diamond Card Layout with CSS. Retrieved from https://www.scien.cx/2021/08/15/diamond-card-layout-with-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.