### Event Listing Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-travel-reserve.html

This snippet displays an example of how events are listed, including event title, date, time, location, and attendee information. It uses image tags for event pictures and avatars, and links for more details.

```HTML
[
![](images/pictures/18l.jpg)

28 August 2025 - 09:00 AM **Paintball at the Park** Texas National Park, Texas ![](images/avatars/1s.png) ![](images/avatars/4s.png) ![](images/avatars/5s.png) +135 others going

](#)[
![](images/pictures/14l.jpg)

04 October 2025 - 10:30 AM **Typography Festival** Texas National Park, Texas ![](images/avatars/1s.png) ![](images/avatars/2s.png) ![](images/avatars/5s.png) +15k others going

](#)[View your Events](#)
```

--------------------------------

### StickyMobile Event Schedule Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-photo-detailed-1.html

Provides an example of how event schedules are structured and displayed within the StickyMobile framework. This snippet likely includes HTML for event details and potentially JavaScript for dynamic updates.

```HTML
<div class="event-schedule">
  <h3>Event Schedule</h3>
  <div class="event-day">
    <h4>APR 17</h4>
    <p>09:00 AM - 02:30 PM</p>
    <p>Intro to our Event and host speach.</p>
  </div>
  <div class="event-day">
    <h4>APR 18</h4>
    <p>09:00 AM - 02:30 PM</p>
    <p>Intro to our Event and host speach.</p>
    <p>05:00 PM - 00:00 AM</p>
    <p>After Party. Let's dance and mingle!</p>
  </div>
</div>
```

--------------------------------

### StickyMobile - Table of Contents Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-learning-chapters.html

Demonstrates a classic table of contents structure for a mobile website, including sections for preface, installation, page structure, and performance optimizations. This structure helps users navigate through different parts of the website.

```HTML
<h5>Classic Table of Contents</h5>

[Preface](#) [Perquisites](#) [Installation](#) [Page Structure](#) [Component Elements](#) [PWA Configuration](#) [Offline Support](#) [Content Adding](#) [Performance Optimisations](#) [Final Words](#)

[StickyMobile](#)
```

--------------------------------

### StickyMobile Event Listing Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-events-interests.html

Provides an example of how events are listed within the StickyMobile framework, including event details, date, time, location, and attendee information. This structure is designed to display event information clearly.

```HTML
My Events
=========

List your Events Here. It's easy

[](#)

[
![](images/pictures/18l.jpg)

28 August 2025 - 09:00 AM **Paintball at the Park** Texas National Park, Texas ![](images/avatars/1s.png) ![](images/avatars/4s.png) ![](images/avatars/5s.png) +135 others going

](#)[
![](images/pictures/14l.jpg)

04 October 2025 - 10:30 AM **Typography Festival** Texas National Park, Texas ![](images/avatars/1s.png) ![](images/avatars/2s.png) ![](images/avatars/5s.png) +15k others going

](#)[View your Events](#)

[Get Tickets](#)[](#)
```

--------------------------------

### PWA Principles and Setup

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-learning-course-2.html

This snippet covers the fundamental principles of Progressive Web Apps (PWAs). It is a foundational chapter for understanding PWA development.

```Markdown
#### Basic PWA Principles

51 Minutes
```

--------------------------------

### List Styling Options

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/portfolio-instant.html

Provides examples of different list styles, including unordered and ordered lists, demonstrating basic HTML list formatting.

```HTML
<h3> Lists</h3>

Select the thickness of your font with ease. Add a secondary class that will change weights.

*   List
*   List
*   List

*   List
*   List
*   List

1.  List
2.  List
3.  List
```

--------------------------------

### StickyMobile - PWA Home Screen Installation

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/walkthrough.html

Provides guidance on how users can add the StickyMobile website to their home screen, enabling it to function like a native application. Includes instructions for Safari.

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StickyMobile - PWA Installation</title>
    <link rel="manifest" href="manifest.json">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon" href="app/icons/icon-192x192.png">
</head>
<body>
    <h1>Install StickyMobile</h1>
    <p>Add Sticky on your Home Screen for app-like access.</p>
    <button id="installButton">Add to Home Screen</button>
    <p>For Safari users: Open your Safari menu and tap "Add to Home Screen".</p>

    <script>
        // Basic PWA installation prompt logic (requires service worker and manifest)
        let deferredPrompt;
        const installButton = document.getElementById('installButton');

        window.addEventListener('beforeinstallprompt', (e) => {
          e.preventDefault();
          deferredPrompt = e;
          installButton.style.display = 'block';
        });

        installButton.addEventListener('click', (e) => {
          installButton.style.display = 'none';
          deferredPrompt.prompt();
          deferredPrompt.userChoice.then((choiceResult) => {
            if (choiceResult.outcome === 'accepted') {
              console.log('User accepted the A2HS prompt');
            } else {
              console.log('User dismissed the A2HS prompt');
            }
            deferredPrompt = null;
          });
        });
    </script>
</body>
</html>
```

--------------------------------

### Image Gallery Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/portfolio-instant.html

Demonstrates how to implement an image gallery within an HTML page. It includes basic HTML structure for displaying images, suitable for showcasing visual content.

```HTML
<h4>This is an Image Gallery</h4>

This page is not WordPress, it's an HTML website. Yes, that's right. but you can convert it to WordPress yourself or hire an expert from Envato Studio.

![img](images/empty.png)

![img](images/empty.png)

![img](images/empty.png)
```

--------------------------------

### List Styling Options (HTML)

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-consulting-services-2.html

Provides examples of different list structures (unordered and ordered) that can be used within the website. These lists are styled to present information clearly.

```HTML
<ul>
  <li>List</li>
  <li>List</li>
  <li>List</li>
</ul>

<ol>
  <li>List</li>
  <li>List</li>
  <li>List</li>
</ol>
```

--------------------------------

### Image Gallery Example (HTML)

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-content-article-2.html

Illustrates the structure for an image gallery, likely using thumbnail links that open larger images. This is a common pattern for showcasing visual content.

```HTML
<a href="images/pictures/21.jpg" title="Image Title or Caption"><img src="images/empty.png" alt=""></a>
<a href="images/pictures/14.jpg" title="Image Title or Caption"><img src="images/empty.png" alt=""></a>
<a href="images/pictures/18.jpg" title="Image Title or Caption"><img src="images/empty.png" alt=""></a>
```

--------------------------------

### StickyMobile Consulting Pack Integration

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-consulting-splash.html

This snippet demonstrates how to integrate the consulting pack for StickyMobile, enhancing PWA pages for businesses. It typically involves linking to a 'consulting.html' file for setup.

```HTML
<a href="consulting.html">Get Started</a>
```

--------------------------------

### Task Management Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-tasklist.html

This snippet demonstrates a simulated task list for daily tasks. It allows users to add their own tasks or connect to a CMS for admin panel management. The default is a template.

```HTML
<h3>Task Title</h3>

**To:** Enabled

**Email:** name@domain.com

**Due Date:** 15th Dec 2030

##### Task Notes

Upgrade StickyMobile to include features requested by customers. Update is fully compatible with V1.0.

[Mark Done](#)

[Do it later](#)
```

--------------------------------

### StickyMobile Bootstrap Integration

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-hotel-detailed-1.html

This snippet likely demonstrates the initial setup or integration of StickyMobile with Bootstrap, a popular front-end framework. It would typically involve linking CSS and JavaScript files.

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StickyMobile Bootstrap Example</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- StickyMobile CSS (assuming a local file or CDN) -->
    <link rel="stylesheet" href="css/sticky-mobile.css">
</head>
<body>
    <!-- Your StickyMobile content here -->

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- StickyMobile JS (assuming a local file or CDN) -->
    <script src="js/sticky-mobile.js"></script>
</body>
</html>
```

--------------------------------

### StickyMobile Bootstrap Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-event-2.html

This snippet demonstrates the basic structure and navigation for the StickyMobile project, likely using Bootstrap for styling. It includes links to different sections like Home, Features, and Pages.

```HTML
<nav>
  <a href="index.html">Home</a>
  <a href="index-components.html">Features</a>
  <a href="index-pages.html">Pages</a>
  <a href="index-search.html">Search</a>
  <a href="#">Settings</a>
</nav>
```

--------------------------------

### Starter HTML and Documentation

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/new.html

The project includes a simple starter HTML file and comprehensive documentation for all features, complementing the Bootstrap 5 documentation. Video documentation is also planned.

```HTML
<!-- Includes simple _starter.html -->
<!-- Includes all features documentation -->
<!-- Video Documentation Coming Soon -->
```

--------------------------------

### Display Travel Package with Save and Offer Options

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-listing-results-1.html

This snippet shows another example of displaying a travel package, featuring options to save to favorites and get an offer. It includes details like reviews, price, and availability.

```HTML
Woodland Cabin
--------------

53 Reviews

$248.99
=======

3 Places Available Booking: Immediately

[Save to Favorites](#)

[Book Now](#)

[Get Offer](#)
```

--------------------------------

### HTML Live Walkthrough Announcement

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-listing-realestate-detailed-2.html

Announces a live walkthrough for a new product release, specifically the Apple Watch. It invites users to join and watch the event live, with an option to schedule a call.

```HTML
<!DOCTYPE html>
<html>
<head>
<title>Live Walkthrough</title>
</head>
<body>

<h1>Location Live  
Walkthrough</h1>

<p>We are here to show off the brand new Apple Watch Release. Join us and watch it live!</p>

<a href="#">Schedule WhatsApp Call</a>

</body>
</html>
```

--------------------------------

### StickyMobile Splash Screen Examples

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/splash.html

This section provides links to various splash screen designs for the StickyMobile template. These include 'Dialpad Designed Icon Screen', 'Large, Rounded Cards Starting Screen', and animated options with illustrations and call-to-action buttons.

```HTML
[Landing Grid 3x3 **Dialpad Designed Icon Screen**](splash-landing-1.html) [Landing Thumbs **Large, Rounded Cards Starting Screen**](splash-landing-2.html) [Splash 1 **Large Typography and Top Icon**](splash-2.html) [Splash 2 **Animated Button and Large Illustration**](splash-3.html) [Splash 3 **Multiple Options and Large Illustrations**](splash-4.html) [Walkthrough 1 **The Default Sticky Starting Page**](splash-walk-1.html) [Walkthrough 2 **Multiple Options and Action Sheets**](splash-walk-2.html) [Walkthrough 3 **Presentation with CTA and Illustrations**](splash-walk-3.html) [Walkthrough 4 **Double Tall Buttons for Actions**](splash-walk-4.html) [Cover Slider **The full power of a Walkthrough**](page-cover.html)
```

--------------------------------

### StickyMobile Bootstrap Framework Overview

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-learning-home-3.html

This snippet provides a general overview of the StickyMobile framework, showcasing its structure and key sections like featured courses, hot deals, and settings. It's built using HTML and CSS.

```HTML
<!-- Navigation and Header -->
<nav>
  <a href="index.html">Home</a>
  <a href="index-components.html">Features</a>
  <a href="index-pages.html">Pages</a>
  <a href="index-search.html">Search</a>
  <a href="#">Settings</a>
</nav>

<!-- Featured Courses Section -->
<section>
  <h3>Featured Courses</h3>
  <a href="#">
    <img src="images/pictures/14s.jpg" alt="Course Image">
    <h4>Essence of Typography</h4>
    <p>Based on 331 Reviews</p>
    <p>$19.99</p>
    <p>$29.99 (- 40%)</p>
  </a>
  <a href="#">
    <img src="images/pictures/18s.jpg" alt="Course Image">
    <h4>Photography Essentials</h4>
    <p>Based on 331 Reviews</p>
    <p>$39.99</p>
    <p>$89.99 (- 40%)</p>
  </a>
</section>

<!-- Latest Courses Section -->
<section>
  <h3>Latest Courses</h3>
  <a href="#">
    <img src="images/pictures/14s.jpg" alt="Course Image">
    <h4>Mobile PWA's</h4>
    <p>1 hour, 24 minutes</p>
  </a>
  <a href="#">
    <img src="images/pictures/16s.jpg" alt="Course Image">
    <h4>Hybrid Apps NEW</h4>
    <p>5 hour, 32 minutes</p>
  </a>
  <a href="#">
    <img src="images/pictures/17s.jpg" alt="Course Image">
    <h4>Optimizing Performance</h4>
    <p>2 hour, 14 minutes</p>
  </a>
</section>

<!-- Settings Section -->
<section>
  <h3>Settings</h3>
  <p>Flexible and Easy to Use</p>
  <div>
    <label>Dark Mode</label>
    <input type="checkbox">
  </div>
  <div>
    <label>Page Highlight</label>
    <p>16 Colors Highlights Included</p>
  </div>
  <div>
    <label>Background Color</label>
    <p>10 Page Gradients Included</p>
  </div>
</section>

<!-- Footer -->
<footer>
  <p>Copyright © Enabled 2017. All Rights Reserved.</p>
  <a href="#">Privacy Policy</a> | <a href="#">Terms and Conditions</a> | <a href="#">Back to Top</a>
</footer>
```

--------------------------------

### HTML Form Wizard Example - Product Survey

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/component-form-wizard.html

This HTML snippet showcases a product survey form wizard using Sticky Mobile. It guides users through questions about age group, product used, and recommendation, demonstrating sequential data collection. It includes dropdowns for various choices.

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Survey</title>
    <!-- Link to Sticky Mobile CSS -->
    <link rel="stylesheet" href="path/to/sticky-mobile.css">
</head>
<body>

    <div class="form-wizard-step" id="product-survey-step-1">
        <h1>Product Survey</h1>
        <p>1/3</p>
        <p>This is just a dummy example of the form wizard. You can use any field from the [Component Inputs](component-inputs.html).</p>
        
        <h5>Choose your Age Group</h5>
        <div class="form-group">
            <label for="age-group-ps">Age Group</label>
            <select id="age-group-ps">
                <option value="">Select A Value</option>
                <option value="20-25">20 - 25</option>
                <option value="25-30">25 - 30</option>
                <option value="30-35">30 - 35</option>
                <option value="35-40">35 - 40</option>
                <option value="40-50">40 - 50</option>
                <option value="50-55">50 - 55</option>
                <option value="55-60">55 - 60</option>
                <option value="60-65">60 - 65</option>
            </select>
        </div>
        <a href="#product-info-step-2" class="btn">Next Step</a>
    </div>

    <div class="form-wizard-step" id="product-info-step-2" style="display: none;">
        <h1>Product Info</h1>
        <p>2/3</p>
        <p>This is just a dummy example of the form wizard. You can use any field from the [Component Inputs](component-inputs.html).</p>
        
        <h5>Which Product did you use?</h5>
        <div class="form-group">
            <label for="product-used-ps">Product</label>
            <select id="product-used-ps">
                <option value="">Select A Value</option>
                <option value="sticky">Sticky</option>
                <option value="appkit">AppKit</option>
                <option value="azures">Azures</option>
                <option value="duopwa">DuoPWA</option>
            </select>
        </div>
        <a href="#product-survey-step-1" class="btn">Back</a>
        <a href="#satisfaction-step-3" class="btn">Next Step</a>
    </div>

    <div class="form-wizard-step" id="satisfaction-step-3" style="display: none;">
        <h1>Satisfaction</h1>
        <p>3/3</p>
        <p>This is just a dummy example of the form wizard. You can use any field from the [Component Inputs](component-inputs.html).</p>
        
        <h5>What did you like most?</h5>
        <div class="form-group">
            <label for="like-most-ps">Liked Aspect</label>
            <select id="like-most-ps">
                <option value="">Select A Value</option>
                <option value="code-quality">Code Quality</option>
                <option value="design-quality">Design Quality</option>
                <option value="feature-availability">Feature Availability</option>
                <option value="author-support">Author Support</option>
            </select>
        </div>
        <a href="#product-info-step-2" class="btn">Back</a>
        <a href="#thank-you-survey-2" class="btn">Next Step</a>
    </div>

    <div class="form-wizard-step" id="thank-you-survey-2" style="display: none;">
        <h1>Thank you!</h1>
        <p>We'll get back to you if we need more details from you.</p>
        <a href="#" class="btn">Awesome!</a>
    </div>

    <!-- Link to Sticky Mobile JS -->
    <script src="path/to/sticky-mobile.js"></script>
    <script>
        // Basic JS for step navigation (Sticky Mobile might have its own)
        document.querySelectorAll('.form-wizard-step a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId.startsWith('#')) {
                    document.querySelectorAll('.form-wizard-step').forEach(step => {
                        step.style.display = 'none';
                    });
                    document.querySelector(targetId).style.display = 'block';
                }
            });
        });
    </script>
</body>
</html>
```

--------------------------------

### Text Slider Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/component-carousels.html

Provides an example of a text slider, allowing for the sliding of text elements. This is useful for displaying testimonials, quotes, or dynamic text content.

```HTML
<!-- Example for Text Slider -->
<div class="text-slider-container">
  <div class="text-slider">
    <div class="slide-text">The code is always great with any Enabled template...</div>
    <div class="slide-text">The best support I have ever had...</div>
    <div class="slide-text">Another great testimonial here...</div>
  </div>
</div>
```

--------------------------------

### StickyMobile Task Display Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-tasks-sort.html

This snippet shows an example of how tasks are displayed, including completion status, priority, assigned team, and deadlines. It uses placeholder images for team members.

```HTML
<h3>Payment Gateways</h3>

5/10 Tasks Completed

Integration of payment gateways to Project

OVERDUE HIGH PRIORITY

Assigned TEAM

![](images/empty.png) ![](images/empty.png) ![](images/empty.png) ![](images/empty.png) ![](images/empty.png)

09:00 - 12:00 AM

3 May
```

--------------------------------

### StickyMobile Project Overview

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-admin-home-1.html

This snippet provides a general overview of the StickyMobile project, including navigation links to different sections like Home, Features, Pages, Search, and Settings. It also displays key performance indicators such as Weekly Income, New Users, and User Interactions.

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StickyMobile BootStrap</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <a href="index.html">Sticky Mobile</a>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="index-components.html">Features</a></li>
                <li><a href="index-pages.html">Pages</a></li>
                <li><a href="index-search.html">Search</a></li>
                <li><a href="#">Settings</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="welcome-section">
            <h1>Welcome Back</h1>
            <div class="user-info">
                <img src="images/pictures/faces/2s.png" alt="User Avatar">
                <p>Jack Doeson</p>
            </div>
            <div class="time-frame-selector">
                <span>Select Time Frame:</span>
                <button>Last 7 Days</button>
                <button>Last 15 Days</button>
                <button>Last 30 Days</button>
                <button>Last 3 Months</button>
                <button>Last 6 Months</button>
            </div>
            <div class="stats-summary">
                <div class="stat-item">
                    <p class="value">$1.150</p>
                    <p class="label">Weekly Income</p>
                </div>
                <div class="stat-item">
                    <p class="value">15.3k</p>
                    <p class="label">New Users</p>
                </div>
                <div class="stat-item">
                    <p class="value">35.1k</p>
                    <p class="label">New Users</p>
                </div>
                <div class="stat-item">
                    <p class="value">1.361</p>
                    <p class="label">User Interactions</p>
                </div>
            </div>
        </section>
        <section class="follower-stats">
            <h2>Follower Stats</h2>
            <div class="stats-grid">
                <div class="stat-card">
                    <h3>Bounced</h3>
                    <p>29</p>
                </div>
                <div class="stat-card">
                    <h3>Returning</h3>
                    <p>15</p>
                </div>
                <div class="stat-card">
                    <h3>New</h3>
                    <p>37</p>
                </div>
            </div>
        </section>
        <section class="projects">
            <h2>Your Projects</h2>
            <a href="#">View All</a>
            <div class="project-list">
                <div class="project-item">
                    <h3>Website Launch</h3>
                    <p>Developing</p>
                    <p>2/6</p>
                </div>
                <div class="project-item">
                    <h3>Application Update</h3>
                    <p>Complete</p>
                    <p>10/10</p>
                </div>
                <div class="project-item">
                    <h3>Server Data Transfer</h3>
                    <p>Canceled</p>
                    <p>3/5</p>
                </div>
                <div class="project-item">
                    <h3>Project Assignment</h3>
                    <p>On hold</p>
                    <p>16/23</p>
                </div>
            </div>
        </section>
        <section class="notifications">
            <h2>Notifications</h2>
            <a href="#">View All</a>
            <div class="notification-list">
                <div class="notification-item">
                    <p>Your account has been added to <strong>Web Design</strong> by <strong>Admin</strong> UPDATE</p>
                    <p>15 sec</p>
                </div>
                <div class="notification-item">
                    <p><strong>AppKit</strong> Mobile update has been completed. Good job! COMPLETE</p>
                    <p>10 min</p>
                </div>
                <div class="notification-item">
                    <p>Mockups Rejected. Event <strong>Emergency Meeting</strong> created by <strong>Admin</strong>. URGENT</p>
                    <p>10 hrs</p>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <div class="footer-content">
            <p>StickyMobile</p>
            <p>Made with by Enabled</p>
            <p>Powered by the best Mobile Website Developer on Envato Market. Elite Quality. Elite Products.</p>
            <div class="social-links">
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            </div>
        </div>
        <div class="copyright">
            Copyright © Enabled 2017. All Rights Reserved.
            <a href="#">Privacy Policy</a> |
            <a href="#">Terms and Conditions</a> |
            <a href="#">Back to Top</a>
        </div>
    </footer>
</body>
</html>
```

--------------------------------

### Display Steps to Success Guide

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-fitness-home-2.html

This section outlines a 'Steps to Success' guide for users, featuring numbered steps with accompanying images and advice on hydration, diet, routine, and form. It uses a card-like structure for each step.

```HTML
[\n\n1\n\n![img](images/fitness/4m.jpg)\n\n#### Stay Hydrated\n\nFor best results, drink at least 6 glasses of Water daily.\n\n\n](#) [\n\n2\n\n![img](images/fitness/7m.jpg)\n\n#### Eat Clean\n\nStay away from processed foods. Eat natural and clean.\n\n\n](#) [\n\n3\n\n![img](images/fitness/6m.jpg)\n\n#### Keep a Routine\n\nMake a habbit of working out each day and stick to it!\n\n\n](#) [\n\n4\n\n![img](images/fitness/8m.jpg)\n\n#### Focus on Form\n\nForm follows function. Focus on a great feel, not weights.\n\n\n](#)
```

--------------------------------

### Image Gallery Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-health-services.html

Demonstrates an image gallery using HTML. Each image is wrapped in a link, potentially for a lightbox or larger view. The description mentions it's an HTML website, not WordPress.

```HTML
<a href="images/pictures/21.jpg" title="Image Title or Caption"><img src="images/empty.png" alt="img"></a>
<a href="images/pictures/14.jpg" title="Image Title or Caption"><img src="images/empty.png" alt="img"></a>
<a href="images/pictures/18.jpg" title="Image Title or Caption"><img src="images/empty.png" alt="img"></a>
```

--------------------------------

### HTML Structure for Instant Articles

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-instant.html

This snippet demonstrates the basic HTML structure for creating 'Instant Articles' within the StickyMobile framework. It includes headings, descriptive text, and placeholders for content like image galleries and text styling options.

```HTML
<!DOCTYPE html>
<html>
<head>
    <title>StickyMobile - Instant Article</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="instant-article">
        <h1>Instant Article 1</h1>
        <p>Fast Loading and Absolutely Awesome</p>
        <div class="content">
            <p>Instant articles support any content. Designed to load in a heartbeat. They are always present on the page, and work like a charm. We filled them up with content for a demo.</p>
            <h4>This is an Image Gallery</h4>
            <div class="image-gallery">
                <a href="images/pictures/21.jpg"><img src="images/empty.png" alt="Image 1"></a>
                <a href="images/pictures/14.jpg"><img src="images/empty.png" alt="Image 2"></a>
                <a href="images/pictures/18.jpg"><img src="images/empty.png" alt="Image 3"></a>
            </div>
            <h3>Contrasts</h3>
            <p class="opacity-90">I'm set to 90% opacity.</p>
            <p class="opacity-80">I'm set to 80% opacity.</p>
            <!-- ... other opacity classes ... -->
            <h3>Font Weights</h3>
            <p class="font-weight-900">This text is set to 900 weight.</p>
            <p class="font-weight-800">This text is set to 800 weight.</p>
            <!-- ... other font weight classes ... -->
            <h3>Lists</h3>
            <ul>
                <li>List</li>
                <li>List</li>
                <li>List</li>
            </ul>
            <ol>
                <li>List</li>
                <li>List</li>
                <li>List</li>
            </ol>
        </div>
    </div>
    <a href="#" class="close-article">Close Article</a>
</body>
</html>
```

--------------------------------

### Preloaders Component

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/index-components.html

Provides examples of preloader animations for pages while content is loading.

```HTML
<a href="component-preloaders.html">Preloaders **Examples of Preloaders for your Pages**</a>
```

--------------------------------

### StickyMobile Bootstrap Template Overview

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/learning.html

This snippet provides a general overview of the StickyMobile template, highlighting its focus on learning and education content. It includes navigation links to various sections and pages within the template.

```HTML
StickyMobile BootStrap      


[Sticky Mobile](index.html)[](#)[](#)

[Home](index.html) [Features](index-components.html) [Pages](index-pages.html) [Search](index-search.html) [Settings](#)

Sticky - Learning & Education
-----------------------------

You asked, we always listen!

Pages designed for education and learning! Thank you for your feedback!

[Homepage 1](page-learning-home-3.html) [Homepage 2](page-learning-home-2.html) [Homepage 3](page-learning-home-1.html) [Course Style 1](page-learning-course-1.html) [Course Style 2](page-learning-course-2.html) [Table of Contents](page-learning-course-2.html) [Course Cards](page-learning-courses-cards.html) [Course Lists](page-learning-courses-lists.html) [Course Profile 1](page-learning-profile-1.html) [Course Profile 2](page-learning-profile-2.html) [Course Rewards](page-learning-rewards.html) [Subscriptions](page-learning-subscription.html) [Category List](page-learning-categories-list.html) [Category Card](page-learning-categories-cards.html) [Course Actions](page-learning-actions.html)

Use with Learning Pack
======================

Other elements that work great with this pack

Improve your events page further with these pages. Create to match the Learning Package.

[Media Package](media.html) [Content Package](content.html) [Components & Elements](index-components.html)

[

Pages
=====

AppStyled & Classic

Currently Viewing



](pages.html)[

Starters
========

Designed like Apps

Tap to View



](splash.html)

[StickyMobile](#)

Made with by Enabled  
  
Powered by the best Mobile Website Developer on Envato Market. Elite Quality. Elite Products.

[](#)[](#)[](#)[](#)[](#)

Copyright © Enabled 2017. All Rights Reserved.

[Privacy Policy](#) | [Terms and Conditions](#) | [Back to Top](#)

```

--------------------------------

### Image Gallery Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-rental-car-select-2.html

Displays a simple image gallery using HTML links to image files. Each image can have a title or caption.

```HTML
<a href="images/rental/1m.png" title="Image Title or Caption"><img src="images/empty.png" alt=""></a>
<a href="images/rental/4m.png" title="Image Title or Caption"><img src="images/empty.png" alt=""></a>
<a href="images/rental/8m.png" title="Image Title or Caption"><img src="images/empty.png" alt=""></a>
```

--------------------------------

### Classic Accordion Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/component-accordion.html

Demonstrates a basic accordion component with a title and collapsible content. This component is highly customizable and can be used with or without icons.

```HTML
<div>
  <h4>Accordion Title 1</h4>
  <div>
    <p>This is the accordion content. You can add any content you want to it. Really, anything! Add images, text, lists, captions or any element you want.</p>
  </div>
</div>
<div>
  <h4>Accordion Title 2</h4>
  <div>
    <p>This is the accordion content. You can add any content you want to it. Really, anything! Add images, text, lists, captions or any element you want.</p>
  </div>
</div>
<div>
  <h4>Accordion Title 3</h4>
  <div>
    <p>This is the accordion content. You can add any content you want to it. Really, anything! Add images, text, lists, captions or any element you want.</p>
  </div>
</div>
```

--------------------------------

### Product Display with Discount - HTML

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-grocery-cards.html

Displays a product with its name, origin, price, and a discount percentage. Includes links for ordering or getting offers.

```HTML
<div class="product">
  <img src="images/grocery/isolated/11.png" alt="Fresh Oranges">
  <h3>Fresh Oranges</h3>
  <p>Imported from Europe</p>
  <p class="price">$3.45 / pack</p>
  <p class="discount">SAVE 15%</p>
  <a href="#" class="order-button">Order</a>
  <a href="#" class="offer-button">Get Offer</a>
</div>
```

--------------------------------

### Subscription and Trial Information

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-learning-rewards.html

Provides information about subscribing to unlimited books and courses, including a 30-day free trial followed by a monthly subscription fee.

```HTML
Subscribe for
=============

to Unlimted
===========

Books and Courses
=================

[Start your Trial Now](#)

30 Day Free Trial then 9.99 / month
```

--------------------------------

### StickyMobile Page and Starter Options

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/rental.html

This snippet provides links to different page layouts and starter designs within the StickyMobile template. It highlights 'AppStyled & Classic' pages and 'Designed like Apps' starters, allowing users to preview or navigate to these sections.

```HTML
[Pages](pages.html)
[Starters](splash.html)
```

--------------------------------

### Highlight Accordion Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/component-accordion.html

Showcases accordions designed to work with images or captioned images. This variation maintains the collapsible functionality while integrating visual media.

```HTML
<div>
  <h4>Accordion Title 1</h4>
  <div>
    <p>This is the accordion content. You can add any content you want to it. Really, anything! Add images, text, lists, captions or any element you want.</p>
  </div>
</div>
<div>
  <h4>Accordion Title 2</h4>
  <div>
    <p>This is the accordion content. You can add any content you want to it. Really, anything! Add images, text, lists, captions or any element you want.</p>
  </div>
</div>
<div>
  <h4>Accordion Title 3</h4>
  <div>
    <p>This is the accordion content. You can add any content you want to it. Really, anything! Add images, text, lists, captions or any element you want.</p>
  </div>
</div>
```

--------------------------------

### Create Instant Articles

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/portfolio-instant.html

This snippet shows the structure for creating 'Instant Articles' designed for fast loading. It includes a title, a brief description, and placeholders for content, emphasizing a smooth user experience.

```HTML
<h1>
Instant Article 1
</h1>

Fast Loading and Absolutely Awesome

Instant articles support any content. Designed to load in a hearbeat. They are always present on the page, and work like a charm. We filled them up with contet for a demo.
```

--------------------------------

### Typography - Font Weights

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-health-actions.html

Demonstrates how to apply different font weights using CSS classes. The text examples show various weights from 500 to 900.

```HTML
### Font Weights

Select the thickness of your font with ease. Add a secondary class that will change weights.

This text is set to 900 weight.

This text is set to 800 weight.

This text is set to 700 weight.

This text is set to 600 weight.

This text is set to 500 weight.
```

--------------------------------

### StickyMobile - List Styling

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-content-article-4.html

Provides examples of different list styles, including unordered and ordered lists. These can be used to present information clearly on the mobile website.

```HTML
<ul>
  <li>List</li>
  <li>List</li>
  <li>List</li>
</ul>

<ul>
  <li>List</li>
  <li>List</li>
  <li>List</li>
</ul>

<ol>
  <li>List</li>
  <li>List</li>
  <li>List</li>
</ol>
```

--------------------------------

### StickyMobile Schedule Box Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-calendar.html

Demonstrates the structure for displaying scheduled events with time slots and descriptions. This includes event titles, times, and locations.

```HTML
###### Schedule Box

**Reminder: Call the plumber for Kitchen Sink** **Reminder: Today is Karla Black's Birthday.**

_08:00 PM  
10:00 AM_ **Closing Hours** Envato Headquarters

_10:00 AM  
12:00 AM_ **Meeting with Board** Office, Envato Headquarters

_12:00 AM  
02:00 PM_ **Lunch** McDonalds, Town Hall

_02:00 PM  
05:00 PM_ **Quarter Report** Office, Envato Headquarters

_05:00 PM  
07:00 PM_ **Get Wife from Work** Wife's Work Headquarters

_07:00 PM  
09:00 PM_ **Watch Movie** with John Doe, Carla Black

_09:00 PM  
10:00 PM_ **Call David** Call David's Office Number
```

--------------------------------

### Page Navigation - Splash Screen Starters

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/sidebars.html

Provides a link to the 'Splash' page documentation, showcasing starter templates designed with an app-like appearance.

```HTML
<a href="splash.html">Splash</a>
```

--------------------------------

### Double Thumbnail Slider Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/component-carousels.html

Showcases a double thumbnail slider, which uses square aspect ratio images. This is ideal for a grid-like display of multiple items.

```HTML
<!-- Example for Double Thumbnail Slider -->
<div class="thumbnail-slider-container">
  <div class="thumbnail-slider">
    <div class="slide square"><img src="image_square1.jpg" alt="Thumbnail 1"></div>
    <div class="slide square"><img src="image_square2.jpg" alt="Thumbnail 2"></div>
    <div class="slide square"><img src="image_square3.jpg" alt="Thumbnail 3"></div>
  </div>
</div>
```

--------------------------------

### Double Tall Slider Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/component-carousels.html

Presents a double tall slider, featuring images with a height greater than their width. This layout is suitable for showcasing portrait-oriented content.

```HTML
<!-- Example for Double Tall Slider -->
<div class="tall-slider-container">
  <div class="tall-slider">
    <div class="slide tall"><img src="image_tall1.jpg" alt="Tall Slide 1"></div>
    <div class="slide tall"><img src="image_tall2.jpg" alt="Tall Slide 2"></div>
    <div class="slide tall"><img src="image_tall3.jpg" alt="Tall Slide 3"></div>
  </div>
</div>
```

--------------------------------

### Display Product Details with Reviews and Pricing

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-grocery-home-2.html

This snippet displays detailed information for a specific product, including its image, name, customer reviews, a description, and pricing with a discount. It's suitable for product detail pages.

```HTML
![](images/grocery/isolated/3.png)

### Strawberries
[Based on 331 Reviews](#)

##### Fresh, local market grown strawberries. Packed with fibers and flavor.

$5.99
=====

$9.99 (- 40%)
```

```HTML
![](images/grocery/isolated/7.png)

### Bananas
[Based on 331 Reviews](#)

##### A rich source of potassium. Great before a strenuous workout with complex carbs.

$2.99
=====

$9.99 (- 40%)
```

--------------------------------

### Font Weight Customization

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/page-health-services.html

Illustrates how to change font weights using CSS classes. It shows examples of text with different font-weight values applied.

```CSS
.text-weight-900 { font-weight: 900; }
.text-weight-800 { font-weight: 800; }
.text-weight-700 { font-weight: 700; }
.text-weight-600 { font-weight: 600; }
.text-weight-500 { font-weight: 500; }
```

--------------------------------

### Rounded Pagination Example

Source: https://github.com/ahmedrageh/sticky-mobile/blob/main/component-pagination.html

Demonstrates pagination components that support rounded versions, offering a softer, more modern aesthetic. This style can be applied to any of the other pagination variations.

```HTML
<h3>Rounded as well</h3>
<p>Any style you choose supports rounded versions as well.</p>
<ul>
  <li>[](#)</li>
  <li>[1](#)</li>
  <li>[2](#)</li>
  <li>[3](#)</li>
  <li>[4](#)</li>
  <li>[5](#)</li>
  <li>[](#)</li>
</ul>
```