Hi!
I'm a bit new to coding but I want to create a photo gallery website. It would be a simple website with some pages with photographies from various places.
The main issue I've been handling with is the organization of the photographies on the page. I did put the CSS code so that there is responsive layout, but even that way I can't correctly align my photographies.
This is the CSS part for the display of the photographies:
And this is the HTML part for the photographies display:
I hope that my message is clear enough so that you may help me in my learning of the HTML language!
also, any other advice for this kind of website is gladly welcome!
Thank you for your time!
I'm a bit new to coding but I want to create a photo gallery website. It would be a simple website with some pages with photographies from various places.
The main issue I've been handling with is the organization of the photographies on the page. I did put the CSS code so that there is responsive layout, but even that way I can't correctly align my photographies.
This is the CSS part for the display of the photographies:
Code:
* {
box-sizing: border-box;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 50px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 50px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
And this is the HTML part for the photographies display:
Code:
<div class="row">
<div class="column">
<b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/luchon.html" target="_blank"; style="color:white;width:100%;"><div class="pic">
<figure><img src="C:\Users\amede\OneDrive\Images\Luchon\25d65f40e61407068bca78bde5e704eb.jpg" alt="Yenifer en nieve" class="image"
style="width:100px;height:200px;float:up"></div><figcaption style="vertical-align: middle;">Luchon</figcaption></a></b></figure>
<b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/toulouse.html" target="_blank"; style="color:white";><div class="pic">
<figure><img src="C:\Users\amede\OneDrive\Images\Toulouse\IMG-20201002-WA0001.jpg" alt="Arboles de Toulouse"
class="image" style="width:88px;height:200px;float:up"></div><figcaption>Toulouse</figcaption></a></b></figure>
<b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/lamer.html" target="_blank"; style="color:white";><div class="pic">
<figure><img src="C:\Users\amede\OneDrive\Images\La Mer\IMG-20200812-WA0005.jpg" alt="Narbonne"
class="image" style="width:200px;height:150px;float:up"></div><figcaption>La Mer</figcaption></a></b>
<b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/toulouseonnight.html" target="_blank"; style="color:white";><div class="pic">
<figure><img src="C:\Users\amede\OneDrive\Images\Toulouse on night\IMG-20201204-WA0040.jpg" alt="Mercado de Navidad"
class="image" style="width:200px;height:150px;float:up"></div><figcaption>Toulouse on Night</figcaption></a></b></figure>
<b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/mascotas.html" target="_blank"; style="color:white";><div class="pic">
<figure><img src="C:\Users\amede\OneDrive\Images\Mascotas\IMG_20210906_141641.jpg" alt="Cristal durmiendo"
class="image" style="width:200px;height:150px;float:up"></div><figcaption>Mascotas</figcaption></a></b></figure>
</div>
<div class="column">
<b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/lourdes.html" target="_blank"; style="color:white";><div class="pic">
<figure><img src="C:\Users\amede\OneDrive\Images\Lourdes\IMG-20201024-WA0020.jpg" alt="Nosotros en Lourdes"
class="image" style="width:400px;height:175px;float:up"></div><figcaption>Lourdes</figcaption></a></b></figure>
<b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/paris.html" target="_blank"; style="color:white";><div class="pic">
<figure><img src="C:\Users\amede\OneDrive\Images\Paris\IMG-20210113-WA0034.jpg" alt="Nosotros en Paris"
class="image" style="width:150px;height:200px;float:up"></div><figcaption>Paris</figcaption></a></b></figure>
<b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/villahayes.html" target="_blank"; style="color:white";><div class="pic">
<figure><img src="C:\Users\amede\OneDrive\Images\Villa Hayes\IMG-20210315-WA0007.jpg" alt="Rio Paraguay"
class="image" style="width:200px;height:150px;float:up"></div><figcaption>Villa Hayes</figcaption></a></b>
<b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/asuncion.html" target="_blank"; style="color:white";><div class="pic">
<figure><img src="C:\Users\amede\OneDrive\Images\Asuncion\IMG-20210329-WA0006.jpg" alt="Palacio de los Lopez"
class="image" style="width:200px;height:150px;float:up"></div><figcaption>Asuncion</figcaption></a></b>
</div>
</div>
</article>
</section>
I hope that my message is clear enough so that you may help me in my learning of the HTML language!
also, any other advice for this kind of website is gladly welcome!
Thank you for your time!
Last edited by a moderator: