Lesson Details:
July 10, 2020
I: Introduction
A: Welcome to another exciting installment of my blog! I'm going to go over the basics of Cascading Stylesheets, a powerful tool for adding style to your WordPress code. Let's begin...
II: Body
A: Section 1: Anatomy of a CSS document
Cascading Style Sheets are a simple way to add a bit of style to your WordPress blog. Now, it's important to understand that CSS is not a programming language, but rather a markup language. The C in CSS stands for Cascading, and that's exactly what it does. In order to set up a style, you must use a "selector" to apply the style to. A selector could be any one of the following:
1) p
This selects all
tags on the page, and applies the style to them.
2) .post-title
This selects all
titles with a class called "post-title", and applies the style to them. (Remember how we used this earlier in our tutorial? This is the same thing!)
3) #main .post-title
This is an ID Selector, and in this case it selects an element with the ID of main, and applies the style to whatever element has that id (in this case, it would be the tag).<br /><br />4) div.post p {color:red}<br /><br />This is an example of an attribute selector , which can be used if you want to target certain attributes in your HTML. We'll discuss more on this in the advanced section!<br /><br />5) body p {background-color: #ffffff}<br /><br />This is an example of a descendent selector . It attaches itself to every element contained within the <body> tag, and also applies the style inside it to all <p> tags contained within your <body>. You can read more about this here . This is not recommended though due to the fact that most experienced programmers will advise against it. For simplicity purposes, we're just gonna keep it at that! ;)<br /><br />6) li * {color:#ffffff}<br /><br />This is an example of an element selector . It selects EVERYTHING inside of a li tag, whether it be any text or other elements. This makes more sense when you see it in action, so take a look at the very last example. But make sure you understand how this works before you do! ;)<br /><br />7) tr td {color:#ffffff}<br /><br />This is an example of a nested element selector . This looks inside of a table row, finds every tag, then finds every tag that contains them, then selects each one of those rows for styling purposes. Pretty neat! :)<br /><br />8) body p+p {font-size:10pt}<br /><br />This is an example of a contextual selector . This finds every <p> tag that comes after another <p> tag, finds out what font size each one has, finds the largest font size of all of them, changes its font size to 10pts larger than that font size, and sets the rest of the paragraphs' font sizes to 10pts smaller than that font size. Neat huh? :) You can read more about this here . You'll also find some other cool stuff there too!<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </p>
<!-- <ul class="nav nav-tabs lesson-sum-tab border-0" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Bookmarks</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Q&A</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3">Announcements</a>
</li>
</ul> -->
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row justify-content-center mt-5">
<div class="col-lg-8">
<!-- <div class="tab-content">
<div id="home" class=" tab-pane active"><br>
<h3 class="quizz-ques"><b>About This Course</b></h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit</p>
</div>
<div id="menu1" class=" tab-pane fade"><br>
<h3 class="quizz-ques"><b>Menu 1</b></h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class=" tab-pane fade"><br>
<h3 class="quizz-ques"><b>Menu 2</b></h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class=" tab-pane fade"><br>
<h3 class="quizz-ques"><b>Menu 3</b></h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div> -->
<!-- <div class="row">
<div class="col-sm-3">
<p>By The Numbers</p>
</div>
<div class="col-sm-9">
<p class="mb-1">
<b>Skill Level</b> : All Levels
</p>
<p class="mb-1">
<b>Students</b> : 25000
</p>
<p class="mb-1">
<b>Languages</b> : English
</p>
<p class="mb-1">
<b>Caption</b> : Yes
</p>
</div>
</div> -->
</div>
</div>
</div>
</div>
</div>
<!-- Course content, video, quizes, files ends-->
<!-- Course sections and lesson selector sidebar starts-->
<div class="loader" > <img src="https://d1vtrz601dorhd.cloudfront.net/img/loader.gif" width="80" height="80" alt="loader"></div>
<div class="col-lg-3 order-md-2 course_col " id = "lesson_list_area">
<div class="text-center" style="margin: 12px 10px;">
<h5>Course content</h5>
</div>
<div id="sidebarhtmlData">
</div>
</div>
<!-- Course sections and lesson selector sidebar ends-->
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.loader').show();
var secondParam = 'section-review-of-stylin-039-with-css';
var firstParam = 'Introduction-to-programming-coding-languages';
if(firstParam!='' && secondParam!=''){
$.ajax({
type: "POST",
url: 'https://www.appypie.com/academy/get_data_by_ajax',
data: {'firstParam':firstParam,'secondParam':secondParam},
dataType:'JSON',
success:function(responce) {
if(responce){
//console.log(responce.data);
setTimeout(function(){
$('#sidebarhtmlData').html(responce.data).show();
$('.loader').hide();
},100);
}
}
});
}
});
</script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/vendor/modernizr-3.5.0.min.js"></script>
<!-- <script src="https://d1vtrz601dorhd.cloudfront.net/js/vendor/jquery-3.2.1.min.js"></script> -->
<script src="https://d1vtrz601dorhd.cloudfront.net/js/popper.min.js"></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/bootstrap.min.js"></script>
<!-- <script src="https://d1vtrz601dorhd.cloudfront.net/js/slick.min.js"></script> -->
<script src="https://d1vtrz601dorhd.cloudfront.net/js/select2.min.js"></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/tinymce.min.js"></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/multi-step-modal.js"></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/jquery.webui-popover.min.js"></script>
<script src="https://content.jwplatform.com/libraries/O7BMTay5.js"></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/main.js"></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/toastr.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js" charset="utf-8"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js" integrity="sha384-FzT3vTVGXqf7wRfy8k4BiyzvbNfeYjK+frTVqZeNDFl8woCbF0CYG6g2fMEFFo/i" crossorigin="anonymous"></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/bootstrap-tagsinput.min.js"></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/custom.js"></script>
<!-- old backup -->
<!-- <script src="https://www.appypie.com/academy/assets/frontend/default/js/vendor/modernizr-3.5.0.min.js"></script> -->
<!-- <script src="https://www.appypie.com/academy/assets/frontend/default/js/vendor/jquery-3.2.1.min.js"></script> ------- -->
<!-- <script src="https://www.appypie.com/academy/assets/frontend/default/js/popper.min.js"></script>
<script src="https://www.appypie.com/academy/assets/frontend/default/js/bootstrap.min.js"></script>
<script src="https://www.appypie.com/academy/assets/frontend/default/js/slick.min.js"></script>
<script src="https://www.appypie.com/academy/assets/frontend/default/js/select2.min.js"></script>
<script src="https://www.appypie.com/academy/assets/frontend/default/js/tinymce.min.js"></script>
<script src="https://www.appypie.com/academy/assets/frontend/default/js/multi-step-modal.js"></script>
<script src="https://www.appypie.com/academy/assets/frontend/default/js/jquery.webui-popover.min.js"></script>
<script src="https://content.jwplatform.com/libraries/O7BMTay5.js"></script>
<script src="https://www.appypie.com/academy/assets/frontend/default/js/main.js"></script>
<script src="https://www.appypie.com/academy/assets/global/toastr/toastr.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/nestable2/1.6.0/jquery.nestable.min.js" charset="utf-8"></script> ------- -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js" integrity="sha384-FzT3vTVGXqf7wRfy8k4BiyzvbNfeYjK+frTVqZeNDFl8woCbF0CYG6g2fMEFFo/i" crossorigin="anonymous"></script>
<script src="https://www.appypie.com/academy/assets/frontend/default/js/bootstrap-tagsinput.min.js"></script>
<script src="https://www.appypie.com/academy/assets/frontend/default/js/custom.js"></script> -->
<!-- old backup -->
<script>
function toggle_lesson_view() {
$('#lesson-container').toggleClass('justify-content-center');
$("#video_player_area").toggleClass("order-md-1");
$("#lesson_list_area").toggleClass("col-lg-5 order-md-1");
}
</script>
<div class="footer-section">
<div class="section-9-1 sec">
<div data-index="7" class="ft-wiget-nz">
<div class="container-lg">
<div class="certi-par">
<div class="certi-icon">
<!-- <img src="https://d1vtrz601dorhd.cloudfront.net/img/lock-shield.svg" alt="Sheild" width="75px"> -->
<span class="sheild-bg sprite"></span>
</div>
<div class="certi-desc">Appy Pie’s platform helps you deliver enterprise-class security and compliance to your customers through every interaction.</div>
<div class="certi-footer">
<a class="certi-footer-btn" href="https://www.appypie.com/security#GDPR" aria-label="Read more about EU-GDPR COMPLIANT">EU-GDPR COMPLIANT</a>
<a href="https://www.appypie.com/security#PCI-DSS" aria-label="Read more about PCI-DSS">
<!-- <img src="https://d1vtrz601dorhd.cloudfront.net/img/pcidss-logo.png" alt="pci dss" width="104"> -->
<span class="pci-bg sprite"></span>
</a>
<a href="https://www.appypie.com/security#ISO-27001" aria-label="Read more about ISO-27001">
<!-- <img src="https://d1vtrz601dorhd.cloudfront.net/img/iso-img.png" alt="ISO" width="50"> -->
<span class="iso-bg sprite"></span>
</a>
<a class="certi-footer-btn" href="https://www.appypie.com/security#SOC-2" aria-label="Read more about SOC-1 & SOC-2 COMPLIANT">SOC-1 & SOC-2 COMPLIANT</a>
</div>
</div>
<div class="topFooter">
<div class="row">
<div class="col-md-3 col-sm-6" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
<ul class="footer-nav-list pl-0">
<li class="footer-nav-heading">
<h5>Products</h5></li>
<li> <a target="_blank" rel="noreferrer" href="https://www.appypie.com/app-builder/appmaker" itemprop="url"><span itemprop="name">App Maker</span></a> </li>
<li> <a target="_blank" rel="noreferrer" href="https://www.appypie.com/website-builder" itemprop="url"><span itemprop="name">Website Builder</span></a> </li>
<li> <a target="_blank" rel="noreferrer" href="https://www.appypie.com/chatbot/builder" itemprop="url"><span itemprop="name">Chatbot Builder</span></a> </li>
<li> <a target="_blank" rel="noreferrer" href="https://www.appypie.com/live-chat" itemprop="url"><span itemprop="name">Live Chat Software</span></a> </li>
<li> <a target="_blank" rel="noreferrer" href="https://www.appypie.com/design/" itemprop="url"><span itemprop="name">Graphic Design</span></a> </li>
<li> <a target="_blank" rel="noreferrer" href=" https://www.appypie.com/connect/" itemprop="url"><span itemprop="name">App Integration</span></a> </li>
<!--<li> <a target="_blank" rel="noreferrer" href="https://www.appypie.com/domains" itemprop="url"><span itemprop="name">Domains</span></a> </li>-->
<li> <a target="_blank" rel="noreferrer" href="https://www.appypie.com/how-to-create-an-app" itemprop="url"><span itemprop="name">How to Create an App</span></a> </li>
</ul>
</div>
<div class="col-md-3 col-sm-6" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
<ul class="footer-nav-list pl-0">
<li class="footer-nav-heading">
<h5>High Rated </h5></li>
<li><a href="https://www.appypie.com/academy/create-mobile-apps-for-android-and-ios-without-any-coding" itemprop="url"><span itemprop="name">App Developer Certification Course</span></a></li>
<li><a href="https://www.appypie.com/academy/youtube-channel-design" itemprop="url"><span itemprop="name">Youtube Channel Design</span></a></li>
<li><a href="https://www.appypie.com/academy/instagram-marketing" itemprop="url"><span itemprop="name">Instagram Marketing</span></a></li>
<li><a href="https://www.appypie.com/academy/learn-graphic-design" itemprop="url"><span itemprop="name">Learn Graphic Design</span></a></li>
<li><a href="https://www.appypie.com/academy/what-is-seo" itemprop="url"><span itemprop="name">What is SEO</span></a></li>
<li><a href="https://www.appypie.com/academy/mobile-app-marketing" itemprop="url"><span itemprop="name">Mobile App Marketing</span></a></li>
<li><a href="https://www.appypie.com/academy/principles-of-entrepreneurship" itemprop="url"><span itemprop="name">Principles of Entrepreneurship</span></a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
<ul class="footer-nav-list pl-0">
<li class="footer-nav-heading">
<h5>Popular Lessons</h5></li>
<li><a href="https://www.appypie.com/academy/mobile-app-marketing/benefits-of-mobile-app-marketing" itemprop="url"><span itemprop="name">Mobile App Marketing Benefits</span></a></li>
<li><a href="https://www.appypie.com/academy/youtube-channel-design/welcome-to-canva" itemprop="url"><span itemprop="name">Welcome to Canva</span></a></li>
<li><a href="https://www.appypie.com/academy/instagram-marketing/What-Is-Instagram" itemprop="url"><span itemprop="name">What is Instagram</span></a></li>
<li><a href="https://www.appypie.com/academy/how-to-check-company-details/introduction-to-web-research" itemprop="url"><span itemprop="name">Introduction to Web Research</span></a></li>
<li><a href="https://www.appypie.com/academy/b2b-lead-generation/introduction-to-lead-generation" itemprop="url"><span itemprop="name">Lead Generation Introduction</span></a></li>
<li><a href="https://www.appypie.com/academy/facebook-marketing-strategy/how-to-optimize-your-facebook-page-description" itemprop="url"><span itemprop="name">Optimize your Facebook page</span></a></li>
</ul>
</div>
<div class="col-md-3 col-sm-6" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
<ul class="footer-nav-list pl-0">
<li class="footer-nav-heading">
<h5>Popular Categories</h5></li>
<li><a href="https://www.appypie.com/academy/courses/design" itemprop="url"><span itemprop="name">Design Course</span></a></li>
<li><a href="https://www.appypie.com/academy/courses/marketing" itemprop="url"><span itemprop="name">Marketing Course</span></a></li>
<li><a href="https://www.appypie.com/academy/courses/development" itemprop="url"><span itemprop="name">Development Course</span></a></li>
<li><a href="https://www.appypie.com/academy/courses/office-productivity" itemprop="url"><span itemprop="name">Office Productivity Course</span></a></li>
<li><a href="https://www.appypie.com/academy/courses/marketing-fundamentals" itemprop="url"><span itemprop="name">Marketing Fundamentals Course</span></a></li>
<li><a href="https://www.appypie.com/academy/courses/small-business-marketing" itemprop="url"><span itemprop="name">Small Business Marketing</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-sec">
<div class="container-lg">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 footerlogo"> <a href="https://www.appypie.com/academy/"> <img class="" src="https://d1vtrz601dorhd.cloudfront.net/img/footer-logo-dark.svg" width="203" height="50" alt="Academy Appy Pie"> </a> </div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 p-md-0">
<div class="footerMenu" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
<div class="menu-footer-nav-container">
<ul class="nav s-nav">
<li><a title="About Us" rel="nofollow" href="https://www.appypie.com/about-us" itemprop="url"><span itemprop="name">About Us</span></a></li>
<li><a title="Terms & Conditions" rel="nofollow" href="https://www.appypie.com/terms-of-use" itemprop="url"><span itemprop="name">Terms of Use</span></a></li>
<li><a title="Privacy Policy" rel="nofollow" href="https://www.appypie.com/privacy-policy" itemprop="url"><span itemprop="name">Privacy Policy</span></a></li>
<!--<li><a title="Pricing plan" rel="nofollow" href="https://www.appypie.com/pricing-plan" itemprop="url"><span itemprop="name">Pricing</span></a></li>-->
<li><a rel="nofollow" href="https://www.appypie.com/security" itemprop="url"><span itemprop="name">Security</span></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="social_icons-footer">
<ul class="social_icons-footer">
<li class="facebook"><a href="https://www.facebook.com/AppyPieInc" target="_blank" rel="nofollow noopener" title="Facebook">Facebook<span class="fab fa-facebook-f"></span></a> </li>
<li class="twitter"><a href="https://twitter.com/AppyPieInc" target="_blank" rel="nofollow noopener" title="Twitter">Twitter <span class="fab fa-twitter"></span></a> </li>
<li class="pin"><a href="https://www.pinterest.com/appypie/" target="_blank" rel="nofollow noopener" title="Pinterest">Pinterest<span class="fab fa-pinterest-p"></span></a> </li>
<li class="blog"><a href="https://www.appypie.com/blog" target="_blank" rel="nofollow noopener" title="Appypie blog">Appypie blog<span class="fab fa-blogger-b"></span></a> </li>
<li class="linden"><a href="https://www.linkedin.com/company/appy-pie-inc/" target="_blank" rel="nofollow noopener" title="linkedin">linkedin<span class="fab fa-linkedin-in"></span></a> </li>
<li class="youtube"><a href="https://www.youtube.com/user/AppyPieInc" target="_blank" rel="nofollow noopener" title="Youtube">Youtube<span class="fab fa-youtube"></span></a> </li>
<li class="instagram"><a href="https://www.instagram.com/AppyPieInc/" target="_blank" rel="nofollow noopener" title="Instagram">Instagram<span class="fab fa-instagram"></span></a> </li>
</ul>
</div>
</div>
</div>
</div>
<div class="copyright">© 2020, <a href="https://www.appypie.com" target="_blank" rel="noreferrer" class="copyright">Appy Pie</a>. All Rights Reserved.</div>
</div>
</div>
<!--footer class="footer-area d-print-none"> <div class="container-xl"> <div class="row"> <div class="col-md-6"> <p class="copyright-text"> <a href=""><img src="https://www.appypie.com/academy/uploads/system/logo-dark.png" alt="" class="d-inline-block" width="110"></a> <a href="https://www.appypie.com/academy" target="_blank"></a> </p> </div> <div class="col-md-6"> <ul class="nav justify-content-md-end footer-menu"> <li class="nav-item"> <a class="nav-link" href="https://www.appypie.com/academy/home/about_us">About</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.appypie.com/academy/home/privacy_policy">Privacy policy</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.appypie.com/academy/home/terms_and_condition">Terms & condition</a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.appypie.com/academy/home/login"> Login </a> </li> </ul> </div> </div> </div> </footer-->
<!-- PAYMENT MODAL -->
<!-- Modal -->
<div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content payment-in-modal">
<div class="modal-header">
<h5 class="modal-title">Checkout!</h5>
<button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<form action="https://www.appypie.com/academy/paypal_checkout" method="post">
<input type="hidden" class="total_price_of_checking_out" name="total_price_of_checking_out" value="">
<button type="submit" class="btn btn-default paypal" >
Paypal </button>
</form>
</div>
<div class="col-md-6">
<form action="https://www.appypie.com/academy/stripe_checkout" method="post">
<input type="hidden" class="total_price_of_checking_out" name="total_price_of_checking_out" value="">
<button type="submit" class="btn btn-primary stripe" >
Stripe </button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<!-- Modal -->
<div class="modal fade multi-step" id="EditRatingModal" tabindex="-1" role="dialog" aria-hidden="true" reset-on-close="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content edit-rating-modal">
<div class="modal-header">
<h5 class="modal-title step-1" data-step="1">Step 1</h5>
<h5 class="modal-title step-2" data-step="2">Step 2</h5>
<h5 class="m-progress-stats modal-title"> of <span class="m-progress-total"></span></h5>
<button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> </button>
</div>
<div class="m-progress-bar-wrapper">
<div class="m-progress-bar"> </div>
</div> <div class="modal-body step step-1">
<div class="container-fluid">
<div class="row"> <div class="col-md-6">
<div class="modal-rating-box"> <h4 class="rating-title">How would you rate this course overall?</h4>
<fieldset class="your-rating">
<input type="radio" id="star5" name="rating" value="5" /> <label class = "full" for="star5"></label>
<input type="radio" id="star4" name="rating" value="4" /> <label class = "full" for="star4"></label>
<input type="radio" id="star3" name="rating" value="3" /> <label class = "full" for="star3"></label>
<input type="radio" id="star2" name="rating" value="2" /> <label class = "full" for="star2"></label>
<input type="radio" id="star1" name="rating" value="1" /> <label class = "full" for="star1"></label>
</fieldset>
</div>
</div>
<div class="col-md-6">
<div class="modal-course-preview-box">
<div class="card">
<img class="card-img-top img-fluid" id = "course_thumbnail_1" alt="">
<div class="card-body">
<h5 class="card-title" class = "course_title_for_rating" id = "course_title_1"></h5>
<p class="card-text" id = "instructor_details">
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-body step step-2">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="modal-rating-comment-box">
<h4 class="rating-title">Write a public review</h4>
<textarea id = "review_of_a_course" name = "review_of_a_course" placeholder="Describe your experience what you got out of the course and other helpful highlights. What did the instructor do well and what could use some improvement?" maxlength="65000" class="form-control">
</textarea>
</div>
</div>
<div class="col-md-6">
<div class="modal-course-preview-box">
<div class="card">
<img class="card-img-top img-fluid" id = "course_thumbnail_2" alt="">
<div class="card-body">
<h5 class="card-title" class = "course_title_for_rating" id = "course_title_2"></h5>
<p class="card-text"> - av kumar </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<input type="hidden" name="course_id" id = "course_id_for_rating" value="">
<div class="modal-footer">
<button type="button" class="btn btn-primary next step step-1" data-step="1" onclick="sendEvent(2)">Next</button>
<button type="button" class="btn btn-primary previous step step-2 mr-auto" data-step="2" onclick="sendEvent(1)">Previous</button>
<button type="button" class="btn btn-primary publish step step-2" onclick="publishRating($('#course_id_for_rating').val())" id = "">Publish</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<style>
.menu-footer-nav-container > .nav {
justify-content: center;
}
</style>
<script type="text/javascript">
setTimeout(function() {
var cookiesHeadID = document.getElementsByTagName("head")[0];
var cookiesScript = document.createElement('script');
cookiesScript.type = 'text/javascript';
cookiesScript.src = 'https://accounts.appypie.com/assets/ui-js/cookies.js';
cookiesHeadID.appendChild(cookiesScript);
}, 13000);
function publishRating(course_id) {
//var checkCourseid = course_id;
var review = $('#review_of_a_course').val();
var starRating = 0;
$('input:radio[name="rating"]:checked').each(function() {
starRating = $('input:radio[name="rating"]:checked').val();
});
$.ajax({
type : 'POST',
url : 'https://www.appypie.com/academy/rate_course',
data : {course_id : course_id, review : review, starRating : starRating},
success : function(response) {
console.log(response);
$('#EditRatingModal').modal('hide');
location.reload();
}
});
}
</script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/vendor/jquery-3.4.1.min.js"></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/popper.min.js" async></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/bootstrap.min.js"></script>
<!-- <script src="https://d1vtrz601dorhd.cloudfront.net/js/slick.min.js"></script> -->
<script src="https://d1vtrz601dorhd.cloudfront.net/js/select2.min.js" async></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/tinymce.min.js" async></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/multi-step-modal.js" async></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/jquery.webui-popover.min.js" async></script>
<!-- <script src="https://content.jwplatform.com/libraries/O7BMTay5.js" async></script> -->
<script src="https://d1vtrz601dorhd.cloudfront.net/js/main.js" async></script>
<!-- <script src="https://www.appypie.com/academy/assets/frontend/default/js/main.js"></script> -->
<!-- <script src="https://d1vtrz601dorhd.cloudfront.net/js/toastr.min.js"></script> -->
<script src="https://d1vtrz601dorhd.cloudfront.net/js/jquery.nestable.min.js" charset="utf-8" async></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable.js" charset="utf-8"></script> -->
<script src="https://d1vtrz601dorhd.cloudfront.net/js/jquery.form.min.js" async></script>
<script src="https://d1vtrz601dorhd.cloudfront.net/js/bootstrap-tagsinput.min.js" async></script>
<link rel="stylesheet" href="https://d1vtrz601dorhd.cloudfront.net/css/toastr.min.css" type="text/css">
<script src="https://d1vtrz601dorhd.cloudfront.net/js/toastr.min.js"></script>
<!-- SHOW TOASTR NOTIFIVATION -->
<script>
///// sw registration /////
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('https://www.appypie.com/academy/service-worker.js')
//.register('../service-worker.js')
//.then(function() { console.log("Service Worker Registered"); });
}
$('.academy-sm-nav-toggle').click(function(){
$('.mobile-main-nav').addClass('nav-is-visible moves-out');
$('.category').removeClass('is-hidden');
$('.mobile-overlay').toggleClass('is-visible')
});
$('.go-back-btn').click(function(){
//alert('working')
$('.mobile-main-nav').removeClass('nav-is-visible moves-out');
$('.category').addClass('is-hidden');
$('.mobile-overlay').toggleClass('is-visible')
});
// $('.mobile-search-trigger').click(function(){
// $(this).toggleClass('search-is-visible');
// $('.mobile-search').toggleClass('is-visible')
// });
</script>
<script type="text/javascript">
function showAjaxModal(url)
{
// SHOWING AJAX PRELOADER IMAGE
jQuery('#modal_ajax .modal-body').html('<div style="text-align:center;margin-top:200px;"><img src="/assets/images/preloader.gif" /></div>');
// LOADING THE AJAX MODAL
jQuery('#modal_ajax').modal('show', {backdrop: 'true'});
// SHOW AJAX RESPONSE ON REQUEST SUCCESS
$.ajax({
url: url,
success: function(response)
{
jQuery('#modal_ajax .modal-body').html(response);
}
});
}
</script>
<!-- (Ajax Modal)-->
<div class="modal fade" id="modal_ajax">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal</h4>
</div>
<div class="modal-body" style="height:500px; overflow:auto;">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function confirm_modal(delete_url)
{
jQuery('#modal-4').modal('show', {backdrop: 'static'});
document.getElementById('delete_link').setAttribute('href' , delete_url);
}
</script>
<!-- (Normal Modal)-->
<div class="modal fade" id="modal-4">
<div class="modal-dialog">
<div class="modal-content" style="margin-top:100px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" style="text-align:center;">Are you sure to delete this information ?</h4>
</div>
<div class="modal-footer" style="margin:0px; border-top:0px; text-align:center;">
<a href="#" class="btn btn-danger" id="delete_link">Delete</a>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<script>
///// sw registration /////
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/service-worker.js')
//.then(function() { console.log("Service Worker Registered"); });
}
</script>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"5534ccca24","applicationID":"1016663403","transactionName":"YgZRMRBXX0tSBURYWVtMZhcLGVBbUgJVXE8aCl0BB04fSFsW","queueTime":0,"applicationTime":69,"atts":"TkFSR1hNTEU=","errorBeacon":"bam.nr-data.net","agent":""}</script></body>
</html>
