diff --git a/index2.html b/index2.html index 30d8f47..844e62f 100644 --- a/index2.html +++ b/index2.html @@ -22,45 +22,67 @@ flex: 1; } h1 { - color:rgb(137,79,31); + color: rgb(137, 79, 31); text-align: center; - background: color 47CACC; + background: #47CACC; padding: 20px; margin: 0; - font-family:cursive; + font-family: cursive; font-size: 50px; } form { margin: 20px 0; padding: 20px; - background-color:antiquewhite; + background-color: antiquewhite; border-radius: 8px; - box-shadow: 0 4px 8px rgba(0,0,0,0.2); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } label { font-size: 18px; color: #555; + margin-bottom: 8px; + } + label:hover { + color: #3798a3; /* Change color */ } input[type="text"] { padding: 10px; - border: 1px solid antiquewhite; + border: 2px solid #ccc; /* Default border */ border-radius: 4px; width: 100%; max-width: 600px; margin: 10px 0; + box-sizing: border-box; + transition: border-color 0.3s ease, box-shadow 0.3s ease; + font-size: 16px; + outline: none; /* Remove the default outline */ + } + input[type="text"]:hover { + border-color: #3798a3; /* Change border color on hover */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */ + } + input[type="text"]:focus { + border-color: #90dcde; /* Highlight border on focus */ + box-shadow: 0 0 10px #47CACC; /* Add glowing effect */ + background-color: #f9f9f9; /* Slightly change background color */ } button { - background-color:rgb(137,79,31); + background-color: rgb(137, 79, 31); color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; - transition: background-color 0.3s ease; + transition: background-color 0.3s ease, transform 0.2s ease; } button:hover { background-color: #3798a3; + transform: translateY(-3px); + } + button:active { + background-color: #2a6f6e; + transform: translateY(0); } #results { display: flex; @@ -70,7 +92,7 @@ #results div { background-color: #f5f5f5; border-radius: 8px; - box-shadow: 0 4px 8px rgba(0,0,0,0.2); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; margin: 10px 0; transition: transform 0.3s ease, box-shadow 0.3s ease; @@ -80,7 +102,7 @@ } #results div:hover { transform: translateY(-5px); - box-shadow: 0 6px 12px rgba(0,0,0,0.3); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); } h3 { color: #47CACC; @@ -93,7 +115,7 @@ } .background-videos video { width: 100%; - height: 200px; /* Adjust video height */ + height: 200px; object-fit: cover; } .bottom-icons { @@ -107,11 +129,11 @@ } .bottom-icons a { background-color: antiquewhite; - color:rgb(137,79,31); + color: rgb(137, 79, 31); padding: 15px; border-radius: 50%; font-size: 24px; - box-shadow: 0 4px 8px rgba(0,0,0,0.2); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-decoration: none; display: flex; align-items: center; @@ -131,8 +153,7 @@ cursor: pointer; z-index: 999; transition: color 0.3s ease; - } - + } .back-button:hover { color: #d6a52b; } @@ -143,7 +164,7 @@ width: 100%; height: 100%; background-color: #e3f2fd; - box-shadow: -2px 0 5px rgba(0,0,0,0.2); + box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); transform: translateX(100%); transition: transform 0.3s ease; padding: 20px; @@ -191,7 +212,7 @@

Ajivika ~ At your Service

- +