From 8e7e5f20bdc1b75cc489be50583e467a9f37cd00 Mon Sep 17 00:00:00 2001 From: Nikhil More <149102391+Nikhil0-3@users.noreply.github.com> Date: Wed, 9 Oct 2024 11:52:42 +0530 Subject: [PATCH] added style.css --- style.css | 126 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 style.css diff --git a/style.css b/style.css new file mode 100644 index 0000000..26a2bf4 --- /dev/null +++ b/style.css @@ -0,0 +1,126 @@ +/* General Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background: linear-gradient(135deg, #f5f7fa, #c3cfe2); + color: #333; + display: flex; + justify-content: center; + align-items: flex-start; /* Change to flex-start to allow scrolling */ + height: auto; /* Change to auto */ + min-height: 100vh; /* Ensure minimum height */ + overflow-y: auto; /* Allow vertical scrolling */ +} + +.container { + background-color: #fff; + border-radius: 8px; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + max-width: 600px; + width: 100%; +} + +h1, h2 { + text-align: center; + margin-bottom: 20px; + color: #34495e; +} + +.gpa-section, .overall-cgpa-section, .feedback-section { + margin-bottom: 30px; +} + +/* Subject input field layout */ +.subject-container { + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} + +.subject-container input, .subject-container select { + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + width: 48%; /* Make input and select field width 48% each */ +} + +button { + background-color: #3498db; + color: white; + border: none; + padding: 10px 20px; + border-radius: 5px; + cursor: pointer; + margin-right: 10px; + transition: background-color 0.3s ease ; +} + +button:hover { + background-color: #2980b9; +} + +p { + font-size: 18px; + margin-top: 15px; + color: #2c3e50; +} + +/* GPA and credit inputs layout */ +.gpa-input, .credit-input { + width: calc(48% - 10px); + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + margin-right: 10px; +} + +.credit-input { + margin-left: 10px; /* Add margin to separate from GPA input field */ +} + +/* Delete button style */ +.delete-button { + background-color: #e53935; + color: white; + border: none; + padding: 5px 10px; + border-radius: 4px; + cursor: pointer; + margin-left: 10px; /* To position next to input fields */ +} + +.delete-button:hover { + background-color: #d32f2f; +} + +.feedback-section { + margin-top: 20px; +} + +.feedback-item { + display: flex; + justify-content: space-between; + background-color: #e3f2fd; + border: 1px solid #90caf9; + border-radius: 5px; + padding: 10px; + margin-top: 5px; +} + +/* Adjustments for responsive layout */ +@media (max-width: 768px) { + .container { + padding: 15px; + width: 90%; + } + + .subject-container input, .subject-container select { + width: 45%; + } +}