-
Notifications
You must be signed in to change notification settings - Fork 1
/
summery_page.html
60 lines (47 loc) · 3.04 KB
/
summery_page.html
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
<!DOCTYPE html>
<html>
<head>
<title>CSS Group Project</title>
<style> body { font-family: Arial, sans-serif; background-color: whitesmoke; }
h1, h2 {
text-align: center;
}
h1 {
font-size: 36px;
color: #333;
}
h2 {
font-size: 24px;
color: #666;
}
p {
line-height: 1.5;
max-width: 600px;
margin: 0 auto;
text-align: justify;
}
article {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
width: 600px;
margin: 0 auto;
position: absolute;
left:50%;
transform: translateX(-50%);
}
</style>
</head>
<body> <h1>CSS Group Project</h1>
<h2>Team Go getters</h2>
<p>Yared Geremew<br> Holden Salomon<br> Muhd Abdullah<br> Emmanuel Gohourou <br> <br>
<p>Date: October 16, 2023</p>
<article> <p>The goal of this project was to build a chessboard using only HTML and CSS in order to push the limits of pure CSS programming. Chess was chosen specifically because each square on the board can be assigned a unique ID, allowing for creative usage of CSS functions. Chess pieces could also be represented using CSS IDs and classes. However, through the course of development, limitations of a pure CSS and HTML approach emerged. Most significantly, the team discovered there was no way to enable players to dynamically select pieces and end positions for moves without the addition of JavaScript.</p> <br>
<p>Originally, the plan was to create a fully interactive chess game where players could choose their moves like a traditional game. But due to the constraints of CSS, the team found it would be incredibly difficult to track desired moves between squares since it would require two nested triggers. Enforcing the rules of chess, like legal moves and turn order, also proved challenging with CSS and HTML alone.</p> <br>
<p>Given these discoveries, the project pivoted to creating a simulated chess game using pre-determined movesets that could be animated with CSS transitions. This removed the need for dynamic logic that CSS could not provide. The end result was a purely CSS-driven transition of chess pieces that could be activated through triggers like clicking or hovering.</p><br>
<p>To strategize work allocation, the team utilized a Kanban system. This provided an organized yet flexible way to divide goals into tasks, assign responsibility, and modify things when needed. Team members could contribute both as individuals and collaborators.</p> <br>
<p>Although interactivity was limited compared to the original vision, the final project demonstrated creative usage of CSS transition. Testing the UI revealed where CSS could and could not meet the demands of a dynamic game. While limitations emerged, the experience underscored the power of pivoting the design based on constraints, as well as using strong project management workflows. In the end, Even though we had to scale back how interactive the website could be using only CSS, this project still helped us learn a lot about how far we can stretch what's possible with CSS in new and creative ways.</p>
</article>
</body>
</html>