homepage.css (2963B) download
1@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
2
3* {
4 box-sizing: border-box;
5}
6
7body {
8 margin: 0;
9 font-family: 'Montserrat', sans-serif;
10}
11
12/* Header */
13.header {
14 background-color: #2471A3;
15 color: #fff;
16 padding: 20px;
17 display: flex;
18 justify-content: space-between;
19 align-items: center;
20}
21
22.header h1 {
23 margin: 0;
24 font-size: 36px;
25 text-shadow: 2px 2px 2px #555;
26}
27
28.header h1 span {
29 font-weight: normal;
30}
31
32.header h1 a {
33 text-decoration: none;
34 color: #fff;
35}
36
37a {
38 text-decoration: none;
39}
40
41
42/* Search form */
43.search-form {
44 display: flex;
45 align-items: center;
46}
47
48.search-form input[type="text"] {
49 padding: 10px;
50 font-size: 16px;
51 border: none;
52 border-radius: 5px 0 0 5px;
53}
54
55.search-form button[type="submit"] {
56 background-color: #2E86C1;
57 color: white;
58 padding: 10px;
59 font-size: 16px;
60 border: none;
61 border-radius: 0 5px 5px 0;
62 cursor: pointer;
63 transition: background-color 0.2s ease;
64}
65
66.search-form button[type="submit"]:hover {
67 background-color: #2471A3;
68}
69
70/* Main content */
71.main {
72 display: flex;
73 flex-wrap: wrap;
74 justify-content: space-around;
75 padding: 20px;
76}
77
78.dashboard-section, .login-section {
79 width: 45%;
80 margin: 20px;
81 padding: 20px;
82 border-radius: 10px;
83 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
84 transition: box-shadow 0.2s ease;
85}
86
87.dashboard-section {
88 background-color: #F1F9FF;
89}
90
91.dashboard-section:hover, .login-section:hover {
92 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
93}
94
95.dashboard-section h2, .login-section h2 {
96 margin-top: 0;
97}
98
99.button {
100 display: inline-block;
101 background-color: #2E86C1;
102 color: white;
103 padding: 10px 20px;
104 font-size: 16px;
105 border: none;
106 border-radius: 5px;
107 cursor: pointer;
108 transition: background-color 0.2s ease;
109}
110
111.button:hover {
112 background-color: #2471A3;
113}
114
115/* Login form */
116.login-form label {
117 display: block;
118 margin-bottom: 5px;
119 font-size: 18px;
120 color: #333;
121}
122
123.login-form input[type="text"], .login-form input[type="password"] {
124 display: block;
125 width: 100%;
126 padding: 10px;
127 margin-bottom: 15px;
128 font-size: 16px;
129 border: none;
130 border-radius: 5px;
131 background-color: #F1F9FF;
132 color: #333;
133}
134
135.login-form button[type="submit"] {
136 background-color: #2E86C1;
137 color: white;
138 padding: 10px;
139 font-size: 16px;
140 border: none;
141 border-radius: 5px;
142 cursor: pointer;
143 transition: background-color 0.2s ease;
144}
145
146.login-form button[type="submit"]:hover {
147 background-color: #2471A3;
148}
149
150.footer {
151 background-color: #333;
152 color: #fff;
153 padding: 20px;
154 text-align: center;
155 margin-top: 50px;
156}
157
158.footer p {
159 margin: 0;
160 font-size: 14px;
161}
162
163.footer a {
164 color: #fff;
165 text-decoration: none;
166 transition: color 0.2s ease;
167}
168
169.footer a:hover {
170 color: #2E86C1;
171}
172