Skip to content

Commit 68d1bde

Browse files
braham31dotbraham31dot
authored
Add files via upload
0 parents  commit 68d1bde

1 file changed

Lines changed: 181 additions & 0 deletions

File tree

‎webdevindex.html‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Secure Web Solutions</title>
7+
<style>
8+
body {
9+
font-family: 'Arial', sans-serif;
10+
background: #111; /* Dark background */
11+
color: #eee; /* Light text color */
12+
margin: 0;
13+
padding: 0;
14+
display: flex;
15+
flex-direction: column;
16+
min-height: 100vh;
17+
}
18+
19+
header {
20+
background: linear-gradient(to right, #444, #111);
21+
color: gold;
22+
padding: 20px;
23+
text-align: center;
24+
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow */
25+
}
26+
27+
.container {
28+
width: 80%;
29+
margin: 20px auto;
30+
padding: 20px;
31+
background: #222; /* Darker container */
32+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
33+
border-radius: 8px; /* Rounded corners */
34+
}
35+
36+
h1, h2, h3 {
37+
color: gold;
38+
}
39+
40+
.service {
41+
margin-bottom: 20px;
42+
padding: 20px;
43+
border: 1px solid #555; /* Subtle border */
44+
border-radius: 8px;
45+
background: #333;
46+
transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions */
47+
}
48+
49+
.service:hover {
50+
transform: translateY(-5px); /* Lift up on hover */
51+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
52+
}
53+
54+
.contact-us {
55+
background: #333;
56+
padding: 20px;
57+
border-radius: 8px;
58+
}
59+
60+
label {
61+
display: block;
62+
margin-bottom: 5px;
63+
color: #ddd;
64+
}
65+
66+
input, textarea {
67+
width: 100%;
68+
padding: 10px;
69+
margin-bottom: 15px;
70+
border: 1px solid #555;
71+
border-radius: 5px;
72+
box-sizing: border-box;
73+
background: #444;
74+
color: #eee;
75+
}
76+
77+
button {
78+
background: linear-gradient(to right, #d4af37, #ffd700); /* Gold gradient */
79+
color: #111;
80+
padding: 12px 20px;
81+
border: none;
82+
border-radius: 8px;
83+
cursor: pointer;
84+
font-weight: bold;
85+
transition: background 0.3s ease, transform 0.2s ease;
86+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
87+
}
88+
89+
button:hover {
90+
background: linear-gradient(to right, #c09a24, #e6ad00); /* Darker gold on hover */
91+
transform: scale(1.05); /* Scale up slightly on hover */
92+
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
93+
}
94+
95+
footer {
96+
background: #111;
97+
color: #eee;
98+
text-align: center;
99+
padding: 10px;
100+
margin-top: auto;
101+
}
102+
103+
.thank-you {
104+
color: #ffd700;
105+
text-align: center;
106+
margin-top: 10px;
107+
font-size: 1.2em;
108+
}
109+
</style>
110+
</head>
111+
<body>
112+
113+
<header>
114+
<h1>Secure Web Solutions</h1>
115+
<p>Building Trust, One Website at a Time</p>
116+
</header>
117+
118+
<div class="container">
119+
<h2>Our Services</h2>
120+
121+
<div class="service">
122+
<h3>Secure Website Development</h3>
123+
<p>We specialize in building robust and secure websites using the latest technologies (HTML, CSS, JavaScript). Our focus is on creating unique, high-performing websites tailored to your specific needs.</p>
124+
</div>
125+
126+
<div class="service">
127+
<h3>DNS and HTTPS Implementation</h3>
128+
<p>We ensure your website is protected with proper DNS configuration and HTTPS encryption, safeguarding your data and building trust with your visitors.</p>
129+
</div>
130+
131+
<div class="service">
132+
<h3>Custom Code Development</h3>
133+
<p>Need unique functionality? Our expert developers create custom HTML, CSS, and JavaScript code tailored to your specific requirements. We provide high-quality, maintainable code that integrates seamlessly with your website.</p>
134+
</div>
135+
136+
<div class="service">
137+
<h3>Website Creation and Publishing</h3>
138+
<p>From design to deployment, we handle the entire website creation process. We'll build your website, publish it online, and provide two months of free maintenance after launch.</p>
139+
</div>
140+
141+
<div class="contact-us">
142+
<h2>Contact Us</h2>
143+
<p>Ready to discuss your project? Get in touch with us today!</p>
144+
<form id="contactForm" action="https://formspree.io/f/xpwqrojw" method="POST">
145+
<label for="name">Name:</label>
146+
<input type="text" id="name" name="name" required>
147+
148+
<label for="email">Email:</label>
149+
<input type="email" id="email" name="email" required>
150+
151+
<label for="message">Message:</label>
152+
<textarea id="message" name="message" required></textarea>
153+
154+
<button type="submit">Submit</button>
155+
</form>
156+
<div class="thank-you" style="display:none;">Thank you for your message! We will get back to you shortly.</div>
157+
</div>
158+
</div>
159+
160+
<footer>
161+
&copy; 2023 Secure Web Solutions
162+
</footer>
163+
164+
<script>
165+
const form = document.getElementById('contactForm');
166+
const thankYouMessage = document.querySelector('.thank-you');
167+
168+
form.addEventListener('submit', function(event) {
169+
form.style.display = 'none';
170+
thankYouMessage.style.display = 'block';
171+
172+
setTimeout(() => {
173+
form.reset();
174+
form.style.display = 'block';
175+
thankYouMessage.style.display = 'none';
176+
}, 5000);
177+
});
178+
</script>
179+
180+
</body>
181+
</html>

0 commit comments

Comments
 (0)