Merge pull request #5 from alanef/develop

Develop

Author: alanef

.claude-prompt.txt

@@ -1,9 +1,9 @@
-Issue to solve: TP-2 - Replace  the static site
+Issue to solve: TP-3 - Restyle
 Your working directory: /app/repos/alanef.github.io
-Your branch: task/TP-2-replace-the-static-site
+Your branch: task/TP-3-restyle
 
 Issue Description:
-Replac eteh entire static site  create a new site that is a summary of https://alanfuller.co.uk   with a big buttton to visit
+Retstule use square corners on every thing - dontuse any gradiaents use lightyellow background with dark text, dont us drop shaddows - endure  wide screen wider but responsive
 
 Instructions:
 1. Analyze the issue thoroughly

404.html

@@ -16,7 +16,7 @@
 
         body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: #fffacd;
             min-height: 100vh;
             display: flex;
             align-items: center;
@@ -26,20 +26,18 @@
 
         .container {
             text-align: center;
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(20px);
-            border-radius: 20px;
+            background: #ffffff;
+            border-radius: 0;
             padding: 3rem;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            border: 2px solid #2d3748;
             max-width: 500px;
             margin: 2rem;
         }
 
         .error-code {
             font-size: 4rem;
             font-weight: 700;
-            color: #667eea;
+            color: #2d3748;
             margin-bottom: 1rem;
         }
 
@@ -57,20 +55,19 @@
 
         .home-button {
             display: inline-block;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: #2d3748;
             color: white;
             text-decoration: none;
             padding: 1rem 2rem;
-            border-radius: 25px;
+            border-radius: 0;
             font-weight: 600;
             transition: all 0.3s ease;
-            box-shadow: 0 10px 30px rgba(103, 126, 234, 0.3);
+            border: 2px solid #2d3748;
         }
 
         .home-button:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 15px 40px rgba(103, 126, 234, 0.4);
-            color: white;
+            background: #fffacd;
+            color: #2d3748;
             text-decoration: none;
         }
     </style>

index.html

@@ -19,12 +19,12 @@
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
             line-height: 1.6;
             color: #2d3748;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: #fffacd;
             min-height: 100vh;
         }
 
         .container {
-            max-width: 900px;
+            max-width: 1200px;
             margin: 0 auto;
             padding: 2rem;
             min-height: 100vh;
@@ -34,13 +34,11 @@
         }
 
         .card {
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(20px);
-            border-radius: 20px;
+            background: #ffffff;
+            border-radius: 0;
             padding: 3rem;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
             text-align: center;
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            border: 2px solid #2d3748;
         }
 
         .profile-section {
@@ -62,7 +60,7 @@
         }
 
         .company {
-            color: #667eea;
+            color: #2d3748;
             font-weight: 600;
             font-size: 1.1rem;
             margin-bottom: 2rem;
@@ -87,10 +85,10 @@
         }
 
         .highlight-item {
-            background: rgba(103, 126, 234, 0.1);
+            background: #f8f8f8;
             padding: 1.5rem;
-            border-radius: 12px;
-            border-left: 4px solid #667eea;
+            border-radius: 0;
+            border-left: 4px solid #2d3748;
         }
 
         .highlight-item h3 {
@@ -124,33 +122,32 @@
         }
 
         .service-tag {
-            background: linear-gradient(135deg, #667eea, #764ba2);
+            background: #2d3748;
             color: white;
             padding: 0.75rem 1rem;
-            border-radius: 25px;
+            border-radius: 0;
             font-size: 0.9rem;
             font-weight: 500;
             text-align: center;
         }
 
         .cta-button {
             display: inline-block;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: #2d3748;
             color: white;
             text-decoration: none;
             padding: 1.25rem 3rem;
-            border-radius: 50px;
+            border-radius: 0;
             font-weight: 600;
             font-size: 1.2rem;
             transition: all 0.3s ease;
-            box-shadow: 0 10px 30px rgba(103, 126, 234, 0.3);
             margin: 1.5rem 0;
+            border: 2px solid #2d3748;
         }
 
         .cta-button:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 15px 40px rgba(103, 126, 234, 0.4);
-            color: white;
+            background: #fffacd;
+            color: #2d3748;
             text-decoration: none;
         }
 
@@ -163,33 +160,34 @@
         }
 
         .social-link {
-            color: #667eea;
+            color: #2d3748;
             text-decoration: none;
             font-weight: 500;
             padding: 0.5rem 1rem;
-            border: 1px solid #667eea;
-            border-radius: 20px;
+            border: 1px solid #2d3748;
+            border-radius: 0;
             transition: all 0.3s ease;
             font-size: 0.9rem;
         }
 
         .social-link:hover {
-            background: #667eea;
+            background: #2d3748;
             color: white;
             text-decoration: none;
         }
 
         .stats {
-            background: rgba(103, 126, 234, 0.1);
+            background: #f8f8f8;
             padding: 1.5rem;
-            border-radius: 12px;
+            border-radius: 0;
             margin: 2rem 0;
+            border: 1px solid #2d3748;
         }
 
         .stats-number {
             font-size: 2rem;
             font-weight: 700;
-            color: #667eea;
+            color: #2d3748;
         }
 
         .stats-label {
@@ -198,6 +196,25 @@
             margin-top: 0.25rem;
         }
 
+        @media (min-width: 1400px) {
+            .container {
+                max-width: 1600px;
+                padding: 3rem;
+            }
+
+            .card {
+                padding: 4rem;
+            }
+
+            .highlights {
+                grid-template-columns: repeat(4, 1fr);
+            }
+
+            .services-grid {
+                grid-template-columns: repeat(5, 1fr);
+            }
+        }
+
         @media (max-width: 768px) {
             .container {
                 padding: 1rem;