.

Psychiatric-Imaging-Group · Apr 9, 2024 · c1a534b · c1a534b
1 parent dc7ea9a
commit c1a534b
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 54 deletions.
diff --git a/People/index.html b/People/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+  <title>Psychiatric Imaging - People</title>
+  <link rel="stylesheet" type="text/css" href="../style/main_style.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css">
+</head>
+
+<body>
+
+<div class="header">
+	<h1><a href="../index.html">Psychiatric Imaging Group</a></h1>
+</div>
+
+<div class="topnav">
+    <a href="../index.html">Home</a>
+	<a class="active">People</a>
+	<a href="../Research/index.html">Research</a>
+	<a class="rightnav" href="https://github.com/Psychiatric-Imaging-Group" target="_blank"><i style="font-size:28px" class="fa">&#xf09b;</i></a>
+</div>
+
+<h2> People </h2>
+
+<p>This page is under construction.</p>
+<br>
+<p>There is nothing here yet.</p>
+
+</body>
+
+</html> 
diff --git a/Research/index.html b/Research/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+  <title>Psychiatric Imaging - Research</title>
+  <link rel="stylesheet" type="text/css" href="../style/main_style.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css">
+</head>
+
+<body>
+
+<div class="header">
+	<h1><a href="../index.html">Psychiatric Imaging Group</a></h1>
+</div>
+
+<div class="topnav">
+    <a href="../index.html">Home</a>
+	<a href="../People/index.html">People</a>
+	<a class="active">Research</a>
+	<a class="rightnav" href="https://github.com/Psychiatric-Imaging-Group" target="_blank"><i style="font-size:28px" class="fa">&#xf09b;</i></a>
+</div>
+
+<h2> Research </h2>
+
+<p>This page is under construction.</p>
+<br>
+<p>There is nothing here yet.</p>
+
+</body>
+
+</html> 
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
 <head>
   <title>Psychiatric Imaging</title>
   <link rel="stylesheet" type="text/css" href="style/main_style.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css">
 </head>
 
 <body>
@@ -14,22 +15,17 @@ <h1>Psychiatric Imaging Group</h1>
 </div>
 
 <div class="topnav">
-	<a href="#">Link</a>
-	<a href="#">Link</a>
-	<a href="#">Link</a>
-	<a href="#" style="float:right">Link</a>
+	<a class="active" href="#">Home</a>
+	<a href="People/index.html">People</a>
+	<a href="Research/index.html">Research</a>
+	<a class="rightnav" href="https://github.com/Psychiatric-Imaging-Group" target="_blank"><i style="font-size:28px" class="fa">&#xf09b;</i></a>
 </div>
 
-<div class="row">
-	<div class="column side" style="background-color:#eae9e9;">
-		<h1>Projects</h1>
-		<!-- <p>A review of SV2A PET studies</p> -->
-	</div>
-	<div class="column middle" >
-		<h1> This page is not finished yet. Please check back later.</h1>
-	</div>
-	<div class="column side" style="background-color:#eae9e9;"></div>
-  </div>
+<h2> About us </h2>
+
+<p>This page is under construction.</p>
+<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>
 
 </body>
 

diff --git a/style/main_style.css b/style/main_style.css
@@ -1,3 +1,9 @@
+:root {
+    --sea_blue: #688AB6;
+    --dark_blue: #3C587C;
+    --bbblue: #9FB3D1;
+}
+
 * {
    box-sizing: border-box;
 }
@@ -7,71 +13,94 @@ body {
     padding: 10px;
     background: #f1f1f1;
 }
+
+h2 {
+    font-size: xx-large;
+    color: black;
+    font-family: system-ui;
+    text-align: center;
+    padding: 0px 20px 20px;;
+    width: 50%;
+    margin: auto;
+    margin-top: 30px;
+}
+
+p {
+    width: 50% ;
+    margin: auto;
+}
+
+p a, p a:link, p a:visited, p a:active {
+    text-decoration: none;
+    font-weight: bold;
+    color: #3C587C;
+}
 
 /* Header/Blog Title */
 .header {
     padding: 30px;
     text-align: center;
-    background: rgb(218, 217, 217);
+    background: var(--bbblue);
+    text-decoration: none;
+    text-shadow:
+    2px 2px 2px var(--dark_blue),
+    3px 3px 3px var(--dark_blue);
 }
 
 .header h1 {
     font-size: 50px;
+    color: #f2f1f1;
+    width: 100%;   
+}
+
+h1 a:link, h1 a:active, h1 a:visited {
+    text-decoration: none;
+    color: #f2f1f1;
 }
 
 /* Style the top navigation bar */
 .topnav {
     overflow: hidden;
-    background-color: #333;
+    top: 0;
+    background-color: var(--dark_blue);
 }
 
 /* Style the topnav links */
 .topnav a {
     float: left;
     display: block;
     color: #f2f2f2;
+    position: inherit;
     text-align: center;
-    padding: 14px 16px;
+    text-justify: inter-cluster;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 10px;
+    font-size: 20px;
+    height:50px;
+    line-height: 50px;
     text-decoration: none;
+    + .rightnav {
+        float: right;
+        text-justify: inherit;
+        /* padding: 9px 16px; */
+      }
+    + .active {
+        background-color: var(--sea_blue);
+    }
 }
-  
+
 /* Change color on hover */
 .topnav a:hover {
-    background-color: #ddd;
-    color: black;
-}
-
-/* Container for flexboxes */
-.row {
-    display: -webkit-flex;
-    display: flex;
-}
-
-/* Create three unequal columns that sits next to each other */
-.column {
-    padding: 10px;
-    height: 1600px; 
-}
-
-/* Left and right column */
-.column.side {
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-}
-
-/* Middle column */
-.column.middle {
-    -webkit-flex: 2;
-    -ms-flex: 2;
-    flex: 2;
-    text-align: center;
+    background-color: #9FB3D1;
+    color: #f2f2f2;
 }
 
-/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
-@media (max-width: 600px) {
-    .row {
-      -webkit-flex-direction: column;
-      flex-direction: column;
-    }
-}
+.material-symbols-outlined {
+    width: 30px;
+    font-variation-settings:
+    'FILL' 1,
+    'wght' 100,
+    'GRAD' 0,
+    'opsz' 0,
+  }