Please help me to generate a homepage for my business. So basically, I'm doing the IT consulting for the clients, including startups and enterprises. And my scope of IT consulting is the DevOps and the full stack development, and also the QA. Okay, so please help me to create my homepage with the following sections. I want the hero section first, on top, with a slogan, whatever you want to put for me. And the second section is about the services. I want the cards to display the major services that I'm providing. The third one is about the customer's feedback. And the last section in the bottom is the contact. So we need to allow users to contact us. And put the address, all this information in this section. And you can put the website's name as Daniel's IT Consulting.
Browse files- README.md +9 -5
- index.html +181 -19
README.md
CHANGED
|
@@ -1,10 +1,14 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: ByteBender IT Solutions 🚀
|
| 3 |
+
colorFrom: yellow
|
| 4 |
+
colorTo: red
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
| 14 |
+
|
index.html
CHANGED
|
@@ -1,19 +1,181 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Daniel's IT Consulting</title>
|
| 7 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<style>
|
| 10 |
+
.gradient-bg {
|
| 11 |
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
| 12 |
+
}
|
| 13 |
+
.card-hover:hover {
|
| 14 |
+
transform: translateY(-5px);
|
| 15 |
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 16 |
+
}
|
| 17 |
+
</style>
|
| 18 |
+
</head>
|
| 19 |
+
<body class="font-sans antialiased">
|
| 20 |
+
<!-- Hero Section -->
|
| 21 |
+
<section class="gradient-bg text-white py-20 px-4">
|
| 22 |
+
<div class="container mx-auto max-w-6xl text-center">
|
| 23 |
+
<h1 class="text-4xl md:text-6xl font-bold mb-6">Transforming Ideas Into Digital Reality</h1>
|
| 24 |
+
<p class="text-xl md:text-2xl mb-12">Expert IT Consulting for Startups and Enterprises</p>
|
| 25 |
+
<a href="#contact" class="bg-white text-indigo-700 font-bold py-3 px-8 rounded-full hover:bg-gray-100 transition duration-300 inline-block">Get In Touch</a>
|
| 26 |
+
</div>
|
| 27 |
+
</section>
|
| 28 |
+
|
| 29 |
+
<!-- Services Section -->
|
| 30 |
+
<section class="py-20 px-4 bg-gray-50">
|
| 31 |
+
<div class="container mx-auto max-w-6xl">
|
| 32 |
+
<h2 class="text-3xl font-bold text-center mb-16 text-gray-800">Our Services</h2>
|
| 33 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
| 34 |
+
<!-- DevOps Card -->
|
| 35 |
+
<div class="bg-white rounded-lg shadow-lg p-8 card-hover transition duration-300">
|
| 36 |
+
<div class="text-indigo-600 mb-4">
|
| 37 |
+
<i class="fas fa-server text-4xl"></i>
|
| 38 |
+
</div>
|
| 39 |
+
<h3 class="text-xl font-bold mb-4 text-gray-800">DevOps Solutions</h3>
|
| 40 |
+
<p class="text-gray-600">Streamline your development process with our CI/CD pipelines, containerization, and cloud infrastructure expertise.</p>
|
| 41 |
+
</div>
|
| 42 |
+
|
| 43 |
+
<!-- Full Stack Card -->
|
| 44 |
+
<div class="bg-white rounded-lg shadow-lg p-8 card-hover transition duration-300">
|
| 45 |
+
<div class="text-indigo-600 mb-4">
|
| 46 |
+
<i class="fas fa-code text-4xl"></i>
|
| 47 |
+
</div>
|
| 48 |
+
<h3 class="text-xl font-bold mb-4 text-gray-800">Full Stack Development</h3>
|
| 49 |
+
<p class="text-gray-600">End-to-end web and application development with modern frameworks and best practices.</p>
|
| 50 |
+
</div>
|
| 51 |
+
|
| 52 |
+
<!-- QA Card -->
|
| 53 |
+
<div class="bg-white rounded-lg shadow-lg p-8 card-hover transition duration-300">
|
| 54 |
+
<div class="text-indigo-600 mb-4">
|
| 55 |
+
<i class="fas fa-bug text-4xl"></i>
|
| 56 |
+
</div>
|
| 57 |
+
<h3 class="text-xl font-bold mb-4 text-gray-800">Quality Assurance</h3>
|
| 58 |
+
<p class="text-gray-600">Comprehensive testing strategies to ensure your product meets the highest quality standards.</p>
|
| 59 |
+
</div>
|
| 60 |
+
</div>
|
| 61 |
+
</div>
|
| 62 |
+
</section>
|
| 63 |
+
|
| 64 |
+
<!-- Testimonials Section -->
|
| 65 |
+
<section class="py-20 px-4 bg-white">
|
| 66 |
+
<div class="container mx-auto max-w-6xl">
|
| 67 |
+
<h2 class="text-3xl font-bold text-center mb-16 text-gray-800">What Our Clients Say</h2>
|
| 68 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
| 69 |
+
<div class="bg-gray-50 p-8 rounded-lg">
|
| 70 |
+
<div class="flex items-center mb-4">
|
| 71 |
+
<div class="text-yellow-400">
|
| 72 |
+
<i class="fas fa-star"></i>
|
| 73 |
+
<i class="fas fa-star"></i>
|
| 74 |
+
<i class="fas fa-star"></i>
|
| 75 |
+
<i class="fas fa-star"></i>
|
| 76 |
+
<i class="fas fa-star"></i>
|
| 77 |
+
</div>
|
| 78 |
+
</div>
|
| 79 |
+
<p class="text-gray-600 italic mb-6">"Daniel's team transformed our deployment process, reducing our release cycles from weeks to days. Their DevOps expertise is unmatched!"</p>
|
| 80 |
+
<div class="flex items-center">
|
| 81 |
+
<img src="http://static.photos/people/200x200/42" alt="Client" class="w-12 h-12 rounded-full mr-4">
|
| 82 |
+
<div>
|
| 83 |
+
<h4 class="font-bold text-gray-800">Sarah Johnson</h4>
|
| 84 |
+
<p class="text-gray-500 text-sm">CTO, TechStart Inc.</p>
|
| 85 |
+
</div>
|
| 86 |
+
</div>
|
| 87 |
+
</div>
|
| 88 |
+
<div class="bg-gray-50 p-8 rounded-lg">
|
| 89 |
+
<div class="flex items-center mb-4">
|
| 90 |
+
<div class="text-yellow-400">
|
| 91 |
+
<i class="fas fa-star"></i>
|
| 92 |
+
<i class="fas fa-star"></i>
|
| 93 |
+
<i class="fas fa-star"></i>
|
| 94 |
+
<i class="fas fa-star"></i>
|
| 95 |
+
<i class="fas fa-star"></i>
|
| 96 |
+
</div>
|
| 97 |
+
</div>
|
| 98 |
+
<p class="text-gray-600 italic mb-6">"The web application they developed exceeded our expectations. Their full stack team delivered on time and within budget."</p>
|
| 99 |
+
<div class="flex items-center">
|
| 100 |
+
<img src="http://static.photos/people/200x200/43" alt="Client" class="w-12 h-12 rounded-full mr-4">
|
| 101 |
+
<div>
|
| 102 |
+
<h4 class="font-bold text-gray-800">Michael Chen</h4>
|
| 103 |
+
<p class="text-gray-500 text-sm">Product Manager, Enterprise Corp</p>
|
| 104 |
+
</div>
|
| 105 |
+
</div>
|
| 106 |
+
</div>
|
| 107 |
+
</div>
|
| 108 |
+
</div>
|
| 109 |
+
</section>
|
| 110 |
+
|
| 111 |
+
<!-- Contact Section -->
|
| 112 |
+
<section id="contact" class="py-20 px-4 bg-gray-800 text-white">
|
| 113 |
+
<div class="container mx-auto max-w-6xl">
|
| 114 |
+
<h2 class="text-3xl font-bold text-center mb-16">Get In Touch</h2>
|
| 115 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
|
| 116 |
+
<div>
|
| 117 |
+
<h3 class="text-xl font-bold mb-6">Contact Information</h3>
|
| 118 |
+
<div class="space-y-4">
|
| 119 |
+
<div class="flex items-start">
|
| 120 |
+
<i class="fas fa-envelope mt-1 mr-4"></i>
|
| 121 |
+
<span>contact@danielsitconsulting.com</span>
|
| 122 |
+
</div>
|
| 123 |
+
<div class="flex items-start">
|
| 124 |
+
<i class="fas fa-phone mt-1 mr-4"></i>
|
| 125 |
+
<span>+1 (555) 123-4567</span>
|
| 126 |
+
</div>
|
| 127 |
+
<div class="flex items-start">
|
| 128 |
+
<i class="fas fa-map-marker-alt mt-1 mr-4"></i>
|
| 129 |
+
<span>123 Tech Street, Silicon Valley, CA 94025</span>
|
| 130 |
+
</div>
|
| 131 |
+
</div>
|
| 132 |
+
<div class="mt-8">
|
| 133 |
+
<h4 class="font-bold mb-4">Follow Us</h4>
|
| 134 |
+
<div class="flex space-x-4">
|
| 135 |
+
<a href="#" class="text-white hover:text-indigo-300"><i class="fab fa-twitter text-xl"></i></a>
|
| 136 |
+
<a href="#" class="text-white hover:text-indigo-300"><i class="fab fa-linkedin text-xl"></i></a>
|
| 137 |
+
<a href="#" class="text-white hover:text-indigo-300"><i class="fab fa-github text-xl"></i></a>
|
| 138 |
+
</div>
|
| 139 |
+
</div>
|
| 140 |
+
</div>
|
| 141 |
+
<div>
|
| 142 |
+
<form class="space-y-4">
|
| 143 |
+
<div>
|
| 144 |
+
<label for="name" class="block mb-2">Name</label>
|
| 145 |
+
<input type="text" id="name" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-indigo-400">
|
| 146 |
+
</div>
|
| 147 |
+
<div>
|
| 148 |
+
<label for="email" class="block mb-2">Email</label>
|
| 149 |
+
<input type="email" id="email" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-indigo-400">
|
| 150 |
+
</div>
|
| 151 |
+
<div>
|
| 152 |
+
<label for="message" class="block mb-2">Message</label>
|
| 153 |
+
<textarea id="message" rows="4" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-indigo-400"></textarea>
|
| 154 |
+
</div>
|
| 155 |
+
<button type="submit" class="bg-indigo-600 text-white py-2 px-6 rounded hover:bg-indigo-700 transition duration-300">Send Message</button>
|
| 156 |
+
</form>
|
| 157 |
+
</div>
|
| 158 |
+
</div>
|
| 159 |
+
</div>
|
| 160 |
+
</section>
|
| 161 |
+
|
| 162 |
+
<!-- Footer -->
|
| 163 |
+
<footer class="bg-gray-900 text-gray-400 py-8 px-4">
|
| 164 |
+
<div class="container mx-auto max-w-6xl text-center">
|
| 165 |
+
<p>© 2023 Daniel's IT Consulting. All rights reserved.</p>
|
| 166 |
+
</div>
|
| 167 |
+
</footer>
|
| 168 |
+
|
| 169 |
+
<script>
|
| 170 |
+
// Smooth scrolling for anchor links
|
| 171 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 172 |
+
anchor.addEventListener('click', function (e) {
|
| 173 |
+
e.preventDefault();
|
| 174 |
+
document.querySelector(this.getAttribute('href')).scrollIntoView({
|
| 175 |
+
behavior: 'smooth'
|
| 176 |
+
});
|
| 177 |
+
});
|
| 178 |
+
});
|
| 179 |
+
</script>
|
| 180 |
+
</body>
|
| 181 |
+
</html>
|