Certainly! Here's a more detailed CSS stylesheet that incorporates additional styles for different elements, improves responsiveness, and enhances the overall design. I've included styles for elements like lists, links, sizes, and responsive adjustments.
/* General Body Styles */
body {
background-color: #ffeae3; /* Original background */
font-family: 'Georgia', serif; /* Classic serif font for a vintage feel */
color: #121481; /* Original text color */
margin: 0;
padding: 0;
line-height: 1.6; /* Improved line spacing for readability */
}
/* Container Styles */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 20px; /* Added padding to prevent content from sticking to edges */
}
/* Heading Styles */
h1 {
color: #ff877d; /* Original heading color */
margin-bottom: 30px; /* Adjusted margin */
font-size: 80px; /* Vintage font size */
height: auto; /* Flexible height */
background-color: #121481; /* Original background color */
font-family: 'Bodoni Moda', serif; /* Elegant vintage font */
font-style: italic;
text-align: center; /* Center aligned */
padding: 20px; /* Padding for emphasis */
border-radius: 10px; /* Rounded corners */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Deeper shadow for depth */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Subtle text shadow */
}
/* Subheading Styles */
h2 {
color: #ff877d; /* Original color */
margin-bottom: 15px; /* Adjusted margin */
font-size: 30px; /* Smaller size for balance */
font-family: 'Georgia', serif; /* Classic font */
}
/* Form Styles */
.form {
background-color: #ffcbcb; /* Original form background */
padding: 30px; /* Increased padding */
border-radius: 12px; /* Rounded corners */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Softer shadow for depth */
width: 90%; /* Responsive width */
max-width: 400px; /* Set max width */
border: 2px solid #121481; /* Border for a defined look */
transition: all 0.3s ease; /* Smooth transition for hover and focus effects */
}
/* Label Styles */
label {
display: block;
margin-bottom: 5px;
font-weight: bold; /* Bold for emphasis */
color: #121481; /* Original label color */
font-family: 'Georgia', serif; /* Classic font */
}
/* Input Field Styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="address"] {
width: 100%;
padding: 12px; /* Increased padding */
margin-bottom: 15px;
border: 1px solid #121481; /* Original border color */
border-radius: 5px; /* Rounded corners */
font-size: 16px; /* Readable font size */
font-family: 'Georgia', serif; /* Classic input font */
transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition */
}
/* Input Focus Styles */
input:focus {
border-color: #ff877d; /* Highlight border on focus */
outline: none; /* Remove default outline */
box-shadow: 0 0 5px rgba(255, 135, 125, 0.5); /* Soft glow effect */
}
/* Button Styles */
button {
background-color: #ff877d; /* Original button color */
color: white;
border: none;
padding: 12px 20px; /* Increased padding */
border-radius: 5px; /* Rounded corners */
cursor: pointer;
font-size: 18px; /* Larger text for visibility */
font-family: 'Georgia', serif; /* Classic button font */
transition: background-color 0.3s, transform 0.2s; /* Add transition for hover effects */
}
/* Button Hover Styles */
button:hover {
background-color: #ff6f68; /* Original hover color */
transform: translateY(-2px); /* Subtle lift effect */
}
/* Button Active Styles */
button:active {
transform: translateY(0); /* Reset on click */
}
/* Link Styles */
a {
color: #121481; /* Original link color */
text-decoration: none; /* Remove underline */
transition: color 0.3s; /* Transition for hover effect */
}
a:hover {
color: #ff877d; /* Link hover color */
}
/* List Styles */
ul {
list-style-type: none; /* Remove bullets */
padding: 0; /* Remove padding */
}
li {
padding: 5px 0; /* Padding around list items */
font-family: 'Georgia', serif; /* Classic font for list items */
}
/* Responsive Styles */
@media (max-width: 600px) {
h1 {
font-size: 50px; /* Smaller heading on small screens */
}
h2 {
font-size: 24px; /* Smaller subheading on small screens */
}
.form {
padding: 20px; /* Reduced padding for small screens */
max-width: 90%; /* Allow more responsive width */
}
button {
font-size: 16px; /* Smaller button text */
}
}
Explanations of Specific Sections:
-
General Body Styles: Added
line-heightfor improved readability and applied some padding to the.containerfor better spacing. -
Heading Styles: Maintained their vibrant and elegant appearance while ensuring proper margins and padding.
-
Form Styles: Added a hover effect on the form for a more interactive feel.
-
Input Field Styles: Enhanced transitions for focusing on input fields to make them more visually appealing.
-
Button Styles: Kept the hover and active states consistent while ensuring the button stands out.
-
Link and List Styles: Improved the appearance of links and removed default bullets from lists for a cleaner look.
-
Responsive Styles: Introduced media queries to ensure the design remains user-friendly on smaller devices.
This comprehensive style sheet provides a strong foundational design while remaining flexible and responsive, ready to accommodate various screen sizes and devices.