ciara/index.html at main · SpencerLiolios/ciara · GitHub

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>Brighter & Bolder - CliftonStrengths Coaching</title>
    <meta name="description" content="Discover your unique strengths and unlock your potential with personalized CliftonStrengths coaching.">
    <meta name="author" content="Brighter & Bolder">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Brighter & Bolder - CliftonStrengths Coaching">
    <meta property="og:description" content="Discover your unique strengths and unlock your potential with personalized CliftonStrengths coaching.">

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">

    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://api.fontshare.com/v2/css?f[]=clash-display@200,300,400,500,600,700&display=swap" rel="stylesheet">
</head>
<body>
    <header class="header">
        <nav class="nav">
            <div class="nav__logo">
                <a href="#home">Brighter & Bolder</a>
            </div>
            <ul class="nav__menu">
                <li><a href="#services" class="nav__link">Services</a></li>
                <li><a href="#about" class="nav__link">About</a></li>
                <li><a href="#contact" class="nav__link">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="hero__content">
                <h1 class="hero__title"><span class="highlight">Unlock Your</span> <span class="highlight">Brighter & Bolder Life</span></h1>
                <p class="hero__subtitle">Transform your life through personalized CliftonStrengths and astrology coaching. Discover what makes you exceptional.</p>
                <a href="#contact" class="btn btn--primary">Start Your Journey</a>
            </div>
        </section>

        <section id="services" class="services">
            <div class="container">
                <h2 class="section__title">How I Can Help</h2>
                <div class="services__grid">
                    <div class="service-card">
                        <div class="service__icon">💪</div>
                        <h3>CliftonStrengths Coaching</h3>
                        <p>Discover your full 34 report and learn to leverage your strengths for personal and professional success.</p>
                    </div>

                    <div class="service-card">
                        <div class="service__icon">✨</div>
                        <h3>Astrology Coaching</h3>
                        <p>Break down your birth chart and understand how astrological influences shape your personality and path.</p>
                    </div>

                    <div class="service-card">
                        <div class="service__icon">🤝</div>
                        <h3>Partner Dynamics</h3>
                        <p>Utilize CliftonStrengths and/or astrology to foster understanding and create a deeper connection with your partner. These sessions work well for romantic partners as well as business partners.</p>
                    </div>

                    <div class="service-card">
                        <div class="service__icon">👥</div>
                        <h3>Team Synergy</h3>
                        <p>Optimize team performance by understanding each member's unique strengths.</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="about" class="about">
            <div class="container">
                <h2 class="section__title">About Ciara</h2>
                <div class="about__content">
                    <div class="about__text">
                        <p>I help my clients understand themselves and others on deeper levels. I believe increased understanding leads to stronger connections and greater well-being.</p>
                        <p>My approach combines analytical insights with intuitive guidance, creating a safe space for meaningful discovery and growth.</p>
                        <div class="about__credentials">
                            <span class="credential">🎯 Certified Gallup Strengths Coach</span>
                            <span class="credential">🏆 ACC through International Coaching Federation</span>
                            <span class="credential">✨ Astrology & Birth Chart Specialist</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="contact">
            <div class="container">
                <h2 class="section__title">Ready to Discover Your Strengths?</h2>
                <div class="contact__content">
                    <div class="contact__info">
                        <div class="contact__method">
                            <h3>Get in Touch</h3>
                            <p>📧 <a href="mailto:ciara@brighterandbolder.com">ciara@brighterandbolder.com</a></p>
                        </div>
                    </div>

                    <form class="contact__form" id="contact-form">
                        <div class="form__group">
                            <input type="text" name="name" placeholder="Your Name" class="form__input" required>
                        </div>
                        <div class="form__group">
                            <input type="email" name="email" placeholder="Your Email" class="form__input" required>
                        </div>
                        <div class="form__group">
                            <select name="service" class="form__select" required>
                                <option value="">What are you interested in?</option>
                                <option value="strengths">CliftonStrengths Coaching</option>
                                <option value="astrology">Astrology & Birth Chart</option>
                                <option value="couple">Partner Dynamics</option>
                                <option value="team">Team Synergy</option>
                            </select>
                        </div>
                        <div class="form__group">
                            <textarea name="message" placeholder="Tell me about your goals..." class="form__textarea" rows="4"></textarea>
                        </div>
                        <button type="submit" class="btn btn--primary btn--full">Send Message</button>
                    </form>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <div class="footer__bottom">
                <p>&copy; 2025 Brighter & Bolder. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script type="module" src="js/main.js"></script>
</body>
</html>