Skip to content

Commit

Permalink
mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mahin-567
Mahin-567 committed Jul 8, 2024
1 parent d67fd74 commit 220c7c1
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 52 deletions.
2 changes: 1 addition & 1 deletion 2023/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</div>
</nav>
<div class="fullpage">
Expand Down
17 changes: 9 additions & 8 deletions 2024/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@
<div>
<nav>
<div class="logo">
<img src="./images/logo_text.png" width="126">
<img src="./images/logo_text.png">
</div>
<ul>
<li><a href="#">Welcome</a></li>
<li><a href="#">Contributors</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">iGEM</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#" class="button">Wiki</a></li>
</ul>
</nav>
Expand All @@ -34,7 +34,7 @@

<div class="wrapper">
<div class="welcome">Hello There!</div>
<div class="intro">This is the Aalto-Heslinki iGEM team's Website <br> Glad to see you here!</div>
<div class="intro">This is the Aalto-Heslinki iGEM team's Website Glad to see you here!</div>
<div class="circles">
<img src="./images/Ellipse1.png">
<img src="./images/Ellipse2.png">
Expand All @@ -46,12 +46,13 @@
<br>
<div>
<h2>What is going on here?</h2>
<p>The Aalto-Helsinki 2024 is a multidisciplinary team consisting of nine students from the University of Helsinki and Aalto University. Since 2014, Aalto-Helsinki has been representing the capital region of Finland in the world's largest synthetic biology competition: iGEM. Each year a new team is recruited to compete with the aim to develop an innovative and impactful synthetic biology project that advances scientific research and benefits society. Even thought the main thing is synthetic biology, the project consists of many other things that require skills beyond the lab, such as graphic designing, business skills, project management, event coordinating and programming to make for example this website possible! During the project, each member gets to show their skills and learn a lot of new ones. <br>
To help up in our journey, we have the support of our PIs Heli Viskari, Aalto University lecturer, Department of Bioproducts and Biosystems, and Markus Linder, Aalto University professor of Biomolecular materials. Additionally, we have been supported a lot by doctoral researcher Yin Yin from the Aalto University, Department of Bioproducts and Biosystems. <br>
<br>
<p>The Aalto-Helsinki 2024 is a multidisciplinary team consisting of nine students from the University of Helsinki and Aalto University. Since 2014, Aalto-Helsinki has been representing the capital region of Finland in the world's largest synthetic biology competition: iGEM. Each year a new team is recruited to compete with the aim to develop an innovative and impactful synthetic biology project that advances scientific research and benefits society. Even thought the main thing is synthetic biology, the project consists of many other things that require skills beyond the lab, such as graphic designing, business skills, project management, event coordinating and programming to make for example this website possible! During the project, each member gets to show their skills and learn a lot of new ones. <br> <br>
To help up in our journey, we have the support of our PIs Heli Viskari, Aalto University lecturer, Department of Bioproducts and Biosystems, and Markus Linder, Aalto University professor of Biomolecular materials. Additionally, we have been supported a lot by doctoral researcher Yin Yin from the Aalto University, Department of Bioproducts and Biosystems. <br> <br>
Please find a more detailed list of all of the people who have shared their time and knowledge with us to make this project possible from our wiki, which will be updated through our journey. Apart from this website, you can follow our journey on our Instagram, LinkedIn and Facebook. </p>
<br><br>
<h2>Our Project</h2>

<br>
<p>Our research focuses on leveraging naturally existing adhesive proteins, such as those in mussel foot and silk, for biomedical applications. Recognizing the global cancer crisis, with new cases projected to rise by 77 % to over 35 million annually by 2050, we are addressing the urgent need for improved cancer treatments. Current chemotherapy methods often lead to severe side effecs, highlighting the necessity for more effective and precise drug delivery systems. Inspired by bio-adhesives, we develop a liquid-liquid phase separation (LLPS)-based drug delivery system aimed at enhancing the efficacy and precision of cancer therapeutics. This innovative approach aims to minimize side effects and improve patient outcomes, offering a significant advancement in the fight against cancer.

Please find more detailed project description from our wiki!</p>
Expand Down
173 changes: 130 additions & 43 deletions 2024/style/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,42 +3,37 @@
--Header: linear-gradient(0deg, #FFF 0%, #83AFB9 18.4%, #2F7989 42.4%, #136779 62.9%, #005B6E 84.4%)
}

html {
font-size: 62.5%;
}


body {
margin: 0px;
margin: 0;
}

header {
position: fixed;
width: 100%;
height: 249px;
background: var(--Header);
height: 200px;
background: var(--main-colour);
justify-content: center;
align-content: center;
}

nav {
display: flex;
justify-content: space-between;
max-width: 88.73%;
width: 88.73%;
margin: 0 auto;
}

.logo {
width: auto;
height: 100%;
display: flex;
}

.logo img {
width: fit-content;
}

nav .logo-text {
color: #FFF;
text-align: center;
align-self: center;
font-family: Poppins;
font-size: 1.5em;
font-weight: 700;
}

nav ul {
display: flex;
Expand All @@ -49,25 +44,25 @@ nav ul {
nav ul li {
color: #FFF;
font-family: "Aptos";
font-size: 20px;
font-size: 1.6rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}

.button {
padding: 14px 24px;
border-radius: 8px;
color: #000;
display: inline-block;
font-size: 16px;
font-size: 1.6rem;
background-color: #ffffff;
text-decoration: none;
position: relative;
}

.wrapper {
text-align: center;
max-width: 77.5vw;
width: 80%;
margin: 0 auto;
padding: 100px;
}
Expand All @@ -76,27 +71,21 @@ nav ul li {
color: #000;
text-align: center;
font-family: Saira;
font-size: 96px;
font-size: 9.6rem;
font-weight: 700;
margin-top: 275px;
}

.intro {
color: #000;
max-width: 750px;
text-align: center;
font-family: Inter;
font-size: 32px;
font-size: 3.2rem;
font-weight: 400;
margin: 0 auto;
}

.para {
color: #3A3A3A;
text-align: justify;
font-family: Aptos;
font-size: 24px;
font-weight: 400;
}

.circles {
display: flex;
justify-content: space-between;
Expand All @@ -114,7 +103,7 @@ nav ul li {
h2 {
color: var(--main-colour);
font-family: Saira;
font-size: 36px;
font-size: 3.6rem;
font-weight: 700;
text-align: left;
}
Expand All @@ -123,7 +112,7 @@ p {
color: #3A3A3A;
text-align: justify;
font-family: Aptos;
font-size: 24px;
font-size: 2.4rem;
font-weight: 400;
}

Expand Down Expand Up @@ -169,7 +158,7 @@ p {
.about-section .content p {
color: #FFF;
font-family: Aptos;
font-size: 24px;
font-size: 2.4rem;
font-weight: 400;
}

Expand All @@ -178,18 +167,18 @@ p {
text-align: center;
color: #ffffff;
font-family: Aptos;
font-size: 20px;
font-size: 2rem;
font-weight: 700;
line-height: 150%;
line-height: 2rem;
}

.about-section .content .row1 .pic p {
text-align: center;
color: #ffffff;
font-family: Aptos;
font-size: 20px;
font-size: 2rem;
font-weight: 600;
line-height: 150%;
line-height: 2rem;
}


Expand All @@ -206,15 +195,15 @@ p {
.sponsors .title {
color: #FFF;
font-family: Saira;
font-size: 36px;
font-size: 3.6rem;
font-weight: 700;
margin-left: 11.25vw;
}

.sponsors .text {
color: #FFF;
font-family: Aptos;
font-size: 24px;
font-size: 2.4rem;
font-weight: 400;
margin-left: 11.25vw;
margin-top: 26px;
Expand All @@ -240,22 +229,120 @@ p {
.contact h5 {
color: #000;
font-family: Poppins;
font-size: 32px;
font-size: 3.2rem;
font-weight: 700;
}

.prev-teams h5 {
color: #000;
font-family: Poppins;
font-size: 24px;
font-size: 2.4rem;
font-weight: 700;
}

.foot p {
color: #000;
font-family: Inter;
font-size: 24px;
font-size: 2.4rem;
font-weight: 400;
margin-top: 10%;
line-height: 150%;
line-height: 4rem;
}



/* MOBILE VERSION */

@media only screen and (max-width: 600px) {


nav {
display: flex;
justify-content: space-between;
width: 88.73%;
margin: 0 auto;
}

nav ul {
display: none;
}

.logo {
width: 180px;
height: 100%;
display: flex;
}

.wrapper {
width: 100%;
margin: 0;
}

.welcome {
color: #000;
width: 100%;
text-align: center;
font-family: Saira;
font-size: 4.4rem;
font-weight: 700;
margin-top: 275px;
}

.intro {
color: #000;
text-align: center;
font-family: Inter;
font-size: 1.4rem;
font-weight: 400;
margin: 0 auto;
}

.circles {
display: none;
}

h2 {
font-size: 2rem;
line-height: 1;

}

p {
font-size: 1.2rem;
font-weight: 400;
}

.about-section .content p {
font-size: 1.2rem;
font-weight: 400;
}

.about-section img {
width: 160px;
height: auto;
}

.about-section .content .row1 .pic h3 {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.4rem;
}

.about-section .content .row1 .pic p {
font-size: 1.2rem;
font-weight: 600;
line-height: 1.1rem;
}

.sponsors img{
margin: 20 20;
}

.foot {
flex-direction: column;
width: 80%;
justify-content: space-between;
padding-bottom: 50px;
margin: 0 auto;
}
}

0 comments on commit 220c7c1

Please sign in to comment.