intsav.github.io/spinal.html at main · intsav/intsav.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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>THRIVE Research Centre</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #f4f4f4;
        }
        header img {
            height: 60px;
        }
        header h1 {
            flex-grow: 1;
            text-align: center;
            font-size: 1.8em;
            margin: 0;
        }
        .hero {
            width: 100%;
            height: 300px;
            background: url('assets/img/hero-placeholder.jpg') center center/cover no-repeat;
            position: relative;
        }
        .navbar {
            width: 100%;
            background-color: rgba(0,0,0,0.7);
            position: absolute;
            bottom: 0;
            display: flex;
            justify-content: center;
        }
        .navbar a {
            color: #fff;
            padding: 15px 20px;
            text-decoration: none;
            display: block;
        }
        .navbar a:hover {
            background-color: #555;
        }
        .about {
            padding: 20px;
            text-align: center;
        }
        .grid-links {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            padding: 20px;
            text-align: center;
        }
        .grid-links img {
            width: 100%;
            height: auto;
        }
        .news {
            padding: 20px;
        }
        .news h2 {
            text-align: center;
        }
        .footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
        }
        .footer a {
            color: #fff;
            margin: 0 10px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <header>
        <img src="assets/img/thrive-logo.jpg" alt="THRIVE Logo">
        <h1>Translational Health Research for Innovation and Value Enhancement (THRIVE)</h1>
        <img src="assets/img/uwl-logo.png" alt="UWL Logo">
    </header>

    <div class="hero">
        <div class="navbar">
            <a href="#aims">Our Aims and Vision</a>
            <a href="#research">Research</a>
            <a href="#partnerships">Partnerships</a>
            <a href="#contact">Contact Us</a>
        </div>
    </div>

    <div class="about">
        <p>The THRIVE Research Centre is a multidisciplinary hub dedicated to transforming healthcare through cutting-edge research, innovation, and strategic partnerships. Our mission is to create impact-driven health solutions that address real-world challenges and improve outcomes for individuals and communities.</p>
    </div>

    <div class="grid-links">
        <div>
            <img src="assets/img/placeholder1.jpg" alt="About Us">
            <p><a href="#about">About Us</a></p>
        </div>
        <div>
            <img src="assets/img/placeholder2.jpg" alt="Research Projects">
            <p><a href="#research">Research Projects</a></p>
        </div>
        <div>
            <img src="assets/img/placeholder3.jpg" alt="Meet Our Members">
            <p><a href="#members">Meet Our Members</a></p>
        </div>
        <div>
            <img src="assets/img/placeholder4.jpg" alt="Partnerships">
            <p><a href="#partnerships">Partnerships</a></p>
        </div>
    </div>

    <div class="news">
        <h2>Latest News</h2>
        <p>Coming soon: updates on our latest research, publications, and events.</p>
    </div>

    <div class="footer">
        <p>
            <a href="#">X</a> |
            <a href="#">LinkedIn</a> |
            <a href="mailto:contact@thrivecentre.org">contact@thrivecentre.org</a>
        </p>
        <p>&copy; 2025 THRIVE Research Centre. All rights reserved.</p>
    </div>
</body>
</html>