Spector-Co_CommecialGradeWebsite/index.html at main · CayCall/Spector-Co_CommecialGradeWebsite · 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"
        content="Welcome to Spector & Co, a legal consultancy firm offering expertise in business, criminal, and family law.">
    <meta name="keywords" content="Spector & Co, legal consultancy, business law, criminal law, family law">
    <meta name="robots" content="index, follow">

    <!-- Open Graph / Facebook -->
    <meta property="og:title" content="Spector & Co - Legal Consultancy">
    <meta property="og:description"
        content="Providing unparalleled legal expertise in business, criminal, and family law.">
    <meta property="og:image" content="URL to image">
    <meta property="og:url" content="URL to your homepage">
    <meta property="og:type" content="website">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Spector & Co - Legal Consultancy">
    <meta name="twitter:description" content="Offering expert legal servies in business, criminal, and family law.">
    <meta name="twitter:image" content="URL to image">

    <link rel="icon" href="./Images/icon.png" type="image/x-icon">
    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="./Pages/HomePage/HomeStyles.css">
    <title>Home - Spector & Co</title>
</head>

<body>
    <header aria-label="Primary header">
        <h1>Spector & Co</h1>
        <nav class="nav-bar" aria-label="Main navigation">
            <button class="hamburger" id="hamburger-btn" aria-label="Open navigation menu">
                &#9776;
            </button>
        </nav>
    </header>

    <div id="hero">
        <h2 id="hero-header">Welcome to <span id="rolling-text">Spector & Co</span></h2>
        <h3 id="hero-h3"> Help us, Help you</h3>
        <button id="scroll-button" class="scroll-text"> scroll down ↓</button>
    </div>
    <section class="scroll-to">

    </section>
    <main>

        <!--Filler content for the website-->
        <div class="content-section-wrapper">
            <div id="expertise">
                <h2 class="sub-heading">Discover Our Story</h2>
                <p class="expertise-paragraph">
                    At Spector & Co, we pride ourselves on delivering unparalleled legal expertise and personalized
                    service to our clients.<br>
                    Our dedicated team of professionals is committed to understanding each unique situation, ensuring
                    that every legal need is addressed with efficiency, precision, and integrity.<br>
                    We offer comprehensive legal solutions, guiding our clients through complex legal landscapes with
                    clarity and confidence.<br>

                </p>

                <!--takes us to about page -->
                <div class="expertise-button-container">
                    <button class="button-variation-1" class="expertise-btn" onclick="loadAboutPage()">
                        Learn more &#x27A1;
                    </button>
                </div>

            </div>
            <hr>
            <div id="content-section-grid">
                <h2 class="sub-heading">Our Services</h2>
                <div class="content-container">
                    <div class="content-container-item" aria-labelledby="business-law">
                        <h3 id="business-law">Business Law</h3>
                        <img class="content-icons" src="./Images/SVG/building-user-svgrepo-com.svg" alt="Business law icon" aria-label="Business law icon">
                        <p>Our legal team advises on business formation and compliance,
                            helping you with everything from initial documents to regulatory support.</p>
                    </div>
                    <div class="content-container-item" aria-labelledby="criminal-law">
                        <h3 id="criminal-law">Criminal Law</h3>
                        <img class="content-icons" src="./Images/SVG/thief-svgrepo-com.svg" alt="Criminal Law icon" aria-label="Criminal law icon">
                        <p>We offer expert legal representation in criminal defense,
                            ensuring your rights are protected during investigations and in court.</p>
                    </div>
                    <div class="content-container-item" aria-labelledby="family-law">
                        <h3 id="family-law">Family Law</h3>
                        <img class="content-icons" src="./Images/SVG/family-svgrepo-com.svg" alt="Family Law icon" aria-label="Family law icon">
                        <p>Our compassionate lawyers assist with divorce,
                            custody, and adoption, guiding you through challenging family transitions.</p>
                    </div>
                </div>
                <button class="button-variation-1" id="services-btn" onclick="loadServicesPage()" aria-label="Learn more about our services">Learn More &#x27A1;</button>
            </div>
        </div>
        <hr>
        <div id="testimonials">
            <h2 class="sub-heading">What Our Clients Say</h2>

            <div class="testimonial-item">
                <div id="imageContainer">
                    <img src="./Images/woman2.jpg" alt="Handshake" aria-label="Testimonial by Jane Smith, CEO">
                </div>
                <p class="testimonial-text">"Working with Spector & Co has been a fantastic experience. They guided me
                    through every step of the process and ensured my needs were met with the utmost professionalism."
                </p>
                <p class="client-name">— Jane Smith, CEO</p>
            </div>

            <div class="testimonial-item">
                <div id="imageContainer">
                    <img src="./Images/man2.jpeg" alt="Harvey" aria-label="Testimonial by John Doe, Business Owner">
                </div>
                <p class="testimonial-text">"Spector & Co's attention to detail was impressive. They helped us navigate
                    complex legal matters with ease."</p>
                <p class="client-name">— John Doe, Business Owner </p>
            </div>

            <div class="testimonial-item">
                <div id="imageContainer">
                    <img src="./Images/Man-1.jpg" alt="Scott Graham" aria-label="Testimonial by Mark Taylor, Entrepreneur">
                </div>
                <p class="testimonial-text">"I felt supported and confident thanks to the excellent team at Spector & Co."</p>
                <p class="client-name">— Mark Taylor, Entrepreneur</p>
            </div>

            <!-- Arrow navigation -->
            <div class="arrow-container" aria-label="Navigate through testimonials">
                <span class="arrow left" onclick="changeSlide(-1)" aria-label="Previous testimonial slide">←</span>
                <span class="arrow right" onclick="changeSlide(1)" aria-label="Next testimonial slide">→</span>
            </div>
        </div>
    </main>
    <!--the same footer will be used on all pages-->
    <button class="backToTopBtn" id="backToTopBtn" onclick="scrollToTop()"> ↑ </button>
    <footer aria-label="Website footer">
        <div class="footer-content">
            <div class="footer-left" aria-label="Footer left section">
                <img src="./Images/icon.png" alt="Company Logo" class="footer-logo" aria-label="Company logo">
                <p class="footer-description">Providing quality services since 1979.</p>
            </div>

            <div class="bottom-nav" aria-label="Footer bottom navigation">
                <ul id="bottom-nav-links" aria-label="Footer navigation links">
                    <li><a href="../Spector-Co_CommecialGradeWebsite/Pages/AboutPage/about.html" aria-label="Navigate to About Us page">| About Us</a></li>
                    <li><a href="../Spector-Co_CommecialGradeWebsite/Pages/ServicesPage/services.html" aria-label="Navigate to Services page">| Services</a></li>
                    <li><a href="../Spector-Co_CommecialGradeWebsite/Pages/ContactPage/contact.html" aria-label="Navigate to Contact Us page">| Contact Us</a></li>
                    <li><a href="../Spector-Co_CommecialGradeWebsite/Pages/DesignPage/" aria-label="Navigate to Design page">| Design</a></li>
                </ul>
            </div>

            <div class="footer-right" aria-label="Footer right section">
                <h5>&copy; 2024 Spector & Co | All rights reserved.</h5>
                <div class="social-icons" aria-label="Social media links">
                    <a href="https://www.instagram.com" aria-label="Visit our Instagram page">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.44-.645 1.44-1.44-.001-.795-.645-1.44-1.44-1.44z"></path>
                        </svg>
                    </a>
                    <a href="https://www.facebook.com" aria-label="Visit our Facebook page">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                            <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 8c0 .557-.447 1-1 1h-1v2h1c.553 0 1 .444 1 1v7h3v-7c0-.556.447-1 1-1h1v-2h-1c-.553 0-1-.443-1-1v-1c0-.553.447-1 1-1h1v-2h-2c-1.656 0-3 1.344-3 3v1z"></path>
                        </svg>
                    </a>
                    <a href="https://www.twitter.com" aria-label="Visit our Twitter page">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                            <path d="M24 4.557c-.883.392-1.83.656-2.825.775 1.014-.608 1.794-1.569 2.163-2.724-.949.564-2.003.974-3.127 1.195-.896-.956-2.173-1.555-3.591-1.555-2.717 0-4.915 2.197-4.915 4.917 0 .386.045.763.127 1.125-4.084-.205-7.702-2.161-10.125-5.134-.422.723-.665 1.562-.665 2.457 0 1.693.861 3.186 2.17 4.065-.798-.025-1.55-.244-2.207-.609v.061c0 2.364 1.681 4.336 3.916 4.781-.409.111-.84.171-1.285.171-.315 0-.623-.03-.922-.086.623 1.946 2.431 3.365 4.572 3.405-1.674 1.309-3.781 2.089-6.072 2.089-.394 0-.779-.023-1.162-.067 2.166 1.39 4.735 2.2 7.504 2.2 9.005 0 13.92-7.457 13.92-13.926 0-.211-.005-.42-.014-.628.956-.689 1.786-1.56 2.444-2.548l-.047-.02z"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </footer>
    <script src="./Scripts/nav.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="./Scripts/homepage.js"></script>

</body>

</html>