Spaces:

techguy1
/

techguyzbadcolor

Running

App Files Files Community

techguy1 commited on May 19, 2025

Commit

5467ecc

verified ·

1 Parent(s): 679df94

Add 2 files

Browse files

Files changed (2) hide show

index.html +86 -17
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -34,22 +34,67 @@
             transform: translateY(-5px);
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         }
         .nav-link:hover {
             color: #4285F4;
         }
         .btn-primary {
             transition: all 0.3s ease;
         }
         .btn-primary:hover {
             background-color: #3367D6;
             transform: translateY(-2px);
         }
         .btn-accent {
             transition: all 0.3s ease;
         }
         .btn-accent:hover {
             background-color: #D33426;
             transform: translateY(-2px);
         }
         .animate-float {
             animation: float 3s ease-in-out infinite;
@@ -67,6 +112,30 @@
         .google-red { color: #EA4335; }
         .google-yellow { color: #FBBC05; }
         .google-green { color: #34A853; }
     </style>
 </head>
 <body class="font-sans text-gray-800">
@@ -91,10 +160,10 @@
                     <a href="#about" class="nav-link text-gray-700 hover:text-primary">About</a>
                     <a href="#portfolio" class="nav-link text-gray-700 hover:text-primary">Portfolio</a>
                     <a href="#contact" class="nav-link text-gray-700 hover:text-primary">Contact</a>
-                    <a href="#contact" class="btn-primary bg-primary text-white px-6 py-2 rounded-md font-medium">Get Started</a>
                 </div>
                 <div class="md:hidden">
-                    <button class="text-gray-700 focus:outline-none">
                         <i class="fas fa-bars text-2xl"></i>
                     </button>
                 </div>
@@ -109,8 +178,8 @@
                 <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Empowering Your Digital Transformation with Expert DevOps Solutions</h1>
                 <p class="text-xl mb-8">Accelerate development cycles, improve software quality, and enhance operational efficiency with our tailored DevOps services.</p>
                 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-                    <a href="#contact" class="btn-primary bg-white text-primary px-8 py-3 rounded-md font-bold text-center">Request a Consultation</a>
-                    <a href="#services" class="btn-accent bg-accent1 text-white px-8 py-3 rounded-md font-bold text-center">Our Services</a>
                 </div>
             </div>
             <div class="md:w-1/2 flex justify-center">
@@ -127,7 +196,7 @@
                 <p class="text-xl text-gray-600 mb-8">We are a dedicated DevOps team passionate about streamlining your software development lifecycle. We empower businesses to achieve faster deployments, enhanced collaboration, and greater operational efficiency through tailored DevOps solutions. Let's transform your development process together.</p>
                 <div class="flex justify-center space-x-4">
                     <div class="bg-primary text-white px-4 py-2 rounded-full text-sm font-medium">CI/CD Pipelines</div>
-                    <div class="bg-accent2 text-white px-4 py-2 rounded-full text-sm font-medium">Cloud Solutions</div>
                     <div class="bg-accent3 text-white px-4 py-2 rounded-full text-sm font-medium">Infrastructure as Code</div>
                     <div class="bg-accent1 text-white px-4 py-2 rounded-full text-sm font-medium">Security First</div>
                 </div>
@@ -236,7 +305,7 @@
             </div>
             <div class="text-center mt-16">
-                <a href="#contact" class="btn-primary bg-primary text-white px-8 py-3 rounded-md font-bold inline-block">Get a Free Quote</a>
             </div>
         </div>
     </section>
@@ -359,7 +428,7 @@
                     <p class="text-gray-600 mb-6">Founded in 2020, TekGuyz began as a small team of passionate DevOps engineers with a vision to simplify complex technology landscapes for businesses of all sizes.</p>
                     <p class="text-gray-600 mb-6">Today, we've grown into a trusted partner for organizations looking to accelerate their digital transformation through innovative DevOps practices.</p>
                     <p class="text-gray-600 mb-8">Our mission is to bridge the gap between development and operations, creating seamless workflows that drive business value.</p>
-                    <a href="#contact" class="btn-primary bg-primary text-white px-8 py-3 rounded-md font-bold inline-block">Meet Our Team</a>
                 </div>
                 <div class="md:w-1/2 md:pl-12">
                     <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Team" class="rounded-lg shadow-xl w-full">
@@ -461,7 +530,7 @@
             </div>
             <div class="text-center mt-12">
-                <a href="#" class="btn-primary bg-primary text-white px-8 py-3 rounded-md font-bold inline-block">View All Case Studies</a>
             </div>
         </div>
     </section>
@@ -536,26 +605,26 @@
                         <h3 class="text-xl font-bold mb-6">Send Us a Message</h3>
                         <div class="mb-6">
-                            <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
-                            <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Your name">
                         </div>
                         <div class="mb-6">
-                            <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
-                            <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Your email">
                         </div>
                         <div class="mb-6">
-                            <label for="company" class="block text-gray-700 font-medium mb-2">Company</label>
-                            <input type="text" id="company" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Your company">
                         </div>
                         <div class="mb-6">
-                            <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
-                            <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="How can we help you?"></textarea>
                         </div>
-                        <button type="submit" class="btn-primary bg-primary text-white w-full py-3 rounded-md font-bold">Send Message</button>
                     </form>
                 </div>
             </div>

             transform: translateY(-5px);
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
         }
+        .nav-link {
+            color: #5F6368;
+            transition: all 0.2s ease;
+            position: relative;
+        }
         .nav-link:hover {
             color: #4285F4;
         }
+        .nav-link:hover::after {
+            content: '';
+            position: absolute;
+            bottom: -8px;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background-color: #4285F4;
+            border-radius: 3px;
+        }
         .btn-primary {
+            background-color: #4285F4;
+            color: white;
             transition: all 0.3s ease;
+            box-shadow: 0 2px 5px rgba(66, 133, 244, 0.3);
         }
         .btn-primary:hover {
             background-color: #3367D6;
             transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(66, 133, 244, 0.4);
         }
         .btn-accent {
+            background-color: #EA4335;
+            color: white;
             transition: all 0.3s ease;
+            box-shadow: 0 2px 5px rgba(234, 67, 53, 0.3);
         }
         .btn-accent:hover {
             background-color: #D33426;
             transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(234, 67, 53, 0.4);
+        }
+        .btn-secondary {
+            background-color: #FBBC05;
+            color: #202124;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 5px rgba(251, 188, 5, 0.3);
+        }
+        .btn-secondary:hover {
+            background-color: #E9AB04;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(251, 188, 5, 0.4);
+        }
+        .btn-success {
+            background-color: #34A853;
+            color: white;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 5px rgba(52, 168, 83, 0.3);
+        }
+        .btn-success:hover {
+            background-color: #2D9146;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(52, 168, 83, 0.4);
         }
         .animate-float {
             animation: float 3s ease-in-out infinite;
         .google-red { color: #EA4335; }
         .google-yellow { color: #FBBC05; }
         .google-green { color: #34A853; }
+        /* Form styling */
+        .form-input {
+            border: 1px solid #dadce0;
+            border-radius: 4px;
+            transition: all 0.2s ease;
+        }
+        .form-input:focus {
+            border-color: #4285F4;
+            box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
+            outline: none;
+        }
+        .form-label {
+            color: #5F6368;
+            font-weight: 500;
+        }
+        /* Menu styling */
+        .mobile-menu-btn {
+            color: #5F6368;
+        }
+        .mobile-menu-btn:hover {
+            color: #4285F4;
+        }
     </style>
 </head>
 <body class="font-sans text-gray-800">
                     <a href="#about" class="nav-link text-gray-700 hover:text-primary">About</a>
                     <a href="#portfolio" class="nav-link text-gray-700 hover:text-primary">Portfolio</a>
                     <a href="#contact" class="nav-link text-gray-700 hover:text-primary">Contact</a>
+                    <a href="#contact" class="btn-primary px-6 py-2 rounded-md font-medium">Get Started</a>
                 </div>
                 <div class="md:hidden">
+                    <button class="mobile-menu-btn focus:outline-none">
                         <i class="fas fa-bars text-2xl"></i>
                     </button>
                 </div>
                 <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Empowering Your Digital Transformation with Expert DevOps Solutions</h1>
                 <p class="text-xl mb-8">Accelerate development cycles, improve software quality, and enhance operational efficiency with our tailored DevOps services.</p>
                 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                    <a href="#contact" class="btn-primary px-8 py-3 rounded-md font-bold text-center">Request a Consultation</a>
+                    <a href="#services" class="btn-accent px-8 py-3 rounded-md font-bold text-center">Our Services</a>
                 </div>
             </div>
             <div class="md:w-1/2 flex justify-center">
                 <p class="text-xl text-gray-600 mb-8">We are a dedicated DevOps team passionate about streamlining your software development lifecycle. We empower businesses to achieve faster deployments, enhanced collaboration, and greater operational efficiency through tailored DevOps solutions. Let's transform your development process together.</p>
                 <div class="flex justify-center space-x-4">
                     <div class="bg-primary text-white px-4 py-2 rounded-full text-sm font-medium">CI/CD Pipelines</div>
+                    <div class="bg-accent2 text-gray-800 px-4 py-2 rounded-full text-sm font-medium">Cloud Solutions</div>
                     <div class="bg-accent3 text-white px-4 py-2 rounded-full text-sm font-medium">Infrastructure as Code</div>
                     <div class="bg-accent1 text-white px-4 py-2 rounded-full text-sm font-medium">Security First</div>
                 </div>
             </div>
             <div class="text-center mt-16">
+                <a href="#contact" class="btn-primary px-8 py-3 rounded-md font-bold inline-block">Get a Free Quote</a>
             </div>
         </div>
     </section>
                     <p class="text-gray-600 mb-6">Founded in 2020, TekGuyz began as a small team of passionate DevOps engineers with a vision to simplify complex technology landscapes for businesses of all sizes.</p>
                     <p class="text-gray-600 mb-6">Today, we've grown into a trusted partner for organizations looking to accelerate their digital transformation through innovative DevOps practices.</p>
                     <p class="text-gray-600 mb-8">Our mission is to bridge the gap between development and operations, creating seamless workflows that drive business value.</p>
+                    <a href="#contact" class="btn-primary px-8 py-3 rounded-md font-bold inline-block">Meet Our Team</a>
                 </div>
                 <div class="md:w-1/2 md:pl-12">
                     <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Our Team" class="rounded-lg shadow-xl w-full">
             </div>
             <div class="text-center mt-12">
+                <a href="#" class="btn-primary px-8 py-3 rounded-md font-bold inline-block">View All Case Studies</a>
             </div>
         </div>
     </section>
                         <h3 class="text-xl font-bold mb-6">Send Us a Message</h3>
                         <div class="mb-6">
+                            <label for="name" class="form-label block mb-2">Name</label>
+                            <input type="text" id="name" class="form-input w-full px-4 py-3" placeholder="Your name">
                         </div>
                         <div class="mb-6">
+                            <label for="email" class="form-label block mb-2">Email</label>
+                            <input type="email" id="email" class="form-input w-full px-4 py-3" placeholder="Your email">
                         </div>
                         <div class="mb-6">
+                            <label for="company" class="form-label block mb-2">Company</label>
+                            <input type="text" id="company" class="form-input w-full px-4 py-3" placeholder="Your company">
                         </div>
                         <div class="mb-6">
+                            <label for="message" class="form-label block mb-2">Message</label>
+                            <textarea id="message" rows="5" class="form-input w-full px-4 py-3" placeholder="How can we help you?"></textarea>
                         </div>
+                        <button type="submit" class="btn-primary w-full py-3 rounded-md font-bold">Send Message</button>
                     </form>
                 </div>
             </div>

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- change the color them of the website to match the color scheme of google.com and the google logo


1	+ change the color them of the website to match the color scheme of google.com and the google logo
2	+ make all buttons , forms and menu options of the site match the colors of the Google theme