100 lines
6.3 KiB
HTML
100 lines
6.3 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js" type="text/javascript"></script>
|
||
|
|
<link rel="stylesheet" href="style.css">
|
||
|
|
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
||
|
|
|
||
|
|
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
||
|
|
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app" v-show="display">
|
||
|
|
<div class="overlay"></div>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="title">
|
||
|
|
<img src="./img/icon.png" alt="" />
|
||
|
|
BIL
|
||
|
|
<span>VASK</span>
|
||
|
|
</div>
|
||
|
|
<div class="slider">
|
||
|
|
<div class="controller">
|
||
|
|
<div class="arrows">
|
||
|
|
<div class="arrow left" onclick="onLeftClick()">
|
||
|
|
<ion-icon name="chevron-back-outline"></ion-icon>
|
||
|
|
</div>
|
||
|
|
<div class="arrow right" onclick="onRightClick()">
|
||
|
|
<ion-icon name="chevron-forward-outline"></ion-icon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="button" @click="select()">
|
||
|
|
<span>KØB</span>
|
||
|
|
<img src="./img/vector1.png" alt="" class="vector1" />
|
||
|
|
<img src="./img/vector2.png" alt="" class="vector2" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="slider-inner">
|
||
|
|
<div class="package" data-value="1">
|
||
|
|
<img src="./img/basic.png" alt="" class="bg" />
|
||
|
|
<img src="./img/vector3.png" alt="" class="vector3" />
|
||
|
|
<img src="./img/vector4.png" alt="" class="vector4" />
|
||
|
|
<div class="wave"></div>
|
||
|
|
<div class="title">- BASIS -</div>
|
||
|
|
<div class="price">PRIS: <span>1000,-</span></div>
|
||
|
|
<div class="package-description">
|
||
|
|
<span>BASIS</span>
|
||
|
|
Du har ikke mange penge, hva'? Bare rolig, vi har en pakke til dig.
|
||
|
|
Du kan få en hurtig vask, uden at vi bruger nogle produkter.
|
||
|
|
</div>
|
||
|
|
<div class="package-percentage">50%</div>
|
||
|
|
</div>
|
||
|
|
<div class="package active" data-value="2">
|
||
|
|
<img src="./img/premium.png" alt="" class="bg" />
|
||
|
|
<img src="./img/vector3.png" alt="" class="vector3" />
|
||
|
|
<img src="./img/vector4.png" alt="" class="vector4" />
|
||
|
|
<div class="wave"></div>
|
||
|
|
<div class="title">- STANDARD -</div>
|
||
|
|
<div class="price">PRIS: <span>2000,-</span></div>
|
||
|
|
<div class="package-description">
|
||
|
|
<span>STANDARD</span>
|
||
|
|
Hvis du har lidt flere penge, så kan du få en lidt bedre vask.
|
||
|
|
Hurtig vask med enkelte produkter og en klud.
|
||
|
|
</div>
|
||
|
|
<div class="package-percentage">75%</div>
|
||
|
|
</div>
|
||
|
|
<div class="package" data-value="3">
|
||
|
|
<img src="./img/standard.png" alt="" class="bg" />
|
||
|
|
<img src="./img/vector3.png" alt="" class="vector3" />
|
||
|
|
<img src="./img/vector4.png" alt="" class="vector4" />
|
||
|
|
<div class="wave"></div>
|
||
|
|
<div class="title">- PREMIUM -</div>
|
||
|
|
<div class="price">PRIS: <span>3500,-</span></div>
|
||
|
|
<div class="package-description">
|
||
|
|
<span>PREMIUM</span>
|
||
|
|
Beskidt køretøj? Ingen problemer, vi har en pakke til dig.
|
||
|
|
Vi bruger alle vores produkter og giver den en ordentlig omgang.
|
||
|
|
</div>
|
||
|
|
<div class="package-percentage">100%</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="footer">
|
||
|
|
<div class="top">
|
||
|
|
<div class="left">
|
||
|
|
<span class="percentage">100%</span> REN
|
||
|
|
</div>
|
||
|
|
<div class="title">INFORMATION</div>
|
||
|
|
</div>
|
||
|
|
<div class="description"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script src="script.js" defer></script>
|
||
|
|
</body>
|
||
|
|
</html>
|