Creating a Heart using CSS | HTML & CSS

Hello, learner In this article, we are going to Creating a Heart using CSS. In the earlier past post, we have created Social Media Icon using HTML CSS Javascript . Now it is time to create Heart.

In this article we have create a heart using html and css. we have create three div inside div class heart and inside that we create 3 box. After that we create CSS file and design with red color.

Creating a Heart using CSS [Source code]

To create aCreating a HEART ❤️❤️ using CSS you have to create two HTML and CSS files named index.html and style.css in the same folder and you have to link the CSS file to HTML. after that paste the HTML code in index.html and paste the CSS code in style.css that’s all after pasting the code.

At first, you have to create an HTML file named index.html and paste the below code on it and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="Stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="heart">
        <div class="c1 red"> </div>
        <div class="c2 red"> </div>
        <div class="r red"> </div>
    </div>
</body>
</html>

After pasting the HTML code the second you have to create a CSS file named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

body {
    background-color: #1b1b1b;
    margin: 20px;
}

.heart {
    width: 150px;
    height: 150px;
    position: relative;
    margin: auto;
    transform: rotate(45deg);
    filter: drop-shadow(0 0 0.5rem #ff00009a);
    animation: h 1s infinite;
}

@keyframes h {
    0% {
        width: 150px;
        height: 150px;
    }
    50% {
        width: 200px;
        height: 200px;
    }
    100% {
        width: 150px;
        height: 150px;
    }
}

.red {
    position: absolute;
    width: 66%;
    height: 66%;
    background-color: red;
}

.c1 {
    bottom: 0;
    left: 0;
    border-radius: 50%;
}
.c2 {
    top: 0;
    right: 0;
    border-radius: 50%;
}
.r {
    bottom: 0;
    right: 0;
}

That’s all after after pasting the code now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

Creating a Heart using CSS [Source code]

You might like this

Share this:

Related Posts

Create a Stunning Background Video effect with HTML and CSS

10 Navigation Bar Design using HTML and CSS

Learn Coding Fast: 5 Languages to Jumpstart Your Tech Skills in 15 Days!