-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
executable file
·82 lines (78 loc) · 4.49 KB
/
blog.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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Blog</title>
<!-- Reference internal and external (Google Fonts and Font Awesome) styles -->
<link rel="stylesheet" type="text/css" href="styles/meyer-reset.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="styles/header-footer.css">
<link rel="stylesheet" type="text/css" href="styles/blog-styles.css">
</head>
<body>
<!-- Set a margin on left and right of the content area -->
<article class="content-wrapper">
<header>
<!-- Logo and Nav will appear on the same "line", Header will appear below. The logo and nav bar use responsive grids -->
<a href="index.html"><img src="images/stplogo.jpg" alt="STP Archery Logo" id="logo" class="col span_2_of_7"></a> <!-- Make Logo Clickable and return to homepage -->
<!-- Main navigation -->
<nav class="mainNav">
<ul>
<li><a href="index.html" class="col span_1_of_7">Home</a></li>
<li><a href="about.html" class="col span_1_of_7">About</a></li>
<li><a href="services.html" class="col span_1_of_7">Services</a></li>
<li><a href="instructors.html" class="col span_1_of_7">Instructors</a></li>
<li><a href="blog.html" class="col span_1_of_7">Blog</a></li>
</ul>
</nav>
<!-- Main header on each page -->
<h1 id="pageHeader">Blog</h1>
</header>
<!-- Group all blog posts into one section that acts as a container -->
<Section id="blogContent">
<h2>Recent Posts</h2>
<!-- Each blog post is completely contained within an article so that the content stays together when screen size changes-->
<article class="col span_1_of_3">
<h3>US Olympic Team Trials </h3>
<img src="images/students-competing.jpg" alt="Students Completing">
<p>So proud of all of our participants in the archery competition over the weekend. Everyone has come such a long way from when they first picked up a bow in our introductory class. </p>
<!-- Comment section should appear in the same content area as associated post but slightly indented -->
<article>
<h4>Comments</h4>
<p>Thank you so much Giap, without you I would not be where I am today. This opportunity to qualify for the Olympics is truly unbelievable.</p>
</article>
</article>
<article class="col span_1_of_3">
<h3>Learning the Basics</h3>
<img src="images/class1.jpg" alt="Class Image 1">
<p>Some of our younger students learn the basics of archery. With hard work and dedication they can become archery masters!</p>
<article>
<h4>Comments</h4>
<p>No one has left a comment on this post</p>
</article>
</article>
<article class="col span_1_of_3">
<h3>Open for Business!</h3>
<img src="images/founder.jpg" alt="STP Founder">
<p>It has always been a dream of mine to open an archery school and pass on what I have learned to future generations. If you are an avid archer already or just getting started we offer a variety of class and private lessons to meet your needs. Check out the services page for more details!</p>
<article>
<h4>Comments</h4>
<p>I am very excited to take my first class next week Giap!</p>
<p>I have always wanted to get into archery, looking forward to learning about sport. </p>
</article>
</article>
</Section>
<footer>
<!-- Social Media Links (images using font awesome) -->
<nav id="footerNav">
<a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook-official fa-3x" aria-hidden="true"></i></a>
<a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter-square fa-3x" aria-hidden="true"></i></a>
<a href="https://www.instagram.com" target="_blank"><i class="fa fa-instagram fa-3x" aria-hidden="true"></i></a>
</nav>
<!-- Email and Phone Number on click will automatically open a new email or start a phone call (assuming the client is a mobile device) respectively -->
<p>Straight to the Point Archery | 528 Nock Point Ln Tacoma, WA 98412 | <a href="mailto:archery-education@example.com">archery-education@example.com</a> | <a href="tel:(253)555-1010">(253) 555-1010</a></p>
</footer>
</article>
</body>
</html>