-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbaseball.html
150 lines (129 loc) · 8.99 KB
/
baseball.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
149
150
<!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>Baseball</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/baseball1.jpg" alt="First slide" >
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid " src="images/baseball2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid" src="images/baseball3.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">Baseball</h2>
</div>
</div>
<p style="font-size:16px;">Baseball is a sport that is very popular in America and Canada. Nowadays, there are two
leagues – the national and American league. These leagues are divided into three divisions – central, west and east.
This sport was developed in other countries such as Japan and Latin America.
The biggest international competition in this sport is called The World Baseball Classic.The two teams each have
nine players. One team take the offensive, that is the batting and running, while the other team takes the defensive
position that is pitching- throwing the ball and defending.
The pitch is in the shape of a diamond with four ‘bases’ – first, second, third and fourth base.
Four players from the offensive team are present on the pitch at one base each. The player in the batting
position hits the pitched ball and runs to the second base while the players at the other bases also move
to the next base in an anti-clockwise direction to make runs.
The other team tries to get the players out. Once three of the offensive players get ‘out’ the other
team comes in to bat.
A match has nine innings, each of which is one turn of batting and one with the ball for each team. </p>
<br>
<br>
<br>
<br>
<div class = "row">
<div class = "col-12">
<h2 style="font-size: 220%;">Baseball 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">Basetball Bat</a></li>
<li class = "nav-item"><a href = "#mid" class = "nav-link" role = "tab" data-toggle = "tab">Baseball</a></li>
<li class = "nav-item"><a href = "#end" class = "nav-link" role = "tab" data-toggle = "tab">Baseball gloves</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">Baseball Bat</h2>
<p class="d-none d-sm-block">
Baseball bat is a round, solid wooden or hollow aluminium bat.
Wooden bats are traditionally made from ash wood, though sometimes maple and bamboo is also used.</p>
</div>
<img src="images/baseball_bat.jpg" 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/baseball_ball.jpg" 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">Baseball</h2>
<p class="d-none d-sm-block">
The ball used in baseball is called a baseball.
Layers of yarn or string is rolled on a cork sphere and a leather coat is stitched over it to make a baseball. </p>
</div>
</div>
</div>
<div class = "tab-pane fade-in" role = "tabpanel" id = "end">
<div class="media">
<img src="images/baseball_gloves.jpg" 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">Baseball Gloves</h2>
<p class="d-none d-sm-block">
Players wear leather gloves to protect their palms.
A webbed "pocket" between the thumb and first finger helps the fielder to catch the ball easily. </p>
</div>
</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>