-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implemented the first html assignment
- Loading branch information
1 parent
13023e0
commit 6a39e33
Showing
3 changed files
with
183 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -47,7 +47,3 @@ Thumbs.db | |
| # React Native | ||
| .expo/ | ||
| .expo-shared/ | ||
|
|
||
| # HTML/CSS specific | ||
| *.html | ||
| *.css | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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>© 2024 Steven Tan ©. All rights reserved.</p> | ||
| </footer> | ||
| </body> | ||
| </html> |