Browse Source

added basic routing + content

store
Philipp Dormann 10 months ago
parent
commit
2365807040
6 changed files with 61 additions and 17 deletions
  1. BIN
      hut-preview.jpg
  2. BIN
      hut.jpg
  3. +35
    -16
      index.html
  4. +13
    -0
      js/main.js
  5. +12
    -1
      main.scss
  6. +1
    -0
      package.json

BIN
hut-preview.jpg View File

Before After
Width: 946  |  Height: 584  |  Size: 163 KiB

BIN
hut.jpg View File

Before After
Width: 958  |  Height: 1280  |  Size: 148 KiB

+ 35
- 16
index.html View File

@ -31,32 +31,51 @@
</ul>
</nav>
<main>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">out of office 🕕</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">out of office 🕕</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">Sie besuchen unseren Laden außerhalb der Öffnungszeiten 🙄</div>
<div class="modal-footer">
<button id="closemodal" class="btn" data-dismiss="modal">OK</button>
</div>
</div>
<div class="modal-body">Sie besuchen unseren Laden außerhalb der Öffnungszeiten 🙄</div>
<div class="modal-footer">
<button id="closemodal" class="btn" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<div class="container">
</div>
<div class="container" id="landingpage_wrapper">
<div class="row">
<div class="col-md-6 align-self-center">
<img src="./kaufen.svg" alt="" style="max-width: 100%;">
</div>
<div class="col-md-6 align-self-center">
<h1 class="">kauft.es</h1>
<h1>kauft.es</h1>
<h2>kauft.es/<span id="caption"></span><span id="cursor">|</span></h2>
<h3>not just another random webshop.</h3>
<button data-toggle="modal" data-target="#exampleModal" class="btn green">Den Laden betreten</button>
<button data-toggle="modal" data-target="#exampleModal" class="btn green">Den Laden
betreten</button>
</div>
</div>
</div>
<div class="container" style="display: none;" id="shoplanding_wrapper">
<h1>Der Laden <sup>(TM)</sup></h1>
<h2>Produkte.</h2>
<div class="row">
<div class="col-12 col-md-6 col-lg-6">
<div class="card ribbonbox">
<div class="ribbon"><span>ausverkauft</span></div>
<img class="card-img-top productimage" src="./hut-preview.jpg">
<div class="card-body">
<b>Der Hut - Modell "höchste"</b>
<p class="card-text">german handarbeit. detailled print. big flex.</p>
<button class="btn green">ja ich will!</button>
</div>
</div>
</div>
</div>
</div>


+ 13
- 0
js/main.js View File

@ -1,6 +1,19 @@
import $ from 'jquery';
import bootstrap from 'bootstrap';
import { popper } from 'popper.js';
import Navigo from 'navigo';
//
var router = new Navigo(null, false, undefined);
router
.on('/laden', () => {
console.log('laden');
$(() => {
$('#landingpage_wrapper').css('display', 'none');
$('#shoplanding_wrapper').css('display', 'block');
});
})
.resolve();
//
const burger = document.querySelector('.burger');
const nav = document.querySelector('nav');


+ 12
- 1
main.scss View File

@ -110,7 +110,7 @@ h2 {
nav {
position: absolute;
height: 100%;
height: 100vh;
top: 0;
left: 0;
background: var(--green);
@ -233,3 +233,14 @@ nav[data-state="open"] ul li:nth-child(4) {
}
@import "./ribbons";
@media (max-width: 768px) {
h1 {
font-size: 3rem;
}
}
.productimage {
width: 100%;
min-height: 10rem;
}

+ 1
- 0
package.json View File

@ -15,6 +15,7 @@
"dependencies": {
"bootstrap": "^4.5.2",
"jquery": "^3.5.1",
"navigo": "^7.1.2",
"popper.js": "^1.16.1",
"sass": "^1.26.12"
}


Loading…
Cancel
Save