Capstone-Module-1/index.html at master · NeckerFree/Capstone-Module-1 · 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
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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
             <link rel="stylesheet" href="./css/styles.css">
        <link href="https://fonts.cdnfonts.com/css/cocogoose?styles=44178" rel="stylesheet">
  <link
        href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
        rel="stylesheet">
        <title>Running is Passion</title>
</head>
<body >
  <header>
   <div class="topBar" >
          <ul class="menu">
        <li><a href="#"><img src="./icons/facebook.png" alt="facebook icon"></a></li>
        <li><a href="#"><img src="./icons/twitter.png" alt="twitter icon"></a></li>
        <li><a href="#">English</a></li>
        <li><a href="#">My Page</a></li>
        <li><a href="#">Logout</a></li>
     </ul>
     </div>
    <nav class="navbar navbar-expand-lg navbar-light bg-light headerContainer">
      <div class="container ">
        <div role="button" class="navbar-toggler first-button" data-bs-toggle="collapse"
          data-bs-target="#cap" aria-controls="cap" aria-expanded="false"
          aria-label="Toggle navigation">
          <div class="animated-icon1"><span></span><span></span><span></span></div>
      </div>
     <div class="collapse navbar-collapse" id="cap">
        <a href="./index.html" class="navbar-brand" ><img src="./icons/logo.png" alt="Logo" class="logo"></a>
        <ul class="nav navbar-nav">
          <li>
              <a class="nav-link" href="./index.html">Index</a>
          </li>
          <li>
              <a class="nav-link" href="./about.html">About</a>
          </li>
          <li>
              <a class="nav-link" href="#modalities">Modalities</a>
          </li>
          <li>
              <a class="nav-link" href="#races">Next Races</a>
          </li>
          <li>
              <a class="nav-link" href="#records">Records</a>
          </li>
          <li>
            <a class="nav-link borderOrange" href="#">CC Campaign</a>
        </li>
      </ul>
        </div>
      </div>
    </nav>
  </header>
<main>
  <article class="whiteArticle ">
    <section class="highSection">
      <h2 class="h2">"Hello Runners"</h2>
      <h1 class="h1Title">ALL ABOUT RUNNING</h1>
    </section>
    <section class="mediumSection"><p>Running can give you a better health, make you more productive in all personal activities, improved concentration and improve the competitive spirit.</p></section>
  <section class="lowSection">
    <h3>Pride Run Phoenix</h3>
    <p class="lowText">2022.03.19 Phoenix, United States of America</p>
  </section>
  </article>
  <section id="racesArticle" >
    <div>
      <h4 class="racesTitle">Next Races</h4>
      <div class="iconDivider"></div>
    </div>
    <div class="blackArticle">
       <article class="race1">
      <div><img src="./images/program_icon_01.png" alt=""> </div>
         <p class="raceTitle">Royal Parks Half Marathon </p>
        <p class="raceDescription">(9 October 2022) The Royal Parks Half Marathon is 13.1 miles and takes you on a route through central London, and four of London's eight Royal Parks – Hyde Park, The Green Park, St James's Park and Kensington Gardens.</p>

    </article>
    <article class="race1">
      <div><img src="./images/program_icon_02.png" alt=""> </div>
        <p class="raceTitle">Brighton Marathon place </p>
        <p class="raceDescription">(10 April 2022) Brighton Marathon organisers have not announced the finalised 2022 route yet, but it is expected to follow the same route as 2021.</p>

    </article>
    <article class="race1">
      <div ><img src="./images/program_icon_03.png" alt=""> </div>
        <p class="raceTitle">2022 Great North Run </p>
        <p class="raceDescription">(11 September 2022) It's the biggest half marathon in the UK, but whether you're hoping to get a last-minute charity place, or are planning on spectating at this year's Great North Run, here's everything you need to know.</p>

    </article>
    <article class="race1">
      <div ><img src="./images/program_icon_04.png" alt=""></div>
        <p class="raceTitle">Milton Keynes Marathon Weekend Sun</p>
        <p class="raceDescription">(1 May 2022 - Mon, 2 May 2022) The Rocket 5k is the perfect race for those looking to experience the buzz of a marathon weekend without having to cover all the distance. Enjoy an out and back course along closed-roads.</p>

    </article>
    <article class="race1">
      <div ><img src="./images/program_icon_05.png" alt=""></div>
        <p class="raceTitle">Milton Keynes Marathon Weekend Sun</p>
        <p class="raceDescription">(1 May 2022 - Mon, 2 May 2022) The Rocket 5k is the perfect race for those looking to experience the buzz of a marathon weekend without having to cover all the distance. Enjoy an out and back course along closed-roads.</p>
    </article>


  </div>
  <div class="footerAdd">
     <a href="#"><p>Join Running is Passion</p></a>
    </div>
  </section>
  <article id="outstandingArticle" class="athletesArticle">
    <div class="athletesHead" >
      <h5 class="outAthletes">Outstanding athletes</h5>
      <div class="iconDivider"></div>
    </div>
    <div class="athletes"></div>
<button class="moreAthletes">MORE <img src="./images/down.jpg" alt="downArrow"></button>
  </article>
  <article class="articlePartnerI">
    <div class="articlePartner">
        <div><h4 class="headerPartner">Partner</h4>
            <div class="iconDivider"></div></div>
            <section class="row3">
                <img src="./images/airbnb.png" alt="trademark 2">
                <img src="./images/google.png" alt="trademark 1">
                <img src="./images/mozilla.png" alt="trademark 4">
            </section>
            <section class="row2">
                <img src="./images/naum.png" alt="trademark 4">
                <img src="./images/naver.png" alt="trademark 5">

            </section>
    </div>

</article>
<article class="articleRightsI ">
  <div class="articleDisplay">
   <img class="imageLogoI"  src="./icons/logo3.png" alt="Logo"> <p class="descriptionlogoI">Running is Passion <br>Some Rights Reserved.</p>
</div></article>
 </main>
<script src="./js/scriptCode.js"></script>
</body>
</html>