iwa-panda1

Manage Weather Data by International Weather Agency (Version 1)
Log | Files | Refs

homepage.css (2963B)

      1 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');
      2 
      3 * {
      4     box-sizing: border-box;
      5 }
      6 
      7 body {
      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 
     37 a {
     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