Shortcodes and Page Markups

Shortcodes and page coding are for ShoepPena Store

Alert Boxes

  
<div class="alert-message success">

<i class="fa fa-check-circle"></i> success message You successfully read this important message.</div>

<div class="alert-message alert">

<i class="fa fa-info-circle"></i> Alert message This alert needs your attention.</div>

<div class="alert-message warning">

<i class="fa fa-exclamation-triangle"></i> Warning message Warning! Best check yo self.</div>

<div class="alert-message error">

<i class="fa fa-exclamation-circle"></i> Error message Oh snap! Change a few things up</div>

</div>

  

Tables 

  
<div class="post-table">

<table>

    <thead>

<tr>

        <th>First Name</th>

        <th>Last Name</th>

        <th>Hero Title</th>

      </tr>

</thead>

    <tbody>

<tr>

        <td data-label="First Name">Bruce</td>

        <td data-label="Last Name">Wayne</td>

        <td data-label="Hero Title">Batman</td>

      </tr>

<tr>

        <td data-label="First Name">Peter</td>

        <td data-label="Last Name">Parker</td>

        <td data-label="Hero Title">Spiderman</td>

      </tr>

<tr>

        <td data-label="First Name">Bruce</td>

        <td data-label="Last Name">Banner</td>

        <td data-label="Hero Title">The Hulk</td>

      </tr>

<tr>

        <td data-label="First Name">Clark</td>

        <td data-label="Last Name">Kent</td>

        <td data-label="Hero Title">Superman</td>

      </tr>

</tbody>

</table>

</div>

  

  
<div class="contact-form">

<div class="contact section" id="contact" style="display: block;">

<div class="widget ContactForm" id="ContactForm1">

<div class="contact-form-widget">

<div class="form">

<form name="contact-form">

<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />

                                <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />

                                <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>

                                <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

                                <br />

<div style="text-align: center; width: 100%;">

<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">

</div>

<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

  

How TO - Slideshow

 

  
 <div class="slideshow-container">
      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <a href=''>
        <img  
 
class='xcxcxc' src="img1.jpg" style="width:100% ;     border-radius: 20px
px
;
" />
        <div class="text">Shopping</div>
      </a></div>
      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <a href=''>
        <img  
 class='xcxcxc' src="img2.jpg" style="width:100%" />
        <div class="text">Shopping</div>
      </a></div>
      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <a href=''>
        <img  
 class='xcxcxc' src="img3.jpg" style="width:100%" />
        <div class="text">Shopping</div>
      </a></div>
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br />
    <div style="text-align:center">
     
      <span class="dot" onclick="currentSlide(0)"></span>
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
    </div>