all content added

2024/index.html

@@ -8,6 +8,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Saira:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./style/reset.css">
     <link rel="stylesheet" href="./style/style.css">
 </head>
 
@@ -68,8 +69,10 @@ <h2>About Us</h2>
             <div class="row1">
                 <div class="pic">
                     <img src="./images/hanna.png" alt="">
-                    <h3>Hanna Dahl</h3>
-                    <p>Task Manager (not Windows) <br> MSc Biotechnology <br> Aalto University</p>
+                    <div class="box">
+                        <h3>Hanna Dahl</h3>
+                        <p>Task Manager (not Windows) <br> MSc Biotechnology <br> Aalto University</p>
+                    </div>
                 </div>
                 <div class="pic">
                     <img src="./images/ardalan.png" alt="">
@@ -122,7 +125,7 @@ <h3>Uma</h3>
     </div>
 
 
-    <div class="wrapper-2">
+    <div class="wrapper">
         <h2>About iGEM</h2>
             <p>International Genetically Engineered Machine, iGEM, is an international synthetic biology competition originating from the Massachusetts Institute of Technology (MIT), Boston, USA. The iGEM competition challenges students to design and implement a project within a short time frame (around 10 months) using innovation, design, experimental work and modelling applications.
 
@@ -134,7 +137,39 @@ <h2>About iGEM</h2>
     <div class="sponsors">
         <div class="title">Sponsors</div>
         <div class="text">Our sponsors who made this project possible!</div>
+        <div class="rows">
+            <img src="./images/hilife.png" alt="">
+            <img src="./images/chemeng.png" alt="">
+        </div>
+        <div class="rows">
+            <img src="./images/agri.png" alt="">
+            <img src="./images/tek.png" alt="">
+        </div>
+        <div class="rows">
+            <img src="./images/elec.png" alt="">
+            <img src="./images/environ.png" alt="">
+        </div>
+        <div class="rows">
+            <img src="./images/thermo.png" alt="">
+            <img src="./images/sci.png" alt="">
+        </div>
+        <div class="rows">
+            <img src="./images/heureka.png" alt="">
+            <img src="./images/kemian.png" alt="">
+        </div>
     </div>
 
 </body>
+
+<div class="foot">
+    <div class="contact">
+        <h5>Contact</h5>
+        <p>[email protected] <br> Kemistentie 1 <br> 02150, Espoo   </p>
+    </div>
+    <div class="prev-teams">
+        <h5>Previous Teams</h5>
+        <p>2023 2022 2021 <br> 2020 2019 2018</p>
+    </div>
+</div>
+
 </html>

2024/style/reset.css

@@ -0,0 +1,37 @@
+/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/
+
+/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property */
+*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
+    all: unset;
+    display: revert;
+  }
+
+  /* Preferred box-sizing value */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  /*
+    Remove list styles (bullets/numbers)
+    in case you use it with normalize.css
+  */
+  ol, ul {
+    list-style: none;
+  }
+
+  /* For images to not be able to exceed their container */
+  img {
+    max-width: 100%;
+  }
+
+  /* Removes spacing between cells in tables */
+  table {
+    border-collapse: collapse;
+  }
+
+  /* Revert the 'white-space' property for textarea elements on Safari */
+  textarea {
+    white-space: revert;
+  }

2024/style/style.css

@@ -3,17 +3,11 @@
     --Header: linear-gradient(0deg, #FFF 0%, #83AFB9 18.4%, #2F7989 42.4%, #136779 62.9%, #005B6E 84.4%)      
 }
 
-*
-*::after,
-*::before {
-    box-sizing: border-box;
-}
 
 body {
     margin: 0px;
 }
 
-
 header {
     width: 100%;
     height: 249px;
@@ -52,7 +46,6 @@ nav ul {
     display: flex;
     align-items: center;
     gap: 48px;
-    list-style: none;
     margin-top: 60px;
 }
 
@@ -70,7 +63,6 @@ nav ul li a {
     color: #000;
     display: inline-block;
     font-size: 16px;
-    font-style: normal;
     background-color: #ffffff; 
     text-decoration: none; 
     position: relative;  
@@ -80,6 +72,7 @@ nav ul li a {
     text-align: center;
     max-width: 77.5vw;
     margin: 0 auto;
+    padding: 100px;
 }
 
 .welcome {
@@ -136,6 +129,7 @@ p {
     background-color: var(--main-colour);
     display: flex;
     justify-content: center;
+    padding-top: 100px;
 }
 
 .about-section .content {
@@ -182,7 +176,6 @@ p {
     color: #ffffff;
     font-family: Aptos;
     font-size: 20px;
-    font-style: normal;
     font-weight: 700;
     line-height: 150%;
 }
@@ -192,7 +185,6 @@ p {
     color: #ffffff;
     font-family: Aptos;
     font-size: 20px;
-    font-style: normal;
     font-weight: 600;
     line-height: 150%;
 }
@@ -201,24 +193,11 @@ p {
 
 
 
-
-
-
-
-.wrapper-2 {
-    text-align: center;
-    max-width: 77.5vw;
-    margin: 0 auto;
-}
-
 .sponsors {
     width: 100%;
-    height: 2000px;
     background: var(--main-colour);
     justify-content: center;
-    margin-top: 85px;
     padding-top: 100px;
-    margin-bottom: 10%;
 }
 
 .sponsors .title {
@@ -237,3 +216,43 @@ p {
     margin-left: 11.25vw;
     margin-top: 26px;
 }
+
+.rows {
+    width: 80%;
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin: 70px auto;
+    box-sizing: border-box;
+}
+
+.foot {
+    display: flex;
+    width: 80%;
+    justify-content: space-between;
+    padding-bottom: 50px;
+    margin: 0 auto;
+}
+
+.contact h5 {
+    color: #000;
+    font-family: Poppins;
+    font-size: 32px;
+    font-weight: 700;
+}
+
+.prev-teams h5 {
+    color: #000;
+    font-family: Poppins;
+    font-size: 24px;
+    font-weight: 700;
+}
+
+.foot p {
+    color: #000;
+    font-family: Inter;
+    font-size: 24px;
+    font-weight: 400;
+    margin-top: 10%;
+    line-height: 150%;
+}