Skip to content

Commit

Permalink
fix font sizing
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshbarua
joshbarua committed Sep 9, 2024
1 parent 06ab983 commit 7d3deaf
Showing 1 changed file with 30 additions and 26 deletions.
56 changes: 30 additions & 26 deletions proj1/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,17 @@
text-align: center;
}
.image-caption {
font-size: 14px;
font-size: 20px;
margin-top: 5px;
text-align: center;
display: block;
font-weight: bold;
}
.small-title {
font-size: 16px;
font-size: 20px;
margin-bottom: 5px;
text-align: center;
font-weight: bold;
}
h3.column-title {
font-size: 18px;
Expand All @@ -45,9 +49,9 @@
</head>
<body>

<h3 style="text-align: center;">Images of the Russian Empire: Colorizing the Prokudin-Gorskii photo collection</h3>
<h1 style="text-align: center;">Images of the Russian Empire: Colorizing the Prokudin-Gorskii photo collection</h1>

<h4 style="text-align: center;">Josh Barua</h4>
<h2 style="text-align: center;">Josh Barua</h2>

<div class="section-title">Overview</div>
<p>Sergei Mikhailovich Prokudin-Gorskii traveled across the vast Russian Empire taking photographs of everything he saw. He recorded three exposures of every scene onto a glass plate using a red, a green, and a blue filter. The goal of this project is to automatically colorize the photos by stacking and aligning images from each color channel.</p>
Expand Down Expand Up @@ -75,11 +79,11 @@ <h3 class="column-title">Base Algorithm + Sobel Edge Detection Filter</h3>

<div class="image-row">
<div>
<img src="media/color_False_cathedral.jpg" alt="Image 1" width="500" height="500">
<img src="media/color_False_cathedral.jpg" alt="Image 1" width="400" height="400">
<div class="image-caption">R: [12,3] G: [5,2]</div>
</div>
<div>
<img src="media/color_True_cathedral.jpg" alt="Image 2" width="500" height="500">
<img src="media/color_True_cathedral.jpg" alt="Image 2" width="400" height="400">
<div class="image-caption">R: [12,3] G: [5,2]</div>
</div>
</div>
Expand All @@ -88,11 +92,11 @@ <h3 class="column-title">Base Algorithm + Sobel Edge Detection Filter</h3>

<div class="image-row">
<div>
<img src="media/color_False_monastery.jpg" alt="Image 1" width="500" height="500">
<img src="media/color_False_monastery.jpg" alt="Image 1" width="400" height="400">
<div class="image-caption">R: [3,2] G: [-3,2]</div>
</div>
<div>
<img src="media/color_True_monastery.jpg" alt="Image 2" width="500" height="500">
<img src="media/color_True_monastery.jpg" alt="Image 2" width="400" height="400">
<div class="image-caption">R: [3,2] G: [-3,2]</div>
</div>
</div>
Expand All @@ -101,11 +105,11 @@ <h3 class="column-title">Base Algorithm + Sobel Edge Detection Filter</h3>

<div class="image-row">
<div>
<img src="media/color_False_tobolsk.jpg" alt="Image 1" width="500" height="500">
<img src="media/color_False_tobolsk.jpg" alt="Image 1" width="400" height="400">
<div class="image-caption">R: [6,3] G: [3,2]</div>
</div>
<div>
<img src="media/color_True_tobolsk.jpg" alt="Image 2" width="500" height="500">
<img src="media/color_True_tobolsk.jpg" alt="Image 2" width="400" height="400">
<div class="image-caption">R: [6,3] G: [3,2]</div>
</div>
</div>
Expand All @@ -114,11 +118,11 @@ <h3 class="column-title">Base Algorithm + Sobel Edge Detection Filter</h3>

<div class="image-row">
<div>
<img src="media/color_False_church.jpg" alt="Image 1" width="500" height="500">
<img src="media/color_False_church.jpg" alt="Image 1" width="400" height="400">
<div class="image-caption">R: [58,-4] G: [25,3]</div>
</div>
<div>
<img src="media/color_True_church.jpg" alt="Image 2" width="500" height="500">
<img src="media/color_True_church.jpg" alt="Image 2" width="400" height="400">
<div class="image-caption">R: [58,-4] G: [25,3]</div>
</div>
</div>
Expand All @@ -127,11 +131,11 @@ <h3 class="column-title">Base Algorithm + Sobel Edge Detection Filter</h3>

<div class="image-row">
<div>
<img src="media/color_False_emir.jpg" alt="Image 1" width="500" height="500">
<img src="media/color_False_emir.jpg" alt="Image 1" width="400" height="400">
<div class="image-caption">R: [107,17] G: [-3,7]</div>
</div>
<div>
<img src="media/color_True_emir.jpg" alt="Image 2" width="500" height="500">
<img src="media/color_True_emir.jpg" alt="Image 2" width="400" height="400">
<div class="image-caption">R: [110,47] G: [49,24]</div>
</div>
</div>
Expand All @@ -140,11 +144,11 @@ <h3 class="column-title">Base Algorithm + Sobel Edge Detection Filter</h3>

<div class="image-row">
<div>
<img src="media/color_False_harvesters.jpg" alt="Image 1" width="500" height="500">
<img src="media/color_False_harvesters.jpg" alt="Image 1" width="400" height="400">
<div class="image-caption">R: [120,7] G: [118,-3]</div>
</div>
<div>
<img src="media/color_True_harvesters.jpg" alt="Image 2" width="500" height="500">
<img src="media/color_True_harvesters.jpg" alt="Image 2" width="400" height="400">
<div class="image-caption">R: [123,13] G: [61,14]</div>
</div>
</div>
Expand All @@ -153,11 +157,11 @@ <h3 class="column-title">Base Algorithm + Sobel Edge Detection Filter</h3>

<div class="image-row">
<div>
<img src="media/color_False_icon.jpg" alt="Image 1" width="500" height="500">
<img src="media/color_False_icon.jpg" alt="Image 1" width="400" height="400">
<div class="image-caption">R: [89,22] G: [42,16]</div>
</div>
<div>
<img src="media/color_True_icon.jpg" alt="Image 2" width="500" height="500">
<img src="media/color_True_icon.jpg" alt="Image 2" width="400" height="400">
<div class="image-caption">R: [88,23] G: [39,16]</div>
</div>
</div>
Expand All @@ -166,11 +170,11 @@ <h3 class="column-title">Base Algorithm + Sobel Edge Detection Filter</h3>

<div class="image-row">
<div>
<img src="media/color_False_lady.jpg" alt="Image 1" width="500" height="500">
<img src="media/color_False_lady.jpg" alt="Image 1" width="400" height="400">
<div class="image-caption">R: [123,-17] G: [57,-6]</div>
</div>
<div>
<img src="media/color_True_lady.jpg" alt="Image 2" width="500" height="500">
<img src="media/color_True_lady.jpg" alt="Image 2" width="400" height="400">
<div class="image-caption">R: [121,13] G: [57,9]</div>
</div>
</div>
Expand All @@ -179,11 +183,11 @@ <h3 class="column-title">Base Algorithm + Sobel Edge Detection Filter</h3>

<div class="image-row">
<div>
<img src="media/color_False_melons.jpg" alt="Image 1" width="500" height="500">
<img src="media/color_False_melons.jpg" alt="Image 1" width="400" height="400">
<div class="image-caption">R: [176,7] G: [83,4]</div>
</div>
<div>
<img src="media/color_True_melons.jpg" alt="Image 2" width="500" height="500">
<img src="media/color_True_melons.jpg" alt="Image 2" width="400" height="400">
<div class="image-caption">R: [176,14] G: [77,5]</div>
</div>
</div>
Expand All @@ -192,11 +196,11 @@ <h3 class="column-title">Base Algorithm + Sobel Edge Detection Filter</h3>

<div class="image-row">
<div>
<img src="media/color_False_onion_church.jpg" alt="Image 1" width="500" height="500">
<img src="media/color_False_onion_church.jpg" alt="Image 1" width="400" height="400">
<div class="image-caption">R: [108,0] G: [52,22]</div>
</div>
<div>
<img src="media/color_True_onion_church.jpg" alt="Image 2" width="500" height="500">
<img src="media/color_True_onion_church.jpg" alt="Image 2" width="400" height="400">
<div class="image-caption">R: [108,35] G: [53,23]</div>
</div>
</div>
Expand All @@ -205,11 +209,11 @@ <h3 class="column-title">Base Algorithm + Sobel Edge Detection Filter</h3>

<div class="image-row">
<div>
<img src="media/color_False_sculpture.jpg" alt="Image 1" width="500" height="500">
<img src="media/color_False_sculpture.jpg" alt="Image 1" width="400" height="400">
<div class="image-caption">R: [140,-26] G: [33,-11]</div>
</div>
<div>
<img src="media/color_True_sculpture.jpg" alt="Image 2" width="500" height="500">
<img src="media/color_True_sculpture.jpg" alt="Image 2" width="400" height="400">
<div class="image-caption">R: [140,-26] G: [33,-11]</div>
</div>
</div>
Expand Down

0 comments on commit 7d3deaf

Please sign in to comment.