Dashboard Temp Share Shortlinks Frames API

HTMLify

services.html
Views: 18 | Author: karbonsites 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Services & Pricing - The Cloud</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
</head>
<body>
    <header class="main-header">
        <nav class="navbar">
            <div class="logo">The Cloud</div>
            <ul class="nav-links">
                <li><a href="index.html" class="nav-link">Home</a></li>
                <li><a href="services.html" class="nav-link active">Services</a></li>
                <li><a href="resources.html" class="nav-link">Library</a></li>
                <li><a href="about.html" class="nav-link">About Us</a></li>
                <li><a href="policy.html" class="nav-link">Privacy</a></li>
                <li><a href="global.html" class="nav-link">Global</a></li>
                <li><a href="#contact" class="nav-link cta-link">Get Support</a></li>
            </ul>
        </nav>
    </header>

    <main class="container">
        <section class="page-header">
            <h1 class="fade-in-up">Our Tailored Support Offerings</h1>
            <p class="fade-in-up delay-1">Find the right level of support for your journey, built on confidentiality and expertise.</p>
        </section>

        <section class="pricing-grid">
            <h2 class="section-title fade-in">Pricing & Packages</h2>
            
            <div class="grid-3-col" style="margin-bottom: 50px;">
                
                <!-- Free Tier -->
                <div class="feature-card fade-in-element" style="border-top: 4px solid #3d9970;">
                    <div class="icon" style="color: #3d9970;">&#127752;</div>
                    <h3>Self-Help Library (Free)</h3>
                    <p>Access all articles, basic worksheets, and community forums. Foundational learning.</p>
                    <ul style="text-align: left; margin-top: 15px; list-style: none;">
                        <li>&#10003; Worksheets</li>
                        <li>&#10003; Guided Meditations</li>
                        <li>&#10003; Community Access</li>
                    </ul>
                    <a href="resources.html" class="btn btn-small" style="background-color: #3d9970; color: white; margin-top: 15px;">Explore Free Tools</a>
                </div>

                <!-- Paid Tier 1: Coaching -->
                <div class="feature-card fade-in-element" style="border-top: 4px solid var(--color-primary); transform: scale(1.05); box-shadow: 0 15px 30px rgba(74, 144, 226, 0.3);">
                    <div class="icon" style="color: var(--color-primary);">&#128170;</div>
                    <h3>Mental Health Coaching</h3>
                    <p>Weekly structured check-ins focused on goal setting and immediate coping strategies.</p>
                    <h4 style="color: var(--color-light); margin: 15px 0;">$150 / Session</h4>
                    <ul style="text-align: left; margin-top: 15px; list-style: none;">
                        <li>&#10003; Boundary Setting</li>
                        <li>&#10003; Action Planning</li>
                        <li>&#10003; Lifestyle Integration</li>
                    </ul>
                    <a href="#contact" class="btn btn-small btn-primary" style="margin-top: 15px;">Book Coaching</a>
                </div>
                
                <!-- Paid Tier 2: Therapy -->
                <div class="feature-card fade-in-element" style="border-top: 4px solid var(--color-secondary);">
                    <div class="icon" style="color: var(--color-secondary);">&#128065;</div>
                    <h3>Licensed Online Therapy</h3>
                    <p>Confidential 1:1 sessions with licensed professionals (Individual/Couples).</p>
                    <h4 style="color: var(--color-light); margin: 15px 0;">$220 / Session</h4>
                    <ul style="text-align: left; margin-top: 15px; list-style: none;">
                        <li>&#10003; Diagnosis & Treatment</li>
                        <li>&#10003; Specialized Modalities</li>
                        <li>&#10003; Flexible Scheduling</li>
                    </ul>
                    <a href="#contact" class="btn btn-small btn-secondary" style="margin-top: 15px;">Inquire About Therapy</a>
                </div>
            </div>
        </section>
        
        <section class="workshops-section">
            <h2 class="section-title fade-in">Workshops & Webinars</h2>
            <div class="bento-grid-resources" style="margin-top: 30px;">
                <div class="bento-item resource-card fade-in-element" style="grid-column: span 4; border-left: 5px solid #a0a0b9;">
                    <h3>Managing PTSD Triggers</h3>
                    <p>Live Webinar: Practical skills for grounding during high-stress moments.</p>
                    <p style="font-weight: 700; margin-top: 10px;">Next Date: Sept 15th</p>
                    <span class="read-more">Register Now &rarr;</span>
                </div>
                <div class="bento-item resource-card fade-in-element" style="grid-column: span 4; border-left: 5px solid #a0a0b9;">
                    <img src="image-couples.jpg" alt="Icon representing couples counseling" class="resource-image" style="opacity: 0.6;">
                    <h3>Couples Communication</h3>
                    <p>Group Workshop: Building stronger, empathetic relational patterns.</p>
                    <p style="font-weight: 700; margin-top: 10px;">Ongoing Enrollment</p>
                    <span class="read-more">View Schedule &rarr;</span>
                </div>
                 <div class="bento-item resource-card fade-in-element" style="grid-column: span 4; border-left: 5px solid #a0a0b9;">
                    <img src="image-addiction.jpg" alt="Icon representing addiction recovery" class="resource-image" style="opacity: 0.6;">
                    <h3>Addiction & Recovery</h3>
                    <p>Support Group: A peer-led, confidential space for those in recovery.</p>
                    <p style="font-weight: 700; margin-top: 10px;">Meets Twice Weekly</p>
                    <span class="read-more">Join Group &rarr;</span>
                </div>
            </div>
        </section>

    </main>

    <footer id="contact" class="main-footer">
        <div class="container footer-grid">
            <div class="footer-col">
                <h4>The Cloud</h4>
                <p>Dedicated to making mental wellness accessible to everyone.</p>
            </div>
            <div class="footer-col">
                <h4>Quick Links</h4>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="resources.html">Library</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="policy.html">Privacy</a></li>
                    <li><a href="global.html">Global</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h4>Emergency</h4>
                <p>If you are in crisis, please call or text 988 (USA/Canada).</p>
            </div>
        </div>
        <div class="copyright">
            &copy; 2026 The Cloud. All rights reserved.
        </div>
    </footer>

    <script src="script.js"></script>

  <a href="https://karbonsites.space/home" target="_blank" id="karbon-promo-banner">
      <span>✨</span>
      <div>Built with <b>Karbon Sites</b></div>
  </a>
</body>
</html>

Share this file: