HackYourAssignment · dianadenwik · May 15, 2026 · rafasilpereira · May 21, 2026 · rafasilpereira
diff --git a/devtools-screenshot.png .png b/devtools-screenshot.png .png
diff --git a/task-1/axe-screenshot.png b/task-1/axe-screenshot.png
diff --git a/task-1/index.html b/task-1/index.html
@@ -2,10 +2,89 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Week 2 assignment</title>
+    <title>My First Web Page</title>
   </head>
   <body>
+    <header>
+      <h1>Diana</h1>
+      <p>HackYourFuture Student</p>
+      <img
+        src="https://plus.unsplash.com/premium_photo-1664301969414-d8435c2b91bb?fm=jpg&q=60&w=3000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE2fHx8ZW58MHx8fHx8"
+        width="400"
+        height="400"
+        alt="Young woman works on a computer"
+      />
+      <button id="theme-toggle" type="button" class="btn">🌙 Dark Mode</button>
+    </header>
+    <main>
+      <section class="about">
+        <h2>About Me</h2>
+        <p>
+          My name is Diana Chukhrai. I am a student at HackYourFuture, cohort
+          c55, where I am learning front-end web development. I moved to the
+          Netherlands to start a new chapter in my career and life.
+        </p>
+        <p>
+          Alongside my studies, I work as a Paid Social Specialist — I create
+          and manage advertising campaigns for brands on platforms like Facebook
+          and Instagram.
+        </p>
+        <p>
+          I enjoy an active lifestyle — walking, travelling, and staying fit.
+        </p>
+        <h3 class="interest">My Interests</h3>
+        <ul class="interests-list">
+          <li>🎾 Tennis — staying active & focused</li>
+          <li>✈️ Travelling — exploring new places</li>
+          <li>🚗 Cars & Automotive — interest in cars & design</li>
+          <li>🏋️‍♀️ Sport — keeping a healthy lifestyle</li>
+          <li>📊 Digital Marketing — learning & growing</li>
+        </ul>
+      </section>
 
+      <section class="contact">
+        <h2>Get in Touch</h2>
+        <form id="contact-form" class="form">
+
+          <label for="name">Name:*</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            placeholder="Enter your name"
+            required
+          />
+
+          <label for="email">Email:*</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            placeholder="example@domain.com"
+            required
+          />
+
+          <label for="message">Message:*</label>
+          <textarea
+            id="message"
+            name="message"
+            placeholder="Enter your message"
+            required
+          ></textarea>
+
+          <p><small>* Required fields</small></p>
+          <button type="submit">Send</button>
+        </form>
+
+        <div id="form-message"></div>
+      </section>
+    </main>
+    <footer>
+      <p>&copy; 2026 Diana Chukhrai</p>
+    </footer>
+     <script src="script.js"></script>
+
   </body>
 </html>
diff --git a/task-1/mobile-screenshot.png b/task-1/mobile-screenshot.png
diff --git a/task-1/script.js b/task-1/script.js
@@ -0,0 +1,16 @@
+const button = document.querySelector("#theme-toggle");
+
+button.addEventListener("click", function () {
+  document.body.classList.toggle("dark-mode");
+});
+
+const form = document.querySelector("#contact-form");
+
+const formMessage = document.querySelector("#form-message");
+
+form.addEventListener("submit", function (event) {
+  event.preventDefault();
+  formMessage.textContent =
+    "Thanks for reaching out! I'll get back to you soon.";
+  form.reset();
+});
diff --git a/task-1/styles.css b/task-1/styles.css
@@ -0,0 +1,135 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  display: grid;
+  grid-template-areas:
+    "header"
+    "main"
+    "footer";
+  min-height: 100vh;
+  padding: 1rem;
+}
+
+footer {
+  grid-area: footer;
+}
+
+main {
+  grid-area: main;
+  width: 90%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.interests-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style: none;
+  padding: 0;
+}
+
+header {
+  grid-area: header;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 90%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.btn {
+  margin: 2rem;
+}
+
+#contact-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 20rem;
+}
+
+img {
+  border-radius: 50%;
+  width: 10rem;
+  height: 10rem;
+  max-width: 100%;
+}
+
+@media (min-width: 600px) {
+  header {
+    flex-direction: row;
+    gap: 4rem;
+    padding: 1rem 2rem;
+    justify-content: flex-start;
+  }
+}
+
+@media (min-width: 900px) {
+  main {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 2rem;
+    padding: center;
+  }
+
+  .about {
+    grid-column: 1;
+  }
+  .contact {
+    grid-column: 2;
+    border-left: 1px solid #ccc;
+    padding-left: 2rem;
+    background-color: #9fa480;
+    border-radius: 5%;
+    padding: 2rem;
+    padding-top: 4rem;
+  }
+}
+
+:focus-visible {
+  outline: 3px solid #6366f1;
+  outline-offset: 3px;
+  border-radius: 4px;
+}
+
+#contact-form input:focus,
+#contact-form textarea:focus {
+  outline: none;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
+}
+#contact-form label {
+  margin-bottom: -0.5rem;
+}
+
+.dark-mode {
+  background-color: #301708;
+  color: #f1f5f9;
+}
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition-duration: 0.01ms;
+  }
+}
+
+button[type="submit"] {
+  border-radius: 2rem;
+  padding: 0.75rem 2rem;
+  width: 50%;
+  display: block;
+  margin: 0 auto;
+  transition: background-color 0.5s ease;
+}
+
+button[type="submit"]:hover {
+  background-color: #4c3f02;
+}