-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsports.html
142 lines (117 loc) · 5.42 KB
/
sports.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Extracurricular Examples - Sports</title>
<meta name="description" content="Extracurricular Examples - Sports">
<meta name="author" content="Clarisa Jimenez and Steven Orechow">
<meta name="keywords" content="sports, extracurricular activities, students">
<link rel="shortcut icon" href="https://picocss.com/favicon.ico">
<!-- Pico.css -->
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.min.css">
<!-- Custom styles for this example -->
<link rel="stylesheet" href="style/custom.css">
<style>
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 590px) and (max-width: 790px) {
.grid {
/* grid in small devices */
grid-template-columns: 1fr;
}
nav ul {
flex-direction: column;
display: none;
}
nav.active ul {
display: flex;
}
}
/* Medium devices (tablets, 790px and up) */
@media (min-width: 790px) and (max-width: 991px) {
.grid {
/* grid in medium devices */
grid-template-columns: repeat(2, 1fr);
}
}
/* Large devices (desktops, 990px and up) */
@media (min-width: 990px) {
.container {
max-width: 790px;
margin: 0 auto;
}
.grid {
/* grid in large devices */
grid-template-columns: repeat(2, 1fr);
}
.bg-color {
background-color: #f7f7f7;
}
}
</style>
</head>
<body tabindex="0">
<!-- Hero -->
<div class="hero" data-theme="dark" style="background-image: url('images/gradient-3.svg');">
<a href="#main" class="skip">Skip to Content</a>
<nav class="container-fluid">
<ul>
<li><a href="index.html" class="contrast"><img class="max_width_40" alt="HitAndMatch logo" src="images/logo.png"></a></li>
</ul>
<ul>
<li><a class="bolts" href="index.html">Home</a></li>
<li><a class="bolts" href="academics.html">Academics</a></li>
<li><a class="bolts" href="arts.html">Arts</a></li>
<li><a class="bolts sports" href="sports.html">Sports</a></li>
</ul>
</nav>
<header class="container">
<hgroup>
<h1 class="title">HitAndMatch</h1>
<p class="dark-text">A company that describes the importance of extracurricular activities for students.</p>
</hgroup>
</header>
</div><!-- ./ Hero -->
<main id="main" class="container">
<div class="grid">
<div>
<article id="Academics" class="mt-0">
<h2>Extracurricular Examples - Sports</h2>
<p>Extracurricular sports provide many opportunities for students to increase their physical activity while enhancing their teamwork skills. Engaging in extracurricular sports activities can positively affect your academic performance and mental health by allowing you to manage your time more efficiently and train your stamina and focus. There are many sports and recreation extracurricular activities that you can participate in such as: </p>
<ul>
<li>Basketball</li>
<li>Football</li>
<li>Hockey</li>
<li>Volleyball</li>
<li>Cheerleading</li>
<li>Fencing</li>
<li>Soccer</li>
<li>Swimming</li>
<li>Tennis</li>
</ul>
</article>
</div>
<div class="right">
<a href="#" aria-label="Example" onclick="event.preventDefault()"><img src="images/fencing.jpg" alt="Fencing"></a>
<p>
<a href="#" onclick="event.preventDefault()">Fencing</a><br>
<small>Fencing can have many positive effects such as improving strength and endurance, coordination, confidence and much more.</small> <!-- from https://commons.wikimedia.org/wiki/File:Final_Trophee_Monal_2012_n08.jpg-->
</p>
<a href="#" aria-label="Example" onclick="event.preventDefault()"><img src="images/swimming.jpg" alt="Swimming"></a>
<p>
<a href="#" onclick="event.preventDefault()">Swimming</a><br>
<small>Particating in swimming will allow you to alleviate stress, improve flexibility, maintain a healthy lifestyle, and many more benefits.</small> <!-- from https://commons.wikimedia.org/wiki/File:H%C3%A0bit_Saludable.jpg -->
</p>
</div>
</div>
</main><!-- ./ Main -->
<!-- Footer -->
<div class="hero" data-theme="dark">
<nav class="container-fluid">
<ul>
<li><a href="./" class="contrast" onclick="event.preventDefault()"><strong>HitToLearn</strong></a></li>
</ul>
</nav>
</div><!-- ./ Hero -->
</body>
</html>