diff --git a/.DS_Store b/.DS_Store index da693913..daa33ae4 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 00000000..6f3a2913 --- /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 8608b28f..ea64c7ca 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 59eb6bc1..181bb07b 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 1728baa0..53df05bd 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 4305b972..a24aabe6 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 a1026e97..5f18fbff 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**/