Add a tags to images

This commit is contained in:
Fred Boniface 2022-10-13 21:48:53 +01:00
parent 5bc4157097
commit eac6234a73
2 changed files with 27 additions and 22 deletions

View File

@ -14,27 +14,29 @@
<div class="page-main-content">
<a href="/downloads/vcard.vcf" class="download-link">Add me to your contacts</a>
<h2>Find me elsewhere</h2>
<a href="https://fb.me/fred.boniface" target="_blank" rel="noreferrer noopener">Facebook</a>
<a href="https://github.com/frdbonif" target="_blank" rel="noreferrer noopener">GitHub</a>
<a href="https://500px.com/p/fredboniface" target="_blank" rel="noreferrer noopener">500px</a>
<div class="social-links">
<picture>
<source media="(max-width: 400px)" srcset="/images/social-icons/fb_blue_58.png" type="image/png">
<source media="(max-width: 600px)" srcset="/images/social-icons/fb_blue_144.png" type="image/png">
<img src="/images/social-icons/fb_blue_250.png" alt="Facebook Logo">
</picture>
<picture>
<source media="(max-width: 400px)" srcset="/images/social-icons/gh_white_64.png" type="image/png">
<img src="/images/social-icons/gh_white_120.png" alt="GitHub Logo">
</picture>
<picture>
<source media="(max-width: 600px)" srcset="/images/social-icons/500px_114.jxl" type="image/jxl">
<source media="(max-width: 600px)" srcset="/images/social-icons/500px_114.png" type="image/png">
<source srcset="/images/social-icons/500px_250.jxl" type="image/jxl">
<img src="/images/social-icons/500px_250.png" alt="500px Logo">
</picture>
</div>
<div class="social-links">
<a href="https://fb.me/fred.boniface" target="_blank" rel="noreferrer noopener">
<picture>
<source media="(max-width: 400px)" srcset="/images/social-icons/fb_blue_58.png" type="image/png">
<source media="(max-width: 600px)" srcset="/images/social-icons/fb_blue_144.png" type="image/png">
<img src="/images/social-icons/fb_blue_250.png" alt="Facebook Logo">
</picture>
</a>
<a href="https://github.com/frdbonif" target="_blank" rel="noreferrer noopener">
<picture>
<source media="(max-width: 400px)" srcset="/images/social-icons/gh_white_64.png" type="image/png">
<img src="/images/social-icons/gh_white_120.png" alt="GitHub Logo">
</picture>
</a>
<a href="https://500px.com/p/fredboniface" target="_blank" rel="noreferrer noopener">
<picture>
<source media="(max-width: 600px)" srcset="/images/social-icons/500px_114.jxl" type="image/jxl">
<source media="(max-width: 600px)" srcset="/images/social-icons/500px_114.png" type="image/png">
<source srcset="/images/social-icons/500px_250.jxl" type="image/jxl">
<img src="/images/social-icons/500px_250.png" alt="500px Logo">
</picture>
</a>
</div>
</div>

View File

@ -40,7 +40,7 @@ body {
}
.social-links img {
max-width: 100px;
max-width: 50px;
}
.download-link {
@ -150,4 +150,7 @@ footer {
/*Provice space for top menu*/
.page-title {padding-top: 100px}
/*Increase social link image size*/
.social-links img {max-width: 75px;}
}