reiyua
/
reiyua.lol
mirror of https://github.com/reiyua/reiyua.lol.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add social media logo icons to website

This commit is contained in:
Ray 2024-08-28 15:56:47 +10:00
parent 24835f10fa
commit 7eecff2d90
6 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/discord-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
assets/github-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
assets/instagram-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 206 KiB

BIN
assets/youtube-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

14
index.html
View File

@ -18,6 +18,20 @@
<div class="centered-content">
<h1>reiyua</h1>
<p class="email">rei@reiyua.lol</p>
<div class="social-icons">
<a href="https://instagram.com/reiyua" target="_blank">
<img src="assets/instagram-logo.png" alt="Instagram" class="social-logo">
</a>
<a href="discord://-/users/1024179829911855234" target="_blank">
<img src="assets/discord-logo.png" alt="Discord" class="social-logo">
</a>
<a href="https://youtube.com/@reiyua" target="_blank">
<img src="assets/youtube-logo.png" alt="YouTube" class="social-logo">
</a>
<a href="https://github.com/reiyua" target="_blank">
<img src="assets/github-logo.png" alt="GitHub" class="social-logo github-logo">
</a>
</div>
</div>
<div class="credit">
Video by <a href="https://www.pexels.com/video/an-orange-liquid-paint-in-motion-5649211/" target="_blank" rel="noopener noreferrer">Dan Cristian Pădureț</a> from Pexels

25
styles.css
View File

@ -56,3 +56,28 @@ h1 {
.credit a:hover {
text-decoration: none;
}
.social-icons {
margin-top: 15px;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.social-logo {
width: 50px;
height: 50px;
object-fit: contain;
transition: transform 0.3s ease;
}
.social-logo.github-logo {
width: 90px; /* Increase the size of the GitHub logo slightly */
height: 90px;
margin-left: -30px;
}
.social-logo:hover {
transform: scale(1.2);
}