Scribd
Upload
67 views

Shayari Box HTML Css

The document contains CSS and JS code for styling and functionality of a jokebox component. The code defines styles for the jokebox layout and elements, and JS functionality for copying and sharing joke text on click.

Uploaded by

SBV SBV
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
67 views

Shayari Box HTML Css

The document contains CSS and JS code for styling and functionality of a jokebox component. The code defines styles for the jokebox layout and elements, and JS functionality for copying and sharing joke text on click.

Uploaded by

SBV SBV
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

--------------------------------------------/*AT-Jokebox/

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

You might also like