├── about.html ├── background_image.jpg ├── index.html ├── styles.css ├── technical_picture_1.jpg └── technical_picture_2.jpg /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About Human-Computer Interaction 7 | 8 | 16 | 17 | 18 |
19 |
20 |

About Human-Computer Interaction

21 | 29 |
30 |
31 | 32 |
33 |
34 |

What is Human-Computer Interaction (HCI)?

35 |

Human-Computer Interaction (HCI) is the study of how people interact with computers and to what extent computers are or are not developed for successful interaction with human beings. It encompasses the design, evaluation, and implementation of interactive computing systems for human use and the study of major phenomena surrounding them.

36 |

HCI draws from cognitive psychology, computer science, design, and other fields to create a multidisciplinary approach to understanding and improving the user experience with technology.

37 |

Some key areas within HCI include user interface design, usability testing, accessibility, interaction design, and user-centered design methodologies.

38 |

Effective HCI leads to intuitive, efficient, and enjoyable interactions between users and computers, resulting in better user experiences and improved productivity.

39 |

Explore our website to learn more about the fascinating world of HCI and its impact on technology and society!

40 |
41 |
42 | 43 |
44 |
45 |

Featured Projects

46 |
47 |

Project 1: Enhancing Accessibility

48 |

Explore how HCI principles are applied to improve accessibility for individuals with disabilities in digital environments.

49 |
50 |
51 |

Project 2: User-Centered Design in Action

52 |

Discover real-world examples of user-centered design methodologies and their impact on product development.

53 |
54 |
55 |
56 | 57 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /background_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AARICKWOLF/HTML---WEBSITE/ece8ca79d0ff6e7931c1d19b13d85c5b09371f4a/background_image.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 56 | 57 | 58 | 59 | 60 | 61 | 127 | 128 | 129 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | Human-Computer Interaction 205 | 206 | 207 | 208 |
209 |
210 |

Human-Computer Interaction

211 | 219 |
220 |
221 | 222 |
223 |
224 |

Welcome to HCI World

225 |

Human-Computer Interaction (HCI) is the study and design of interactive computing systems for human use and the study of major phenomena surrounding them.

226 | Learn More 227 |
228 |
229 | 230 |
231 |
232 |
233 | Technical Picture 1 234 |

Innovative Interfaces

235 |

Discover cutting-edge interfaces designed for seamless interaction.

236 |
237 |
238 | Technical Picture 2 239 |

User Experience Design

240 |

Learn about UX principles and practices to create intuitive experiences.

241 |
242 |
243 |
244 | 245 |
246 |
247 |

Contact Us

248 |

Have questions or inquiries? Feel free to reach out!

249 |
250 |

Email: info@hciworld.com

251 |

Phone: 1234567890

252 |
253 |
254 |
255 | 256 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | /* Reset CSS 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: Arial, sans-serif; 10 | background-color: #f0f0f0; 11 | } 12 | 13 | header { 14 | background-color: #004466; 15 | color: #fff; 16 | padding: 20px; 17 | display: flex; 18 | justify-content: space-between; 19 | align-items: center; 20 | } 21 | 22 | nav ul { 23 | list-style-type: none; 24 | } 25 | 26 | nav ul li { 27 | display: inline; 28 | margin-right: 20px; 29 | } 30 | 31 | nav ul li a { 32 | color: #fff; 33 | text-decoration: none; 34 | } 35 | 36 | nav ul li a.active { 37 | font-weight: bold; 38 | } 39 | 40 | .hero { 41 | background-color: #fff; 42 | text-align: center; 43 | padding: 50px; 44 | } 45 | 46 | .hero h2 { 47 | color: #004466; 48 | } 49 | 50 | .cta { 51 | background-color: #004466; 52 | color: #fff; 53 | padding: 10px 20px; 54 | border: none; 55 | border-radius: 5px; 56 | text-decoration: none; 57 | } 58 | 59 | .features { 60 | display: flex; 61 | justify-content: space-around; 62 | padding: 50px 0; 63 | } 64 | 65 | .feature { 66 | text-align: center; 67 | } 68 | 69 | .feature img { 70 | max-width: 100%; 71 | height: auto; 72 | margin-bottom: 20px; 73 | } 74 | 75 | .contact { 76 | background-color: #004466; 77 | color: #fff; 78 | text-align: center; 79 | padding: 50px; 80 | } 81 | 82 | .contact p { 83 | margin-bottom: 20px; 84 | } 85 | 86 | footer { 87 | background-color: #001a33; 88 | color: #fff; 89 | text-align: center; 90 | padding: 20px; 91 | } */ 92 | 93 | 94 | 95 | 96 | /* Reset CSS 97 | * { 98 | margin: 0; 99 | padding: 0; 100 | box-sizing: border-box; 101 | } 102 | 103 | body { 104 | font-family: Arial, sans-serif; 105 | background-color: #f0f0f0; 106 | } 107 | 108 | .container { 109 | width: 80%; 110 | margin: 0 auto; 111 | } 112 | 113 | header { 114 | background-color: #004466; 115 | color: #fff; 116 | padding: 20px 0; 117 | } 118 | 119 | nav ul { 120 | list-style-type: none; 121 | text-align: center; 122 | } 123 | 124 | nav ul li { 125 | display: inline; 126 | margin-right: 20px; 127 | } 128 | 129 | nav ul li a { 130 | color: #fff; 131 | text-decoration: none; 132 | } 133 | 134 | nav ul li a.active { 135 | font-weight: bold; 136 | } 137 | 138 | .hero { 139 | background-color: #fff; 140 | text-align: center; 141 | padding: 50px 0; 142 | } 143 | 144 | .hero h2 { 145 | color: #004466; 146 | } 147 | 148 | .cta { 149 | background-color: #004466; 150 | color: #fff; 151 | padding: 10px 20px; 152 | border: none; 153 | border-radius: 5px; 154 | text-decoration: none; 155 | } 156 | 157 | .features { 158 | background-color: #f9f9f9; 159 | padding: 50px 0; 160 | } 161 | 162 | .feature { 163 | text-align: center; 164 | margin-bottom: 30px; 165 | } 166 | 167 | .feature img { 168 | max-width: 100%; 169 | height: auto; 170 | margin-bottom: 20px; 171 | } 172 | 173 | .contact { 174 | background-color: #004466; 175 | color: #fff; 176 | text-align: center; 177 | padding: 50px 0; 178 | } 179 | 180 | .contact p { 181 | margin-bottom: 20px; 182 | } 183 | 184 | footer { 185 | background-color: #001a33; 186 | color: #fff; 187 | text-align: center; 188 | padding: 20px 0; 189 | } */ 190 | 191 | 192 | 193 | 194 | /* Reset CSS */ 195 | * { 196 | margin: 0; 197 | padding: 0; 198 | box-sizing: border-box; 199 | } 200 | 201 | body { 202 | font-family: Arial, sans-serif; 203 | background-color: #f0f0f0; 204 | } 205 | 206 | .container { 207 | width: 80%; 208 | margin: 0 auto; 209 | margin-bottom: 20px; 210 | } 211 | 212 | header { 213 | background-color: #004466; 214 | color: #fff; 215 | padding: 20px 0; 216 | } 217 | 218 | header h1 { 219 | margin-bottom: 10px; 220 | } 221 | 222 | nav ul { 223 | list-style-type: none; 224 | text-align: center; 225 | } 226 | 227 | nav ul li { 228 | display: inline; 229 | margin-right: 20px; 230 | } 231 | 232 | nav ul li a { 233 | color: #fff; 234 | text-decoration: none; 235 | padding: 10px 20px; 236 | border-radius: 5px; 237 | background-color: #ffa07a; /* Vibrant button color */ 238 | margin-bottom: 20px; 239 | 240 | } 241 | 242 | nav ul li a.active { 243 | font-weight: bold; 244 | } 245 | 246 | .hero { 247 | background-color: #fff; 248 | text-align: center; 249 | padding: 50px 0; 250 | } 251 | 252 | .hero h2 { 253 | color: #004466; 254 | margin-bottom: 20px; 255 | } 256 | 257 | .hero p { 258 | margin-bottom: 20px; 259 | } 260 | .cta { 261 | background-color: #004466; /* Vibrant button color */ 262 | color: #fff; 263 | padding: 10px 20px; 264 | border: none; 265 | border-radius: 5px; 266 | text-decoration: none; 267 | transition: background-color 0.3s ease; /* Smooth transition on hover */ 268 | } 269 | 270 | .cta:hover { 271 | background-color: #ff7f50; /* Darker shade on hover */ 272 | } 273 | 274 | .features { 275 | background-color: #f9f9f9; 276 | padding: 50px 0; 277 | } 278 | 279 | .feature { 280 | text-align: center; 281 | margin-bottom: 30px; 282 | } 283 | 284 | .feature img { 285 | max-width: 100%; 286 | height: auto; 287 | margin-bottom: 20px; 288 | } 289 | 290 | .contact { 291 | background-color: #004466; /* Vibrant color */ 292 | color: #fff; 293 | text-align: center; 294 | padding: 50px 0; 295 | } 296 | 297 | .contact p { 298 | margin-bottom: 20px; 299 | } 300 | 301 | footer { 302 | background-color: #001a33; /* Vibrant footer color */ 303 | color: #fff; 304 | text-align: center; 305 | padding: 20px 0; 306 | } 307 | -------------------------------------------------------------------------------- /technical_picture_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AARICKWOLF/HTML---WEBSITE/ece8ca79d0ff6e7931c1d19b13d85c5b09371f4a/technical_picture_1.jpg -------------------------------------------------------------------------------- /technical_picture_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AARICKWOLF/HTML---WEBSITE/ece8ca79d0ff6e7931c1d19b13d85c5b09371f4a/technical_picture_2.jpg --------------------------------------------------------------------------------