-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchess.html
148 lines (126 loc) · 8.76 KB
/
chess.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale = 1, shrink-to-fit = no" />
<meta http-equiv="x-ua-compatible" content="ie = edge" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css" integrity="sha512-f8mUMCRNrJxPBDzPJx3n+Y5TC5xp6SmStstEfgsDXZJTcxBakoB5hvPLhAfJKa9rCvH+n3xpJ2vQByxLk4WP2g==" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Poppins&family=Trade+Winds&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/sports.css" />
<title>Chess</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-4 fixed-left ">
<aside class="col-4 px-0 fixed-top" id="left">
<!-- <img id="one"src="images/badminton.jpg" width="50%">
<img id="two"src="images/badminton.jpg" width="50%">
<img id="three"src="images/badminton.jpg" width="50%"> -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="5000">
<div class="carousel-inner carousel-main">
<div class="carousel-item active">
<img class="d-block w-100 img-fluid" src="images/chess1.jpg" alt="First slide" >
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid " src="images/chess2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid" src="images/chess3.jpg" alt="Third slide">
</div>
</div>
</div>
</aside>
</div>
<div class="col-12 col-sm-6 offset-1 ">
<div class = "navbar navbar-dark navbar-expand-sm fixed-top">
<div class = "container">
<button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#Navbar">
<span class = "navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html" style="color: #FFFFFF; font-size: 200%;"><img src = "images/undo.svg" alt = "logo" class = "img-fluid" width = "60px"> Back</a>
<div class = "collapse navbar-collapse" id = "Navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#"><img src="images/tags.svg" width="50px" class="img-fluid"></a></li>
</ul>
</div>
</div>
</div>
<br>
<br>
<div class = "container">
<div class = "row">
<div class = "col-12">
<h2 class = "page-heading">Chess</h2>
</div>
</div>
<p style="font-size:16px;">Chess is a board game for two players. It is played in a square board, made of 64 smaller
squares, with eight squares on each side. Each player starts with sixteen pieces: eight pawns, two knights,
two bishops, two rooks, one queen and one king. The goal of the game is for each player to try and checkmate the
king of the opponent. Checkmate is a threat ('check') to the opposing king which no move can stop. It ends the game.
During the game the two opponents take turns to move one of their pieces to a different square of the board.
One player ('White') has pieces of a light color; the other player ('Black') has pieces of a dark color.
There are rules about how pieces move, and about taking the opponent's pieces off the board. The player with white
pieces always makes the first move.
Because of this, White has a small advantage, and wins more often than Black in tournament games</p>
<br>
<br>
<br>
<br>
<div class = "row">
<div class = "col-12">
<h2 style="font-size: 220%;">Chess Equipments</h2>
<br>
<ul class = "nav nav-tabs nav-justified">
<li class = "nav-item"><a class = "nav-link active" href = "#early" role = "tab" data-toggle = "tab">Chess Boards</a></li>
<li class = "nav-item"><a href = "#mid" class = "nav-link" role = "tab" data-toggle = "tab">Chess Pieces</a></li>
<li class = "nav-item"><a href = "#present" class = "nav-link" role = "tab" data-toggle = "tab">Chess Clocks</a></li>
</ul>
<div class = "tab-content">
<div class = "tab-pane fade-in show active" role = "tabpanel" id = "early">
<div class="media">
<div class="media-body">
<h2 class="mt-0">Chess Board</h2>
<p class="d-none d-sm-block">
Although most chess positions are diagrammed with white & dark gray squares, very few boards use those colors or use white & black.
Inexpensive boards often come with red & black squares, but these are hard on the eyes.</p>
</div>
<img src="images/chess_board.gif" width="24%" alt="early gpu" class="d-flex ml-4 img-fluid img-thumbnail align-self-center">
</div>
</div>
<div class = "tab-pane fade-in" role = "tabpanel" id = "mid">
<div class="media">
<img src="images/chess_pieces.gif" width="24%" alt="mid gpu" class="d-flex mr-4 img-fluid img-thumbnail align-self-center">
<div class="media-body">
<h2 class="text-align-right">Chess Pieces</h2>
<p class="d-none d-sm-block">
The most familiar and popular pieces follow the Staunton pattern and are required for most tournaments.
They are normally made from wood or plastic, although other materials can be used. </p>
</div>
</div>
</div>
<div class = "tab-pane fade-in" role = "tabpanel" id = "present">
<div class="media">
<div class="media-body">
<h2 class="mt-0">Chess Clocks</h2>
<p class="d-none d-sm-block">
These were soon superseded by two connected analog clocks.
One player's clock starts as soon as the other player has made a move and punched the clock.
</p>
</div>
<img src="images/chess_clocks.gif" width="24%" alt="present gpu" class="d-flex ml-4 img-fluid img-thumbnail align-self-center">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>