Hi everyone,
I am currently trying to build the tribute page and have decided to see if I could figure out how the example page was made without looking at the code. I have tried to add a caption to my image within a small white border as shown in the example.
I have been nabbing examples from all over the web but nothing seems to solve my problem. The html I have written so far is:
<div class="container fluid">
<div id="fondo">
<div class="silver-background" id="grey-space">
<h1 class="text-center" style="font-family: Lobster">
Nuria Graham</h1>
<h3 class="text-center" style="font-family: Lobster"><i>Bell-ringing vigatana</i></h3>
<figure class="img-set">
<img src="https://scontent-mad1-1.xx.fbcdn.net/v/t31.0-8/21641069_10212517607227735_5380049354458771362_o.jpg?oh=c4e2847819d93cd810951520a4079ee2&oe=5B1E8E7F" alt="Una tia de la plana">
<figcaption class="text-center">Una rata a Vic</figcaption>
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae diam quis magna interdum varius. Phasellus sit amet euismod odio. Curabitur dictum mattis rutrum. Aliquam erat volutpat. Nulla a dapibus metus. Nulla quis pulvinar lectus, at facilisis purus. Sed et lectus vitae tortor fermentum efficitur ut eu risus.
<br><br>
Proin placerat ut lacus non vestibulum. Donec nec maximus turpis, et tincidunt lorem. Cras sit amet mollis felis. Etiam vulputate nulla massa, nec interdum sapien congue vitae. Duis consequat tellus vel est pellentesque, et laoreet nunc consectetur. Phasellus ultricies velit vitae metus bibendum tincidunt. Ut risus risus, auctor dignissim magna pharetra, iaculis aliquet risus. Vestibulum mattis dignissim lorem sit amet tempus. Cras ut risus sit amet odio pellentesque vestibulum. Etiam convallis vestibulum massa et dignissim. Etiam sagittis metus quam, et sagittis nunc imperdiet sit amet. Vestibulum porta nunc enim, ut vulputate metus tristique eu. Proin pellentesque nisi vitae purus pretium, in rutrum felis consectetur.
<br><br>
Maecenas tempor a erat volutpat dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam egestas et tortor ac mattis. Aliquam ut maximus metus. Donec convallis nibh sit amet augue ultricies, eu suscipit felis imperdiet. Aliquam eu libero eu purus pharetra vehicula at ut dolor. Nunc quis eros mollis, convallis justo eget, tempor magna. Phasellus dignissim pellentesque odio, non tincidunt tellus convallis id. Nam tempor accumsan nisi, quis congue ipsum pharetra eget. Mauris interdum nibh sapien, eu mollis nibh porta eu. Nam non ullamcorper lacus. Aliquam at leo id metus interdum varius. Sed gravida egestas tellus ac blandit.
</p>
</div>
</div>
</div>
And the css meant to format it all is the following:
body{
margin-top: 60px;
}
.silver-background{
background-color: #E8E8E8;
border-radius: 5px;
}
.img-set {
border-bottom: 30px solid white;
}
.img-set img {
display: block;
margin: 0 auto;
width: 90%;
height: auto;
max-width: 90%;
border-radius: 5px
}
I have been able to either have a border separate the caption from the image or indeed have the border begin after the caption I cannot put the caption in the white border. Any ideas?
Thanks so much everyone!