School-website/gallery.html at master · Josemiles-ctr/School-website · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="gallery.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=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
</head>
<body>
    <header id="header">
    </header>
    <nav id="mobile"></nav>

    <div class="theme">
            <img id="change-mode" onclick="changeTheme()" src="assets/dark.png" title="Change Theme" alt="Theme changer">
    </div>
        <!--This is where you can put your content
        Maintain the rest. only extend your designs using the respective specific css file loaded abve
        corresponding to the page you are workin on

        Delete the content in the mainsection below and put yours.-->

<h1 class="title">Mighty Mengo</h1>
<div class="container">

        <div class="gallery-container w-2 h-2">
            <div class="gallery-item">
            <div class="image"><img src="assets/cllassrooms.jpg"alt="Classrooms"></div>

            <div class="text">Classrooms</div>
        </div>
        </div>
        <div class="gallery-container">
            <div class="gallery-item">
            <div class="image"><img src="assets/headt.jpg" alt="headteacher"></div>

            <div class="text">Headteacher</div>
        </div>
        </div>
        <div class="gallery-container  h-1">
            <div class="gallery-item">
            <div class="image"><img src="assets/students.jpg" alt="students"></div>

            <div class="text">Students</div>
        </div>
        </div>
        <div class="gallery-container w-2">
            <div class="gallery-item">
            <div class="image"><img src="assets/maingate.jpg"alt="main-gate"></div>

            <div class="text">Main gate</div>
        </div>
        </div>
        <div class="gallery-container">
            <div class="gallery-item">
            <div class="image"><img src="assets/bus.jpg" alt="Bus"></div>

            <div class="text">School Bus</div>
        </div>
        </div>
        <div class="gallery-container">
            <div class="gallery-item">
            <div class="image"><img src="assets/foot.jpg" alt="sports"></div>

            <div class="text">Sports team</div>
        </div>
        </div>
        <div class="gallery-container">
            <div class="gallery-item">
            <div class="image"><img src="assets/leaders.jpg" alt="student-leaders"></div>

            <div class="text">Student leaders</div>
        </div>
        </div>
        <div class="gallery-container">
            <div class="gallery-item">
            <div class="image"><img src="assets/church.jpg" alt="chapel"></div>

            <div class="text">Chapel</div>
        </div>
        </div>
</div>
    <hr>
    <footer id="footer"></footer>
    <script src="index.js"></script>
    <script src="gallery.js"></script>
</body>
</html>