diff --git a/.DS_Store b/.DS_Store index da6939134..daa33ae4a 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/Art-Gallery/.vscode/settings.json b/Art-Gallery/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/Art-Gallery/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Art-Gallery/index.html b/Art-Gallery/index.html index 8608b28f6..ea64c7caa 100644 --- a/Art-Gallery/index.html +++ b/Art-Gallery/index.html @@ -14,6 +14,7 @@
MY ART ABOUT + CONTACT ME
@@ -35,26 +36,28 @@ tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.

+
+
+
+

Do not hesitate to contact me!

+
+
+ Name + +
+
+ Email + +
+
+ Message + +
+
+ +
+
-
-

Do not hesitate to contact me!

-
-
- Name - -
-
- Email - -
-
- Message - -
-
- -
-
Made by ❤Jugesh Raghav diff --git a/Art-Gallery/mobile.css b/Art-Gallery/mobile.css index 59eb6bc10..181bb07be 100644 --- a/Art-Gallery/mobile.css +++ b/Art-Gallery/mobile.css @@ -1,23 +1,85 @@ -*{ - margin:0; - padding:0; -} -@media (max-width:595px){ - #container{ - display:grid; - grid-template-columns:auto; - } - .header{ - padding-top:30px; - padding-bottom:30px; - padding-right: 10px; - padding-left:10px; - } - img{ - width:250px; - height:300px; - } - .footer{ - padding:10px - } -} \ No newline at end of file +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; +} + +.header { + display: flex; + justify-content: space-around; + align-items: center; + background-color: #333; + padding: 15px 0; + color: white; + font-size: 18px; +} + +.header a { + color: white; + text-decoration: none; + transition: color 0.3s; +} + +.header a:hover { + color: #ff6347; +} + +#container { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + padding: 20px; +} + +.half { + flex: 1; + max-width: 45%; + margin: 10px; +} + +img { + width: 100%; + border-radius: 8px; +} + +.about-block { + padding: 20px; +} + +.red { + color: red; +} + +.input { + margin: 10px 0; +} + +.input span { + display: block; + margin-bottom: 5px; +} + +.button { + padding: 10px 15px; + background-color: #333; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.button:hover { + background-color: #ff6347; +} + +.footer { + text-align: center; + padding: 15px; + background-color: #333; + color: white; +} diff --git a/Band Website/index.html b/Band Website/index.html index 1728baa09..53df05bd0 100644 --- a/Band Website/index.html +++ b/Band Website/index.html @@ -30,6 +30,9 @@
+
+ +
Chicago diff --git a/Band Website/script.js b/Band Website/script.js index 4305b9728..a24aabe68 100644 --- a/Band Website/script.js +++ b/Band Website/script.js @@ -12,4 +12,50 @@ for(i=0;i<=0;i++){ modalClose[i].addEventListener("click",()=>{ modal.style.display="none"; }) -} \ No newline at end of file +} +document.querySelector('.search').addEventListener('click', function(event) { + const searchContainer = document.getElementById('search-container'); + const searchInput = document.getElementById('search-input'); + + event.stopPropagation(); + + searchContainer.classList.toggle('active'); + searchInput.classList.toggle('active'); + + if (searchInput.classList.contains('active')) { + searchInput.focus(); + } +}); + +document.addEventListener('click', function(event) { + const searchContainer = document.getElementById('search-container'); + const searchInput = document.getElementById('search-input'); + + if (!searchContainer.contains(event.target) && searchInput.classList.contains('active')) { + searchContainer.classList.remove('active'); + searchInput.classList.remove('active'); + } +}); + +function highlightText(searchTerm) { + const elementsToSearch = document.querySelectorAll('p, h1, h2, h3, h4, h5, h6, div, span, li'); // Add more tags if necessary + + const searchRegex = new RegExp(`(${searchTerm})`, 'gi'); + + elementsToSearch.forEach(element => { + const innerHTML = element.innerHTML; + + const highlightedHTML = innerHTML.replace(searchRegex, '$1'); + + element.innerHTML = highlightedHTML; + }); +} + +document.getElementById('search-input').addEventListener('keydown', function(event) { + if (event.key === 'Enter') { + const searchTerm = event.target.value.trim(); + if (searchTerm) { + highlightText(searchTerm); + } + } +}); \ No newline at end of file diff --git a/Band Website/style.css b/Band Website/style.css index a1026e977..5f18fbffa 100644 --- a/Band Website/style.css +++ b/Band Website/style.css @@ -54,12 +54,50 @@ a:hover{ } /*search bar*/ -.search{ - color: white; - float: right; - font-size: 25px; - padding: 15px; - margin-right: 10px; + +.search { + color: white; + float: right; + font-size: 25px; + padding: 15px; + margin-right: 10px; + cursor: pointer; +} + + +#search-container { + display: none; + width: 100%; + text-align: center; + position: absolute; + top: 60px; + left: 0; +} + +.search-input { + width: 50%; + padding: 12px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transition: transform 0.5s ease, opacity 0.5s ease; + opacity: 0; + transform: translateY(-20px); +} + +#search-container.active { + display: block; +} + +.search-input.active { + opacity: 1; + transform: translateY(0); +} +.highlight { + background-color: yellow; + font-weight: bold; + color: black; } /**homepage description**/