diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e478e0a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+ My First Code
+
+
+
+
+ My First Code
+ A clean, professional starting point for your coding journey.
+ Get Started
+
+
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..7d6a530
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,58 @@
+:root {
+ --bg: #f4f7fb;
+ --card: #ffffff;
+ --text: #1f2937;
+ --muted: #4b5563;
+ --primary: #2563eb;
+ --primary-dark: #1d4ed8;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ min-height: 100vh;
+ display: grid;
+ place-items: center;
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+ background: linear-gradient(135deg, #eef2ff, var(--bg));
+ color: var(--text);
+}
+
+.hero {
+ width: min(92vw, 680px);
+ padding: 2.5rem;
+ text-align: center;
+ background: var(--card);
+ border-radius: 16px;
+ box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
+}
+
+h1 {
+ margin: 0;
+ font-size: clamp(2rem, 3.5vw, 2.8rem);
+}
+
+p {
+ margin: 1rem 0 2rem;
+ color: var(--muted);
+ font-size: 1.05rem;
+}
+
+.cta {
+ display: inline-block;
+ padding: 0.75rem 1.4rem;
+ border-radius: 10px;
+ background: var(--primary);
+ color: #fff;
+ text-decoration: none;
+ font-weight: 600;
+ transition: background 0.2s ease;
+}
+
+.cta:hover,
+.cta:focus-visible {
+ background: var(--primary-dark);
+}