About Me section

full html and css implementation of about me section
GillianoA · Oct 17, 2024 · 99a1c41 · 99a1c41
1 parent 24102ed
commit 99a1c41
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
                 <nav id="navbar">
                     <img src="./images/PPLogo.png" class="logo">
                     <ul>
-                        <li><a href="#">About</a></li>
+                        <li><a href="#about-me">About</a></li>
                         <li><a href="#">Skills</a></li>
                         <li><a href="#">Projects</a></li>
                         <li><a href="#">Recommendations</a></li>+
@@ -34,15 +34,15 @@ <h1>Hi, I'm <span>Gilliano Agard</span><br>a Software Developer</h1>
         <section id="main-page">
             <div class="container">
                 <!-- About Section -->
-                 <section id="about-me">
+                <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 class="text">
+                        <h1>Gilliano Agard | Software Developer <img src="images/wave-hi.gif" width="35px"/></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>
+                </section>
             </div>
         </section>
     </body>

diff --git a/styles.css b/styles.css
@@ -88,4 +88,56 @@ nav ul li a:hover::after{
     width: 100%;
     height: 100vh;
     background-color: #1c1c1c;
+}
+
+/* About Section */
+#about-me {
+    display: flex;
+    align-items: center;
+    margin-top: 2.5%;
+}
+
+#about-me .text {
+    padding: 0 20px;
+}
+
+#about-me h1 {
+    font-size: 30px;
+    margin-top: 0px;
+    color:#f90707;
+}
+
+#about-me p {
+    font-size: 17.5px;
+    text-align: justify;
+}
+
+#about-me p a{
+    color: 	#FFD700;
+    text-decoration: none;
+    font-size: 18px;
+    position: relative;
+}
+
+#about-me p a::after {
+    content: '';
+    width: 0;
+    height: 3px;
+    background: #FFD700;
+    position: absolute;
+    left: 0;
+    bottom: -6px;
+    transition: 0.5s;
+}
+
+#about-me p a:hover::after{
+    width: 100%;
+}
+
+.profile-image{
+    width: 400px;
+    height: fit-content;
+    vertical-align: middle;
+    margin: 5px;
+    border-radius: 25px;
 }