Untitled

<!DOCTYPE html>
<html lang="hu">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstap</title>
    <!-- Bootstrap js és css betöltése -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div id="banner" class="container-fluid">
        <div class="container">
        <img class="img-fluid" src="kepek/banner.jpg"></div>
    </div>
    <!--div.container-fluid>div.container>div.row>div*3-->
    <div class="container-fluid">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-md-6 col-lg-3">
            <img src="kepek/ktm.webp" class="img-fluid" />
            <h2>Motor</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus rerum iste libero.</p>
            <a class="btn btn-primary" href="#">Bővebben</a>
          </div>
          <div class="col-xs-12 col-md-6 col-lg-3">
            <img src="kepek/ktm2.webp" class="img-fluid" /> <!--A képnek is abba a classba kell lennie, mint a konténernek-->
            <h2>Motor</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus rerum iste libero.</p>
            <a class="btn btn-danger" href="#">Bővebben</a> <!--Gomb kinézetű link, a danger az piros, a primary az kék,
             # jel segítségéve tudunk ál linket csinálni a gyakorláshoz-->
          </div>
          <div class="col-xs-12 col-md-6 col-lg-3">
            <img src="kepek/ktm3.webp" class="img-fluid" />
            <h2>Motor</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus rerum iste libero.</p>
            <a class="btn btn-primary" href="#">Bővebben</a>
          </div>
          <div class="col-xs-12 col-md-6 col-lg-3">
            <img src="kepek/ktm4.webp" class="img-fluid" />
            <h2>Motor</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus rerum iste libero.</p>
            <a class="btn btn-primary" href="#">Bővebben</a>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid" id="bemutatkozás">
        <div class="container">
            <div class="row">
                <!--a d-none azt jelenti jelenleg, hogy a mobilon a sapi ne jelenjen meg, de minde más nézetbe jelenjen meg-->
                <div class="d-none d-md-block col-xs-12 col-md-4 col"><img src="kepek/helmet.webp" class="img-fluid" class="hide-mobile" /></div>
                <div class="col-xs-12 col-md-8 col"><p>A KTM Motors egy prémium minőségű motorokat és motorkerékpáros kiegészítőket forgalmazó szakbolt, mely a motorosok igényeit maximálisan figyelembe véve kínálja termékeit. Az üzletünkben kizárólag a KTM világvezető motorkerékpár márka legújabb modelljei találhatóak meg, kezdve a sportos túramotoroktól egészen a versenyzéshez tervezett gépekig. Szakképzett munkatársaink minden vásárlónk számára személyre szabott tanácsadással segítenek a legmegfelelőbb motor és felszerelés kiválasztásában. Célunk, hogy minden motoros, kezdőtől a profikig, megtalálja nálunk a számára legideálisabb járművet és kiegészítőket. Emellett szervizszolgáltatásokat is kínálunk, ahol gyors és precíz munkával biztosítjuk motorja hosszú élettartamát. A KTM Motors nem csupán egy bolt, hanem egy közösség, ahol a motorozás iránti szenvedély és a szakértelem találkozik. Kínálatunkban megtalálhatóak a legújabb motoros ruházatok, sisakok, protektorok, és minden egyéb, ami a biztonságos motorozáshoz szükséges. Az üzletünkben folyamatosan frissülő akciók és egyedi ajánlatok várják a vásárlókat, így mindig érdemes ellátogatni hozzánk. A KTM Motors célja, hogy minden motoros számára biztosítson egy prémium élményt, legyen szó vásárlásról, szervizről vagy akár közösségi programokról. Nálunk minden motoros megtalálhatja a saját stílusának és igényeinek megfelelő motort!</p></div>
            </div>
        </div>
    </div>
    <div id="fekete" class="container-fluid">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-6">
                    <h3>Termékeink</h3>
                    <ui>
                        <li>Lorem ipsum dolor sit amet.</li>
                        <li>Lorem ipsum dolor sit amet consectetur.</li>
                        <li>Lorem ipsum dolor sit.</li>
                </ui>
            </div>
                <div class="col-xs-12 col-md-6">
                    <h3>Termékeink</h3>
                    <ui>
                        <li>Lorem ipsum dolor sit amet.</li>
                        <li>Lorem ipsum dolor sit amet consectetur.</li>
                        <li>Lorem ipsum dolor sit.</li>
                    </ui>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>