Commit WIP website design by Paulina Godoy :)

2026-08-29 00:03:17 +00:00 · 2022-05-07 10:20:11 +10:00
parent 60303c6560
commit 816a690519
21 changed files with 7802 additions and 0 deletions
@@ -0,0 +1,197 @@
+* {
+    margin:0;
+    padding:0;
+    box-sizing: border-box;
+    font-family: 'Nunito', sans-serif;
+}
+
+:root {
+    --green-dark: #45B749;
+    --green-medium: #C6DA20;
+    --base-yellow: #F5E732;
+    --orange-dark: #F1642A;
+    --orange-medium: #FFBC2C;
+    --dark-font: #2F403A;
+    --blue-tint: #4A5E69;
+    --off-white: #F7F7F7;
+    --jumbo-header: 6vw;
+    --jumbo-text: 3vw;
+    --header:5vh;
+    --content:3vh;
+}
+
+body {
+    background-image: url("ifcos_new_logo.svg");
+    background-size: 95vw auto;
+    background-position: 50% 0%;
+    background-repeat: no-repeat;
+}
+
+.container {
+    width:100vw;
+    height:100vh;
+}
+
+
+nav {
+    background-color: var(--off-white);
+    width:100vw;
+    height:8vh;
+    padding: 0 2vw;
+    position: fixed;
+    display: flex;
+    justify-content: space-between;
+    box-shadow: 2px 2px 10px rgba(128, 128, 128, 0.493);
+    z-index: 1;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+}
+
+.logo img {
+    height: 70%;
+}
+
+.logo a {
+    text-decoration: none;
+    color: black;
+    font-size: 21px;
+    font-weight: bold;
+    text-align: center;
+    justify-content: center;
+    margin-left: 10px;
+}
+
+nav .menu {
+    display: flex;
+    flex-direction: row;
+    align-self: center;
+    width: fit-content;
+    text-decoration: none;
+    font-size: 18px;
+}
+
+nav .menu a {
+    text-decoration: none;
+    color: black;
+    margin-right: 1rem;
+    justify-items: space-evenly;
+    position: relative;
+}
+
+nav .menu a:last-child {
+    margin-right: 0;
+}
+
+nav .menu a::after {
+    content: "";
+    background-color: var(--orange-medium);
+    border-radius: 2px;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    width:100%;
+    height: 5px;
+    opacity: 0; 
+    transition: ease-in-out 0.3s;
+}
+
+nav .menu a.selected::after {
+    opacity: 0.8;
+}
+
+nav .menu a:hover::after {
+    background-color: var(--green-dark);
+    opacity: 0.8;
+}
+
+h1 {
+    font-size: var(--jumbo-header);
+    color: black;
+}
+
+h2 {
+    font-size: var(--header);
+    color: black;
+    display: block;
+}
+
+.content {
+    font-size: var(--content);
+    color: var(--dark-font);
+}
+
+.subheader {
+    font-size: var(--jumbo-text);
+    color: var(--dark-font);
+    font-weight: bolder;
+}
+
+.subheader span {
+    font-weight: bold;
+}
+
+.jumbo {
+    display: flex;
+    justify-content: space-evenly;
+    width:100vw;
+    height:50vh;
+    padding: 30vh;
+}
+
+.jumbo-text {
+    width: 40vw;
+}
+
+.jumbo-graph {
+    width: 30vw;
+}
+
+.abstract {
+    display: inline-flex;
+    height: 60vh;
+    padding: 40vh 30vh;
+}
+
+.group h2{
+    padding: 5vh 30vh;
+}
+
+.img-group {
+    display: flex;
+    justify-content: center;
+}
+
+.img-group img {
+    width:30vw;
+}
+
+.card-group {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 20rem);
+    grid-template-rows: 20rem;
+    column-gap:0.5rem;
+    row-gap: 2rem;
+    padding: 0rem 7rem;
+    justify-content: center;
+}
+
+.card {
+    width:17rem;
+    height: 20rem;
+    background: rgba( 255, 255, 255, 0.25 );
+    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+    backdrop-filter: blur( 5px );
+    -webkit-backdrop-filter: blur( 5px );
+    border-radius: 10px;
+}
+
+footer {
+    margin-top: 5vh;
+    height:10vh;
+    width:100vw;
+    background-color: var(--blue-tint);
+    color: var(--off-white);
+}