diff --git a/index.html b/index.html index fb61c47..f344d22 100644 --- a/index.html +++ b/index.html @@ -8,27 +8,42 @@ rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> + 👨‍🎓 Showcase +
-

👨‍🎓 Students

+

👨‍🎓 Students


+ +
+
+
+
+ + +
-
- -
- + + diff --git a/script.js b/script.js index 7381790..cc110a9 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,8 @@ import userProfiles from "./profileData.js"; - +function toggleSearchBox() { + const searchBox = document.getElementById("search-box"); + searchBox.classList.toggle("hidden"); +} function displayUserContributions() { const cardContainer = document.getElementById("card-container"); @@ -93,3 +96,4 @@ console.log(top); document .getElementById("scroll-to-top-button") .addEventListener("click", scrollToTop); + diff --git a/style.css b/style.css index 9ffc388..6b7dd12 100644 --- a/style.css +++ b/style.css @@ -230,3 +230,54 @@ header nav a:hover { opacity: 0; } } +.center { + border: 5px solid; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 10px; +} +/* Add your desktop styles here */ +.navbar { + display: flex; + justify-content: space-between; +} + +/* Add your responsive styles here */ + +/* ... (your existing styles) ... */ + +/* Position the search container horizontally and stack elements vertically */ +@media (max-width: 768px) { +.search-container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 10px; /* Adjust the margin as needed */ +} + +/* Style the search button as needed */ +.search-icon { + background: none; + border: none; + font-size: 24px; + cursor: pointer; +} + +/* Ensure that the input box is hidden by default */ +.hidden { + display: none; +}} +@media (min-width: 768px) { + .search-icon { + display: inline; + } + .search-icon { + background: none; + border: none; + font-size: 24px; + cursor: pointer; + } + +} \ No newline at end of file