Scribd
Upload
34 views18 pages

Styles Css Final

The document contains CSS styles for a web application, defining variables for colors, typography, layout, and components such as buttons, cards, and modals. It includes responsive design elements for a navbar, hero section, features, events, and footer, ensuring a cohesive look and feel across different screen sizes. Additionally, it provides styles for form elements, status messages, and utility classes to enhance user experience.

Uploaded by

panguin2005panguin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
34 views18 pages

Styles Css Final

The document contains CSS styles for a web application, defining variables for colors, typography, layout, and components such as buttons, cards, and modals. It includes responsive design elements for a navbar, hero section, features, events, and footer, ensuring a cohesive look and feel across different screen sizes. Additionally, it provides styles for form elements, status messages, and utility classes to enhance user experience.

Uploaded by

panguin2005panguin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 18

/* Base Styles */

:root {
--primary-color: #3b82f6; /* Blue */
--primary-dark: #2563eb;
--primary-light: #60a5fa;
--secondary-color: #8b5cf6; /* Purple */
--accent-color: #10b981; /* Green */
--danger-color: #ef4444; /* Red */
--warning-color: #f59e0b; /* Amber */
--text-color: #111827;
--text-light: #4b5563;
--text-lighter: #9ca3af;
--bg-color: #ffffff;
--bg-light: #f3f4f6;
--bg-dark: #1f2937;
--border-color: #e5e7eb;
--border-radius: 0.375rem;
--box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0,
0.06);
--transition: all 0.3s ease;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.5;
color: var(--text-color);
background-color: var(--bg-light);
}

a {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition);
}

a:hover {
color: var(--primary-dark);
}

ul {
list-style: none;
}

img {
max-width: 100%;
height: auto;
}

button {
cursor: pointer;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.2;
margin-bottom: 1rem;
}

h1 {
font-size: 2.25rem;
}

h2 {
font-size: 1.875rem;
}

h3 {
font-size: 1.5rem;
}

p {
margin-bottom: 1rem;
}

/* Layout */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}

main {
min-height: calc(100vh - 70px - 250px); /* Viewport height minus header and
footer */
padding: 2rem 1.5rem;
}

section {
margin-bottom: 3rem;
}

.page-header {
text-align: center;
margin-bottom: 3rem;
}

.page-header h1 {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 0.5rem;
}

.page-header p {
color: var(--text-light);
font-size: 1.25rem;
}

/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
background-color: var(--bg-color);
box-shadow: var(--box-shadow);
position: relative;
z-index: 100;
}

.navbar-logo h1 {
font-size: 1.5rem;
color: var(--primary-color);
margin: 0;
}

.navbar-menu {
display: flex;
gap: 1.5rem;
}

.navbar-menu li a {
color: var(--text-color);
font-weight: 500;
padding: 0.5rem 0.75rem;
border-radius: var(--border-radius);
transition: var(--transition);
}

.navbar-menu li a:hover,
.navbar-menu li a.active {
color: var(--primary-color);
background-color: rgba(59, 130, 246, 0.1);
}

.wallet-info {
display: flex;
align-items: center;
}

.connect-btn {
padding: 0.5rem 1rem;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: var(--border-radius);
font-weight: 500;
transition: var(--transition);
}

.connect-btn:hover {
background-color: var(--primary-dark);
}

#wallet-connected {
display: flex;
align-items: center;
gap: 0.5rem;
}
#wallet-address {
font-size: 0.875rem;
color: var(--text-light);
max-width: 130px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#user-type {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
background-color: var(--primary-light);
color: white;
}

.navbar-toggle {
display: none;
font-size: 1.5rem;
color: var(--text-color);
cursor: pointer;
}

/* Responsive navbar */
@media (max-width: 768px) {
.navbar-menu {
position: absolute;
top: 70px;
left: 0;
width: 100%;
flex-direction: column;
background-color: var(--bg-color);
padding: 1rem;
box-shadow: var(--box-shadow);
gap: 0.75rem;
transform: translateY(-150%);
transition: transform 0.3s ease;
z-index: 99;
}

.navbar-menu.active {
transform: translateY(0);
}

.navbar-toggle {
display: block;
}

.wallet-info {
margin-right: 1rem;
}
}

/* Buttons */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius);
font-weight: 500;
text-align: center;
transition: var(--transition);
cursor: pointer;
border: none;
font-size: 1rem;
}

.primary-btn {
background-color: var(--primary-color);
color: white;
}

.primary-btn:hover {
background-color: var(--primary-dark);
color: white;
}

.secondary-btn {
background-color: var(--secondary-color);
color: white;
}

.secondary-btn:hover {
background-color: #7c3aed;
color: white;
}

.outline-btn {
background-color: transparent;
color: var(--primary-color);
border: 1px solid var(--primary-color);
}

.outline-btn:hover {
background-color: rgba(59, 130, 246, 0.1);
}

.danger-btn {
background-color: var(--danger-color);
color: white;
}

.danger-btn:hover {
background-color: #dc2626;
}

/* Cards */
.card {
background-color: var(--bg-color);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
padding: 1.5rem;
margin-bottom: 1.5rem;
}

/* Hero Section */
.hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-bottom: 4rem;
}

.hero-content {
flex: 1;
}

.hero-content h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: var(--primary-color);
}

.hero-content p {
font-size: 1.25rem;
color: var(--text-light);
margin-bottom: 2rem;
}

.cta-buttons {
display: flex;
gap: 1rem;
}

.hero-image {
flex: 1;
max-width: 500px;
}

@media (max-width: 992px) {


.hero {
flex-direction: column;
text-align: center;
}

.cta-buttons {
justify-content: center;
}
}

/* Features Section */
.features h2 {
text-align: center;
margin-bottom: 2.5rem;
}

.feature-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}

.feature-card {
background-color: var(--bg-color);
border-radius: var(--border-radius);
padding: 2rem;
box-shadow: var(--box-shadow);
text-align: center;
transition: var(--transition);
}

.feature-card:hover {
transform: translateY(-5px);
}

.feature-card i {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1.5rem;
}

.feature-card h3 {
font-size: 1.25rem;
margin-bottom: 1rem;
}

/* Events Section */
.event-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}

.event-card {
background-color: var(--bg-color);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
transition: var(--transition);
}

.event-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0,
0.05);
}

.event-image {
position: relative;
height: 180px;
overflow: hidden;
}

.event-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.event-status {
position: absolute;
top: 10px;
right: 10px;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
color: white;
}

.status-active {
background-color: var(--accent-color);
}

.status-upcoming {
background-color: var(--warning-color);
}

.status-ended {
background-color: var(--text-lighter);
}

.event-details {
padding: 1.5rem;
}

.event-title {
font-size: 1.25rem;
margin-bottom: 0.75rem;
}

.event-description {
color: var(--text-light);
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.event-meta {
display: flex;
justify-content: space-between;
margin-bottom: 1.25rem;
color: var(--text-light);
font-size: 0.875rem;
}

.event-actions {
display: flex;
justify-content: center;
}

.view-all {
text-align: center;
margin-top: 2rem;
}

/* How It Works Section */


.how-it-works h2 {
text-align: center;
margin-bottom: 2.5rem;
}
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
}

.step {
text-align: center;
position: relative;
}

.step-number {
width: 3rem;
height: 3rem;
background-color: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 600;
margin: 0 auto 1.5rem;
}

/* Footer */
footer {
background-color: var(--bg-dark);
color: white;
padding: 3rem 1.5rem 1rem;
}

.footer-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
margin-bottom: 2rem;
}

.footer-logo h2 {
color: var(--primary-color);
margin-bottom: 0.75rem;
}

.footer-logo p {
color: var(--text-lighter);
}

.footer-links h3,
.footer-contact h3 {
font-size: 1.25rem;
color: white;
margin-bottom: 1rem;
}

.footer-links ul li {
margin-bottom: 0.5rem;
}
.footer-links ul li a {
color: var(--text-lighter);
transition: var(--transition);
}

.footer-links ul li a:hover {
color: var(--primary-light);
}

.social-icons {
display: flex;
gap: 1rem;
}

.social-icons a {
color: var(--text-lighter);
font-size: 1.25rem;
transition: var(--transition);
}

.social-icons a:hover {
color: var(--primary-light);
}

.footer-bottom {
text-align: center;
padding-top: 1.5rem;
border-top: 1px solid #374151;
color: var(--text-lighter);
font-size: 0.875rem;
}

/* Modals */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
align-items: center;
justify-content: center;
}

.modal.active {
display: flex;
}

.modal-content {
background-color: var(--bg-color);
border-radius: var(--border-radius);
padding: 2rem;
max-width: 500px;
width: 90%;
position: relative;
}
.close-modal {
position: absolute;
top: 1rem;
right: 1.5rem;
font-size: 1.5rem;
cursor: pointer;
color: var(--text-light);
}

.modal-content h2 {
margin-bottom: 1.5rem;
}

.modal-actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-top: 2rem;
}

/* Form Elements */
.form-group {
margin-bottom: 1.5rem;
}

.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
font-size: 1rem;
transition: var(--transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.form-row {
display: flex;
gap: 1rem;
}

.half-width {
width: 50%;
}

.form-actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-top: 2rem;
}

.help-text {
font-size: 0.875rem;
color: var(--text-light);
margin-top: 0.25rem;
}

/* Status Messages */
.status-message {
padding: 1rem;
border-radius: var(--border-radius);
margin: 1.5rem 0;
}

.success-message {
background-color: rgba(16, 185, 129, 0.1);
color: var(--accent-color);
border: 1px solid var(--accent-color);
}

.error-message {
background-color: rgba(239, 68, 68, 0.1);
color: var(--danger-color);
border: 1px solid var(--danger-color);
}

.info-message {
background-color: rgba(59, 130, 246, 0.1);
color: var(--primary-color);
border: 1px solid var(--primary-color);
}

/* Loading Indicator */
.loading-indicator {
text-align: center;
padding: 2rem;
color: var(--text-light);
}

/* Status Badge */
.status-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
color: white;
}

/* Utility Classes */
.text-center {
text-align: center;
}

.mt-1 {
margin-top: 0.25rem;
}

.mt-2 {
margin-top: 0.5rem;
}

.mt-4 {
margin-top: 1rem;
}

.mt-8 {
margin-top: 2rem;
}

.mb-1 {
margin-bottom: 0.25rem;
}

.mb-2 {
margin-bottom: 0.5rem;
}

.mb-4 {
margin-bottom: 1rem;
}

.mb-8 {
margin-bottom: 2rem;
}

.hidden {
display: none;
}

/* Candidate Cards */
.candidates-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}

.candidate-card {
background-color: var(--bg-color);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
transition: var(--transition);
}

.candidate-card:hover {
transform: translateY(-5px);
}

.candidate-image {
height: 200px;
overflow: hidden;
}

.candidate-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.candidate-details {
padding: 1.5rem;
}

.candidate-name {
font-size: 1.25rem;
margin-bottom: 0.75rem;
}

.candidate-description {
color: var(--text-light);
margin-bottom: 1.25rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.vote-count {
color: var(--text-light);
font-size: 0.875rem;
margin-bottom: 1.25rem;
}

.candidate-actions {
display: flex;
justify-content: center;
}

.vote-btn.disabled {
opacity: 0.6;
cursor: not-allowed;
}

/* Event Details Page */


.event-header {
margin-bottom: 2rem;
}

.event-banner {
width: 100%;
height: 300px;
overflow: hidden;
border-radius: var(--border-radius);
margin-bottom: 1.5rem;
}

.event-banner img {
width: 100%;
height: 100%;
object-fit: cover;
}

.event-info {
background-color: var(--bg-color);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}

.event-meta {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin: 1rem 0;
color: var(--text-light);
font-size: 0.875rem;
}

.event-actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-bottom: 2rem;
}

/* Results Chart */
.results-chart {
background-color: var(--bg-color);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
margin-top: 1.5rem;
}

/* Switch Toggle */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}

input:checked + .slider {
background-color: var(--primary-color);
}

input:focus + .slider {
box-shadow: 0 0 1px var(--primary-color);
}

input:checked + .slider:before {
transform: translateX(26px);
}

.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

.checkbox-label {
margin-left: 0.75rem;
}

/* Error Container */
.error-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}

.error-container .error-message {
background-color: rgba(239, 68, 68, 0.1);
color: var(--danger-color);
border: 1px solid var(--danger-color);
padding: 2rem;
border-radius: var(--border-radius);
text-align: center;
max-width: 500px;
}

.error-container .error-message h2 {
margin-bottom: 1rem;
}

.error-container .error-message p {
margin-bottom: 1.5rem;
}
: var(--secondary-color);
color: white;
}

.secondary-btn:hover {
background-color: #7c3aed;
color: white;
}

.outline-btn {
background-color: transparent;
color: var(--primary-color);
border: 1px solid var(--primary-color);
}

.outline-btn:hover {
background-color: rgba(59, 130, 246, 0.1);
}

.danger-btn {
background-color: var(--danger-color);
color: white;
}

.danger-btn:hover {
background-color: #dc2626;
}

/* Cards */
.card {
background-color: var(--bg-color);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
padding: 1.5rem;
margin-bottom: 1.5rem;
}

/* Hero Section */
.hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-bottom: 4rem;
}

.hero-content {
flex: 1;
}

.hero-content h1 {
font-size: 3rem;
margin-bottom: 1rem;
color: var(--primary-color);
}

.hero-content p {
font-size: 1.25rem;
color: var(--text-light);
margin-bottom: 2rem;
}

.cta-buttons {
display: flex;

You might also like