Untitled


<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Fitness</title>
    <style>
      .topnav {
        overflow: hidden;
        background-color: #ffffff;
        padding-left: 200px;
      }

      .topnav .icon {
        display: none;
      }

      @media screen and (max-width: 600px) {
        .topnav a:not(:first-child),
        .dropdown .dropbtn {
          display: none;
        }
        .topnav a.icon {
          float: right;
          display: block;
        }
      }

      @media screen and (max-width: 600px) {
        .topnav.responsive {
          position: relative;
        }
        .topnav.responsive .icon {
          position: absolute;
          right: 0;
          top: 0;
        }
        .topnav.responsive a {
          float: none;
          display: block;
          text-align: left;
        }
        .topnav.responsive .dropdown {
          float: none;
        }
        .topnav.responsive .dropdown-content {
          position: relative;
        }
        .topnav.responsive .dropdown .dropbtn {
          display: block;
          width: 100%;
          text-align: left;
        }
      }
    </style>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="topnav" id="myTopnav">
      <a href="#home" class="active">
        <span>FITNES</span> <br />
        centri</a
      >
      <a href="#onama"> <span>O NAMA</span> <br />ko smo mi</a>
      <a href="#lokacije"><span>LOKACIJE</span><br />gde se nalazimo</a>
      <a href="#usluge"><span>USLUGE</span><br />šta nudimo</a>
      <a href="#blog"><span>BLOG</span><br />tekstovi</a>
      <a href="#kontakt"><span>KONTAKT</span><br />mapa</a>
      <a
        href="javascript:void(0);"
        style="font-size:15px;"
        class="icon"
        onclick="myFunction()"
        >&#9776;</a
      >
    </div>
    <div class="content">
      <div class="oneline">
        <div class="frame"><img class="logo" src="logo.png" alt="logo" /></div>
        <div class="frame">
          <p style="margin: 0; text-align: left;">
            <span class="brojevi">4</span> programa
          </p>
          <p style="margin: 0; text-align: left;">
            <span class="brojevi">3</span> lokacije
          </p>
          <p style="margin: 0; text-align: left;">
            <span class="brojevi">2</span> reči
          </p>
          <p style="margin: 0; text-align: left;">
            <span class="brojevi">1</span> ime
          </p>
        </div>

        <div class="frame beograd" style="margin-right: 5px;">
          <p style="margin: 20px 0 0 0; text-align: right; font-size: 1.3em;">
            <span class="brojevi">NOVI BEOGRAD</span>
          </p>
          <p id="lokacije">Izmisljena adresa, br.1</p>
          <p id="lokacije">Izmisljena adresa, br.2</p>
          <p id="lokacije">Izmisljena adresa, br.3</p>
        </div>
        <div class="frame" style="margin-right: 5px;">
          <p id="lokacije">
            "Every day is another chance to get
            <span style="font-weight: bold;">stronger</span>, to eat
            <span style="color:rgb(40, 221, 152);">better</span>, to live
            <span style="color:cyan">healthier</span> and to be the best version
            of <span style="color: rgb(247, 227, 115);">you</span>."
          </p>
        </div>
      </div>

      <div class="oneline">
        <p id="fitnes">fitnes</p>
        <div class="frame image"><img src="fitnes1.jpg" alt="fitnes1" /></div>
        <div class="frame image"><img src="fitnes2.jpg" alt="fitnes2" /></div>
        <div class="frame image"><img src="fitnes3.jpg" alt="fitnes3" /></div>
      </div>

      <div class="oneline">
        <p id="spa">spa</p>
        <div class="frame image"><img src="spa1.jpg" alt="spa1" /></div>
        <div class="frame image"><img src="spa2.jpg" alt="spa2" /></div>
        <div class="frame image"><img src="spa3.jpg" alt="spa3" /></div>
      </div>

      <div class="oneline">
        <p id="swim">swim</p>
        <div class="frame image"><img src="swim1.jpg" alt="swim1" /></div>
        <div class="frame image"><img src="swim2.jpg" alt="swim2" /></div>
        <div class="frame image"><img src="swim3.jpg" alt="swim3" /></div>
      </div>

      <div class="oneline">
        <p id="dance">dance</p>
        <div class="frame image"><img src="dance1.jpg" alt="dance1" /></div>
        <div class="frame image"><img src="dance2.jpg" alt="dance2" /></div>
        <div class="frame image"><img src="dance3.jpg" alt="dance3" /></div>
      </div>
    </div>

    <footer class="main-footer">
      <center>
        <img src="logo.png" alt="logo" />
        <ul>
          <li><a href="#" style="color: white;">fitnes</a></li>
          <li><a href="#" style="color: rgb(40, 221, 152);">spa</a></li>
          <li><a href="#" style="color: cyan;">swim</a></li>
          <li><a href="#" style="color:rgb(247, 227, 115);">dance</a></li>
        </ul>
      </center>
    </footer>
    <script>
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
          x.className += " responsive";
        } else {
          x.className = "topnav";
        }
      }
    </script>
  </body>
</html>