Article card with wavy effect using CSS

Hello Guys! In this blog, I'm going to explain to you how to make an article card with a wavy effect using CSS. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

Let's cover HTML Part

We use HTML to make the skeleton of a website. HTML is a markup language.

Now let's import the font awesome CDN in our HTML <head> tag. fontawesome is a library that is used for icons in a website.

<!-- Font Awesome Icons  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

Now let's import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in <head> tag.

<!-- Google Fonts  -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

Now let's develop the skeleton of our card. We have a div with classname 'card', img tag, SVG tag for the wavy effect, if you want to make this wavy effect SVG you can make it using getwaves.io. Next, we have a description div which consists paragraph description and author profile details.

<div class="card">
    <img src="../imgs/desk.jpg" alt="Article">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path fill="#ffffff" fill-opacity="1"
            d="M0,160L48,154.7C96,149,192,139,288,160C384,181,480,235,576,224C672,213,768,139,864,122.7C960,107,1056,149,1152,165.3C1248,181,1344,171,1392,165.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
        </path>
    </svg>
    <div class="description">
        <h4 class="title">5 Productivity Tips to stay more productive in a day!</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, voluptatibus eos. Quae, dolores
            commodi? Impedit commodi voluptates</p>
        <div class="profile">
            <img src="../imgs/profile-pic1.jpg" alt="profile">
            <p class="author">
                <span class="authorName">Piyush Patil</span>
                <span class="date">12 June 2022</span>
            </p>
        </div>
    </div>
</div>

Here is the final HTML code

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Article Reading Card with Waves Effect using CSS - @code.scientist x @codingtorque</title>
</head>

<body>
    <div class="card">
        <img src="../imgs/desk.jpg" alt="Article">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="#ffffff" fill-opacity="1"
                d="M0,160L48,154.7C96,149,192,139,288,160C384,181,480,235,576,224C672,213,768,139,864,122.7C960,107,1056,149,1152,165.3C1248,181,1344,171,1392,165.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
            </path>
        </svg>
        <div class="description">
            <h4 class="title">5 Productivity Tips to stay more productive in a day!</h4>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, voluptatibus eos. Quae, dolores
                commodi? Impedit commodi voluptates</p>
            <div class="profile">
                <img src="../imgs/profile-pic1.jpg" alt="profile">
                <p class="author">
                    <span class="authorName">Piyush Patil</span>
                    <span class="date">12 June 2022</span>
                </p>
            </div>
        </div>
    </div>
</body>

</html>

Output Till Now

Let's understand CSS part

In the below CSS code.

We declare a * selectors for the font Poppins that we have imported in our head tag.
Next we declare a body selector which consists of styles for dark mode and aligns all elements in the body to the center.

* {
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #111827;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10rem;
}

.card {
    border-radius: 10px;
    height: 25rem;
    width: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.card svg {
    position: absolute;
    left: 0;
    top: 120px;
}

.card img {
    width: 100%;
}

.description {
    padding: 15px;
    background: white;
    color: black;
}

.title {
    font-size: 1rem;
    margin: 0;
}

.description p {
    font-size: 12px;
    margin: 5px 0;
    color: #94a3b8;
}

.profile {
    display: flex;
    align-items: center;
}

.profile img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-right: 5px;
}

.author {
    display: flex;
    flex-direction: column;
}

.authorName {
    color: black;
    font-weight: bold;
}

.date {
    font-size: 10px;
}

DEV Community

Article card with wavy effect using CSS

Let's cover HTML Part

Here is the final HTML code

Output Till Now

Let's understand CSS part

Output Till Now

Top comments (0)