Skip to content

Commit eea3c07

Browse files
vishwaparekhvishwaparekh
authored
Revamp index.html for BioIntelligence Lab
Updated the structure and styling of the index.html file, enhancing the layout and content for the BioIntelligence Lab website.
1 parent 24687ad commit eea3c07

File tree

1 file changed

+258
-95
lines changed

1 file changed

+258
-95
lines changed

‎index.html‎

Lines changed: 258 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,259 @@
1-
<!DOCTYPE HTML>
2-
<!--
3-
Dimension by HTML5 UP
4-
html5up.net | @ajlkn
5-
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
6-
-->
7-
<html>
8-
<head>
9-
<title>BioIntelligence Research Lab</title>
10-
<meta charset="utf-8" />
11-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
12-
<link rel="stylesheet" href="assets/css/main.css" />
13-
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
14-
</head>
15-
<body class="is-preload">
16-
17-
<!-- Wrapper -->
18-
<div id="wrapper">
19-
20-
<!-- Header -->
21-
<header id="header">
22-
<div class="logo">
23-
<span class="image main"><img src="images/Lab_logo3.png" alt =""></span>
24-
</div>
25-
<div class="content">
26-
<div class="inner">
27-
<h1>BioIntelligence Research Lab</h1>
28-
<p>Engineering the future of Biomedicine</p>
29-
</div>
30-
</div>
31-
<nav>
32-
<ul>
33-
<li><a href="#Research">Research</a></li>
34-
<li><a href="#Education">Education</a></li>
35-
<li><a href="#Fun">Fun</a></li>
36-
<li><a href="#About">About</a></li>
37-
<!--<li><a href="#elements">Elements</a></li>-->
38-
</ul>
39-
</nav>
40-
</header>
41-
42-
<!-- Main -->
43-
<div id="main">
44-
45-
46-
47-
<!-- Contact -->
48-
<article id="Contact">
49-
<h2 class="major">Contact</h2>
50-
<form method="post" action="#">
51-
<div class="fields">
52-
<div class="field half">
53-
<label for="name">Name</label>
54-
<input type="text" name="name" id="name" />
55-
</div>
56-
<div class="field half">
57-
<label for="email">Email</label>
58-
<input type="text" name="email" id="email" />
59-
</div>
60-
<div class="field">
61-
<label for="message">Message</label>
62-
<textarea name="message" id="message" rows="4"></textarea>
63-
</div>
64-
</div>
65-
<ul class="actions">
66-
<li><input type="submit" value="Send Message" class="primary" /></li>
67-
<li><input type="reset" value="Reset" /></li>
68-
</ul>
69-
</form>
70-
71-
</article>
72-
73-
74-
75-
76-
</div>
77-
78-
<!-- Footer -->
79-
<footer id="footer">
80-
<p class="copyright">&copy; BioIntelligence-Research-Lab Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
81-
</footer>
82-
83-
</div>
84-
85-
<!-- BG -->
86-
<div id="bg"></div>
87-
88-
<!-- Scripts -->
89-
<script src="assets/js/jquery.min.js"></script>
90-
<script src="assets/js/browser.min.js"></script>
91-
<script src="assets/js/breakpoints.min.js"></script>
92-
<script src="assets/js/util.js"></script>
93-
<script src="assets/js/main.js"></script>
94-
95-
</body>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>BioIntelligence Lab</title>
7+
8+
<style>
9+
body {
10+
margin: 0;
11+
font-family: "Inter", sans-serif;
12+
color: #222;
13+
line-height: 1.6;
14+
background: #ffffff;
15+
}
16+
17+
/* NAVIGATION BAR */
18+
nav {
19+
width: 100%;
20+
padding: 20px 40px;
21+
box-sizing: border-box;
22+
position: sticky;
23+
top: 0;
24+
background: rgba(255,255,255,0.90);
25+
backdrop-filter: blur(8px);
26+
display: flex;
27+
justify-content: space-between;
28+
align-items: center;
29+
border-bottom: 1px solid #eee;
30+
z-index: 1000;
31+
}
32+
33+
nav .logo {
34+
font-size: 1.4em;
35+
font-weight: 700;
36+
color: #003d99;
37+
}
38+
39+
nav ul {
40+
list-style: none;
41+
display: flex;
42+
gap: 30px;
43+
margin: 0;
44+
padding: 0;
45+
}
46+
47+
nav ul li a {
48+
text-decoration: none;
49+
color: #222;
50+
font-weight: 500;
51+
transition: color 0.2s;
52+
}
53+
54+
nav ul li a:hover {
55+
color: #003d99;
56+
}
57+
58+
/* HERO SECTION */
59+
.hero {
60+
text-align: center;
61+
padding: 140px 20px 120px;
62+
background: #f7f9fc;
63+
}
64+
65+
.hero h1 {
66+
font-size: 3.0em;
67+
font-weight: 700;
68+
margin-bottom: 10px;
69+
color: #111;
70+
}
71+
72+
.hero p {
73+
margin-top: 10px;
74+
font-size: 1.25em;
75+
color: #666;
76+
max-width: 700px;
77+
margin-left: auto;
78+
margin-right: auto;
79+
}
80+
81+
/* SECTION HEADERS */
82+
h2.section-title {
83+
text-align: center;
84+
margin-top: 80px;
85+
margin-bottom: 40px;
86+
font-size: 2em;
87+
font-weight: 600;
88+
}
89+
90+
/* THREE PILLAR CARDS */
91+
.pillars {
92+
display: flex;
93+
flex-wrap: wrap;
94+
justify-content: center;
95+
gap: 30px;
96+
padding: 0 20px;
97+
}
98+
99+
.pillar-card {
100+
background: #ffffff;
101+
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
102+
border-radius: 10px;
103+
width: 330px;
104+
padding: 30px;
105+
text-align: left;
106+
transition: transform 0.2s, box-shadow 0.2s;
107+
}
108+
109+
.pillar-card:hover {
110+
transform: translateY(-5px);
111+
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
112+
}
113+
114+
.pillar-card h3 {
115+
margin-top: 0;
116+
font-size: 1.3em;
117+
color: #003d99;
118+
}
119+
120+
.pillar-card p {
121+
margin: 15px 0 25px;
122+
color: #444;
123+
}
124+
125+
.pillar-card a {
126+
color: #0055cc;
127+
text-decoration: none;
128+
font-weight: 600;
129+
}
130+
131+
/* FEATURED TOOLS */
132+
.tools {
133+
display: flex;
134+
flex-wrap: wrap;
135+
justify-content: center;
136+
gap: 35px;
137+
padding: 20px;
138+
margin-bottom: 50px;
139+
}
140+
141+
.tool-card {
142+
background: #ffffff;
143+
border: 1px solid #eee;
144+
border-radius: 12px;
145+
padding: 25px 30px;
146+
width: 260px;
147+
text-align: center;
148+
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
149+
transition: transform 0.2s, box-shadow 0.2s;
150+
}
151+
152+
.tool-card:hover {
153+
transform: translateY(-4px);
154+
box-shadow: 0 4px 12px rgba(0,0,0,0.10);
155+
}
156+
157+
.tool-card img {
158+
width: 60px;
159+
height: 60px;
160+
object-fit: contain;
161+
margin-bottom: 15px;
162+
}
163+
164+
.tool-card h3 {
165+
margin-top: 0;
166+
color: #003d99;
167+
}
168+
169+
.tool-card a {
170+
margin-top: 10px;
171+
display: inline-block;
172+
text-decoration: none;
173+
font-weight: 600;
174+
color: #0055cc;
175+
}
176+
177+
/* FOOTER */
178+
footer {
179+
background: #f1f3f6;
180+
padding: 40px 20px;
181+
text-align: center;
182+
font-size: 0.9em;
183+
color: #777;
184+
margin-top: 60px;
185+
}
186+
</style>
187+
</head>
188+
189+
<body>
190+
191+
<!-- NAVIGATION BAR -->
192+
<nav>
193+
<div class="logo">BioIntelligence Lab</div>
194+
<ul>
195+
<li><a href="#research">Research</a></li>
196+
<li><a href="#tools">Software</a></li>
197+
<li><a href="#people">People</a></li>
198+
<li><a href="#contact">Contact</a></li>
199+
</ul>
200+
</nav>
201+
202+
<!-- HERO -->
203+
<section class="hero">
204+
<h1>BioIntelligence Lab</h1>
205+
<p>Advancing AI, medical imaging, and computational healthcare through foundational AI, disease modeling, and intelligent informatics.</p>
206+
</section>
207+
208+
<!-- RESEARCH AREAS -->
209+
<h2 class="section-title" id="research">Research Areas</h2>
210+
211+
<div class="pillars">
212+
<div class="pillar-card">
213+
<h3>Fundamental AI Research</h3>
214+
<p>Fundamental AI Research explores the foundations of next-generation medical AI systems, including lifelong learning, trustworthy AI, robustness auditing, and clinical safety. Focus areas include Shared Experience Lifelong Learning (ShELL), bias evaluation, and safe deployment of generative AI.</p>
215+
<a href="fundamental-ai.html">Learn More →</a>
216+
</div>
217+
218+
<div class="pillar-card">
219+
<h3>Biomedical Imaging Research</h3>
220+
<p>Biomedical Imaging Research investigates hidden patterns in medical images to uncover disease mechanisms and population-level health trends. Focus areas include computational disease modeling, tumor connectomics, radiogenomics, treatment response modeling, and opportunistic population health biomarkers.</p>
221+
<a href="biomedical-imaging.html">Learn More →</a>
222+
</div>
223+
224+
<div class="pillar-card">
225+
<h3>Informatics & Tooling</h3>
226+
<p>Informatics & Tooling focuses on scalable, open-source infrastructure for efficient access, analysis, and deployment of medical imaging AI. Featured tools include MIST for image streaming and VoxelInsight for conversational imaging analysis.</p>
227+
<a href="informatics.html">Learn More →</a>
228+
</div>
229+
</div>
230+
231+
<!-- FEATURED TOOLS -->
232+
<h2 class="section-title" id="tools">Featured Tools</h2>
233+
234+
<div class="tools">
235+
236+
<div class="tool-card">
237+
<img src="assets/mist_icon.png" alt="MIST Logo">
238+
<h3>MIST</h3>
239+
<p>Medical Image Streaming Toolkit</p>
240+
<a href="mist.html">Learn More →</a>
241+
</div>
242+
243+
<div class="tool-card">
244+
<img src="assets/voxelinsight_logo.png" alt="VoxelInsight Logo">
245+
<h3>VoxelInsight</h3>
246+
<p>Conversational Imaging Analysis Platform</p>
247+
<a href="voxelinsight.html">Learn More →</a>
248+
</div>
249+
250+
</div>
251+
252+
<!-- FOOTER -->
253+
<footer id="contact">
254+
<p>© 2025 BioIntelligence Lab · UTHealth Houston</p>
255+
<p>Contact: vishwa.s.parekh@uth.tmc.edu</p>
256+
</footer>
257+
258+
</body>
96259
</html>

0 commit comments

Comments
 (0)