Skip to content

Commit e3c8738

Browse files
author
Dario Luna
committed
Add social media overlay on right side of video
1 parent 35f58ad commit e3c8738

File tree

1 file changed

+124
-0
lines changed

1 file changed

+124
-0
lines changed

‎index.html‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,136 @@
3333
object-fit: contain;
3434
background: #000;
3535
}
36+
37+
.social-overlay {
38+
position: fixed;
39+
bottom: 30px;
40+
right: 30px;
41+
background: rgba(255, 255, 255, 0.95);
42+
border-radius: 20px;
43+
padding: 20px 25px;
44+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
45+
z-index: 1000;
46+
backdrop-filter: blur(10px);
47+
transition: transform 0.3s ease, opacity 0.3s ease;
48+
}
49+
50+
.social-overlay:hover {
51+
transform: translateY(-5px);
52+
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
53+
}
54+
55+
.social-title {
56+
color: #333;
57+
font-size: 1.5rem;
58+
font-weight: bold;
59+
margin-bottom: 15px;
60+
text-align: center;
61+
}
62+
63+
.social-links {
64+
display: flex;
65+
gap: 15px;
66+
justify-content: center;
67+
align-items: center;
68+
}
69+
70+
.social-link {
71+
display: flex;
72+
flex-direction: column;
73+
align-items: center;
74+
text-decoration: none;
75+
color: #333;
76+
transition: transform 0.3s ease;
77+
}
78+
79+
.social-link:hover {
80+
transform: scale(1.15);
81+
}
82+
83+
.social-icon {
84+
width: 50px;
85+
height: 50px;
86+
border-radius: 50%;
87+
display: flex;
88+
align-items: center;
89+
justify-content: center;
90+
font-size: 1.5rem;
91+
margin-bottom: 5px;
92+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
93+
transition: box-shadow 0.3s ease;
94+
}
95+
96+
.social-link:hover .social-icon {
97+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
98+
}
99+
100+
.social-link.facebook .social-icon {
101+
background: #1877f2;
102+
color: #fff;
103+
}
104+
105+
.social-link.twitter .social-icon {
106+
background: #1da1f2;
107+
color: #fff;
108+
}
109+
110+
.social-link.linkedin .social-icon {
111+
background: #0077b5;
112+
color: #fff;
113+
}
114+
115+
.social-link.youtube .social-icon {
116+
background: #ff0000;
117+
color: #fff;
118+
}
119+
120+
@media (max-width: 768px) {
121+
.social-overlay {
122+
bottom: 15px;
123+
right: 15px;
124+
padding: 15px;
125+
}
126+
127+
.social-title {
128+
font-size: 1.2rem;
129+
margin-bottom: 12px;
130+
}
131+
132+
.social-links {
133+
gap: 10px;
134+
}
135+
136+
.social-icon {
137+
width: 40px;
138+
height: 40px;
139+
font-size: 1.2rem;
140+
}
141+
}
36142
</style>
37143
</head>
38144
<body>
39145
<video id="mainVideo" controls playsinline preload="auto" loop>
40146
Your browser does not support HTML5 video.
41147
</video>
148+
149+
<div class="social-overlay" id="socialOverlay">
150+
<div class="social-title">PeruJUG</div>
151+
<div class="social-links">
152+
<a href="https://www.facebook.com/groups/perujug" target="_blank" rel="noopener noreferrer" class="social-link facebook" title="Facebook">
153+
<div class="social-icon" style="font-weight: bold; font-size: 1.8rem;">f</div>
154+
</a>
155+
<a href="https://twitter.com/perujug" target="_blank" rel="noopener noreferrer" class="social-link twitter" title="Twitter">
156+
<div class="social-icon" style="font-size: 1.3rem;">🐦</div>
157+
</a>
158+
<a href="https://www.linkedin.com/company/perujug/" target="_blank" rel="noopener noreferrer" class="social-link linkedin" title="LinkedIn">
159+
<div class="social-icon" style="font-weight: bold; font-size: 1.3rem;">in</div>
160+
</a>
161+
<a href="https://www.youtube.com/c/PeruJUG" target="_blank" rel="noopener noreferrer" class="social-link youtube" title="YouTube">
162+
<div class="social-icon" style="font-size: 1.3rem;">▶</div>
163+
</a>
164+
</div>
165+
</div>
42166

43167
<script>
44168
const video = document.getElementById('mainVideo');

0 commit comments

Comments
 (0)