apdtest/socialtest.html at main · ApatheticDELL/apdtest · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.social_quicklinks {
    display: flex;
    gap: 1vw;
    padding: 2vh;
    justify-content: center;
}

.social_quicklinks a {
    padding: 3vh;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-height: 800px) {
    .social_quicklinks a {
        padding: 5vh;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

.social_quicklinks .youtube { background-image: url(./assets/social/youtube.png); }
.social_quicklinks .discord { background-image: url(./assets/social/discord.png); }
.social_quicklinks .bluesky { background-image: url(./assets/social/bluesky.png); }
.social_quicklinks .twitter { background-image: url(./assets/social/twitter.png); }
</style>
</head>
<body>

<h2>Style Social Media Buttons</h2>

<div class="social_quicklinks">
    <a href="#" title="YouTube" class="youtube"></a>
    <a href="#" title="Discord" class="discord"></a>
    <a href="#" title="Bluesky" class="bluesky"></a>
    <a href="#" title="Twitter" class="twitter"></a>
</div>

</body>
</html>