From 71328bf173c02e5390aeee03bcc9cb07646cab2e Mon Sep 17 00:00:00 2001
From: iqbal-hossain <mdiqbalhossain5170@gmail.com>
Date: Fri, 25 Aug 2023 23:06:30 +0600
Subject: [PATCH] made website responsive

---
 index.html | 10 ++++----
 styles.css | 67 ++++++++++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 63 insertions(+), 14 deletions(-)
diff --git a/index.html b/index.html
index e662e7c..e4f7d54 100755
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
 </head>
 
 <body>
-    <section class="container">
+    <section class="header">
         <div class="half-width">
             <h1>YOUNG OBAMA</h1>
             <h4>Superstar Web Developer</h4>
@@ -20,7 +20,7 @@ <h4>Superstar Web Developer</h4>
             <img src="images/user_avatar.png">
         </div>
     </section>
-    <section class="container">
+    <section class="about">
         <div class="half-width">
             <img src="images/about-avatar.png">
         </div>
@@ -34,8 +34,9 @@ <h2>About Me</h2>
                 web development just for 5 days. Ignore them, they are ex.</p>
         </div>
     </section>
-    <section class="container">
+    <section>
         <h2>What I do</h2>
+        <div class="service">
         <div class="service-item">
             <img src="images/icon/service/intersection.png">
             <h2>Web Development</h2>
@@ -54,8 +55,9 @@ <h2>App Development</h2>
             <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                 tincidunt ut laoreet dolore magna aliquam erat.</p>
         </div>
+    </div>
     </section>
-    <footer class="container">
+    <footer class="footer">
         <p>All right reserved Young Obama @ 2020</p>
     </footer>
 </body>
diff --git a/styles.css b/styles.css
index d01ad95..f697964 100755
--- a/styles.css
+++ b/styles.css
@@ -2,30 +2,77 @@ body {
   font-family: roboto, sans-serif;
   color: #707070;
 }
+
 h1 {
   font-size: 60px;
   margin: 20px 0;
 }
-h2, h4 {
+
+h2,
+h4 {
   font-size: 30px;
+  text-align: center;
   margin-bottom: 30px;
   color: #000;
 }
-.container {
-  max-width: 1140px;
-  padding: 60px 0;
-  margin: auto;
-  clear: both;
+
+.header {
+  width: 100%;
+  display: flex;
+  gap: 80px;
+  justify-content: center;
+  align-items: center;
 }
+
+.about {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+.service {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
 .half-width {
-  max-width: 50%;
-  float: left;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
+.footer {
+  text-align: center;
+}
+
 .service-item {
-  max-width: 25%;
-  float: left;
   margin: 0px 15px 20px 15px;
   padding: 20px;
   border: 1px solid #ddd;
   border-radius: 20px;
+  overflow: hidden;
+}
+
+/* Responsive styles */
+@media only screen and (max-width: 600px) {
+
+  .header {
+    flex-direction: column-reverse;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .about {
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+  .service {
+    flex-direction: column-reverse;
+    justify-content: center;
+    text-align: center;
+  }
+
 }
\ No newline at end of file
