FarmLinkApp/about.css at main · srikxcipher/FarmLinkApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
/* Resetting margin and padding */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Body styling */
body {
    font-family: 'Arial', sans-serif; /* Use Arial as specified */
    line-height: 1.6;
    background-color: #f9f9f9;
}

/* Header styling */
header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

/* Main container styling */
.main-container {
    display: flex;
    flex-direction: column; /* Stack header and nav vertically */
    min-height: 100vh; /* Full viewport height */
}

/* Navigation bar styling */
.side-nav {
    background-color: #333;
    padding: 10px 0; /* Padding for vertical space */
    display: flex;
    flex-direction: row; /* Horizontal layout */
    justify-content: space-around; /* Evenly space items */
    align-items: center; /* Vertically center the items */
    height: 60px; /* Fixed height for consistency */
    position: sticky; /* Sticky position for scrolling effect */
    top: 0; /* Stick to the top of the viewport */
    z-index: 1000; /* Ensure it stays above other content */
    width: 100%; /* Full width for horizontal layout */
    border-bottom: 1px solid #ddd; /* Optional: Add a border to separate it from content */
}

.side-nav ul {
    display: flex; /* Horizontal layout */
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    justify-content: space-around; /* Evenly space items */
}

.side-nav ul li {
    margin: 0; /* Remove vertical margins */
    text-align: center;
}

.side-nav ul li a {
    display: block; /* Ensure the link takes up space */
}

.side-nav ul li a img {
    width: 40px; /* Adjust icon size */
    height: auto;
    display: block;
}

/* Adjust content padding */
.content {
    padding: 20px;
    margin: 0; /* Remove margin for horizontal layout */
}

/* Card styling */
.card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center; /* Center text inside card */
}

/* Footer styling */
footer {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    margin-top: 20px;
}

/* CTA Button styling */
.cta-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
}

.cta-button:hover {
    background-color: #45a049;
}

/* Responsive Media Queries */
@media (max-width: 768px) {
    .side-nav {
        flex-direction: row; /* Maintain horizontal layout */
        padding: 10px 0;
    }

    .side-nav ul {
        flex-direction: row;
        justify-content: space-around;
    }

    .side-nav ul li a img {
        width: 30px; /* Adjust icon size for mobile */
    }
}

@media (max-width: 480px) {
    .side-nav {
        padding: 15px 0; /* Reduced padding for mobile */
    }

    .side-nav ul {
        gap: 10px; /* Reduced gap between items */
    }

    .side-nav ul li a img {
        width: 25px; /* Smaller icons for very small screens */
    }

    .card {
        padding: 15px; /* Adjust card padding for small screens */
    }

    .cta-button {
        padding: 8px 16px; /* Adjust button padding for small screens */
    }
}