Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <link rel="tag" href="https://1xpto.netlify.app/articles/html/Css Ring">
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Css Ring</title>
- <style>
- #ring {
- position: relative;
- box-sizing: border-box;
- width: 90px;
- height: 80px;
- border-radius: 50%;
- background-color: transparent;
- display: inline-block;
- margin: 100px;
- border-bottom: 15px solid gold;
- box-shadow: 0 -5px 0 5px black, 0 1px 0 0 black;
- transform: scale(4);
- transform-origin: 0 0;
- }
- .left {
- font-size: 20px;
- display: inline-block;
- transform: rotate(90deg);
- }
- .right {
- font-size: 20px;
- display: inline-block;
- transform: rotate(-90deg);
- }
- .heart {
- outline: none;
- border: none;
- position: absolute;
- background: transparent;
- transform: translate(25px, 60px);
- }
- @media all and (orientation: portrait) and (max-width: 425px) {
- #ring {
- margin: 50px;
- transform: scale(2);
- }
- }
- @media all and (orientation: landscape) and (max-width: 538px) {
- #ring {
- margin: 50px;
- transform: scale(2);
- }
- }
- @media all and (orientation: landscape) and (min-width: 539px) and (max-width: 768px) {
- #ring {
- margin: 50px;
- transform: scale(2);
- }
- }
- </style>
- </head>
- <body>
- <div id='ring'>
- <button class='heart'>
- <span class='left'>♥ </span>
- <span class='right'>♥ </span>
- </button>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement