style.css (4351B)
1 @import url('https://fonts.googleapis.com/css?family=Raleway'); 2 @import url('https://fonts.googleapis.com/css?family=Oswald'); 3 4 /*index page*/ 5 html { 6 background-color: rgb(3,83,136); 7 color: white; 8 } 9 .panel { 10 height:100%; 11 } 12 .panel h1{ 13 text-align: center; 14 font-family: 'Oswald', sans-serif; 15 font-size: 500%; 16 } 17 .panel h3 { 18 text-align: center; 19 font-family: 'Raleway', sans-serif; 20 font-size: 200%; 21 } 22 .seahorse_pic { 23 display: block; 24 margin-left: auto; 25 margin-right: auto; 26 padding: 10px; 27 padding-bottom: 30px; 28 } 29 .index-grid-panel { 30 display: grid; 31 grid-auto-rows: 1; 32 } 33 .index-grid-panel a { 34 font-family: 'Raleway', sans-serif; 35 background-color: rgb(118, 193, 243); 36 color:rgb(3,83,136); 37 border: none; 38 /*padding: 10px;*/ 39 padding: 30px; 40 text-align: center; 41 text-decoration: none; 42 /*display: inline-block;*/ 43 font-size: 16px; 44 -webkit-transition-duration: 0.4s; /* Safari */ 45 transition-duration: 0.4s; 46 } 47 .index-grid-panel a:hover { 48 background:white; 49 } 50 a.off:hover { 51 background:red; 52 color: white; 53 } 54 55 /*Create Survey Page*/ 56 div.cpanel { 57 position: absolute; 58 top: 50%; 59 left: 50%; 60 transform: translateX(-50%) translateY(-50%); 61 background: white; 62 padding: 20px; 63 font-family: 'Raleway', sans-serif; 64 color: rgb(3,83,136); 65 } 66 67 /*Create Survey Page*/ 68 form.create-survey-form { 69 position: absolute; 70 top: 50%; 71 left: 50%; 72 transform: translateX(-50%) translateY(-35%); 73 } 74 75 input.radio { 76 height: 25px; 77 width: 25px; 78 } 79 80 p.create { 81 font-family: 'Raleway', sans-serif; 82 font-size: 25px; 83 } 84 85 /*sign in page*/ 86 .signin-form { 87 position: absolute; 88 top: 50%; 89 left: 50%; 90 transform: translateX(-50%) translateY(-50%); 91 background: white; 92 padding: 20px; 93 } 94 95 /*password reset page*/ 96 .pass-reset { 97 position: absolute; 98 top: 50%; 99 left: 50%; 100 transform: translateX(-50%) translateY(-50%); 101 background: white; 102 padding: 20px; 103 } 104 105 form h2 { 106 color: rgb(3,83,136); 107 text-align: center; 108 font-family: 'Raleway', sans-serif; 109 font-size: 200%; 110 } 111 112 form input { 113 display: block; 114 width: 100%; 115 height: 50px; 116 background: rgba(0, 0, 0, .3); 117 outline: none; 118 border: 1px solid rgba(1, 1, 1, .5); 119 color: white; 120 font-family: 'Raleway', sans-serif; 121 font-weight: lighter; 122 font-size: 14px; 123 margin-bottom: 10px; 124 padding-left: 10px; 125 border-radius: 5px; 126 } 127 128 form button { 129 width: 332px; 130 height: 50px; 131 font-size: 16px; 132 background-color: rgb(3,83,136); 133 color: white; 134 border: none; 135 -webkit-transition-duration: 0.4s; /* Safari */ 136 transition-duration: 0.4s; 137 } 138 139 form button:hover{ 140 background-color: rgb(118, 193, 243); 141 } 142 143 form a{ 144 color: rgb(3,83,136);; 145 } 146 147 /*sign up page*/ 148 .signup-form { 149 position: absolute; 150 top: 50%; 151 left: 50%; 152 transform: translateX(-50%) translateY(-50%); 153 background: white; 154 padding: 20px; 155 } 156 157 /* profile page */ 158 .profile { 159 position: absolute; 160 top: 50%; 161 left: 50%; 162 transform: translateX(-50%) translateY(-50%); 163 background: #9dc3ee; 164 padding: 20px; 165 } 166 167 .find-survey-form { 168 position: absolute; 169 top: 50%; 170 left: 50%; 171 transform: translateX(-50%) translateY(-50%); 172 background: white; 173 padding: 20px; 174 font-family: 'Raleway', sans-serif; 175 color: rgb(3,83,136); 176 } 177 178 /* create survey */ 179 .create-survey-form { 180 position: absolute; 181 top: 50%; 182 left: 50%; 183 transform: translateX(-50%) translateY(-50%); 184 background: #9dc3ee; 185 padding: 20px; 186 } 187 188 /* create questions */ 189 .question-form { 190 position: absolute; 191 top: 50%; 192 left: 50%; 193 transform: translateX(-50%) translateY(-50%); 194 background: #9dc3ee; 195 padding: 20px; 196 } 197 198 /* take survey */ 199 .take-survey { 200 position: absolute; 201 top: 50%; 202 left: 50%; 203 transform: translateX(-50%) translateY(-50%); 204 background: #9dc3ee; 205 padding: 20px; 206 } 207 208 /* submit survey */ 209 .submit-survey { 210 position: absolute; 211 top: 50%; 212 left: 50%; 213 transform: translateX(-50%) translateY(-50%); 214 background: #9dc3ee; 215 padding: 20px; 216 } 217 218 /* survey directory */ 219 .survey-directory { 220 position: absolute; 221 top: 50%; 222 left: 50%; 223 transform: translateX(-50%) translateY(-50%); 224 background: #9dc3ee; 225 padding: 20px; 226 }