Add footer

ShadBalti · Feb 17, 2024 · 8cf7318 · 8cf7318
1 parent 9804663
commit 8cf7318
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -47,7 +47,39 @@ <h2>Life Milestones</h2>
       <p>Age 30: <span id="age30"></span></p>
       <!-- Add more milestones as needed -->
     </section>
+
   </div>
+      <footer id="owner-section" class="py-4">
+        <div class="container mx-auto">
+            <div class="row">
+                <div class="col-md-6">
+                    <img src="image/owner-min.jpg" alt="Owner's Image" class="img-fluid rounded-circle">
+                </div>
+                <div class="col-md-6">
+                    <h4>Dilshad Hussain</h4>
+                    <p>Contact Information:</p>
+                    <p><i class="bi bi-telephone"></i> Phone: 03408452974</p>
+                    <p><i class="bi bi-envelope"></i> Email: shadbalti2@gmail.com</p>
+                    <p>Physical Address: Barah Khaplu, Skardu, Pakistan</p>
+                    <p id="clock"></p> <!-- Dynamic clock -->
+                    <div class="social-feed mt-3">
+                        <!-- Social media feed (use appropriate embed code or widget) -->
+                        <!-- Example Twitter embed code -->
+                        <a class="twitter-timeline" data-height="200" href="https://twitter.com/ShadBalti" data-tweet-limit="3">Tweets by ShadBalti</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="container">
+            <div class="row mt-4">
+                <div class="col-md-6">
+                    <h5>About Us</h5>
+                    <p>I'm Dilshad Hussain, a web developer. I love coding and creating websites that work beautifully. </p>
+                </div>
+
+            </div>
+        </div>
+    </footer>
     <script src="main.js"></script>
 
 </body>

diff --git a/style.css b/style.css
@@ -82,3 +82,45 @@ button:hover {
 #milestones span {
   font-weight: bold;
 }
+
+footer {
+  background-color: #333;
+  color: #fff;
+  padding: 20px;
+  text-align: center;
+}
+
+footer p {
+  font-size: 16px;
+  margin-bottom: 10px;
+}
+
+.footer-owner {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.owner-image {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+}
+
+.owner-info {
+  text-align: left;
+}
+
+.social-feed {
+  margin-top: 10px;
+}
+
+.social-feed a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.about-us {
+  margin-top: 20px;
+  text-align: center;
+}