Shayari Box HTML Css
Shayari Box HTML Css
Shayari Box HTML Css
Shayaribox*/------------------------
--------------------CSS---------------------
<style>
/*AT-Jokebox/Shayaribox*/
:root { --at-padding1: 20px 20px; --at-padding2:14px 0 0 0; --at-
icon1:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13
11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83
12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05
4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42
7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11
19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8
11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65
7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84
16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68
16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56
14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55
13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11
13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10
10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33
9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33
8.53 7.33Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat; --at-icon2:
url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19,21H8V7H19M19,5H8A2,2 0 0,0
6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0
2,3V17H4V3H16V1Z' fill='%23fff'/%3E%3C/svg%3E") center / 20px no-repeat; }
blockquote{float:none;position:relative;width:100%;max-width:100%;display:inline-
block;height:auto;box-sizing:content-box;margin-bottom:10px} blockquote:nth-
child(odd){clear:both} .at-joke-box p{padding:var(--at-padding1); font-size: 14px;
font-style: italic; white-space: pre-line; font-weight: 550; line-height:
24px;} .share-text i.sh{background:var(--at-icon1) ; color:#fff!
important;width:20px; height:20px;margin-right:5px} .copy-text
i.ca{background:var(--at-icon2); color:#fff!important;width:20px;
height:20px;margin-right:5px} .at-joke-box{padding:var(--at-padding2);margin:16px
0;background:#fff;border:solid 2px #757575;color:#000;border-radius:7px;box-shadow:
0 2rem 5rem rgba(0,0,0, .05);} .copy-
text{display:block;position:relative;padding:20px 0;display:flex;justify-
content:space-between;align-content:center;align-items:center} .copy-text
span{text-align:center;display:flex;justify-content:center;align-
items:center;width:100%;margin:0 4%;cursor:pointer} .copy-text
span:hover{background:#da4453;transition:0.8s ease-in-out} .copy-text span
svg{font-size:20px;padding-right:7px} .share-text{padding:4px;background: linear-
gradient(to right,#090 0,#0c0 50%,#6c0 100%);color:#fff;border-radius:3px} .at-
copy{padding:4px;background: rgb(213, 0, 0);color:#fff;border-radius:3px} @media
screen and (max-width:700px){ blockquote{float:none;max-width:100%;box-
sizing:border-box;margin-bottom:15px} .at-joke-box{margin:0 auto} .post-
body{padding:12px} }
</style>
------------------------------JS------------------------
<script type='text/javascript'>
//<![CDATA[
$("blockquote").contents().filter(function(){return 1!==this.nodeType}).wrap("<p
class='copy-content'></p>"),$(".copy-content").wrap('<div class="at-joke-box"/>'),$
("blockquote .at-joke-box").append('<div class="copy-text"><span class="share-
text"><i class="sh"/> Share Now</span><span class="at-copy"><i class="ca"/>
Copy</span></div>');$(function(){$(".at-copy").click(function(e)
{e.preventDefault();var t=$("<input>");$("body").append(t),$
(this).css({background:"#d50000"}),t.val($(this).parent(".copy-text").parent(".at-
joke-box").find("> .copy-
content").text()).select(),document.execCommand("copy"),t.remove()}),$(".share-
text").click(function(){var e=$(this).parent(".copy-text").parent(".at-joke-
box").find(" > .copy-content").text(),t="https://api.whatsapp.com/send?
text="+encodeURIComponent(e)+ " © Anutrickz " ;window.open(t,"_blank")})});
//]]>
</script>
-----------------------
@ANUTRICKZ