Create style.css

style.css

@@ -0,0 +1,86 @@
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+    background-color: #1a1a1a;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+.header h1 {
+    font-size: 2rem;
+    color: #ffffff;
+    margin-bottom: 1rem;
+    font-weight: 700;
+}
+
+.header p {
+    color: #9ca3af;
+    font-size: 1.1rem;
+}
+
+.search-input {
+    width: 60%;
+    background-color: #374151 !important;
+    border: 2px solid #3d3d3d !important;
+    border-radius: 40px !important;
+    font-size: 1.1rem !important;
+    color: #ffffff !important;
+    transition: all 0.3s ease;
+}
+
+.gallery {
+    margin-top: 2rem;
+    background-color: #2d2d2d;
+    border-radius: 12px;
+    padding: 1rem;
+}
+
+.controls {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+
+.dropdown {
+    background-color: #2d2d2d;
+    border: 2px solid #3d3d3d;
+    border-radius: 8px;
+    color: #ffffff;
+    padding: 0.5rem;
+}
+
+
+
+.footer {
+    margin-top: 3rem;
+    padding: 0.5rem;
+    background-color: #2d2d2d;
+    border-radius: 12px;
+    text-align: center;
+}
+
+.footer a {
+    color: #6366f1;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer a:hover {
+    color: #818cf8;
+}
+
+@media (max-width: 767px) {
+    .gallery {
+        grid-template-columns: repeat(3, 1fr) !important;
+    }
+}
+
+@media (min-width: 768px) {
+    .gallery {
+        grid-template-columns: repeat(5, 1fr) !important;
+    }
+}