update01

index.html

@@ -13,22 +13,22 @@
     <header>
         <nav class="menu">
             <div>
-                <h2>Ma <span class="coler-orange">r</span> y</h2>
+                <h2> | Aminur <span class="coler-orange">Islam</span> |</h2>
             </div>
             <ul class="menu">
-                <li>Portfolio</li>
-                <li>Blog</li>
+                <li class="btn">Protfolio</li>
+                <li class ="btn">Blog</li>
                 <li class="btn">Hire me</li>
             </ul>
         </nav>
         <section id="banner">
             <div class="banner-content">
                 <h2>Hi, I am</h2>
-                <h1>Mary Hardy</h1>
-                <p>Shot what able cold new see hold.Friendly as an betrayed formerly he. Morning becaus as to society behaved moments.</p>
+                <h1>Aminur Islam</h1>
+                <p>Hey I'm Aminur Islam. It is my portfulio website. Here you can see my info. Let's begin.</p>
                     <div >
-                        <button class="btn">Download CV</button>
-                        <button class="btn">Contact</button>
+                        <button class="btn"> Download CV </button>
+                        <button class="btn"> Contact </button>
                     </div>
             </div>
             <div class="banner-image">
@@ -44,20 +44,20 @@ <h2>About me</h2>
                 <p>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>
                 <div class="about-info">
             <div class="info-card">
-                <p>Name:</p>
-                <h4>Mary Hardy</h4>
+                <p>Name:  </p>
+                <h4>| Aminur Islam |</h4>
             </div>
             <div class="info-card">
-                <p>Email:</p>
-                <h4>info@gmail.com</h4>
+                <p>Email: </p>
+                <h4>|info@gmail.com|</h4>
             </div>
             <div class="info-card">
-                <p>Date of birth:</p>
-                <h4>11 November 1987</h4>
+                <p>Date of birth: </p>
+                <h4>| 11 November 2002 |  </h4>
             </div>
             <div class="info-card">
-                <p>From:</p>
-                <h4>Los Angeles, USA</h4>
+                <p>From:   </p>
+                <h4>| Dhaka, Bangladesh |</h4>
             </div>
         </div>
             </div>
@@ -94,5 +94,10 @@ <h3>MongoDB</h3>
             </div>
         </div>
     </section>
+    <footer>
+        <div>
+            <p>&copy; Aminur Islam. All rights reserved. Portfolio updated by- <a href="https://www.facebook.com/monirul.hasan06">Monirul Hasan Mithu</a></p>
+        </div>
+    </footer>
 </body>
 </html> 

style.css

@@ -24,8 +24,8 @@ header{
 nav{
     width: 71%;
     max-width: 1140px;
-    border: 1px solid #FFF8F3;
-    margin: 0px auto;
+    border: 5px solid #FFF8F3;
+    margin: 5px auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -86,6 +86,8 @@ nav .menu a{
 }
 #banner .banner-content{
     max-width: 585px;
+    margin: 10px;
+    padding: 3px;
 }
 #banner .banner-content h2{
     font-size: 45px;
@@ -152,6 +154,7 @@ nav .menu a{
     padding: 30px;
     box-shadow: 0 6px 50px 0 #00000039;
     max-width: 267px;
+    margin : 5px;
 }
 .skills-card h3{
     font-size: 20px;
@@ -164,4 +167,27 @@ nav .menu a{
     font: 16px;
     color: #757575;
     line-height: 28px;
+}
+
+.btn:hover {
+  background-color: #2980b9; /* Darker blue */
+  transform: translateY(-3px); /* Moves button up slightly */
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Adds a shadow */
+}
+.btn:active {
+  transform: translateY(0); /* Pushes it back down */
+}
+.skills-card:hover {
+  color: whitesmoke;
+  background-color: #2980b9; /* Darker blue */
+  transform: translateY(-3px); /* Moves button up slightly */
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Adds a shadow */
+}
+.skills-card:active {
+  transform: translateY(0); /* Pushes it back down */
+}
+footer{
+    color:#757575;
+    text-align: center;
+    margin-bottom: 8px;
 }