search

admc-3 / lilleverset

0 stars 0 forks source link

Webshop v1.0 #1

Open Pazia opened 8 months ago

Pazia commented 8 months ago 
<!DOCTYPE html>
<html lang="da">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Lilleverset - Development Site - Webshop</title>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <nav class="navbar navbar-expand-md tertiary">
      <div class="container-lg">
        <a class="navbar-brand" href="#"
          ><img src="assets/logo.png" width="94" height="43" alt="Lilleverset"
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#"
                >Forside</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="shop.html">Shop</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Om os (Lilleverset)</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <h1>Webshop</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque voluptate
        aspernatur odio laboriosam ipsam dolore nam quo atque, explicabo
        pariatur qui aliquam exercitationem soluta amet saepe, eos labore
        sapiente. Sit.
      </p>
    </div>

    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-sm col-md-4">
          <div class="card mb-3">
            <img src="assets/bamsekurv.jpg" class="card-img-top" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Bamsekurv</h5>
              <p class="card-text">
                Kurven er hæklet i genanvendt
                <a
                  href="https://www.teknologisk.dk/oeko-tex-maerkerne/35834"
                  target="_blank"
                  >OEKO-TEX</a
                >
                certificeret bomuldsgarn.
              </p>
              <p class="card-text">
                <small class="text-body-secondary"> Pris: 50.00 kr. </small>
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm col-md-4">
          <div class="card mb-3">
            <img
              src="assets/firkantetkurv.jpg"
              class="card-img-top"
              alt="..."
            />
            <div class="card-body">
              <h5 class="card-title">Firkantet kurv</h5>
              <p class="card-text">
                Kurven er hæklet i genanvendt
                <a
                  href="https://www.teknologisk.dk/oeko-tex-maerkerne/35834"
                  target="_blank"
                  >OEKO-TEX</a
                >
                certificeret bomuldsgarn.
              </p>
              <p class="card-text">
                <small class="text-body-secondary"> Pris: 100.00 kr. </small>
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm col-md-4">
          <div class="card mb-3">
            <img src="assets/kurvhank.jpg" class="card-img-top" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Kurv med hank</h5>
              <p class="card-text">
                Kurven er hæklet i genanvendt
                <a
                  href="https://www.teknologisk.dk/oeko-tex-maerkerne/35834"
                  target="_blank"
                  >OEKO-TEX</a
                >
                certificeret bomuldsgarn.
              </p>
              <p class="card-text">
                <small class="text-body-secondary"> Pris: 199.00 kr. </small>
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm col-md-6">
          <div class="card mb-3">
            <img src="assets/puslekurv.jpg" class="card-img-top" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Puslekurv</h5>
              <p class="card-text">
                Kurven er hæklet i genanvendt
                <a
                  href="https://www.teknologisk.dk/oeko-tex-maerkerne/35834"
                  target="_blank"
                >
                  OEKO-TEX
                </a>
                certificeret bomuldsgarn.
              </p>
              <p class="card-text">
                <small class="text-body-secondary"> Pris: 399.00 kr. </small>
              </p>
            </div>
          </div>
        </div>
        <div class="col-sm col-md-6">
          <div class="card mb-3">
            <img src="assets/tremmekurv.jpg" class="card-img-top" alt="..." />
            <div class="card-body">
              <h5 class="card-title">Tremmekurv</h5>
              <p class="card-text">
                Kurven er hæklet i genanvendt
                <a
                  href="https://www.teknologisk.dk/oeko-tex-maerkerne/35834"
                  target="_blank"
                  >OEKO-TEX</a
                >
                certificeret bomuldsgarn.
              </p>
              <p class="card-text">
                <small class="text-body-secondary"> Pris: 499.00 kr. </small>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container-md Footer">
      <h3>Footer content here!</h3>
      <p>
        <strong>FOOTER</strong>: Lorem ipsum, dolor sit amet consectetur
        adipisicing elit. Voluptatibus accusamus corrupti rem eos culpa eaque
        aut eligendi enim perferendis ipsum velit placeat, error laboriosam
        aliquid explicabo illo fuga officia molestias!
      </p>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Bootstrap Grid optimeret til hhv. mobil/tablet med mulighed for finjusteringer fremadrettet.

Pazia commented 8 months ago

HTML/CSS optimeret med Prettier via VSCode.