phone responsive

abir-alahe · Jan 14, 2023 · 0450751 · 0450751
1 parent 8a2f702
commit 0450751
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -60,7 +60,7 @@ <h3 class="section-title">About Me</h3>
             <h3 class="section-title">What I Do</h3>
             <div class="skills-container">
                 <div class="skill">
-                    <img src="images/icons/js.png" alt="">
+                    <img src="images/icons/js1.png" alt="">
                     <p class="skill-title">Vanilla JavaScript</p>
                     <p class="skill-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta dolorem odio doloribus deleniti fugit veniam.</p>
                 </div>

diff --git a/styles/portfolio.css b/styles/portfolio.css
@@ -142,7 +142,7 @@ main {
   margin-top: 30px;
   margin-bottom: 30px;
 }
-.resume .section-title{
+.resume .section-title {
   margin-bottom: 60px;
 }
 .resume .title {
@@ -172,18 +172,63 @@ main {
   margin-top: 130px;
   display: flex;
   gap: 100px;
-  background-color: #FFF8F3;
+  background-color: #fff8f3;
   padding: 130px 220px;
 }
-.contact .section-title{
+.contact .section-title {
   text-align: left;
 }
-.contact input[type="text"], input[type="email"], textarea {
+.contact input[type="text"],
+input[type="email"],
+textarea {
   margin-bottom: 24px;
   border: 0;
   width: 100%;
   padding: 18px 30px;
 }
-.contact a{
+.contact a {
   text-decoration: none;
 }
+
+@media screen and (max-width: 576px) {
+  .header{
+    background-image: none;
+ }
+  .banner, 
+  .skills-container, 
+  .resume-content, 
+  .about-info-container, 
+  .contact,
+  nav{
+    flex-direction: column;
+    gap: 20px;
+    margin: 0;
+    padding: 10px 20px;
+  }
+
+.banner {
+  margin: 0 20px;
+}
+.banner img {
+  width: 100%;
+}
+  nav ul {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+    padding-left: 10px;
+  }
+  .about, .contact {
+    padding: 40px 20px;
+  }
+  .contact input[type="text"], input[type="email"], textarea {
+    padding: 18px 0 18px 10px;
+  }
+
+}
+@media screen and (min-width: 577px) and (max-width: 992px) {
+}
+
+.hide {
+  display: none;
+}