Portfolio

Immerse yourself in what we've captured.
/* General Form Styling */ form { font-family: 'Arial', sans-serif; color: #FF8C00; /* Matches the orange in the logo */ background-color: #008F47; /* Matches the green in the logo */ padding: 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } /* Form Headings */ form h2 { color: #FF8C00; /* Bold orange for headings */ border-bottom: 2px solid #FF8C00; margin-bottom: 15px; } /* Labels */ form label { display: block; font-weight: bold; margin-bottom: 5px; color: #FFFFFF; /* White for readability on green background */ } /* Inputs and Textareas */ form input, form textarea, form select { width: 100%; padding: 10px; margin-bottom: 15px; border: 2px solid #FF8C00; /* Orange border */ border-radius: 5px; background-color: #FFFFFF; /* White background */ color: #333; /* Dark text for readability */ font-size: 1rem; } form input:focus, form textarea:focus, form select:focus { border-color: #FFD700; /* Highlight with a golden yellow */ outline: none; } /* Checkboxes and Radio Buttons */ form input[type="checkbox"], form input[type="radio"] { display: inline-block; margin-right: 10px; accent-color: #FF8C00; /* Matches orange theme */ } /* Buttons */ form button { background-color: #FF8C00; /* Orange button */ color: #FFFFFF; /* White text */ padding: 10px 20px; font-size: 1rem; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } form button:hover { background-color: #FFD700; /* Golden yellow on hover */ } /* Fieldsets */ form fieldset { border: 2px solid #FF8C00; /* Matches orange */ padding: 15px; margin-bottom: 15px; border-radius: 5px; } form legend { color: #FFFFFF; /* White for text */ font-weight: bold; } /* Responsive Design */ @media (max-width: 768px) { form { padding: 15px; } form h2 { font-size: 1.5rem; } form button { width: 100%; } }