diff --git a/codepal/components/navbar.html b/codepal/components/navbar.html index 6a5a858..ad35f7e 100644 --- a/codepal/components/navbar.html +++ b/codepal/components/navbar.html @@ -4,24 +4,42 @@ - Document + + Codepal - +
+ +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/codepal/index.css b/codepal/index.css index 152f6c0..4fd4f22 100644 --- a/codepal/index.css +++ b/codepal/index.css @@ -4,11 +4,11 @@ box-sizing: border-box; margin: 0; padding: 0; - font-family: 'Roboto', 'Lucida Sans', 'Lucida Sans Regular'; + font-family: 'Roboto', sans-serif; } body { - background: #ECECFF; + background: #1d4041; text-align: center; color: #212121; } @@ -21,11 +21,11 @@ body { height: 100vh; width: 100%; z-index: -1; - background: radial-gradient(92.82% 58.5% at 65.55% 44.29%, rgba(255, 227, 218, 0.50) 0%, rgba(255, 252, 252, 0.85) 100%), #F2F9F4; + background: radial-gradient(92.82% 58.5% at 65.55% 44.29%, rgba(18, 17, 17, 0.807) 0%, rgba(3, 3, 3, 0.922) 100%), #c2e5cc; } nav a { - all: unset; + text-decoration: none; cursor: pointer; } @@ -37,13 +37,13 @@ nav { align-items: center; justify-content: space-between; padding: 0.1em 2em; - margin-inline: auto; - margin-top: 1em; + margin: 1em auto; } nav .logo-container>img { width: 100%; - aspect-ratio: 1; + max-width: 50px; + height: auto; } nav .logo-container { @@ -53,19 +53,20 @@ nav .logo-container { gap: 1em; color: white; height: 5em; - aspect-ratio: 1; } nav .search-container { - width: min(40%, 450px); + flex: 1; + max-width: 450px; } nav .search-container input { - all: unset; width: 100%; padding: 0.6em 0.8em; border-radius: 30px; background: #FBFBFF; + border: none; + outline: none; } nav .githubIcon { @@ -75,16 +76,14 @@ nav .githubIcon { #Allcards { display: flex; flex-wrap: wrap; - align-items: start; - justify-content: start; gap: 1em; - margin-top: max(50px, 3%); - width: min(95vw, 1000px); - margin-inline: auto; + margin: max(50px, 3%) auto; + max-width: 1000px; } .MainPagecard:hover { box-shadow: 6px 0.55px 18px -3px rgba(101, 101, 101, 0.608); + transform: scale(1.1); } .MainPagecard { @@ -106,8 +105,7 @@ nav .githubIcon { opacity: 0.6; } -@media only screen and (max-width : 520px) { - +@media only screen and (max-width: 520px) { nav .search-container { display: none; } @@ -115,5 +113,4 @@ nav .githubIcon { #Allcards { justify-content: center; } - } \ No newline at end of file diff --git a/codepal/index.js b/codepal/index.js index ee8c81f..f421804 100644 --- a/codepal/index.js +++ b/codepal/index.js @@ -33,7 +33,7 @@ document.addEventListener("DOMContentLoaded", function () { carddata = cardData }); - + await fetch("./components/Maincard.html") .then(responce => responce.text()) .then((componentHTML) => {