Spaces:
Sleeping
Sleeping
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f8f9fa; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* General Styling */ | |
| .container { | |
| background: white; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| text-align: center; | |
| max-width: 1200px; | |
| margin: auto; | |
| } | |
| h1, h3 { | |
| margin-bottom: 20px; | |
| } | |
| form label { | |
| display: block; | |
| margin: 10px 0 5px; | |
| text-align: left; | |
| } | |
| form input { | |
| width: 100%; | |
| padding: 10px; | |
| margin-bottom: 15px; | |
| border: 1px solid #ccc; | |
| border-radius: 4px; | |
| } | |
| /* Button Styling */ | |
| button, .btn { | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 4px; | |
| background-color: #007bff; | |
| color: white; | |
| cursor: pointer; | |
| width: 100%; | |
| } | |
| button:hover, .btn:hover { | |
| background-color: #0056b3; | |
| } | |
| /* Menu Card Styling */ | |
| .menu-card { | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| margin-bottom: 20px; | |
| } | |
| .menu-image { | |
| height: 200px; | |
| object-fit: cover; | |
| border-radius: 15px 15px 0 0; | |
| } | |
| .card-title { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| margin-bottom: 0.5rem; | |
| } | |
| .card-text { | |
| font-size: 1rem; | |
| color: #6c757d; | |
| } | |
| .btn-primary { | |
| font-size: 0.9rem; | |
| border-radius: 20px; | |
| width: auto; | |
| } | |
| /* Modal Styling */ | |
| .modal-body img { | |
| border-radius: 10px; | |
| max-height: 250px; | |
| object-fit: cover; | |
| } | |
| .modal-footer .btn { | |
| border-radius: 20px; | |
| } | |
| /* Header Styling */ | |
| .header { | |
| background-color: #f8f9fa; | |
| border-bottom: 1px solid #ddd; | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| padding: 10px 20px; | |
| } | |
| .header-title { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| margin: 0; | |
| text-align: center; | |
| } | |
| .nav-links { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .nav-link { | |
| text-decoration: none; | |
| color: #333; | |
| margin: 0 15px; | |
| font-size: 1rem; | |
| transition: color 0.3s; | |
| } | |
| .nav-link:hover { | |
| color: #007bff; | |
| } | |
| /* Scaling for Smaller Screens */ | |
| @media (max-width: 768px) { | |
| .header-title { | |
| font-size: 1.2rem; | |
| } | |
| .nav-link { | |
| font-size: 0.9rem; | |
| margin: 0 10px; | |
| } | |
| .menu-image { | |
| height: 150px; | |
| } | |
| .btn-primary { | |
| font-size: 0.8rem; | |
| } | |
| } | |
| /* Scaling for Larger Screens */ | |
| @media (min-width: 1200px) { | |
| .header-title { | |
| font-size: 2rem; | |
| } | |
| .nav-link { | |
| font-size: 1.2rem; | |
| margin: 0 20px; | |
| } | |
| .menu-image { | |
| height: 250px; | |
| } | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: Arial, sans-serif; | |
| background: linear-gradient(to bottom right, #6a11cb, #2575fc); | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .form-container { | |
| background: #fff; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); | |
| width: 350px; | |
| text-align: center; | |
| } | |
| h2 { | |
| margin-bottom: 20px; | |
| font-size: 24px; | |
| color: #333; | |
| } | |
| .form-group { | |
| margin-bottom: 15px; | |
| text-align: left; | |
| } | |
| label { | |
| display: block; | |
| font-size: 14px; | |
| margin-bottom: 5px; | |
| color: #555; | |
| } | |
| input { | |
| width: 100%; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| font-size: 14px; | |
| } | |
| .forgot-password { | |
| font-size: 12px; | |
| color: #007bff; | |
| text-decoration: none; | |
| } | |
| .forgot-password:hover { | |
| text-decoration: underline; | |
| } | |
| .btn { | |
| background: linear-gradient(to right, #6a11cb, #2575fc); | |
| color: #fff; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| width: 100%; | |
| } | |
| .btn:hover { | |
| background: linear-gradient(to right, #2575fc, #6a11cb); | |
| } | |
| .social-login { | |
| margin-top: 20px; | |
| } | |
| .social-login p { | |
| margin-bottom: 10px; | |
| font-size: 14px; | |
| } | |
| .social-icons a { | |
| margin: 0 10px; | |
| font-size: 20px; | |
| color: #555; | |
| transition: color 0.3s; | |
| } | |
| .social-icons a:hover { | |
| color: #2575fc; | |
| } | |
| .signup-link, | |
| .login-link { | |
| margin-top: 20px; | |
| font-size: 14px; | |
| } | |
| .signup-link a, | |
| .login-link a { | |
| color: #007bff; | |
| text-decoration: none; | |
| } | |
| .signup-link a:hover, | |
| .login-link a:hover { | |
| text-decoration: underline; | |
| } | |
| body { | |
| font-family: Arial, sans-serif; | |
| background: linear-gradient(to bottom right, #4a90e2, #9013fe); | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); | |
| } | |
| h1 { | |
| text-align: center; | |
| color: #333; | |
| font-size: 2rem; | |
| margin-bottom: 20px; | |
| } | |
| .filter-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .filter-title { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| color: #333; | |
| } | |
| .filter-options { | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .filter-options input[type="radio"] { | |
| margin-right: 5px; | |
| } | |
| .menu-item-container { | |
| max-height: 70vh; | |
| overflow-y: auto; | |
| padding-right: 10px; | |
| } | |
| .menu-item { | |
| display: flex; | |
| align-items: center; | |
| background-color: #f9f9f9; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| margin-bottom: 15px; | |
| padding: 15px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.2s; | |
| } | |
| .menu-item:hover { | |
| transform: translateY(-5px); | |
| } | |
| .menu-image { | |
| flex: 1; | |
| max-width: 150px; | |
| height: 120px; | |
| object-fit: cover; | |
| border-radius: 8px; | |
| } | |
| .menu-details { | |
| flex: 2; | |
| margin-left: 15px; | |
| } | |
| .menu-title { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: #333; | |
| margin-bottom: 10px; | |
| } | |
| .menu-price { | |
| font-size: 1rem; | |
| color: #777; | |
| margin-bottom: 10px; | |
| } | |
| .add-button { | |
| background: linear-gradient(to right, #4a90e2, #9013fe); | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| transition: background 0.3s; | |
| } | |
| .add-button:hover { | |
| background: linear-gradient(to right, #9013fe, #4a90e2); | |
| } | |
| body { | |
| font-family: Arial, sans-serif; | |
| background: linear-gradient(to bottom right, #4a90e2, #9013fe); | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); | |
| } | |
| h1 { | |
| text-align: center; | |
| color: #333; | |
| font-size: 2rem; | |
| margin-bottom: 20px; | |
| } | |
| .filter-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .filter-title { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| color: #333; | |
| } | |
| .filter-options { | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .filter-options input[type="radio"] { | |
| margin-right: 5px; | |
| } | |
| .menu-item-container { | |
| max-height: 70vh; | |
| overflow-y: auto; | |
| padding-right: 10px; | |
| } | |
| .menu-item { | |
| display: flex; | |
| align-items: center; | |
| background-color: #f9f9f9; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| margin-bottom: 15px; | |
| padding: 15px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.2s; | |
| } | |
| .menu-item:hover { | |
| transform: translateY(-5px); | |
| } | |
| .menu-image { | |
| flex: 1; | |
| max-width: 150px; | |
| height: 120px; | |
| object-fit: cover; | |
| border-radius: 8px; | |
| } | |
| .menu-details { | |
| flex: 2; | |
| margin-left: 15px; | |
| } | |
| .menu-title { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: #333; | |
| margin-bottom: 10px; | |
| } | |
| .menu-price { | |
| font-size: 1rem; | |
| color: #777; | |
| margin-bottom: 10px; | |
| } | |
| .add-button { | |
| background: linear-gradient(to right, #4a90e2, #9013fe); | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| transition: background 0.3s; | |
| } | |
| .add-button:hover { | |
| background: linear-gradient(to right, #9013fe, #4a90e2); | |
| } | |
| .menu-item { | |
| display: flex; | |
| align-items: center; | |
| background-color: #f9f9f9; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| margin-bottom: 15px; | |
| padding: 15px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.2s; | |
| } | |
| .menu-item:hover { | |
| transform: translateY(-5px); | |
| } | |
| .menu-image { | |
| flex-shrink: 0; | |
| width: 5px; /* Reduced width */ | |
| height: 10px; /* Reduced height */ | |
| object-fit: cover; | |
| border-radius: 5px; | |
| margin-right: 10px; /* Adds space between the image and text */ | |
| } | |
| .menu-details { | |
| flex-grow: 1; | |
| } | |
| .menu-title { | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| color: #333; | |
| margin-bottom: 10px; | |
| } | |
| .menu-price { | |
| font-size: 1rem; | |
| color: #777; | |
| margin-bottom: 10px; | |
| } | |
| .add-button { | |
| background: linear-gradient(to right, #4a90e2, #9013fe); | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| transition: background 0.3s; | |
| } | |
| .add-button:hover { | |
| background: linear-gradient(to right, #9013fe, #4a90e2); | |
| } | |