About Section

Html for about section commit
GillianoA · Oct 17, 2024 · 24102ed · 24102ed
1 parent 8abb8b3
commit 24102ed
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 32 deletions.
diff --git a/images/Gilliano Agard - Portrait.jpg b/images/Gilliano Agard - Portrait.jpg
diff --git a/images/wave-hi.gif b/images/wave-hi.gif
diff --git a/index.html b/index.html
@@ -1,35 +1,49 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Personal Portfolio Webpage - Gilliano Agard</title>
-    <link rel="icon" href="./images/PPLogo Icon.png">
-    <link rel="stylesheet" href="./styles.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <script src="https://kit.fontawesome.com/53179295cc.js" crossorigin="anonymous"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
-</head>
-<body>
-    <header id="header">
-        <div class="container">
-            <!-- Navbar -->
-            <nav id="navbar">
-                <img src="./images/PPLogo.png" class="logo">
-                <ul>
-                    <li><a href="#">About</a></li>
-                    <li><a href="#">Skills</a></li>
-                    <li><a href="#">Projects</a></li>
-                    <li><a href="#">Recommendations</a></li>+
-                </ul>
-            </nav>
-            <!-- Hero Section -->
-            <section id="welcome-section">
-                <p><i class="fa-solid fa-location-dot"></i>  West, Trinidad</p>
-                <h1>Hi, I'm <span>Gilliano Agard</span><br>a Software Developer</h1>
-            </section>
-        </div>
-    </header>
-</body>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Personal Portfolio Webpage - Gilliano Agard</title>
+        <link rel="icon" href="./images/PPLogo Icon.png">
+        <link rel="stylesheet" href="./styles.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <script src="https://kit.fontawesome.com/53179295cc.js" crossorigin="anonymous"></script>
+        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+    </head>
+    <body>
+        <header id="header">
+            <div class="container">
+                <!-- Navbar -->
+                <nav id="navbar">
+                    <img src="./images/PPLogo.png" class="logo">
+                    <ul>
+                        <li><a href="#">About</a></li>
+                        <li><a href="#">Skills</a></li>
+                        <li><a href="#">Projects</a></li>
+                        <li><a href="#">Recommendations</a></li>+
+                    </ul>
+                </nav>
+                <!-- Hero Section -->
+                <section id="welcome-section">
+                    <p><i class="fa-solid fa-location-dot"></i>  West, Trinidad</p>
+                    <h1>Hi, I'm <span>Gilliano Agard</span><br>a Software Developer</h1>
+                </section>
+            </div>
+        </header>
+        <section id="main-page">
+            <div class="container">
+                <!-- About Section -->
+                 <section id="about-me">
+                    <div>
+                        <img src="images\Gilliano Agard - Portrait.jpg" class="profile-image"/>
+                    </div>
+                    <div>
+                        <h1>Gilliano Agard | Software Developer <img src="images/wave-hi.gif" width="60px"/></h1>
+                        <p>Experienced in C++, Java, Python, and <a href="#skills">web development.</a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam facilisis odio. Ut dui nulla, luctus a ante pharetra, viverra consectetur dui. Curabitur euismod tincidunt dictum. Quisque id malesuada enim. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
+                    </div>
+                 </section>
+            </div>
+        </section>
+    </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -80,4 +80,12 @@ nav ul li a:hover::after{
 
 #welcome-section h1 span {
     color:#f90707;
+}
+
+/* Main Page */
+
+#main-page {
+    width: 100%;
+    height: 100vh;
+    background-color: #1c1c1c;
 }