kingmicro.github.io/Research.html at main · kingmicro/kingmicro.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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Research | KingMicroLab</title>
  <link rel="stylesheet" href="assets/styles.css" />

      <style>
    /* --- Page-Specific Styles --- */

    /* Top text section (intro) */
    .intro-section {
      background-color: white;
      padding: 30px 30px;   /* more top & bottom padding */

      margin: 0 auto;
      justify-content: center;   /* vertical centering */
      align-items: center;       /* horizontal centering */
      text-align: center;        /* center text inside */
    }

    .intro-section h1 {
      color: #06402b;
      font-size: 2.2rem;
      margin-bottom: 20px;
    }

    .intro-section p {
      color: #333;
      font-size: 1.05rem;
      line-height: 1.7;
      margin-bottom: 1.5em;
    }

    /* --- Uniform Team Section Layout --- */
    .split {
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;      /* image + text equal height */
      height: 500px;             /* uniform height across all sections */
      margin: 0;            /* consistent spacing between sections */
    }

    .split .image-section {
      flex: 1;
      background-size: cover;
      background-position: center;
    }

    .split .text-section {
      flex: 1;
      background: white;
      padding: 30px;    /* slightly less padding */
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .split .text-section h2 {
      color: #06402b;
      margin-bottom: 15px;
      font-size: 1.6rem;
    }

    .split .text-section p {
      color: #333;
      font-size: 1rem;
      line-height: 1.7;
    }

    /* Alternate layout for visual balance */
    .split.reverse {
      flex-direction: row-reverse;
    }

    /* --- Mobile: let it resize automatically --- */
    /* Responsive */
    @media (max-width: 768px) {
      .split {
        flex-direction: column;
        height: auto;
        align-items: stretch;
      }

      .split.reverse {
        flex-direction: column;
      }

      .split .text-section {
        padding: 0px;
      }

      .split .image-section {
        width: 100%;                   /* full width of container */
        min-height: 250px;             /* visible image height */
        height: auto;                  /* let image scale naturally */
        background-size: cover;        /* cover the container */
        background-position: center center; /* focus on middle of image */
  }

  .intro-section {
    width: 100%;
    padding: 0px 0px;  /* slightly smaller padding for mobile */
    box-sizing: border-box; /* ensures padding doesn’t shrink content width */
    text-align: center;
  }

  .intro-section h1 {
    font-size: 1.8rem; /* scales nicely for small screens */
  }

  .intro-section p {
    font-size: 1rem;
    line-height: 1.6;
  }
    }

  </style>
</head>

<body>

<header>
  <div class="navbar">
    <div class="logo">KingMicroLab</div>
    <button class="hamburger" id="hamburger-btn">☰</button>
    <nav class="nav-links" id="nav-links">
      <a href="index.html">Home</a>
      <a href="TeamPage.html">Team</a>
      <a href="Research.html" class="active">Research</a>
      <a href="https://scholar.google.com/citations?hl=en&user=sRcvuMEAAAAJ&view_op=list_works&sortby=pubdate" target="_blank">Publications</a>
      <a href="TeamPage.html">Blog</a>
      <a href="Contact.html">Contact</a>
    </nav>
  </div>
</header>

    <!-- 🧬 Intro Section -->
  <section class="intro-section">
    <h1>Research at KingMicroLab</h1>
    <p>
      Our research explores the intricate relationships between plant roots and their microbial partners.
      We focus on understanding how root exudates shape microbial communities, and how we can leverage
      these relationships to improve plant stress tolerance and soil health.
    </p>
  </section>

    <!-- 🪴 Section 1 -->
  <section class="split">
    <div class="image-section" style="background-image: url('assets/images/KingLabLogo_HighRes.png');"></div>
    <div class="text-section">
      <h2>Manipulating Below-Ground Feedback</h2>
      <p>
        Roots form dynamic relationships with microorganisms essential for healthy plant functioning and
        stress resilience. We investigate how drought, nutrient stress, and exudation patterns influence
        these microbial relationships, linking root physiology to microbial community structure and function.
      </p>
    </div>
  </section>

  <!-- 🦠 Section 2 (reversed layout) -->
  <section class="split reverse">
    <div class="image-section" style="background-image: url('assets/images/KingLabLogo_HighRes.png');"></div>
    <div class="text-section">
      <h2>Manipulating Biotic Interactions</h2>
      <p>
        We explore how microbial interactions shape community establishment and functioning, using both
        bottom-up and top-down approaches to manipulate microbial diversity in soil. This helps us
        understand how biodiversity loss impacts essential soil functions.
      </p>
    </div>
  </section>

  <!-- 🌱 Section 3 -->
  <section class="split">
    <div class="image-section" style="background-image: url('assets/images/KingLabLogo_HighRes.png');"></div>
    <div class="text-section">
      <h2>Microbial Physiology and Function</h2>
      <p>
        We study how both microbe–microbe and microbe–host interactions influence microbial physiology
        and adaptation to new environments. By linking microbial traits with host exudation patterns,
        we identify mechanisms driving cooperation and competition in root microbiomes.
      </p>
    </div>
  </section>

  <!-- 🌍 Section 4 (reversed layout) -->
  <section class="split reverse">
    <div class="image-section" style="background-image: url('assets/images/KingLabLogo_HighRes.png');"></div>
    <div class="text-section">
      <h2>Fieldwork and Functional Assays</h2>
      <p>
        We combine high-throughput sequencing with field and lab-based assays to examine how diversity,
        nutrient cycling, and microbial function respond to ecological change. From forest ecosystems
        to agricultural soils, our experiments aim to connect microbial processes with measurable
        ecosystem outcomes.
      </p>
    </div>
  </section>

<footer class="site-footer">

  <div class="footer-content">

    <p class="footer-name"><strong>Dr. William L King</strong></p>

    <p class="footer-affiliation">
      School of Biological Sciences<br>
      University of Southampton<br>
      Southampton, United Kingdom
    </p>

    <p class="footer-contact">
      📧 <a href="mailto:w.l.king@soton.ac.uk">w.l.king@soton.ac.uk</a>
    </p>

    <!-- Social links -->
    <div class="footer-socials">

  <!-- Google Scholar -->
  <a href="https://scholar.google.com/citations?hl=en&user=sRcvuMEAAAAJ"
     target="_blank" aria-label="Google Scholar" class="social-link">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 3L1 9l11 6 9-4.91V17h2V9L12 3zm0 13L4.24 10 12 6l7.76 4-7.76 4z"/>
    </svg>
  </a>

  <!-- LinkedIn -->
  <a href="https://www.linkedin.com/in/william-l-king-5060b398/"
     target="_blank" aria-label="LinkedIn" class="social-link">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM0 8h5v16H0V8zm7.5 0H12v2.2h.08c.61-1.15 2.1-2.37 4.32-2.37 4.62 0 5.48 3.04 5.48 6.99V24h-5v-7.98c0-1.9-.04-4.34-2.65-4.34-2.65 0-3.06 2.07-3.06 4.2V24h-5V8z"/>
    </svg>
  </a>

<!-- ResearchGate -->
<a href="https://www.researchgate.net/profile/William_King36"
   target="_blank" aria-label="ResearchGate" class="social-link">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M3 3h9.6c4.2 0 7.4 2.7 7.4 6.6 0 3-1.7 5.1-4.4 6l4.4 5.4H15l-3.9-4.9H8.5V21H3V3zm5.5 4.3v5.6h3.6c1.9 0 3.1-1.1 3.1-2.8 0-1.7-1.2-2.8-3.1-2.8H8.5z"/>
  </svg>
</a>

  <!-- X (Twitter) -->
  <a href="https://x.com/DrMicroWill"
     target="_blank" aria-label="X (Twitter)" class="social-link">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M18.244 2H21l-6.52 7.45L22 22h-6.828l-5.356-6.94L3.64 22H1l6.972-7.97L2 2h7l4.845 6.32L18.244 2zm-1.2 18h1.9L7.12 4H5.1l11.944 16z"/>
    </svg>
  </a>

  <!-- Bluesky -->
  <a href="https://bsky.app/profile/drmicrowill.bsky.social"
     target="_blank" aria-label="Bluesky" class="social-link">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 12.8c-.5-1-2.5-4-4.5-5.5C5.3 5.9 4 5.3 4 6.5c0 .3.2 2.6.3 3.1.4 1.8 1.8 2.4 3.5 2.2-2.4.4-4.5 1.4-1.7 4.3 3.1 3.2 5.5-.7 5.9-1.5.4.8 2.6 4.8 5.9 1.5 2.8-2.9.7-3.9-1.7-4.3 1.7.2 3.1-.4 3.5-2.2.1-.5.3-2.8.3-3.1 0-1.2-1.3-.6-3.5.8-2 1.5-4 4.5-4.5 5.5z"/>
    </svg>
  </a>

    </div>

    </div> <!-- end footer-content -->

</footer>

<script>
  document.getElementById('hamburger-btn').addEventListener('click', function() {
    document.getElementById('nav-links').classList.toggle('active');
  });
</script>

</body>
</html>