resultAnalysisSystem/studenthome.css at master · shriom17/resultAnalysisSystem · 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
/* Basic Reset & Body Styling */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f7f6; /* Light gray background */
    color: #333;
    line-height: 1.6;
}

/* Optional: Background image styling */
/* If you want to use a background image, ensure 'frontview1.jpeg' is in the same directory.
   If you use this, remove the 'background="frontview1.jpeg"' attribute from the <body> tag in HTML. */

body {
    background-image: url('frontview1.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: overlay;
    background-color: rgba(244, 247, 246, 0.397)
}


/* Navigation Bar Styling */
.navbar {
    background-color: #2c3e50; /* Dark blue-gray */
    color: white;/*added*/
    padding: 15px 0;/*added*/
    /*overflow: hidden;*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
   /* display: flex; /* Use flexbox for horizontal layout */
    /*justify-content: center; /* Center the navigation items */
   /* flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    text-align: center;/*added*/
}
.navbar ul li{ /*added*/
    display: inline-block;
    margin-right: 30px;
}

.navbar ul li a {
   /* display: block;*/
    color: white;
   /* text-align: center;*/
    padding: 10px 15px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    /*font-weight: 400;*/
    white-space: nowrap; /* Prevents text from breaking into multiple lines */
    border-radius: 5px;/*added*/
}

.navbar ul li a:hover {
    background-color: #3498db; /* Slightly lighter on hover */
    color: white; /* Light gray text on hover */
}

.navbar ul li a.active {
    background-color: #3498db; /* Greenish-blue for active link */
    color: white;
    /*font-weight: 700;*/
}

/* Special styling for logout button, pushed to the far right if space allows */
.navbar ul li.last-child {
    float: right;
    margin-right: 20px;
}

/* Header & Main Content Styling */
center {
    padding: 50px 20px;
    text-align: center;
}

center h3 {
    color: #555;
    font-size: 1.5em;
    margin-bottom: 5px;
}

center h1 {
    color: #2c3e50;
    font-size: 3em;
    margin-top: 0;
    margin-bottom: 10px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

center h4 {
    color: #555;
    font-size: 1.3em;
    margin-top: 5px;
    margin-bottom: 5px;
}

center h2 {
    color: #110ef3;
    font-size: 2.7em;
    margin-top: 0;
    margin-bottom: 20px;
    text-shadow:2px 2px 2px #2c3e50;
}

p {
    /*width: 80%;
    max-width: 800px;*/
    margin: 0 80px 10px 80px; /* Center the paragraph and add bottom margin */
    text-align: justify;
    font-size: 1.2em;
    font-weight: 400;
    color: #111111;
    /*background-color: #ffffff;*/
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Basic Responsiveness for smaller screens */
@media (max-width: 768px) {
    .navbar ul {
        flex-direction: column; /* Stack navigation items vertically */
        align-items: center; /* Center items when stacked */
    }

    .navbar li.logout {
        margin-left: 0; /* Remove auto margin when stacked */
    }

    center h1 {
        font-size: 2.2em;
    }

    center h2 {
        font-size: 1.8em;
    }

    p {
        width: 90%; /* Make paragraph wider on small screens */
        padding: 15px;
    }
}