.

index.html

@@ -23,9 +23,26 @@ <h1>Psychiatric Imaging Group</h1>
 
 <h2> About us </h2>
 
-<p>This page is under construction.</p>
+<div class="box">
+	<div class="text">"Our research focuses on understanding the causes of mental illnesses and improving their treatment"</div>
+	<p>Oliver Howes</p>
+</div>
+
+<p>Mental illnesses are a major cause of ill health and premature death. They account for four of the six leading causes of adult disability in the world and one in every ten hospital beds in the UK is allocated for the treatment of psychotic disorders such as schizophrenia. </p>
+
+<h3>Current work in the group focuses on:</h3>
+
+<ul>
+	<li>Understanding the brain changes that lead to the development of psychotic disorders, using multi-modal imaging with PET and MRI</li>
+	<li>Examining the effects of drugs and risk factors on the brain, and the influence of common genetic polymorphisms on brain function</li>
+	<li>Determining why some patients respond to treatments and others don’t and predicting response</li>
+	<li>Developing and testing novel approaches to treating mental illnesses</li>
+	<li>Developing animal models for future drug development and using stem cells derived from patients to investigate the mechanisms underlying the disorders</li>
+</ul>
+
 <br>
-<p>In the meantime you can find more information about Psychiatric Imaging on the <a href="https://lms.mrc.ac.uk/research-group/psychiatric-imaging/" target="_blank">MRC LMS website</a> and on the <a href="https://www.kcl.ac.uk/research/psychiatric-imaging-1" target="_blank">KCL website</a>.</p>
+
+<p>You can find more information about Psychiatric Imaging Group on the <a href="https://lms.mrc.ac.uk/research-group/psychiatric-imaging/" target="_blank">MRC LMS website</a> and on the <a href="https://www.kcl.ac.uk/research/psychiatric-imaging-1" target="_blank">KCL website</a>.</p>
 
 </body>
 

style/main_style.css

@@ -10,13 +10,15 @@
 
 body {
     font-family: Arial;
+    font-size: 20px;
     padding: 10px;
     background: #f1f1f1;
+    text-align: justify;
 }
 
 h2 {
     font-size: xx-large;
-    color: black;
+    color: var(--dark_blue);
     font-family: system-ui;
     text-align: center;
     padding: 0px 20px 20px;;
@@ -25,18 +27,63 @@ h2 {
     margin-top: 30px;
 }
 
+h3 {
+    font-size: x-large;
+    color: black;
+    font-family: system-ui;
+    text-align: left;
+    padding: 0px 0px 0px 0px;;
+    /* width: 50%; */
+    margin-left: 0px;
+    color: var(--dark_blue);
+}
+
 @media screen and (orientation: portrait) {
     p {
         width: 80% ;
         margin: auto;
     }
+    h3 {
+        width: 80% ;
+        margin: auto;
+        margin-bottom: 20px;
+        margin-top: 20px;
+    }
+    .box {
+        width: 80% ;
+        margin: auto;
+    }
+    ul {
+        width: 80% ;
+        margin: auto;
+    }
 }
 
 @media screen and (orientation: landscape) {
     p {
         width: 50% ;
         margin: auto;
     }
+    .box p {
+        width: 100% ;
+        margin: auto;
+    }
+    h3 {
+        width: 50% ;
+        margin: auto;
+        margin-bottom: 20px;
+        margin-top: 20px;
+    }
+    .box {
+        width: 50% ;
+        /* margin: auto; */
+        margin-left: auto;
+        margin-right: auto;
+    }
+    ul {
+        width: 50% ;
+        margin: auto;
+    }
 }
 
 
@@ -60,7 +107,8 @@ p a, p a:link, p a:visited, p a:active {
 .header h1 {
     font-size: 50px;
     color: #f2f1f1;
-    width: 100%;   
+    width: 100%;
+    z-index: 2;
 }
 
 h1 a:link, h1 a:active, h1 a:visited {
@@ -73,6 +121,8 @@ h1 a:link, h1 a:active, h1 a:visited {
     overflow: hidden;
     top: 0;
     background-color: var(--dark_blue);
+    position: -webkit-sticky;
+    position: sticky;
 }
 
 /* Style the topnav links */
@@ -113,4 +163,33 @@ h1 a:link, h1 a:active, h1 a:visited {
     'wght' 100,
     'GRAD' 0,
     'opsz' 0,
-  }
+}
+
+ul li {
+    padding-bottom: 15px;
+}
+  .box {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    /* background-color: var(--bbblue); */
+    align-content: stretch;
+    column-gap: 10px;
+    -webkit-box-shadow: 10px 10px 20px 0px rgba(66, 68, 90, 0.15);
+    -moz-box-shadow: 10px 10px 20px 0px rgba(66, 68, 90, 0.15);
+    box-shadow: 10px 10px 20px 0px rgba(66, 68, 90, 0.15);
+    margin-bottom: 40px;
+    margin-top: 20px;
+    padding: 20px;
+    border-left: 4px solid var(--dark_blue);
+    .text {
+        font-size: xx-large;
+        align-self: flex-start;
+        color: var(--dark_blue);
+    }
+    p {
+        align-self:flex-end;
+        text-align: right;
+        margin-top: 10px;
+    }
+}