-
Notifications
You must be signed in to change notification settings - Fork 1
/
MET.html
328 lines (281 loc) · 13.7 KB
/
MET.html
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Media/Entertainment Technology</title>
</head>
<body>
<!--Nav bar-->
<div class="container-fluid">
<div class="navbar navbar-expand-lg bg-body-tertiary">
<a href="#" class="navbar-brand">
<img src="img/logo.jpg" alt="logo" class="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a href="index.html#home" class="nav-link">Home</a></li>
<li class="nav-item"><a href="index.html#about" class="nav-link">About Us</a></li>
<li><a href="description.html">Services</a></li>
<li class="nav-item"><a href="index.html#portfolio" class="nav-link">Projects/Portfolio</a></li>
<li class="nav-item"><a href="index.html#blog" class="nav-link">Blog</a></li>
<li><a href="prometheusapm.html">PrometheusAPM</a></li>
<li class="nav-item"><a href="index.html#contact" class="nav-link">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="container py-5">
<div class="hero-bg">
<img class="background-image" src="img/metbg.jpg" alt="bgimg">
<h2>Media / <br>
Entertainment
<br>
Technology</h2>
<div class="bubbles"></div>
</div>
<br>
<br>
<p><strong>Welcome to AtonixCorp's Media and Entertainment Technology Solutions</strong></p>
<p>At AtonixCorp, we merge creativity with cutting-edge technology to revolutionize the media and entertainment industry. Our goal is to enhance user experiences, streamline content delivery, and drive innovation through advanced technology solutions. Our comprehensive media and entertainment technology services are designed to meet the evolving needs of audiences and creators alike.</p>
<p class="text-center mb-4"><strong>Our Media and Entertainment Technology Solutions</strong></p>
<p class="text-center mb-4">At AtonixCorp, we offer a wide array of solutions tailored to enhance and transform the media and entertainment landscape:</p>
<br>
<img class="img-center mb-4 d-block mx-auto w-50"
src="img/metside (1).png" alt="ML">
<br>
<p><strong>1. Immersive Content Delivery:</strong> <br>In an era where immersive experiences are paramount, our technology solutions enable the seamless delivery of high-quality, engaging content. From virtual reality (VR) to augmented reality (AR), we help content creators deliver experiences that captivate audiences and bring stories to life in new and exciting ways.</p>
<p><strong>2. Personalized Recommendations:</strong><br> Audiences today expect personalized content tailored to their preferences. Our AI-driven recommendation systems analyze user behavior and preferences to deliver customized content suggestions. Whether it’s movies, music, or articles, our solutions ensure that users receive relevant and engaging recommendations, enhancing their overall experience.</p>
<p><strong>3. Advanced Media Analytics:</strong><br> Understanding audience engagement and content performance is crucial in the media and entertainment industry. Our advanced analytics solutions provide deep insights into user interactions, content popularity, and audience demographics. These insights empower creators and businesses to make informed decisions, optimize content strategies, and maximize engagement.</p>
<p><strong>4. Content Management Systems (CMS):</strong><br> Efficient content management is essential for media organizations. Our CMS solutions are designed to streamline the creation, storage, and distribution of content. With intuitive interfaces and robust features, our systems facilitate seamless content workflows, ensuring that creators can focus on what they do best – creating compelling content.</p>
<p><strong>5. Digital Rights Management (DRM):</strong><br> Protecting intellectual property is a top priority in the media and entertainment industry. Our DRM solutions safeguard digital content from unauthorized access and distribution. By implementing robust encryption and access control measures, we help businesses protect their valuable assets and ensure compliance with licensing agreements.</p>
<p><strong>6. Interactive Experiences:</strong><br> Engaging audiences through interactive content is a powerful way to build brand loyalty and drive engagement. Our technology solutions enable the creation of interactive experiences, such as live streaming, interactive videos, and gamified content. These experiences encourage active participation and create memorable interactions for users.</p>
<br>
<p>At AtonixCorp, we are committed to pushing the boundaries of what is possible in the media and entertainment industry. Our solutions are designed to enhance creativity, improve efficiency, and provide unparalleled experiences for audiences. By partnering with us, you can leverage our expertise and innovative technology to stay ahead in the ever-evolving digital landscape.</p>
<br>
<br>
<img class="img-center mb-4 d-block mx-auto w-50"
src="img/metside1 (1).png" alt="ML">
<br>
<div class="text-center"><b>
<p class="quote">"At AtonixCorp, we’re not just about providing services; we’re about making a meaningful impact. Join us in exploring our comprehensive solutions and see how we can work together to achieve excellence and innovation."</p>
</b> </div>
<br>
</div>
<!--footer-->
<div class="footer">
<div class="footer-content container">
<div class="footer-section">
<h3>About Us</h3>
<p style="font-weight: bold;">
AtonixCorp </p>
<p>
<i>Pioneering data analytics and technology solutions.<br>
Explore our innovations in IoT, agriculture, oil, AI, and media.<br>
Join us in shaping the future of technology.</i>
</p>
</div>
<div class="footer-section">
<h3>Contact Us</h3>
<p style="font-weight: bold;">Email: [email protected]</p>
<p style="font-weight: bold;">Phone: +123 456 7890</p><br>
<p style="font-weight: bold;">Office address: <a href="https://www.google.com/maps?q=70+W+Madison+St,+Chicago,+IL+60602,+United+States" target="_blank">70 W Madison St, Chicago, IL 60602, United States</a></p>
</div>
<div class="footer-section">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="https://www.linkedin.com/company/atonixcorp/" aria-label="LinkedIn"><img src="animation/icons8-linkedin-circled.gif" alt="linkedin" class="gif-icon"></a>
<a href="https://twitter.com/ofidohub" aria-label="Twitter"><img src="animation/icons8-twitter.gif" alt="twitter" class="gif-icon">
</a>
<a href="https://www.instagram.com/ofidohub/" aria-label="Instagram"><img src="animation/icons8-instagram.gif" alt="instagram" class="gif-icon">
</a>
</div>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html#home">Home</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="description.html">Services</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</div>
</div>
<p>© 2024 AtonixCorp</p>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const bubbles = document.querySelector('.bubbles');
const bubbleCount = 100; // Number of bubbles
for (let i = 0; i < bubbleCount; i++) {
const bubble = document.createElement('span');
bubble.className = 'bubble';
bubble.style.left = `${Math.random() * 100}%`; // Random horizontal position
bubble.style.animationDuration = `${Math.random() * 5 + 5}s`; // Random duration between 5s and 10s
bubble.style.animationDelay = `${Math.random() * 5}s`; // Random delay between 0s and 5s
bubble.style.width = `${Math.random() * 20 + 10}px`; // Random size between 10px and 30px
bubble.style.height = bubble.style.width; // Ensure bubble is circular
bubbles.appendChild(bubble);
}
});
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Bubble effect */
.bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1; /* Ensure the bubbles are above the background image but below the text */
}
.bubble {
position: absolute;
bottom: -50px;
background: rgba(237, 59, 14, 0.76);
border-radius: 50%;
opacity: 0;
animation: rise 10s infinite;
}
@keyframes rise {
0% {
transform: translateY(0);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translateY(-100vh);
opacity: 0;
}
}
.hero-bg {
position: relative;
height: 100vh; /* Full viewport height */
display: flex;
align-items: center;
justify-content: center;
}
.hero-bg .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Ensure the image covers the container */
z-index: 0; /* Ensure the image is below the text */
}
.hero-bg h2 {
padding-top: 150px;
position: absolute; /* Absolute positioning to place it on top of background */
top: 50%; /* Center vertically */
left: 0; /* Align to the left */
padding-left: 20px; /* Add some left padding for spacing */
background-color: rgba(112, 8, 8, 0); /* Semi-transparent background color */
color: #ffffff;
font-size: 4rem;
font-weight: 900;
text-transform: capitalize;
text-align: left;
z-index: 2; /* Ensure text is above the background image */
cursor: default;
transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition */
}
/* Hover effect for the h2 element */
.hero-bg h2:hover {
color: #ffea00; /* Change text color on hover */
text-shadow: 0 0 10px rgba(255, 0, 0, 0.7), /* Red glow effect */
0 0 20px rgba(255, 0, 0, 0.5),
0 0 30px rgba(255, 0, 0, 0.3);
}
/* Footer container */
.footer {
background-image: url(img/footer.jpg); /* Dark background color */
color: #ffffff; /* black text color */
padding: 40px 0; /* Top and bottom padding */
text-align: center; /* Center text */
}
/* Footer content container */
.footer-content {
display: flex;
flex-wrap: wrap; /* Allows sections to wrap to the next line if needed */
justify-content: center; /* Center the footer sections horizontally */
gap: 20px; /* Space between sections */
}
/* Individual footer sections */
.footer-section {
flex: 1 1 200px; /* Grow and shrink with a base width of 200px */
padding: 0 15px; /* Horizontal padding for sections */
}
.footer-section h3 {
color: #ffffff;
margin-bottom: 15px; /* Space below the heading */
font-size: 30px; /* Font size for headings */
}
.footer-section p, .footer-section ul {
margin: 0; /* Remove default margin */
font-weight: 100;
color: #f6f4f4;
font-size: 20px; /* Font size for paragraphs and list items */
}
.footer-section ul {
list-style-type: none; /* Remove bullet points */
padding: 0; /* Remove default padding */
}
.footer-section ul li {
margin-bottom: 10px; /* Space between list items */
}
.footer-section ul li a {
color: #ffffff; /* White text color for links */
text-decoration: none; /* Remove underline from links */
}
.footer-section ul li a:hover {
text-decoration: underline; /* Underline on hover */
}
.social-icons a {
margin: 0 10px; /* Space between social icons */
display: inline-block; /* Align icons horizontally */
}
.social-icons img {
width: 30px; /* Size of social icons */
height: 30px; /* Size of social icons */
}
/* Responsive adjustments */
@media (max-width: 768px) {
.hero-bg {
height: 50vh; /* Adjusted height for smaller screens */
}
.hero-bg h2 {
font-size: 1.5rem; /* Smaller font size on tablets */
padding: 0 15px; /* Reduce horizontal padding */
margin-top: 80px; /* Adjust the down position for tablets */
}
}
@media (max-width: 480px) {
.hero-bg {
height: 50vh; /* Adjusted height for very small screens */
}
.hero-bg h2 {
font-size: 1rem; /* Smaller font size on mobile devices */
padding: 0 10px; /* Further reduce horizontal padding */
margin-top: 70px; /* Adjust the down position for mobile devices */
}
}
</style>