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

View File

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