responsive, add code icon

Sabeer-Junaid · Jun 3, 2024 · 81a5cad · 81a5cad
1 parent bb9ae22
commit 81a5cad
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/assets/images/code-ico.png b/assets/images/code-ico.png
diff --git a/assets/styles.css b/assets/styles.css
@@ -14,6 +14,7 @@ body {
   --purpinkish: hsl(333, 73%, 51%);
 }
 
+/* Navbar */
 .navbar {
   display: flex;
   justify-content: flex-start;
@@ -69,6 +70,8 @@ body {
   margin-left: auto; /* Move to the right end */
 }
 
+/* Cover LOGO */
+
 .cover-logo {
   justify-content: center;
   width: 10rem;
@@ -77,18 +80,40 @@ body {
   /* background-color: aqua; */
 }
 
+@media (min-width: 768px) {
+  .cover-logo {
+    /* background-color: red; */
+    margin-top: 3rem;
+  }
+  .content {
+    margin-top: -3rem;
+  }
+}
+@media (min-width: 1024px) {
+  .cover-logo {
+    /* background-color: royalblue; */
+    margin-top: 3rem;
+  }
+  .content {
+    margin-top: -3rem;
+  }
+}
+
 .cover-logo img {
   height: 10rem;
   width: 10rem;
 }
 
+/* Main Content */
+
 .content {
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   /* background-color: blue; */
   height: 18rem;
+  margin-top: -2rem;
 }
 
 .quote {

diff --git a/index.html b/index.html
@@ -53,7 +53,9 @@
         <img src="assets/images/logo.png" style="height: 2rem" />
       </div>
       <div class="menu ml-auto">
-        <button id="viewgithub-btn" class="btn">&lt;/&gt;</button>
+        <button id="code-btn" class="btn">
+          <img src="assets/images/code-ico.png" style="height: 1.4rem" />
+        </button>
       </div>
     </div>