System-End/Team_Website
1
0
Fork 0
mirror of https://github.com/System-End/Team_Website.git synced 2026-04-19 22:05:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add socials box at bottom of page

Browse source
This commit is contained in:
John Studnicka 2024-02-20 17:48:07 -07:00
parent 687f795d5b
commit a66d46c418
2 changed files with 68 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
Pages/Desktop.css
View file

@ -277,6 +277,43 @@ main {
display: flex;
}
.social-icons {
position: relative;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
background: #fff;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px; /* Optional, for rounded corners */
}
.social-icons ul {
list-style: none;
padding: 0;
margin: 0;
display: flex; /* Displays the icons in a row */
}
.social-icons ul li {
margin-right: 10px; /* Adds some space between icons */
}
.social-icons ul li:last-child {
margin-right: 0; /* Removes margin from the last icon */
}
.social-icons ul li a img {
width: 24px; /* Adjusts the size of the icons */
height: auto;
transition: transform 0.3s ease; /* Smooth scaling effect on hover */
}
.social-icons ul li a:hover img {
transform: scale(1.1); /* Scales the icon on hover */
}
/*Mobile*/
@media screen and (max-width: 1200px) {
/* comes into effect for screens larger than or equal to 481 pixels */

49
Pages/index.html
View file

@ -231,24 +231,37 @@
</section>
<section class="footer">
<section id="footer-instagram">
<img src="/Resources/Instagram.png" style="width: 5%" />
<div>teamparadise.1165</div>
</section>
<section id="footer-facebook">
<img
src="/Resources/Facebook.png"
style="width: 5%; padding-bottom: 10px"
/>
<div>Team Paradise 1165</div>
</section>
<section id="footer-gmail">
<img
src="/Resources/Gmail Logo.png"
style="width: 5%; padding-bottom: 10px"
/>
<div>team1165@gmail.com</div>
</section>
<div class="social-icons">
<ul>
<li>
<a
href="https://www.facebook.com/Team1165"
target="_blank"
><img
src="/Resources/Facebook.png"
alt="Facebook"
/></a>
</li>
<li>
<a
href="mailto:team1165@gmail.com"
target="_blank"
><img
src="/Resources/Gmail Logo.png"
alt="Gmail"
/></a>
</li>
<li>
<a
href="https://www.instagram.com/teamparadise.1165"
target="_blank"
><img
src="/Resources/Instagram.png"
alt="Instagram"
/></a>
</li>
</ul>
</div>
</section>
</section>
</main>