navbar and screen size fixed

djeck1432 · Oct 1, 2024 · 48e0fa4 · 48e0fa4
1 parent 7d3b699
commit 48e0fa4
Show file tree

Hide file tree

Showing 3 changed files with 161 additions and 3 deletions.
diff --git a/frontend/src/components/header/Header.jsx b/frontend/src/components/header/Header.jsx
@@ -15,8 +15,8 @@ function Header({ walletId, onConnectWallet, onLogout }) {
               </div>
               <div className='wallet-section'>
                   {walletId ? (
-                      <div>
-                          <div>
+                      <div className='wallet-container'>
+                          <div className='wallet-id'>
                               {`${walletId.slice(0, 4)}...${walletId.slice(-4)}`}
                           </div>
                           <button

diff --git a/frontend/src/components/header/header.css b/frontend/src/components/header/header.css
@@ -71,11 +71,31 @@ nav {
 }
 
 .wallet-section button{
-    background: var(--gradient);
+    background: transparent;
     border-radius: 8px;
     height: 52px;
     width: 190px;
     font-size: 20px;
     font-family: var(--text-font);
+    border: 1px solid var(--blue-color);
+    color: white;
     font-weight: 700;
 }
+
+.wallet-container{
+    display: flex;
+    gap: 10px;
+}
+
+.wallet-id{
+    background: var(--gradient);
+    border-radius: 8px;
+    height: 52px;
+    width: 190px;
+    font-size: 20px;
+    font-family: var(--text-font);
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/frontend/src/pages/spotnet/home.css b/frontend/src/pages/spotnet/home.css
@@ -86,4 +86,142 @@ body{
     bottom: -50px;
     left: 50%;
     transform: translateX(-50%);
+}
+
+@media (min-width: 1800px) {
+    .home{
+        background-color: transparent;
+        width: 125%;
+        position: relative;
+        right: 150px;
+    }
+
+    .center-text {
+        font-size: 100px;
+        width: 1200px;
+    }
+
+    .launch-button {
+        width: 650px;
+        font-size: 26px;
+        height: 70px;
+    }
+
+    .home h5 {
+        font-size: 1.4em;
+        width: 800px;
+    }
+}
+
+@media (max-width: 1800px) {
+    .home{
+        background-color: transparent;
+        width: 120%;
+        position: relative;
+        right: 100px;
+    }
+
+    .center-text {
+        font-size: 80px;
+        width: 1000px;
+    }
+
+    .launch-button {
+        width: 550px;
+        font-size: 26px;
+        height: 60px;
+    }
+
+    .home h5 {
+        font-size: 1.2em;
+        width: 700px;
+    }
+}
+
+@media (max-width: 1710px) {
+    .home{
+        width: 100%;
+        position: relative;
+        right: 20px;
+    }
+}
+
+@media (max-width: 1440px) {
+    .home{
+        position: relative;
+        left: 10px;
+        width: 97%;
+    }
+    .center-text {
+        font-size: 70px;
+        max-width: 750px;
+    }
+
+    .launch-button {
+        width: 350px;
+        font-size: 18px;
+    }
+
+    .home h5 {
+        font-size: 0.9em;
+        width: 600px;
+    }
+}
+
+@media (max-width:1550px){
+    .home{
+        width: 100%;
+    }
+    .center-text {
+        font-size: 70px;
+        max-width: 750px;
+    }
+}
+
+@media (max-width: 1400px) {
+    .home {
+        position: relative;
+        width: 105%;
+        background-color: transparent;
+        left: -10px;
+    }
+}
+
+@media (max-width: 1280px) {
+    .home{
+        width: 95%;
+        left: 15px;
+    }
+
+    .center-text {
+        font-size: 50px;
+        max-width: 600px;
+    }
+
+    .launch-button {
+        width: 300px;
+        font-size: 16px;
+    }
+
+    .home h5 {
+        font-size: 0.85em;
+        width: 500px;
+    }
+}
+
+@media (max-width: 1024px) {
+    .center-text {
+        font-size: 35px;
+        max-width: 500px;
+    }
+
+    .launch-button {
+        width: 250px;
+        font-size: 14px;
+    }
+
+    .home h5 {
+        font-size: 0.8em;
+        width: 450px;
+    }
 }