Simple Heart

Developer
Eliseo Martelli
Size
1,852 Kb
Views
10,120
  1. Simple Heart Previews
  2. Simple Heart HTML Codes
  3. Simple Heart CSS Codes

How do I make an simple heart?

What is a simple heart? How do you make a simple heart? This script and codes were developed by Eliseo Martelli on 12 October 2022, Wednesday.

Simple Heart Previews
IQ Test

Simple Heart - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Heart </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="heart"> <div class="left circle"></div> <div class="right circle"></div> <div class="tip"></div>
</div>
</body>
</html>

Simple Heart - Script Codes CSS Codes

:root { --bg: #333451; --heart-color: #FF1744; --heart-distance: 10px;
}
body { background: var(--bg);
}
.heart { position: absolute; width: calc(50px*2 - var(--heart-distance)); height: auto; left: 50%; top: 50%; cursor: pointer; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
.heart:hover { --heart-color: red;
}
.circle { position: absolute; width: 50px; height: 50px; border-radius: 50%; background: var(--heart-color);
}
.right { margin-left: calc(50px - var(--heart-distance));
}
.tip { position: relative; width: 50px; height: 50px; margin: 0 auto; background: var(--heart-color); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: calc(50px - var(--heart-distance)/.334); margin-bottom: var(--heart-distance);
}
Simple Heart - Script Codes
Simple Heart - Script Codes
Home Page Home
Developer Eliseo Martelli
Username eliseomartelli
Uploaded October 12, 2022
Rating 3
Size 1,852 Kb
Views 10,120
Do you need developer help for Simple Heart?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eliseo Martelli (eliseomartelli) Script Codes
Name
A Pen by Eliseo Martelli
Cute Terminal
Checkbox
Google Dots Animation
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!