Added about section

Author: ViruSel

images/banner.png

@@ -14,10 +14,10 @@
             <div class="logo"><a href="#">Portofolio</a></div>
             <ul class="menu">
                 <li><a href="#">Home</a></li>
-                <li><a href="#">Projects</a></li>
+                <li><a href="#">About</a></li>
                 <li><a href="#">Services</a></li>
                 <li><a href="#">Skills</a></li>
-                <li><a href="#">About</a></li>
+                <li><a href="#">Projects</a></li>
                 <li><a href="#">Contact</a></li>
             </ul>
             <div class="menu-btn">
@@ -33,11 +33,28 @@
                 <div class="text-1">Hi, my name is</div>
                 <div class="text-2">Alexandru Moldovan</div>
                 <div class="text-3">And I'm a <span>Software Engineer</span></div>
+                <a href="#">Download my CV</a>
+            </div>
+        </div>
+    </section>
+
+    <!-- About section start -->
+    <section class="about" id="about">
+        <div class="max-width">
+            <h2 class="title">About me</h2>
+            <div class="about-content">
+                <div class="column left">
+                    <img src="images/pfp.png" alt="">
+                </div>
+                <div class="column right">
+                    <div class="text">I'm Alex and I'm a <span>Software Engineer</span></div>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nemo inventore optio veritatis nostrum. Provident nisi tempore natus voluptas voluptates, quis eum aspernatur officia assumenda aut modi. Deleniti quasi cumque, consequatur odio quod in obcaecati dolorem tempora, dicta facere nisi eaque eveniet nam est quidem optio officiis ut. Fuga in aut quis quam a magnam ut maiores repellat consequatur incidunt unde nisi qui, facere laboriosam magni ullam rerum perferendis adipisci tempore architecto corporis debitis. Quis nostrum quaerat accusamus fuga assumenda unde ex itaque. Excepturi facere nesciunt nisi, consequuntur quia labore possimus eaque pariatur voluptate minima repudiandae a repellendus voluptas autem doloremque aperiam iusto nobis expedita atque velit perspiciatis libero. Ab, odit cum? Consectetur aut nisi quisquam deserunt inventore culpa omnis aliquam fuga ex neque iusto temporibus facere, officia ipsa quos amet harum molestiae! Provident saepe eos soluta, vitae optio reiciendis voluptatibus. Vero blanditiis libero reiciendis voluptatibus architecto distinctio cum ex quo, quisquam, veritatis fugiat excepturi repudiandae fugit, rem corporis dolor! Voluptate placeat recusandae quasi dolores quia totam earum, explicabo numquam deleniti modi nostrum expedita assumenda. Perspiciatis rem dignissimos eligendi officiis nam repellendus tempora soluta sunt aliquid voluptates. Nostrum, dolor excepturi eos, temporibus quis aliquam necessitatibus iste consequuntur voluptate magni saepe?</p>
+                    <a href="#">Downlaod CV</a>
+                </div>
             </div>
         </div>
     </section>
 
-    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus ad quam aliquam, nam dolorem at praesentium odio, unde deleniti vel nihil saepe asperiores vero adipisci doloremque quibusdam? Dignissimos, architecto sunt praesentium doloribus repudiandae ipsum in neque at molestiae maxime. Hic, repellat a maiores deserunt corporis debitis sit animi, suscipit delectus perspiciatis libero vero in quam, ut odio molestias asperiores. Dolorum voluptates id nobis hic, quae tempore alias eos quam, placeat obcaecati nam fugit necessitatibus aperiam assumenda harum aliquam reprehenderit laborum. Voluptate nulla, ea nemo perferendis a adipisci et impedit non iure deserunt ratione asperiores quibusdam tempora aperiam dolorum, repudiandae eos nam odit rerum. Voluptate asperiores fugiat aliquam ab amet alias sint molestiae labore dolores consequatur corporis debitis saepe magnam repellendus magni commodi non, voluptatum accusamus culpa, architecto voluptatibus. Ipsam molestiae consequatur corrupti cupiditate ducimus ex fugiat culpa et dolores? Tempora numquam veniam atque nobis, eos dolorum, animi molestias debitis reiciendis iusto eius. Soluta officiis rem quidem quisquam laudantium ex architecto culpa, minima perferendis veritatis iste quo quaerat nesciunt quos quas alias nulla autem quis? Iste minima possimus eum soluta eaque tempora illum dolorum aperiam. Consequuntur itaque odit architecto? Vero nihil tempora ex consequuntur mollitia aut doloremque optio quam et aspernatur!</p>
     <script src="script.js"></script>
 </body>
 </html>

index.html

@@ -18,6 +18,7 @@
 .navbar{
     position: fixed;
     width: 100%;
+    z-index: 999;
     padding: 30px 0;
     /* background: indigo; */
     font-family: "Exo 2", serif;
@@ -105,13 +106,136 @@
     color: blueviolet;
 }
 
+.home .home-content a{
+    display: inline-block;
+    background-color: indigo;
+    color: whitesmoke;
+    font-size: 25px;
+    padding: 12px 36px;
+    margin-top: 20px;
+    border-radius: 10px;
+    border: 2px solid indigo;
+    transition: all 0.3s ease;
+}
+
+.home .home-content a:hover{
+    color: blueviolet;
+    background: none;
+}
+
+/* About Section Styling */
+section{
+    padding: 100px 0;
+}
+
+.about{
+    font-family: "Exo 2", serif;
+}
+
+.about .title{
+    position: relative;
+    text-align: center;
+    font-size: 40px;
+    font-weight: 500;
+    margin-bottom: 60px;
+    padding-bottom: 20px;
+    font-family: "Sofia Sans", serif;
+}
+
+.about .title::before{
+    content: "";
+    position: absolute;
+    bottom: 0px;
+    left: 50%;
+    width: 180px;
+    height: 3px;
+    background: black;
+    transform: translateX(-50%);
+}
+
+.about .title::after{
+    content: "Who I am";
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    font-size: 20px;
+    color: blueviolet;
+    padding: 5px;
+    background: white;
+    transform: translateX(-50%);
+}
+
+.about .about-content{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.about .about-content .left{
+    width: 45%;
+}
+
+.about .about-content .left img{
+    height: 400px;
+    width: 400px;
+    object-fit: cover;
+    border-radius: 10px;
+}
+
+.about .about-content .right{
+    width: 55%;
+}
+
+.about .about-content .right .text{
+    font-size: 25px;
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+
+.about .about-content .right .text span{
+    color: blueviolet;
+}
+
+.about .about-content .right p{
+    text-align: justify;
+}
+
+.about .about-content .right a{
+    display: inline-block;
+    background-color: indigo;
+    color: whitesmoke;
+    font-size: 20px;
+    font-weight: 500;
+    padding: 10px 30px;
+    margin-top: 20px;
+    border-radius: 10px;
+    border: 2px solid indigo;
+    transition: all 0.3s ease;
+}
+
+.about .about-content .right a:hover{
+    color: indigo;
+    background: none;
+}
+
+
+
+
 /* Mobile adaptation */
-@media (max-width: 1104px){
+@media (max-width: 1300px){
     .home .max-width{
         margin-left: 0px;
     }
 }
 
+@media (max-width: 1104px){
+    .about .about-content .left img{
+        height: 350px;
+        width: 350px;
+    }
+}
+
 @media (max-width: 991px){
     .max-width{
         padding: 0 50px;
@@ -149,11 +273,44 @@
         margin: 25px, 0;
         font-size: 25px;
     }
-    
     .home .home-content .text-3{
         font-size: 35px;
+    }
+    .home .home-content a{
+        font-size: 23px;
+        padding: 10px 30px;
+    }
+    /* .max-width{
+        max-width: 800px;
+    } */
+    .about .about-content .column{
+        width: 100%;
+    }
+    .about .about-content .left{
+        display: flex;
+        justify-content: center;
+        margin: 0 auto 60px;
+    }
+    .about .about-content .right{
+        flex: 100%;
+    }
+    
+}
 
+@media (max-width: 690){
+    .max-width{
+        padding: 0 23px;
     }
+    .home .home-content .text-2{
+        font-size: 60px;
+    }
+    .home .home-content .text-3{
+        font-size: 32px;
+    }
+    .home .home-content a{
+        font-size: 20px;
+    }
+    
 }
 
 @media (max-width: 500){
@@ -163,6 +320,5 @@
     }
     .home .home-content .text-3{
         font-size: 27px;
-
     }
 }