COMPSVIII-Assignment2/index.html at main · RizeComputerScience/COMPSVIII-Assignment2 · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechFlow Solutions</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header -->
    <header>
        <nav class="container">
            <div class="logo">TechFlow Solutions</div>
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- Hero Section -->
    <section id="home" class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Custom Websites for Growing Businesses</h1>
                <p class="hero-subtitle">We build modern, responsive websites that help small businesses succeed online.</p>
                <a href="#contact" class="cta-button">Get Started</a>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about">
        <div class="container">
            <h2>About Us</h2>
            <div class="about-content">
                <!-- PLACEHOLDER: About content will be replaced in the assignment -->
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <!-- END PLACEHOLDER -->
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section id="team" class="team">
        <div class="container">
            <h2>Our Team</h2>
            <div class="team-grid">
                <!-- PLACEHOLDER: Team member profiles will be added in the assignment -->
                <div class="team-member">
                    <div class="member-photo">
                        <img src="https://placehold.co/200x200" alt="Team Member">
                    </div>
                    <h3>John Doe</h3>
                    <p class="member-role">Placeholder Role</p>
                    <p class="member-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
                </div>
                <div class="team-member">
                    <div class="member-photo">
                        <img src="https://placehold.co/200x200" alt="Team Member">
                    </div>
                    <h3>Jane Smith</h3>
                    <p class="member-role">Placeholder Role</p>
                    <p class="member-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
                </div>
                <div class="team-member">
                    <div class="member-photo">
                        <img src="https://placehold.co/200x200" alt="Team Member">
                    </div>
                    <h3>Mike Johnson</h3>
                    <p class="member-role">Placeholder Role</p>
                    <p class="member-bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
                </div>
                <!-- END PLACEHOLDER -->
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact">
        <div class="container">
            <h2>Contact Us</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <h3>Get in Touch</h3>
                    <p>Ready to build your dream website? Contact us today for a free consultation.</p>
                    <div class="contact-details">
                        <p><strong>Email:</strong> hello@techflowsolutions.com</p>
                        <p><strong>Phone:</strong> (555) 123-4567</p>
                        <p><strong>Location:</strong> San Francisco, CA</p>
                    </div>
                </div>
                <div class="contact-form-container">
                    <form class="contact-form" id="contactForm">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea id="message" name="message" rows="5" required></textarea>
                        </div>
                        <button type="submit" class="submit-button">Send Message</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <p>&copy; 2024 TechFlow Solutions. All rights reserved.</p>
        </div>
    </footer>

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