diff --git a/devtools-screenshot.png .png b/devtools-screenshot.png .png new file mode 100644 index 0000000..cb4ab65 Binary files /dev/null and b/devtools-screenshot.png .png differ diff --git a/task-1/axe-screenshot.png b/task-1/axe-screenshot.png new file mode 100644 index 0000000..523a1ea Binary files /dev/null and b/task-1/axe-screenshot.png differ diff --git a/task-1/index.html b/task-1/index.html index cf3c175..4c2db86 100644 --- a/task-1/index.html +++ b/task-1/index.html @@ -2,10 +2,89 @@ + - Week 2 assignment + My First Web Page +
+

Diana

+

HackYourFuture Student

+ Young woman works on a computer + +
+
+
+

About Me

+

+ 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. +

+

+ Alongside my studies, I work as a Paid Social Specialist — I create + and manage advertising campaigns for brands on platforms like Facebook + and Instagram. +

+

+ I enjoy an active lifestyle — walking, travelling, and staying fit. +

+

My Interests

+ +
+
+

Get in Touch

+
+ + + + + + + + + + +

* Required fields

+ +
+ +
+
+
+ + + diff --git a/task-1/mobile-screenshot.png b/task-1/mobile-screenshot.png new file mode 100644 index 0000000..6100c92 Binary files /dev/null and b/task-1/mobile-screenshot.png differ diff --git a/task-1/script.js b/task-1/script.js new file mode 100644 index 0000000..84d4ccd --- /dev/null +++ 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 new file mode 100644 index 0000000..17f3eca --- /dev/null +++ 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; +}