Created
September 30, 2021 23:06
-
-
Save astraldev/64a38512cc00a47aeb9ef7374a7c6fa3 to your computer and use it in GitHub Desktop.
Creating HTML and CSS heart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root{ | |
| --content-size: 200px; | |
| } | |
| html, body{ | |
| width: 100%; | |
| height: 100%; | |
| } | |
| body{ | |
| display: grid; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: rgb(1, 5, 20); | |
| } | |
| div.my-content{ | |
| position: relative; | |
| display: flex; | |
| padding: 5px; | |
| margin: auto; | |
| place-items: center; | |
| width: var(--content-size); | |
| height: var(--content-size); | |
| } | |
| div.my-content > span{ | |
| text-align: center; | |
| color: #6b0000; | |
| background-color: #e92626; | |
| font-size: 3vh; | |
| font-weight: 500; | |
| z-index: 10; | |
| } | |
| div.heart > span{ | |
| transform: translateX(5px); | |
| } | |
| div.heart::after, | |
| div.heart::before{ | |
| content: ""; | |
| width: 100%; | |
| height: 100%; | |
| inset: 0; | |
| position: absolute; | |
| } | |
| div.heart::after{ | |
| border-left: 30px solid #e92626; | |
| background-color: #e92626; | |
| border-bottom-left-radius: 50%; | |
| border-top-left-radius: 50%; | |
| box-shadow: 2px 2px 2px rgba(255, 255, 255, 0.5); | |
| z-index: 3; | |
| transform: rotate(32deg) translateX(-58px) translateY(13px); | |
| } | |
| div.heart::before{ | |
| background-color: #e92626; | |
| border-right: 30px solid #e92626; | |
| border-bottom-right-radius: 50%; | |
| border-top-right-radius: 50%; | |
| box-shadow: 2px 2px 2px rgba(255, 255, 255, 0.5); | |
| z-index: 4; | |
| transform: rotate(-32deg) translateX(38px) translateY(1px); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 type="stylesheet" href="index.css"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div class="heart my-content"> | |
| <span>Hello, I just want to say, have a happy new day :)</span> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment