Skip to content
Snippets Groups Projects
Commit db79142b authored by Edgar Robitaille's avatar Edgar Robitaille
Browse files

Merge branch 'main' of https://gitlab.igem.org/2023/hopkins into main

parents ebbb5a70 5fcb39cb
No related branches found
No related tags found
No related merge requests found
Pipeline #331525 passed
@font-face {
font-family: 'Montserrat';
src: url('https://static.igem.wiki/teams/4676/montserrat-regular.ttf') format('ttf');
}
@font-face {
font-family: 'League Spartan';
src: url('https://static.igem.wiki/teams/4676/leaguespartan-bold.ttf') format('ttf');
font-weight: bold;
font-style: normal;
}
/* General Styles */
body {
font-family: 'Montserrat', sans-serif;
......@@ -44,6 +56,12 @@ h5, h6 {
font-weight: bold;
}
p {
color:white;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
/*^Ideally would like to stylize some of these headings more*/
table {
......@@ -345,13 +363,22 @@ body.homepage header p.lead {
height: 50px;
}
.full-width-div {
height: 25vh;
.carousel-container {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
margin-top: 10px
}
.carousel-inner img {
max-width: 100%; /* Maintain the aspect ratio, set the maximum width */
max-height: 100%; /* Set the maximum height for the images */
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
border: 2px solid black; /* Add a black outline */
}
\ No newline at end of file
......@@ -13,9 +13,6 @@
<!-- Custom CSS -->
<link href="{{ url_for('static', filename = 'style.css') }}" rel="stylesheet">
<!-- Theme fonts (Montserrat, League Spartan)-->
<link href="https://fonts.googleapis.com/css?family=Montserrat|League+Spartan" rel ="stylesheet">
<title>{% block title %}{% endblock %} | Hopkins iGEM 2023: Caddistick</title>
</head>
......
......@@ -6,19 +6,21 @@
<div class="row mt-4">
<div class="col-md-12">
<h4 style="font-size: 20px; font-weight: bolder;">
In the world of waterproof adhesives, we face a pressing issue – the environmental impact of synthetic adhesives, particularly those containing PFAS. These chemicals are durable but hazardous, posing risks to both the environment and human health. While efforts are underway to regulate their use, out iGEM team is exploring an exciting alternative: caddisfly silk.
<br>
Caddisfly silk, produced by aquatic caddisfly larvae living in water, has remarkable adhesive properties. It's resistant to water, heat, and non-toxic to human cells. What sets it apart is its natural stickiness, making it an ideal underwater adhesive. We're looking to produce caddisfly silk through synthetic biology in bacteria, providing a more sustainable and scalable method.
<br>
This natural adhesive could offer a valuable solution, especially when we consider the drawbacks of synthetic alternatives, including potential environmental harm, and the current labor-intensive nature of silk production using silkworm moths.
</h4>
<div class="content-box rounded-box">
<p>
In the world of waterproof adhesives, we face a pressing issue: the environmental impact of synthetic adhesives, particularly those containing PFAS. These chemicals are durable but hazardous, posing risks to both the environment and human health. While efforts are underway to regulate their use, out iGEM team is exploring an exciting alternative.
Caddisfly silk, produced by aquatic caddisfly larvae living in water, has remarkable adhesive properties. It's resistant to water, heat, and non-toxic to human cells. What sets it apart is its natural stickiness, making it an ideal underwater adhesive. We're looking to produce caddisfly silk through synthetic biology in bacteria, providing a more sustainable and scalable method.
This natural adhesive could offer a valuable solution, especially when we consider the drawbacks of synthetic alternatives, including potential environmental harm, and the current labor-intensive nature of silk production using silkworm moths.
</p>
</div>
</div>
</div>
<div class="spacer homepage-spacer row mt-4">
<div class="col-md-12">
<h2 style = "color:black">How did we decide on this project?</h2>
<h2 style = "color:black">How did we decide on our project?</h2>
</div>
</div>
......@@ -51,7 +53,7 @@
</div>
<div class="row mt-4">
<div class="col">
<div class="col-12">
<p>Adhesives in aquatic and wet environments have a wide variety of applications.
In industry, they are utilized in ocean exploration and maintenance of water vehicles,
while in the medical field they have potential applications ranging from closing
......@@ -69,7 +71,7 @@
</div>
<div class="row mt-4">
<div class="col">
<div class="col-12">
<p>
Caddisflies are winged insects as adults, but they spend much of their larval stage underwater in
creeks and streams. The caddisfly larvae produce the silk protein fibroin, which is a heterodimer
......
......@@ -17,4 +17,5 @@
</div>
</div>
{% endblock %}
......@@ -8,7 +8,7 @@
<!--Experimental Overview (no specific detailed protocols: those go at the bottom)-->
<div class="spacer homepage-spacer row mt-4 mb-4 align-items-center">
<div class="col-md-12 text-center">
<h2>Experimental Overview</h2>
<h2 style="color:black">Experimental Overview</h2>
</div>
</div>
......@@ -130,7 +130,7 @@
<!--Relevant Protocols (Find them in Benchling)-->
<div class="spacer homepage-spacer row mt-4 mb-4 align-items-center">
<div class="col-md-12 text-center">
<h2>Relevant Protocols</h2>
<h2 style = "color:black">Relevant Protocols</h2>
</div>
</div>
......@@ -269,11 +269,11 @@
<div class="spacer homepage-spacer row mt-4 mb-4 align-items-center">
<div class="col-md-12 text-center">
<h2>Parts List</h2>
<h2 style="color:black">Parts List</h2>
</div>
</div>
<div style = "margin-top: 10px">
<div class = "row mt-4 align-items-center">
<table>
<tr>
<th>Part Number</th>
......@@ -376,37 +376,39 @@
<div class="spacer homepage-spacer row mt-4 mb-4 align-items-center">
<div class="col-md-12 text-center">
<h2>Wetlab Images</h2>
<h2 style="color:black">Wetlab Images</h2>
</div>
</div>
<!--Image carousel with wetlab pics, the JS for this should already be in static.boostrap.bundle.min.js-->
<div class="full-width-div">
<div id="imageCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://static.igem.wiki/teams/4676/wiki/img-5731.jpg" alt="Image 1">
</div>
<div class="carousel-item">
<img src="https://static.igem.wiki/teams/4676/wiki/img-5732.jpg" alt="Image 2">
</div>
<div class="carousel-item">
<img src="https://static.igem.wiki/teams/4676/wiki/img-5735.jpg" alt="Image 3">
</div>
<div class="carousel-item">
<img src="https://static.igem.wiki/teams/4676/wiki/img-5737.jpg" alt="Image 4">
</div>
</div>
<a class="carousel-control-prev" href="#imageCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#imageCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
<div class="row mt-4 mb-4 align-items-center">
<div class="carousel-container">
<div id="imageCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://static.igem.wiki/teams/4676/wiki/img-5731.jpg" alt="Image 1">
</div>
<div class="carousel-item">
<img src="https://static.igem.wiki/teams/4676/wiki/img-5732.jpg" alt="Image 2">
</div>
<div class="carousel-item">
<img src="https://static.igem.wiki/teams/4676/wiki/img-5735.jpg" alt="Image 3">
</div>
<div class="carousel-item">
<img src="https://static.igem.wiki/teams/4676/wiki/img-5737.jpg" alt="Image 4">
</div>
</div>
<a class="carousel-control-prev" href="#imageCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#imageCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
</div>
<!--JS to give the collapsible functionality-->
......
......@@ -6,29 +6,27 @@
{% block page_content %}
<div class="row mt-4" style="height: 1000px;">
<div class="col-6 mx-auto my-auto d-flex align-items-center">
<h2 style="text-align:center; font-size:36px">
Adhesives Without Compromise
</h2>
<br>
<h4 style="font-size:20px; font-weight:normal">Underwater adhesives have a wide variety of applications ranging from industry to medicine.
However, most waterproof chemicals contain harmful "forever chemicals" such as perfluoroalkanes.
Thus, there is a great need for waterproof adhesives that are both safe and effective.
Caddisfly silk is one example of a naturally produced material with highly effective waterproof and adhesive properties.
<div class="spacer homepage-spacer row mt-4">
<div class="col-md-12">
<h2 style = "color:black">What are caddisflies?</h2>
</div>
</div>
<div class="row mt-4" style="height: 600px;">
<div class="col-6 d-flex align-items-center">
<h4 style="font-size:30px; font-weight:normal">
Caddisflies are insects which spend their larval stage underwater. The caddisfly larvae build cases made up of stones, pebbles, and other small objects bound
by a strong, sticky, waterproof silk. Caddisfly silk has exciting potential for use as a biodegradable and non-toxic waterproof adhesive.
</h4>
</div>
<div class="col-6 d-flex align-items-center">
<div class="sketchfab-embed-wrapper">
<iframe title="Caddisfly_Limnephilidae" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share width="100%" height="100%" src="https://sketchfab.com/models/da4eb32f8d83459cade5654b2bedcab3/embed?autospin=1&autostart=1&ui_theme=dark"> </iframe>
<!--<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
<a href="https://sketchfab.com/3d-models/caddicefly-limnephilidae-da4eb32f8d83459cade5654b2bedcab3?utm_medium=embed&utm_campaign=share-popup&utm_content=da4eb32f8d83459cade5654b2bedcab3" target="_blank" rel="nofollow" style="font-weight: bold; color: #1CAAD9;"> Caddicefly_Limnephilidae </a> by
<a href="https://sketchfab.com/kohiyama?utm_medium=embed&utm_campaign=share-popup&utm_content=da4eb32f8d83459cade5654b2bedcab3" target="_blank" rel="nofollow" style="font-weight: bold; color: #1CAAD9;"> kohiyama </a> on
<a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=da4eb32f8d83459cade5654b2bedcab3" target="_blank" rel="nofollow" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>
</p>-->
</div>
</div>
</div>
<div class="spacer homepage-spacer row mt-4">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment