Skip to content

Commit

Permalink
Update 1_project.md
Browse files Browse the repository at this point in the history
  • Loading branch information
lucasattia authored Aug 29, 2024
1 parent 8cec3a1 commit 57e7b92
Showing 1 changed file with 1 addition and 37 deletions.
38 changes: 1 addition & 37 deletions _projects/1_project.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ This project, the first in my PhD, focused on figuring out a clever way to engin
Digital microscopy image of a core-shell hydrogel particle.
</div>


With this project, we invented a clever way to circumvent these challenges by making two different types of hydrogels in a single core-shell structure. We rely on methylcellulose and alginate-based hydrogels to do this. Methylcellulose gels thermally

<div class="row">
<div class="col-sm mt-3 mt-md-0">
Expand All @@ -27,39 +27,3 @@ This project, the first in my PhD, focused on figuring out a clever way to engin
<div class="caption">
Digital microscopy image of a core-shell hydrogel particle.
</div>

You can also put regular text between your rows of images.
Say you wanted to write a little bit about your project before you posted the rest of the images.
You describe how you toiled, sweated, *bled* for your project, and then... you reveal its glory in the next row of images.


<div class="row justify-content-sm-center">
<div class="col-sm-8 mt-3 mt-md-0">
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm-4 mt-3 mt-md-0">
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
<div class="caption">
You can also have artistically styled 2/3 + 1/3 images, like these.
</div>


The code is simple.
Just wrap your images with `<div class="col-sm">` and place them inside `<div class="row">` (read more about the <a href="https://getbootstrap.com/docs/4.4/layout/grid/">Bootstrap Grid</a> system).
To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
Here's the code for the last row of images above:

{% raw %}
```html
<div class="row justify-content-sm-center">
<div class="col-sm-8 mt-3 mt-md-0">
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
<div class="col-sm-4 mt-3 mt-md-0">
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div>
</div>
```
{% endraw %}

0 comments on commit 57e7b92

Please sign in to comment.