-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfootball.html
148 lines (126 loc) · 8.67 KB
/
football.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>Football</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/football1.jpg" alt="First slide" >
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid " src="images/football2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid" src="images/football3.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">Football</h2>
</div>
</div>
<p style="font-size:16px;">Football is a sport played out in the field between two teams holding 11-11 players,
also called outdoor games. This game is also known as Saucer, which is played with a circular ball.
It has been speculated that it is played by 25,00,000 players from around 150 countries, making it
the world's most famous game. It is played in rectangular field, with rounded posts at the end of both ends.
This is a competitive game, usually played by any team for entertainment and fun. Because it provides physical
benefits to players in many ways, this is the best exercise. This is a very exciting and challenging game,
which is usually preferred by the children, especially by everyone.
This is a team with the goal of which the two teams aim to score maximum goals against their opponent team.
And in the end, the same team is the winner, who makes the maximum goals at the end of the match.</p>
<br>
<br>
<br>
<br>
<div class = "row">
<div class = "col-12">
<h2 style="font-size: 220%;">Football 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">Football</a></li>
<li class = "nav-item"><a href = "#mid" class = "nav-link" role = "tab" data-toggle = "tab">Shin Guards</a></li>
<li class = "nav-item"><a href = "#present" class = "nav-link" role = "tab" data-toggle = "tab">Cleats or turfs</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">Football</h2>
<p class="d-none d-sm-block">
This the main equipment of the game and the total game revolves around this.
A Football is made of vulcanized rubber with plastic bladders and covered by plastic covers.</p>
</div>
<img src="images/football_ball.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/shin_guards.png" 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">Shin Guards</h2>
<p class="d-none d-sm-block">
These are used to protect the player’s shin.
While playing football, opponent players try to injure players by kicking in the shin area. </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">Cleats or turfs</h2>
<p class="d-none d-sm-block">
A very important gear for every football player.
These are specially designed shoes with spikes on the bottom that provide great traction on grass.
</p>
</div>
<img src="images/cleats_or_turfs.png" 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>