greeleyrobotics.github.io/departments.html at main · RZJournal/greeleyrobotics.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Departments - Horace Greeley Combat Robotics Team</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* Add specific styles for this page's content */
        section {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            flex-wrap: wrap;
        }

        .department-container {
            flex-basis: calc(33.33% - 40px); /* Equal width for each department with spacing */
            margin: 20px;
        }

        .department {
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .department h3 {
            font-size: 24px;
            color: #0074a2;
        }

        .department p {
            font-size: 18px;
        }

        .department img {
            max-width: 100%;
            height: 300px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="meetings.html">Meetings</a></li>
                <li><a href="photos.html">Photos</a></li>
                <li><a href="departments.html">Departments</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <div class="department-container">
            <div class="department">
                <img src="images/programming.avif" alt="Programming Department">
                <div>
                    <h3>Robot Programming</h3>
                    <p>Our robot programming team is responsible for writing the code that powers our combat robots. They use various programming languages and software tools to ensure our robots operate effectively during battles.</p>
                </div>
            </div>
        </div>

        <div class="department-container">
            <div class="department">
                <img src="images/design.png" alt="Design Department">
                <div>
                    <h3>Robot Design</h3>
                    <p>The robot design department focuses on creating the physical appearance and functionality of our combat robots. They use CAD software and innovative design techniques to make our robots formidable and visually striking.</p>
                </div>
            </div>
        </div>

        <div class="department-container">
            <div class="department">
                <img src="images/mechanics.jpeg" alt="Mechanics Department">
                <div>
                    <h3>Mechanical Engineering</h3>
                    <p>Our mechanical engineering department is in charge of building and maintaining the physical components of our combat robots. They work with various materials and tools to construct and repair our robots for battles.</p>
                </div>
            </div>
        </div>
    </section>

    <footer>
        <div class="social-icons">
            <a href="https://www.instagram.com/greeleyrobotics" target="_blank">
                <img src="images/instagram.png" alt="Instagram">
            </a>
            <a href="https://www.github.com/greeleyrobotics" target="_blank">
                <img src="images/github.png" alt="Github">
            </a>
        </div>
        <p>&copy; 2023 Horace Greeley Robotics Club, Ryan Zhang</p>
    </footer>
</body>
</html>