Non-Responsive Speech Bubble
How do I make an non-responsive speech bubble?
What is a non-responsive speech bubble? How do you make a non-responsive speech bubble? This script and codes were developed by Destiny Williams on 13 October 2022, Thursday.
Non-Responsive Speech Bubble Previews
Non-Responsive Speech Bubble - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Non-Responsive Speech Bubble</title>
</head>
<body> <style> .resp-accordion { margin: 0 0 20px 0; padding: 0 !important; list-style-type: none; } .resp-accordion li { margin: 0 0 5px 0; padding: 0; text-align: left; } .resp-accordion li:last-child { margin-bottom: 0; } .resp-accordion li .resp-accordion-head { width: 100%; display: table; margin: 0 auto; padding: 0; cursor: pointer; background: #d42127; border-bottom: 1px solid #e6e7e2; color: #FFF; cursor: pointer; } .resp-accordion-default.resp-accordion li .resp-accordion-head { padding: 10px 30px 10px 10px; color: #0b8593; line-height: normal; position: relative; border-bottom: 1px solid #e6e7e2; width: 100%; display: table; margin: 0 auto; padding: 0; cursor: pointer; background: #DFDFDF; border-bottom: 1px solid #e6e7e2; color: #FFF; } .resp-accordion-default.resp-accordion li .resp-accordion-panel { background: #ecf0f1; border-top: 0; padding: 20px; } .resp-accordion-plus:before { content: "+"; } .resp-accordion-minus:before { content: "-"; } .resp-accordion-plus:before, .resp-accordion-minus:before { background: #aaaaab; color: #FFF; display: table-cell; padding: 15px 0 15px 25px; vertical-align: middle; } .resp-accordion-default.resp-accordion li .resp-accordion-head i { background: #aaaaab; color: #FFF; display: table-cell; vertical-align: middle; font-style: normal; } .resp-accordion li .resp-accordion-head strong { color: #222; display: table-cell; padding: 15px 0; } .resp-accordion li .resp-accordion-head dd { margin-left: 10px; } .alert { border: 1px dotted rgb(68, 68, 68); padding: 15px !important; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Small and large phones */ @media (max-width:748px) { .resp-accordion li .resp-accordion-head strong { width: 90%; } } /* Small device */ @media (min-width: 768px) { .resp-accordion li .resp-accordion-head strong { width: 90%; } } /* Medium devices (desktops, Tablets, 992px and up) */ @media (min-width: 992px) { .resp-accordion li .resp-accordion-head strong { width: 95%; } } /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { .resp-accordion li .resp-accordion-head strong { width: 95%; } }
/* CSS talk bubble */
.talk-bubble { display: inline-block; position: relative; width: 600px; height: auto; background-color: white;
}
.border{ border: 2.5px solid #666;
}
.round{ border-radius: 2px; -webkit-border-radius: 27px; -moz-border-radius: 30px;
}
/* Right triangle placed top right flush. */
.tri-right.border.right-top:before { content: ' '; position: absolute; width: 0; height: 0; left: auto; right: -25px; top: -2px; bottom: auto; border: 25px solid; border-color: #666 transparent transparent transparent;
}
.tri-right.right-top:after{ content: ' '; position: absolute; width: 0; height: 0; left: auto; right: -20px; top: 0px; bottom: auto; border: 23px solid; border-color: white transparent transparent transparent;
}
/* talk bubble contents */
.talktext{ padding: 10px; text-align: left; line-height: 1.5em;
}
.talktext p{ /* remove webkit p margins */ -webkit-margin-before: 0em; -webkit-margin-after: 0em;
} .testomonial { border: 2px groove; border-radius: 10px; padding: 10px;
padding-right: 10px; } .aboutbackground {
border-top: 1px solid #ca4142;
border-bottom: 1px solid #ca4142;
padding: 25px;
}
.anchorlandcolor {
color: #353535!important;
} } .policylink { line-height:1.5em; font-size: 14px; font-weight:normal!important; } .policylink:hover { color:#ca4142; } .polnav { margin-top:58px; } .polul { list-style-type:none; padding: 0; margin: 0; } .polulacc { list-style-type:none; padding: 0; margin: 0;
font-size:120%!important; } .policyol { line-height:1.5em!important; }
.policycontent p {
line-height:1.5em;
font-size:80%;
} .policycontent h4 {
font-size:16px;
} .policycontent a {
color:#ca4142;
} .policycontent hr { margin:5px; }
.policyaccordion p {
font-size:100%;
} .policycontent h2 { color:#353535; } .about { font-size:40px!important;
color:#ca4142; margin-right:10px; } .help-accordion-toggle { cursor: pointer; color:#353535;} .help-accordion-toggle:hover {color:#ca4142;} .help-accordion-content { display: none; } .help-accordion-content.default { display: block; }
</style>
<div class="container-fluid policies"> <div class="row no-gutter"> <!--BEGIN NAVIGATION COLUMN--> <div id="help-accordion" class="col-xs-12 col-sm-12 col-md-2 col-lg-2 polnav"> <a href="/content/customerservice/info.aspx"><h4 class="help-accordion-toggle" style="color:#ca4142;"><i class="fa fa-home" aria-hidden="true" style="margin-right:5px; color:#ca4142;"></i>Help Center</h4></a> <hr> <h4 class="help-accordion-toggle"><i class="fa fa-info-circle" aria-hidden="true" style="margin-right:5px;"></i>Policies</h4> <div class="help-accordion-content"> <ul class="polul"> <li><a href="/content/returns/info.aspx" class="policylink btn">Returns</a></li> <li><a href="/content/replacements/info.aspx" class="policylink btn">Replacements</a></li> <li><a href="/content/cancellations/info.aspx" class="policylink btn">Cancellations</a></li> <li><a href="/content/shipping/info.aspx" class="policylink btn">Shipping</a></li> <li><a href="/content/delivery-special/info.aspx" class="policylink btn">Delivery</a></li> <li><a href="/content/low-price-guarantee/info.aspx" class="policylink btn">Low Price Guarantee</a></li> <li><a href="/content/extended-warranty/info.aspx" class="policylink btn">Extended Warranty</a></li> <li><a href="/content/privacy/info.aspx" class="policylink btn">Privacy</a></li> </ul> </div> <hr> <h4 class="help-accordion-toggle"><i class="fa fa-info-circle" aria-hidden="true" style="margin-right:5px;"></i>My Order</h4> <div class="help-accordion-content"> <ul class="polul"> <li><a href="/secure/view-status.aspx" target="_blank" class="policylink btn">Status</a></li> <li><a href="/secure/account.aspx" target="_blank" class="policylink btn">Account</a></li> <li><a href="/secure/request.aspx" target="_blank" class="policylink btn">Quote</a></li> <li><a href="/cart.aspx" target="_blank" class="policylink btn">Cart</a></li> <li><a href="/content/faq/info.aspx" class="policylink btn">FAQs</a></li> </ul> </div> <hr> <h4 class="help-accordion-toggle"><i class="fa fa-info-circle" aria-hidden="true" style="margin-right:5px;"></i>About</h4> <div class="help-accordion-content"> <ul class="polul"> <li><a href="/content/about-us/info.aspx" class="policylink btn">About Canada Lighting Experts</a></li> <li><a href="/content/contact-us/info.aspx" class="policylink btn">Contact</a></li> <li><a href="/content/testimonials/info.aspx" class="policylink btn">Testimonials</a></li> <li><a href="/content/careers/info.aspx" class="policylink btn">Careers</a></li> <li><a href="http://www.shareasale.com/shareasale.cfm?merchantID=19856&source=1stophomepage" target="_blank" class="policylink btn">Become an Affiliate</a></li> </ul> </div> <hr> <h4 class="help-accordion-toggle"><i class="fa fa-info-circle" aria-hidden="true" style="margin-right:5px;"></i>Shopping</h4> <div class="help-accordion-content"> <ul class="polul"> <li><a href="/content/gift-certificates/info.aspx" class="policylink btn">Gift Certificates</a></li> <li><a href="/line-card.aspx" target="_blank" class="policylink btn">Our Brands</a></li> <li><a href="/search.aspx?onsale=t" target="_blank" class="policylink btn">Sale</a></li> <li><a href="/professionals.htm?bid=mnav" target="_blank" class="policylink btn">Trade Customers</a></li> <li><a href="/content/canada-ad/info.aspx" target="_blank" class="policylink btn">Canadian Customers</a></li> </ul> </div> </div> <!--END NAVIGATION COLUMN--> <!--BEGIN POLICY PAGE--> <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 policycontent"> <h2 class="text-center"><font color="#ca4142">Testomonials</font></h2> <center><p>Here at 1STOPLighting, we work hard to make sure your shopping experience is a positive one! Check out what these happy customers had to say.</p></center> <p></p>
<br>
<div class="row no-gutter" >
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 talk-bubble tri-right border round right-top" >
<br><p><b style="font-size:25px">"</b><b style="font-size:15px">My wife and I recently placed two significant purchase orders with your company. </b>In the process of deciding to make those purchases we had direct involvement with your employee, Julian Griesser. My wife, in particular, had numerous telephone conversations with Mr. Griesser concerning such matters as the ordering of additional stems for the lights, whether the ceiling fans have wall switches, etc. We cannot remember when <b style="font-size:15px">we have had such excellent customer service.</b>
<br>
<br>
<b style="font-size:15px">Mr. Griesser</b>, in addition to be <b style="font-size:15px">extremely personable</b>, was professional and very knowledgeable about the products that we were interested in. He answered our seemingly endless list of questions effortlessly. <b style="font-size:15px">When you get good service, you come back.</b> You can expect us to make further purchases from you in the future and that is, in large part, due to our involvement with Mr. Griesser.<b style="font-size:25px">"</b>
<br>
<br>
<b style="font-size:15 align:left">- Allan Letourneau Kingston, Ontario, CA</b>
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 testomonial" style="display:none;">
<p></p>
</div>
</div>
<br>
<br> <div class="row no-gutter" >
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 testomonial" style="display:none;">
<p></p>
</div>
<div class="col-lg-8 col-lg-push-4 col-md-8 col-md-push-4 col-sm-12 col-xs-12 testomonial">
<p>
<b>- Allan Letourneau, Ontario, CA</b> </p>
</div>
</div>
<br>
<br>
<div class="row no-gutter" >
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 testomonial" >
<p></p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 testomonial" style="display:none;">
<p></p>
</div>
</div>
<br>
<br> <div class="row no-gutter" >
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 testomonial" style="display:none;">
<p></p>
</div>
<div class="col-lg-8 col-lg-push-4 col-md-8 col-md-push-4 col-sm-12 col-xs-12 testomonial">
<p></p>
</div>
</div>
</div>
</div>
</div> <!--CLOSE wrapper-->
</div>
</div>
<script type="text/javascript" async="" src="https://dnn506yrbagrg.cloudfront.net/pages/scripts/0012/6202.js?406434"></script>
<script type="text/javascript" async="" src="https://dnn506yrbagrg.cloudfront.net/pages/scripts/0012/6202.js?394266"></script>
<script type="text/javascript"> // Responsive Accordion v1.3, // Copyright 2014, Joe Mottershaw, https://github.com/joemottershaw/ // Revisions 20141216, Ryan Allen, NOTE: This script must load after the above accordion ;(function($accordion) { $accordion('.resp-accordion').each(function() { // Set Expand/Collapse Icons $accordion('.resp-accordion-minus', this).hide(); // Hide panels $accordion('.resp-accordion-panel', this).hide(); // Bind the click event handler $accordion('.resp-accordion-head', this).click(function(e) { // Get elements var thisAccordion = $(this).parent().parent(), thisHead = $(this), thisPlus = thisHead.find('.resp-accordion-plus'), thisMinus = thisHead.find('.resp-accordion-minus'), thisPanel = thisHead.siblings('.resp-accordion-panel'); // Reset all plus/mins symbols on all headers thisAccordion.find('.resp-accordion-plus').show(); thisAccordion.find('.resp-accordion-minus').hide(); // Reset all head/panels active statuses except for current thisAccordion.find('.resp-accordion-head').not(this).removeClass('active'); thisAccordion.find('.resp-accordion-panel').not(this).removeClass('active').slideUp(); // Toggle current head/panel active statuses if (thisHead.hasClass('active')) { thisHead.removeClass('active'); thisPlus.show(); thisMinus.hide(); thisPanel.removeClass('active').slideUp(); } else { thisHead.addClass('active'); thisPlus.hide(); thisMinus.show(); thisPanel.addClass('active').slideDown(); } }); }); })(jQuery); $(document).ready(function($) { $('#help-accordion').find('.help-accordion-toggle').click(function() { $(this).next().slideToggle('fast'); // Expand or collapse this panel $(".help-accordion-content").not($(this).next()).slideUp('fast'); // Hide the other panels }); });
</script>
</body>
</html>
| Developer | Destiny Williams |
| Username | HURCN |
| Uploaded | October 13, 2022 |
| Rating | 3 |
| Size | 4,858 Kb |
| Views | 32,384 |
Do you need developer help for Non-Responsive Speech Bubble?
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!
Destiny Williams (HURCN) Script Codes
| Name | Size |
| Tables | 2,921 Kb |
| PPU - REWRITE | 3,335 Kb |
| CAN VP REVAMP | 6,142 Kb |
| 1stop - dec -c np | 4,416 Kb |
| Monte Carlo Fans - CANADA | 5,577 Kb |
| AFX | 1,777 Kb |
| George Kavoc Dept Pg | 4,796 Kb |
| Lde-dec-cnp | 4,233 Kb |
| Microscope Hub Null Results | 2,032 Kb |
| Do Nothing Club | 2,013 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| Border-radius animation | Yukulele | 2,480 Kb |
| Scroll to top button | DominicFrancois | 3,743 Kb |
| Tree growth tests | Orchard | 3,818 Kb |
| Incremental game | Eprouver | 5,868 Kb |
| Mega Menu by Joni | Asakasinsky | 3,171 Kb |
| CSS Bot Confusion | Jpod | 3,456 Kb |
| HTML5 Breakout | Jaysalvat | 4,873 Kb |
| Lunar eclipse | Ademilter | 2,056 Kb |
| Multi column experiment. | Spylefkaditis | 2,805 Kb |
| Slider css only | Armandobau | 2,161 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!