Modify HTML and CSS to incorporate logos with hyyperlinks, GitHub link too small.

This commit is contained in:
Ray 2024-09-07 14:56:28 +10:00
parent dd56071794
commit de0c7acd17
2 changed files with 17 additions and 8 deletions

View File

@ -17,7 +17,7 @@
</video> </video>
<div class="centered-content"> <div class="centered-content">
<h1>reiyua</h1> <h1>reiyua</h1>
<p class="email">rei@reiyua.lol</p> <p class="tagline">20 year old gamer and qualified IT Guru.</p>
<div class="social-icons"> <div class="social-icons">
<a href="https://instagram.com/rreiyua" target="_blank"> <a href="https://instagram.com/rreiyua" target="_blank">
<img src="assets/instagram-logo.png" alt="Instagram" class="social-logo"> <img src="assets/instagram-logo.png" alt="Instagram" class="social-logo">
@ -31,6 +31,12 @@
<a href="https://github.com/reiyua" target="_blank"> <a href="https://github.com/reiyua" target="_blank">
<img src="assets/github-logo.png" alt="GitHub" class="social-logo github-logo"> <img src="assets/github-logo.png" alt="GitHub" class="social-logo github-logo">
</a> </a>
<a href="https://x.com/rreiyua" target="_blank">
<img src="assets/x-logo.png" alt="X / Twitter" class="social-logo x-logo">
</a>
<a href="mailto:rei@reiyua.lol" target="_blank">
<img src="assets/email-logo.png" alt="Email" class="social-logo">
</a>
</div> </div>
</div> </div>
<div class="credit"> <div class="credit">

View File

@ -33,7 +33,7 @@ h1 {
color: #ffffff; color: #ffffff;
} }
.email { .tagline {
font-size: 1.2em; font-size: 1.2em;
margin-top: 10px; margin-top: 10px;
color: #ffffff; color: #ffffff;
@ -70,14 +70,17 @@ h1 {
height: 50px; height: 50px;
object-fit: contain; object-fit: contain;
transition: transform 0.3s ease; transition: transform 0.3s ease;
margin-left: 0;
margin-right: 0;
} }
.social-logo.github-logo { .social-logo.github-logo {
width: 90px; /* Increase the size of the GitHub logo slightly */ width: 60px !important;
height: 90px; height: 60px !important;
margin-left: -30px;
} }
.social-logo:hover { .social-logo.x-logo,
transform: scale(1.2); .social-logo.email-logo {
width: 50px;
height: 50px;
} }