-
Notifications
You must be signed in to change notification settings - Fork 1
/
web-development.html
304 lines (261 loc) · 12.9 KB
/
web-development.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
<!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>Technology Blog</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/devbg-transformed.jpeg" alt="bgimg">
<h2 class="text-center mb-4">Web Development</h2>
<div class="bubbles"></div>
</div>
</div>
<div class="container py-5">
<p><strong>Discover how our web development services can transform your online presence. Explore our offerings and join us in shaping the future of digital experiences.</strong></p>
<p class="text-center mb-4"><strong>Revolutionizing Web Development with AtonixCorp</strong></p>
<p>In today’s digital era, a robust online presence is crucial for businesses of all sizes. At AtonixCorp, we are committed to delivering innovative web development solutions that not only meet but exceed industry standards. Our team of experienced developers, designers, and strategists work collaboratively to create web experiences that are functional, engaging, and tailored to the unique needs of our clients.</p>
<br>
<p><strong>Our Web Development Expertise</strong></p><br>
<p>At AtonixCorp, we offer a comprehensive suite of web development services designed to cater to diverse business requirements. Here’s how we leverage technology to create outstanding web solutions:</p>
<br>
<p><strong>1. Custom Website Development:</strong> <br>We build custom websites from the ground up, tailored to align with your brand identity and business goals. Our approach involves understanding your vision and requirements to create a unique web experience that stands out in a crowded digital landscape.</p>
<br>
<p><strong>2. Responsive Design:</strong> <br>With the increasing use of mobile devices, having a website that looks and performs well across all screen sizes is essential. Our responsive design solutions ensure that your website delivers a seamless user experience on desktops, tablets, and smartphones, enhancing accessibility and engagement.</p>
<br>
<p><strong>3. E-Commerce Solutions:</strong><br> We specialize in developing secure and scalable e-commerce platforms that facilitate smooth online transactions and customer interactions. Our e-commerce solutions are designed to enhance user experience, optimize conversion rates, and support business growth.</p>
<br>
<p><strong>4. Content Management Systems (CMS):</strong><br> Managing website content should be intuitive and efficient. We develop and implement CMS solutions that empower you to easily update and manage your content without technical expertise. Whether you need a custom CMS or integration with popular platforms like WordPress or Joomla, we’ve got you covered.</p>
<br>
<p><strong>5. Web Application Development:</strong> <br>Our expertise extends to developing robust web applications that solve specific business challenges. From complex enterprise applications to user-friendly tools, we leverage the latest technologies to build applications that drive efficiency and innovation.</p>
<br>
<p><strong>6. UX/UI Design:</strong> <br>User experience (UX) and user interface (UI) design are pivotal in creating engaging and effective websites. Our design team focuses on creating visually appealing and user-friendly interfaces that enhance usability and ensure a positive user experience.</p>
<br>
<p><strong>7. SEO Optimization:</strong> <br>A beautiful website is only effective if it attracts visitors. Our SEO optimization services ensure that your website is visible on search engines, helping you reach your target audience and achieve your business objectives.</p>
<br>
<p>At AtonixCorp, we believe that web development is more than just coding; it’s about creating digital experiences that resonate with users and drive business success. Our commitment to excellence and innovation sets us apart as a leading provider of web development solutions.</p>
<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>
</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: contact@example.com</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 src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/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;
}
.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 {
position: relative;
height: 100vh; /* Full viewport height */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-bg h2 {
padding-bottom: 300px;
position: absolute; /* Absolute positioning to place it on top of the background */
top: 50%; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Center the element itself */
background-color: rgba(112, 8, 8, 0); /* Semi-transparent background color */
color: #ffffff;
font-size: 4rem;
font-weight: 900;
text-transform: capitalize;
text-align: center;
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(247, 131, 14, 0.838), /* Red glow effect */
0 0 20px rgba(255, 166, 0, 0.781),
0 0 30px rgba(255, 151, 6, 0.3);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.hero-bg h2 {
font-size: 3rem; /* Smaller font size on tablets */
padding-top: 100px; /* Adjust padding for smaller screens */
padding-left: 15px; /* Reduce left padding */
}
}
@media (max-width: 480px) {
.hero-bg h2 {
font-size: 2rem; /* Smaller font size on mobile devices */
padding-top: 50px; /* Adjust padding for very small screens */
padding-left: 10px; /* Further reduce left padding */
}
}
/* 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 footer */
@media (max-width: 768px) {
.footer-section {
flex: 1 1 100%; /* Full width on smaller screens */
padding: 10px 0; /* Vertical padding for sections */
}}
/* Responsive adjustments */
@media (max-width: 768px) {
.hero-bg {
height: 50vh; /* Adjusted height for smaller screens */
}
.hero-bg h2 {
font-size: 3rem; /* Smaller font size on tablets */
padding: 0 15px; /* Reduce horizontal padding */
margin-top: 30px; /* 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: 2rem; /* Smaller font size on mobile devices */
padding: 0 10px; /* Further reduce horizontal padding */
margin-top: 20px; /* Adjust the down position for mobile devices */
}
}
</style>