made responsive

26-PM · Jan 29, 2024 · c3e1c42 · c3e1c42
1 parent e1c6a24
commit c3e1c42
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap"
         rel="stylesheet">
+    <link rel="stylesheet" href="responsive.css">
 </head>
 
 <body>

diff --git a/responsive.css b/responsive.css
@@ -0,0 +1,83 @@
+/* Mobile devices */
+@media only screen and (max-width: 600px) {
+    .logo img {
+        /* margin-top: 1vh; */
+        width: 80px;
+        margin: 2vw;
+    }
+    .navbar div:first-child {
+        display: none;
+    }
+    .container {
+        width: 100vw;
+        margin: 0 auto;
+        /* padding: 80px 20px; */
+        padding: 0;
+    }
+    .avatar img {
+        width: 251px;
+        padding-top:2vh;
+    }
+    .about-text{
+        width:100vw;
+        padding-left: 2vh;
+        padding-right: 2vh;
+    }
+    .experience-with-lang {
+        display: flex;
+        width: 80vw;
+        margin: 50px auto;
+        justify-content: space-between;
+    }
+    .btn-secondary {
+        margin-top: 2vh;
+        border: 1px solid #fff;
+        margin-right: 20px;
+        margin-left: 0px;
+    }
+    .projects {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        /* gap:2vh; */
+    }
+
+    .project-item {
+        margin: 0px;
+        width:40vw;
+        margin:3vw;
+    }
+
+    .project-item img {
+        width: 100%;
+    }
+    .img{
+        margin: 10vw;
+    }
+
+    .projects-title {
+        padding: 15px;
+    }
+
+    .projects-title h3 {
+        color: #fff;
+    }
+    footer .container h2{
+        margin-left: 35vw;
+    }
+    footer .container p{
+        margin-left: 2vw;
+    }
+    .email-container {
+        margin-top: 40px;
+    }
+
+    .email-container img {
+        margin-left: 2vw;
+    }
+
+    .social-links {
+        display: flex;
+        margin-top: 40px;
+    }
+}
diff --git a/style.css b/style.css
@@ -22,7 +22,7 @@ nav {
     display: flex;
     justify-content: space-between;
     /* width: 1100px; */
-    width:500vw;
+    width:100vw;
     margin: 0 auto;
 }
 
@@ -108,6 +108,7 @@ nav {
     border-radius: 50px;
     font-size: 22px;
     color: #fff;
+    margin-left: 40px;
 }
 
 .experience-with {
@@ -208,23 +209,27 @@ nav {
 }
 
 footer {
-    width: 500vw;
+    width: 100vw;
     background-color: #191919;
 }
 
 footer h2 {
+    padding-top: 2vh;
     color: #fff;
     font-size: 24px;
     margin-bottom: 20px;
 }
 
 footer p {
     font-size: 15px;
+    padding-left: 2vh;
+    padding-right:2vh
 }
 
 .email-container {
     display: flex;
     align-items: center;
+    justify-content: center;
     margin-top: 40px;
 }
 
@@ -234,9 +239,14 @@ footer p {
 
 .social-links {
     display: flex;
+    align-items: center;
+    justify-content: center;
     margin-top: 40px;
 }
 
 .social-links img {
     margin-right: 20px;
+    margin-left: 20px;
+    margin: 10px;
+
 }