push index.html

laq20002 · Feb 4, 2025 · d9616f5 · d9616f5
1 parent 55d4e1c
commit d9616f5
Showing 1 changed file with 133 additions and 2 deletions.
diff --git a/week-02/index.html b/week-02/index.html
@@ -3,9 +3,140 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Week 1 Assignment</title>
+    <title>About Me</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        header, footer {
+            background: #333;
+            color: white;
+            text-align: center;
+            padding: 1rem;
+            width: 100%;
+        }
+        main {
+            display: flex;
+            flex-direction: column;
+            max-width: 900px;
+            width: 100%;
+            padding: 20px;
+        }
+        .content {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .profile {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+        .profile img {
+            width: 150px;
+            height: 150px;
+            border-radius: 50%;
+        }
+        .lists {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        ul {
+            list-style: none;
+            padding: 0;
+        }
+        ul li::before {
+            content: "\2022"; /* Bullet point */
+            color: #333;
+            font-weight: bold;
+            display: inline-block;
+            width: 1em;
+            margin-left: -1em;
+        }
+        nav ul {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            padding: 0;
+        }
+        nav ul li {
+            list-style: none;
+        }
+        nav a {
+            color: white;
+            text-decoration: none;
+        }
+        .lists h2 {
+            color: #9370DB;
+        }
+        @media (min-width: 768px) {
+            .content {
+                display: flex;
+                flex-direction: column;
+            }
+        }
+        @media (max-width: 767px) {
+            .content {
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                gap: 20px;
+                justify-content: space-between;
+            }
+            .profile, .lists {
+                flex: 1;
+                min-width: 45%;
+            }
+        }
+    </style>
 </head>
 <body>
-    <h1>I love HTML5</h1>
+    <header>
+        <h1>About Me</h1>
+        <nav>
+            <ul>
+                <li><a href="#bio">Bio</a></li>
+                <li><a href="#interests">Interests</a></li>
+                <li><a href="#websites">Websites</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <main>
+        <div class="content">
+            <section class="profile" id="bio">
+                <img src="bio-p2.jpg" alt="Profile Photo">
+                <p>Hey I'm Lorenzo Quintana. I enjoy taking cool photos and telling stories. In my free time, I love to box, play soccer, watch anime, or make some art.</p>
+            </section>
+
+            <section class="lists">
+                <h2 id="interests">My Interests</h2>
+                <ul>
+                    <li>Photography</li>
+                    <li>Drawing</li>
+                    <li>Boxing</li>
+                    <li>Soccer</li>
+                </ul>
+
+                <h2 id="websites">Favorite Websites</h2>
+                <ul>
+                    <li><a href="https://www.youtube.com" target="_blank">YouTube</a></li>
+                    <li><a href="https://www.pinterest.com" target="_blank">Pinterest</a></li>
+                    <li><a href="https://www.instagram.com" target="_blank">Instagram</a></li>
+                </ul>
+            </section>
+        </div>
+    </main>
+
+    <footer>
+        <p>&copy; 2025 Lorenzo Quintana</p>
+    </footer>
 </body>
 </html>