webdev/project.html at main · Dankells/webdev · GitHub

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
<!DOCTYPE html>
<html lang="en-US">
<head>
    <link rel="stylesheet" type="text/css" href="/styles/project.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devise-width initial-scale=1.0">
    <meta http-equiv="refresh" content="10">
    <meta name="description" content="available">
    <title>https://www.picorg.com</title>
</head>
<body>
    <div class="container">
        <header>
            <h1>Franklin Running Club</h1>
        </header>
        <main class="main clearfix"><!--this has two class, so note how to use two classes in html coding-->
            <h2>Running tips</h2>
            <div>
                <div class="media">
                    <img class="media-image" src="runner.png">
                    <div class="media-body">
                        <h4>Strength</h4>
                        <p>Strength training is an important part of injury prevention. Focus on your core &mdash; especially your abs and glutes. </p>
                    </div>
                </div>
              <!-- Creating a div with a class of media. It is also creating an image with a class of
              media-image. It is also creating a div with a class of media-body. It is also creating
              a h4 tag with the text of Cadence. It is also creating a p tag with the text of Check
              your stride turnover. The most efficient runners take about 180 steps per minute. -->
                <div class="media">
                    <img src="shoes.png" class="media-image">
                    <div class="media-body">
                        <h4>Cadence</h4>
                        <p>Check your stride turnover. The most efficient runners take about 180 steps per minute. </p>
                    </div>
                </div>
                <div class="media">
                    <img src="shoes.png" class="media-image">
                    <div class="media-body">
                        <h4>Change it up</h4>
                        <p>Dont run the same every time you hit the road. Vary your pace, and vary the distance of your runs.</p>
                    </div>
                </div>
                <div class="media">
                    <img src="runner.png" class="media-image">
                    <div class="media-body">
                        <h4>Focus on form</h4>
                        <p>Run tall but relaxed. Your feet should hit the ground beneath your hips not out in front of you.</p>
                    </div>
                </div>
            </div>
           <!--<div style="clear: both;"></div>-->
        </main>
    </div>
</body>
</html>