About Section created

index.html

@@ -17,14 +17,14 @@ <h3 class="nav-title">Ma<span>r</span>y</h3>
                 <ul>
                     <li><a href="#">Portfolio</a></li>
                     <li><a href="#">Blog</a></li>
-                    <li><button class="btn-primary">Here Me</button></li>
+                    <li><button class="btn-primary" type="button">Hire Me</button></li>
                 </ul>
             </nav>
             <div class="banner">
                 <div class="banner-content">
                     <h2 class="banner-greeting">Hi, I  am</h2>
                     <h1 class="banner-title">Mary Hardy</h1>
-                    <p>Shot what able cold new see hold.Friendly as an betrayed formerly he. Morning because as to society behaved moments.</p>
+                    <p>Shot what able cold new see hold. Friendly as an betrayed formerly he. Morning because as to society behaved moments.</p>
                     <button class="btn-primary">Download CV</button>
                     <button class="btn-primary">Contact</button>
                 </div>
@@ -33,7 +33,10 @@ <h1 class="banner-title">Mary Hardy</h1>
         </div>
     </header>
     <main>
-
+        <section class="about">
+            <h3 class="section-title">About Me</h3>
+            <p class="section-description">I, m a designer & developer with a passion for web design. I enjoy developing simple, clean and slick websites that provide real value to the end user. Thousands of clients have procured exceptional resulfs while working with me. Delivering work within time and budget which meets clients requirements in our mata.</p>
+        </section>
     </main>
     <footer>
 

style.css

@@ -1,91 +1,135 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&display=swap');
-*{
+
+* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Open Sans', sans-serif;
 }
-.btn-primary{
+
+.btn-primary {
     background-color: #FD6E0A;
     color: white;
     border-radius: 5px;
     border: 0;
     font-size: medium;
     font-weight: 700;
     padding: 15px 35px;
+    cursor: pointer;
+}
+
+.section-title {
+    color: #181818;
+    font-size: 35px;
+    font-weight: 700;
+    text-align: center;
+    margin: 10px 0;
+}
+
+.section-description {
+    color: #757575;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 30px;
+    text-align: center;
+    margin: 10px 0;
 }
 
 /* nav section */
-nav{
+nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0px 60px 30px 0;
+    padding: 30px 60px 30px 0;
 }
-.nav-title{
+
+.nav-title {
     font-size: 45px;
     font-weight: 800;
     color: #181818;
 }
-.nav-title span{
+
+.nav-title span {
     color: #FD6E0A;
 }
-nav ul{
+
+nav ul {
     display: flex;
     align-items: center;
 }
-nav li{
+
+nav li {
     list-style: none;
     margin-right: 50px;
 }
-nav a{
+
+nav a {
     text-decoration: none;
     color: #474747;
 }
 
-/* verticle banner */
-    .vr-banner{
-        padding: 0px 30px 0px 0px;
-    }
-    .vr-banner img{
-        width: 84%;
-    }
 
 /* header related style */
-.header{
+.header {
     background-color: #FFF8F3;
-    padding: 0 0 0 35px;
     background-image: url(images/header_bg.png);
     background-size: 700px;
     background-repeat: no-repeat;
     background-position: right bottom;
     display: flex;
-    padding-top: 30px;
 }
-.banner{
+
+/* verticle banner */
+.vr-banner img {
+    width: 93%;
+}
+
+.vr-banner {
+    padding: 30px;
+}
+
+.header-container {
+    width: 100%;
+    padding: 0 10px;
+}
+
+.banner {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
-.banner-greeting{
+
+.banner-greeting {
     font-size: 40px;
     color: #474747;
     font-weight: 600;
 }
-.banner .banner-title{
+
+.banner .banner-title {
     font-size: 65px;
     color: #181818;
     font-weight: 700;
 }
-.banner p{
+
+.banner p {
     font-weight: 400;
     color: #474747;
     margin: 20px 0;
-    max-width: 585px;
+    max-width: 500px;
 }
-.banner-content button{
+
+.banner-content button {
     margin-right: 20px;
 }
-.profile-pic{
+
+.profile-pic {
     width: 500px;
+}
+
+/* About section */
+.about {
+    margin: 130px auto;
+    padding: 150px;
+    border-radius: 10px;
+    background: #FFF8F3;
 }