From 6a39e33e7f14a7e0b03638069f693fccd99be607 Mon Sep 17 00:00:00 2001
From: steven-tan-telus <steven.tan@telus.com>
Date: Fri, 24 Jan 2025 10:53:39 -0500
Subject: [PATCH] Implemented the first html assignment

---
 .gitignore                    |   4 --
 first_assigment/css/index.css |  68 ++++++++++++++++++++
 first_assigment/index.html    | 115 ++++++++++++++++++++++++++++++++++
 3 files changed, 183 insertions(+), 4 deletions(-)
 create mode 100644 first_assigment/css/index.css
 create mode 100644 first_assigment/index.html
diff --git a/.gitignore b/.gitignore
index b7730de..8e824ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,7 +47,3 @@ Thumbs.db
 # React Native
 .expo/
 .expo-shared/
-
-# HTML/CSS specific
-*.html
-*.css
\ No newline at end of file
diff --git a/first_assigment/css/index.css b/first_assigment/css/index.css
new file mode 100644
index 0000000..e86ba0f
--- /dev/null
+++ b/first_assigment/css/index.css
@@ -0,0 +1,68 @@
+ body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+header, nav, section, footer {
+    padding: 20px;
+    margin: 10px;
+}
+header {
+    background-color: #f8f9fa;
+}
+nav ul {
+    list-style-type: none;
+    padding: 0;
+}
+nav ul li {
+    display: inline;
+    margin-right: 10px;
+}
+.projects {
+    display: flex;
+    flex-wrap: wrap;
+}
+.project-card {
+    border: 1px solid #ddd;
+    padding: 10px;
+    margin: 10px;
+    width: 30%;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+table, th, td {
+    border: 1px solid #ddd;
+}
+
+th, td {
+    padding: 12px;
+    text-align: left;
+}
+
+th {
+    background-color: #f2f2f2;
+}
+
+tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+form input, form textarea {
+    margin-bottom: 10px;
+    padding: 10px;
+    width: 100%;
+}
+
+footer{
+    text-align: center;
+}
\ No newline at end of file
diff --git a/first_assigment/index.html b/first_assigment/index.html
new file mode 100644
index 0000000..81c72fb
--- /dev/null
+++ b/first_assigment/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Personal Portfolio - Steven Tan</title>
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+<body>
+    <!-- Header Section -->
+    <header>
+        <h1>Steven M. Tan</h1>
+        <nav>
+            <ul>
+                <li><a href="#about">About Me</a></li>
+                <li><a href="#skills">Skills</a></li>
+                <li><a href="#projects">Projects</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <!-- About Me Section -->
+    <section id="about">
+        <h2>About Me</h2>
+        <p>
+            I am passionate about learning to code and enjoy reading non-fiction books. I am part of a family of four, with two wonderful children. In our free time, we love to watch Disney movies together as a recreational activity.
+        </p>
+        <img src="../first_assigment/images/profile_pic.jpg" alt="Steven Tan's Image" width="200">
+       
+        <hr />
+        <h3>Personal Information</h3>
+        <table>
+            <tr>
+                <th>Detail</th>
+                <th>Information</th>
+            </tr>
+            <tr>
+                <td>Name</td>
+                <td>Steven M. Tan</td>
+            </tr>
+            <tr>
+                <td>Age</td>
+                <td>30</td>
+            </tr>
+            <tr>
+                <td>Occupation</td>
+                <td>Software Developer</td>
+            </tr>
+            <tr>
+                <td>Hobbies</td>
+                <td>Coding, Reading Non-Fiction Books</td>
+            </tr>
+            <tr>
+                <td>Favorite Programming Languages</td>
+                <td>JavaScript, Python, HTML, CSS</td>
+            </tr>
+        </table>
+        <hr />
+    </section>
+
+    <!-- Skills Section -->
+    <section id="skills">
+        <h2>Skills</h2>
+        <ul>
+            <li>💻 Computer Programming - Java</li>
+            <li>🤝 Team work </li>
+            <li>💬 Communication Skill</li>
+            <li>📊 Analytical thinking Skill</li>
+            <li>📚 Reading Skill </li>
+        </ul>
+    </section>
+
+    <!-- Projects Section -->
+    <section id="projects">
+        <h2>Projects</h2>
+        <div class="projects">
+            <div class="project-card">
+                <h3>Project Sample 1</h3>
+                <p>coming soon..</p>
+                <a href="#">View More</a>
+            </div>
+            <div class="project-card">
+                <h3>Project Sample 2</h3>
+                <p>coming soon..</p>
+                <a href="#">View More</a>
+            </div>
+            <div class="project-card">
+                <h3>Project Sample 3</h3>
+                <p>coming soon..</p>
+                <a href="#">View More</a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section id="contact">
+        <h2>Contact</h2>
+        <form>
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name" required>
+            <label for="email">Email:</label>
+            <input type="email" id="email" name="email" required>
+            <label for="message">Message:</label>
+            <textarea id="message" name="message" rows="4" required></textarea>
+            <button type="submit">Submit</button>
+        </form>
+    </section>
+
+    <!-- Footer Section -->
+    <footer>
+        <p>&copy; 2024 Steven Tan &copy;. All rights reserved.</p>
+    </footer>
+</body>
+</html>
\ No newline at end of file

Detail	Information
Name	Steven M. Tan
Age	30
Occupation	Software Developer
Hobbies	Coding, Reading Non-Fiction Books
Favorite Programming Languages	JavaScript, Python, HTML, CSS