Virtual Reality

1\begin{table}[ht]
2    \centering
3    \setlength{\tabcolsep}{2pt}
4    \renewcommand{\arraystretch}{1.5}
5    \begin{tabular}{|p{0.15\textwidth}>{\centering}p{0.15\textwidth}>{\centering}p{0.15\textwidth}>{\centering}p{0.15\textwidth}>{\centering}p{0.15\textwidth}p{0.15\textwidth}|}
6        \hline
7         & \textbf{Virtual Reality Experience} & \textbf{First Person Experience} & \textbf{Multimedia Presentation Experience} & \multicolumn{2}{c|}{\textbf{Full sample}} \\ 
8         \hline
9         & \textit{n} & \textit{n} & \textit{n} & \textit{n} & \textit{\%} \\
10         \hline
11         \textbf{Gender} &&&&& \\
12         Female & 12 & 10 & 18 & 40 & 52.6 \\
13         Male & 10 & 13 & 13 & 36 & 47.4 \\
14         \hline
15         \textbf{Educational level} &&&&& \\
16         High School & 8 & 5 & 6 & 19 & 25.0 \\
17         Bachelor's Degree & 13 & 9 & 19 & 41 & 53.9 \\
18         Master's Degree & 1 & 8 & 6 & 15 & 19.7 \\
19         PhD & 0 & 1 & 0 & 1 & 1.3 \\
20         \hline \hline
21         \textbf{Age} &&&&& \\
22         Mean & 23.6 & 24.6 & 24 & \multicolumn{2}{c|}{24.1} \\
23         Median & 23.6 & 24.6 & 24 & \multicolumn{2}{c|}{24.1} \\
24         \hline
25    \end{tabular}
26    \caption{Participants demographic information}
27    \label{tab:demographic}
28\end{table}
29\documentclass{article}
30
31\usepackage{array}
32
33\begin{document}
34
35\begin{table}[ht]
36    \centering
37    \setlength{\tabcolsep}{2pt}
38    \renewcommand{\arraystretch}{1.5}
39    \begin{tabular}{
40      |
41      p{0.15\textwidth}
42      >{\centering}p{0.15\textwidth}
43      >{\centering}p{0.15\textwidth}
44      >{\centering}p{0.15\textwidth}
45      >{\centering}p{0.15\textwidth}
46      >{\centering\arraybackslash}p{0.15\textwidth}
47      |
48    }
49        \hline
50         & \textbf{Virtual Reality Experience} & \textbf{First Person Experience} & \textbf{Multimedia Presentation Experience} & \multicolumn{2}{c|}{\textbf{Full sample}} \\ 
51         \hline
52         & \textit{n} & \textit{n} & \textit{n} & \textit{n} & \textit{\%} \\
53         \hline
54         \textbf{Gender} &&&&& \\
55         Female & 12 & 10 & 18 & 40 & 52.6 \\
56         Male & 10 & 13 & 13 & 36 & 47.4 \\
57         \hline
58         \textbf{Educational level} &&&&& \\
59         High School & 8 & 5 & 6 & 19 & 25.0 \\
60         Bachelor's Degree & 13 & 9 & 19 & 41 & 53.9 \\
61         Master's Degree & 1 & 8 & 6 & 15 & 19.7 \\
62         PhD & 0 & 1 & 0 & 1 & 1.3 \\
63         \hline \hline
64         \textbf{Age} &&&&& \\
65         Mean & 23.6 & 24.6 & 24 & \multicolumn{2}{c|}{24.1} \\
66         Median & 23.6 & 24.6 & 24 & \multicolumn{2}{c|}{24.1} \\
67         \hline
68    \end{tabular}
69    \caption{Participants demographic information}
70    \label{tab:demographic}
71\end{table}
72
73
74\end{document}
75

1let items = [{
2  "id": 1,
3  "name": "item 1",
4  "captionTags": ["Stills", "Animation", "Virtual Reality"]
5},
6{
7  "id": 2,
8  "name": "item 2",
9  "captionTags": ["Configurator", "Animation", "Application"]
10},
11{
12  "id": 3,
13  "name": "item 3",
14  "captionTags": ["Stills", "Configurator"]
15}];
16
17function displayItems() {
18  let itemsContainer = document.querySelector('.items-container');
19  itemsContainer.innerHTML = '';
20  items.forEach(item => {
21
22    itemsContainer.innerHTML += `
23        <div class="items-wrapper">
24        <div class="item-caption">
25            <span class="item-caption-col">
26                <h3>${item.name}</h3>
27                <span class="item-caption-tags">
28                I WANT TO DISPLAY HERE EACH ELEMENT OF CAPTION TAGS ARRAY IN EACH OBJECT 
29               AS SPANS 
30                </span>
31            </span>
32        </div>
33    </div>`
34  });
35};
36
37
38displayItems();
39let items = [{
40        "id": 1,
41        "name": "item 1",
42        "captionTags": ["Stills", "Animation", "Virtual Reality"]
43    },
44    {
45        "id": 2,
46        "name": "item 2",
47        "captionTags": ["Configurator", "Animation", "Application"]
48    },
49    {
50        "id": 3,
51        "name": "item 3",
52        "captionTags": ["Stills", "Configurator"]
53    }];
54
55function displayItems() {
56    let itemsContainer = document.querySelector('.items-container');
57    itemsContainer.innerHTML = '';
58    items.forEach(item => {
59
60        itemsContainer.innerHTML += `
61        <div class="items-wrapper">
62        <div class="item-caption">
63            <span class="item-caption-col">
64                <h3>${item.name}</h3>
65                `;
66                item.captionTags.forEach(tag => {
67                  itemsContainer.innerHTML +=`<span class="item-caption-tags"> ${tag} </span>`
68                })
69               itemsContainer.innerHTML +=`
70            </span>
71        </div>
72    </div>`
73    });
74};
75
76
77displayItems();

1let items = [{
2  "id": 1,
3  "name": "item 1",
4  "captionTags": ["Stills", "Animation", "Virtual Reality"]
5},
6{
7  "id": 2,
8  "name": "item 2",
9  "captionTags": ["Configurator", "Animation", "Application"]
10},
11{
12  "id": 3,
13  "name": "item 3",
14  "captionTags": ["Stills", "Configurator"]
15}];
16
17function displayItems() {
18  let itemsContainer = document.querySelector('.items-container');
19  itemsContainer.innerHTML = '';
20  items.forEach(item => {
21
22    itemsContainer.innerHTML += `
23        <div class="items-wrapper">
24        <div class="item-caption">
25            <span class="item-caption-col">
26                <h3>${item.name}</h3>
27                <span class="item-caption-tags">
28                I WANT TO DISPLAY HERE EACH ELEMENT OF CAPTION TAGS ARRAY IN EACH OBJECT 
29               AS SPANS 
30                </span>
31            </span>
32        </div>
33    </div>`
34  });
35};
36
37
38displayItems();
39let items = [{
40        "id": 1,
41        "name": "item 1",
42        "captionTags": ["Stills", "Animation", "Virtual Reality"]
43    },
44    {
45        "id": 2,
46        "name": "item 2",
47        "captionTags": ["Configurator", "Animation", "Application"]
48    },
49    {
50        "id": 3,
51        "name": "item 3",
52        "captionTags": ["Stills", "Configurator"]
53    }];
54
55function displayItems() {
56    let itemsContainer = document.querySelector('.items-container');
57    itemsContainer.innerHTML = '';
58    items.forEach(item => {
59
60        itemsContainer.innerHTML += `
61        <div class="items-wrapper">
62        <div class="item-caption">
63            <span class="item-caption-col">
64                <h3>${item.name}</h3>
65                `;
66                item.captionTags.forEach(tag => {
67                  itemsContainer.innerHTML +=`<span class="item-caption-tags"> ${tag} </span>`
68                })
69               itemsContainer.innerHTML +=`
70            </span>
71        </div>
72    </div>`
73    });
74};
75
76
77displayItems();span.item-caption-tags {
78  border: 1px solid black
79}

1let items = [{
2  "id": 1,
3  "name": "item 1",
4  "captionTags": ["Stills", "Animation", "Virtual Reality"]
5},
6{
7  "id": 2,
8  "name": "item 2",
9  "captionTags": ["Configurator", "Animation", "Application"]
10},
11{
12  "id": 3,
13  "name": "item 3",
14  "captionTags": ["Stills", "Configurator"]
15}];
16
17function displayItems() {
18  let itemsContainer = document.querySelector('.items-container');
19  itemsContainer.innerHTML = '';
20  items.forEach(item => {
21
22    itemsContainer.innerHTML += `
23        <div class="items-wrapper">
24        <div class="item-caption">
25            <span class="item-caption-col">
26                <h3>${item.name}</h3>
27                <span class="item-caption-tags">
28                I WANT TO DISPLAY HERE EACH ELEMENT OF CAPTION TAGS ARRAY IN EACH OBJECT 
29               AS SPANS 
30                </span>
31            </span>
32        </div>
33    </div>`
34  });
35};
36
37
38displayItems();
39let items = [{
40        "id": 1,
41        "name": "item 1",
42        "captionTags": ["Stills", "Animation", "Virtual Reality"]
43    },
44    {
45        "id": 2,
46        "name": "item 2",
47        "captionTags": ["Configurator", "Animation", "Application"]
48    },
49    {
50        "id": 3,
51        "name": "item 3",
52        "captionTags": ["Stills", "Configurator"]
53    }];
54
55function displayItems() {
56    let itemsContainer = document.querySelector('.items-container');
57    itemsContainer.innerHTML = '';
58    items.forEach(item => {
59
60        itemsContainer.innerHTML += `
61        <div class="items-wrapper">
62        <div class="item-caption">
63            <span class="item-caption-col">
64                <h3>${item.name}</h3>
65                `;
66                item.captionTags.forEach(tag => {
67                  itemsContainer.innerHTML +=`<span class="item-caption-tags"> ${tag} </span>`
68                })
69               itemsContainer.innerHTML +=`
70            </span>
71        </div>
72    </div>`
73    });
74};
75
76
77displayItems();span.item-caption-tags {
78  border: 1px solid black
79}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
80<div class="items-container" > </div>

1df = df2.withColumn("extracted", F.regexp_extract("title", "[Pp]ython", 0))
2title
3A fast PostgreSQL client library for Python: 3x faster than psycopg2
4A project template for data science in Python
5A simple python framework to build/train LUIS models
6An Introduction to Stock Market Data Analysis with Python (Part 1)
7Asynchronous Python
8Cubr  A Rubiks Cube Solver Written in Python and using Webcam Input (2013)
9Python 4 Kids: Python for Kids: Python 3  Project 10
10title
11Python Core Development Sprint 2016: 3.6 and beyond
12Hypothesis.works articles: 3.5.0 and 3.5.1 Releases of Hypothesis for Python
13Total pip packages downloaded, separated by Python versions (June  August 2016)
14PEP 530: Asynchronous Comprehensions in Python 3.6
15Python 2.7 still reigns supreme in pip installs
16CheckiO  games for Python and JavaScript coders. ClassRoom support is included
17VR Zero, Virtual Reality on the RaspberryPi, in Python
18  (1,"Python Core Development Sprint 2016: 3.6 and beyond"),
19  (2,"Hypothesis.works articles: 3.5.0 and 3.5.1 Releases of Hypothesis for Python"),
20  (3,"CheckiO  games for python and JavaScript coders. ClassRoom support is included")
21  ]
22df=spark.createDataFrame(data, ['id','title'])
23df.show(truncate=False)
24

1df = df2.withColumn("extracted", F.regexp_extract("title", "[Pp]ython", 0))
2title
3A fast PostgreSQL client library for Python: 3x faster than psycopg2
4A project template for data science in Python
5A simple python framework to build/train LUIS models
6An Introduction to Stock Market Data Analysis with Python (Part 1)
7Asynchronous Python
8Cubr  A Rubiks Cube Solver Written in Python and using Webcam Input (2013)
9Python 4 Kids: Python for Kids: Python 3  Project 10
10title
11Python Core Development Sprint 2016: 3.6 and beyond
12Hypothesis.works articles: 3.5.0 and 3.5.1 Releases of Hypothesis for Python
13Total pip packages downloaded, separated by Python versions (June  August 2016)
14PEP 530: Asynchronous Comprehensions in Python 3.6
15Python 2.7 still reigns supreme in pip installs
16CheckiO  games for Python and JavaScript coders. ClassRoom support is included
17VR Zero, Virtual Reality on the RaspberryPi, in Python
18  (1,"Python Core Development Sprint 2016: 3.6 and beyond"),
19  (2,"Hypothesis.works articles: 3.5.0 and 3.5.1 Releases of Hypothesis for Python"),
20  (3,"CheckiO  games for python and JavaScript coders. ClassRoom support is included")
21  ]
22df=spark.createDataFrame(data, ['id','title'])
23df.show(truncate=False)
24df.withColumn('extract', F.regexp_extract(col('title'),'(?i)[P]ython',0)).show()
25

1df = df2.withColumn("extracted", F.regexp_extract("title", "[Pp]ython", 0))
2title
3A fast PostgreSQL client library for Python: 3x faster than psycopg2
4A project template for data science in Python
5A simple python framework to build/train LUIS models
6An Introduction to Stock Market Data Analysis with Python (Part 1)
7Asynchronous Python
8Cubr  A Rubiks Cube Solver Written in Python and using Webcam Input (2013)
9Python 4 Kids: Python for Kids: Python 3  Project 10
10title
11Python Core Development Sprint 2016: 3.6 and beyond
12Hypothesis.works articles: 3.5.0 and 3.5.1 Releases of Hypothesis for Python
13Total pip packages downloaded, separated by Python versions (June  August 2016)
14PEP 530: Asynchronous Comprehensions in Python 3.6
15Python 2.7 still reigns supreme in pip installs
16CheckiO  games for Python and JavaScript coders. ClassRoom support is included
17VR Zero, Virtual Reality on the RaspberryPi, in Python
18  (1,"Python Core Development Sprint 2016: 3.6 and beyond"),
19  (2,"Hypothesis.works articles: 3.5.0 and 3.5.1 Releases of Hypothesis for Python"),
20  (3,"CheckiO  games for python and JavaScript coders. ClassRoom support is included")
21  ]
22df=spark.createDataFrame(data, ['id','title'])
23df.show(truncate=False)
24df.withColumn('extract', F.regexp_extract(col('title'),'(?i)[P]ython',0)).show()
25+---+--------------------+-------+
26| id|               title|extract|
27+---+--------------------+-------+
28|  1|Python Core Devel...| Python|
29|  2|Hypothesis.works ...| Python|
30|  3|CheckiO  games fo...| python|
31+---+--------------------+-------+
32

1<!doctype html>
2<html lang="de">
3    <head>
4        <title>VR</title>
5        <!-- Required meta tags -->
6        <meta charset="utf-8">
7        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8
9        <!-- Bootstrap CSS -->
10        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
11        <link rel="stylesheet" href="style.css">
12    </head>
13    <body>
14        <nav id="colorlib-main-nav" role="navigation">
15            <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle active"><i></i></a>
16            <div class="js-fullheight colorlib-table">
17                <div class="img" style="background-image: url(images/bg_3.jpg);"></div>
18                <div class="colorlib-table-cell js-fullheight">
19                <div class="row no-gutters">
20                    <div class="col-md-12 text-center">
21                    <h1 class="mb-4"><a href="index.html" class="logo">Company Logo</a></h1>
22                    <ul>
23                        <li class="active"><a href="index.html"><span>Home</span></a></li>
24                        <li><a href="about.html"><span>About</span></a></li>
25                        <li><a href="blog.html"><span>Blog</span></a></li>
26                        <li><a href="contact.html"><span>Contact</span></a></li>
27                    </ul>
28                    </div>
29                </div>
30                </div>
31            </div>
32        </nav>
33
34        <div class="header h-100">
35            <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle"><i></i></a>
36            <h1 id="h-100" class="introduction h-100">Virtual Reality</h1>
37            
38        </div>
39
40        <div class="h-100">
41            <h2 class="center">Was ist Virtual Reality (VR)</h2>
42            <p class="center">Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann</p>
43        </div>
44        
45
46        <div id="vr-headset-kategorien" class="">
47            <!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right-->
48            <div id="standalone" class="row">
49                <!---->
50                <div class="vr-left_side container col-lg-6">
51                    <div class="sketchfab-embed-wrapper"> <iframe title="Quest 2 Headset - FanArt" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Quest 2 Headset - FanArt </a> by <a href="https://sketchfab.com/josevillotguisan?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> joseVG </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
52                </div>
53                
54                <div class="vr-right_side container col-lg-6">
55                    <h3>Standalone</h3>
56                
57                    <p>Standalone VR-Headsets benötigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super für Anfänger geeignet</p>
58
59                    <p>
60                    Vorteile:<br />
61                    Kein guter PC benötigt<br />
62                    Niedriger Einstiegspreis trotz guter Hardware<br/>
63                    Gut optimierbar, da es für das Heaset nur einen Prozessor gibt</p>
64                    
65                    <p>Nachteile:<br />
66                    Je nach Headset schlechte Performance bei fordernden Spielen</p>
67                </div>
68                
69            </div>
70
71            <div id="pc" class="row">
72                <div class="vr-left_side container col-lg-6">
73                    <div class="sketchfab-embed-wrapper"> <iframe title="HTC Vive" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> HTC Vive </a> by <a href="https://sketchfab.com/EternalRealm?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Eternal Realm </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
74                </div>
75                
76                <div class="vr-right_side container col-lg-6">
77                    <h3>PC-VR</h3>
78                    <p>PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden über ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem schönes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie vor allem für Enthusiasten geeignet</p>
79
80                    <p>Vorteile:<br />
81                    Hohe Auflösung<br />
82                    Wenig Lags</p>
83
84                    <p>Nachteile:<br />
85                    Hoher Einstiegspreis</p>
86                </div>
87            </div>
88
89            <div id="fulldive" class="row">
90                <div class="vr-left_side container col-lg-6">
91                    <div class="sketchfab-embed-wrapper"> <iframe title="neuraLink" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&autostart=1"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> neuraLink </a> by <a href="https://sketchfab.com/rfarencibia?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> rfarencibia </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
92                </div>
93                
94                <div class="vr-right_side container col-lg-6">
95                    <h3>Full-Dive VR</h3>
96                    <p>Tauche komplett in die VR-Welt ein. Full-Dive VR-Headsets befinden sich bereits in Entwicklung. Bei diesem Ansatz wird keine VR-Brille verwendet, die wie ein Monitor funktioniert sondern Full-Dive VR-Headsets greifen direkt auf die Seh-, Tast-, und weitere Nerven zu. Daher ist dies auch die umstrittenste Technologie</p>
97
98                    <p>Vorteile:<br />
99                    Unvergleichliche Immersion</p>
100
101                    <p>Nachteile:<br />
102                    Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber möglich</p>
103                </div>
104            </div>
105
106        </div>
107
108        
109
110      
111        <!-- Optional JavaScript -->
112        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
113        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
114        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
115        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
116        <script>
117            (function($) {
118
119            "use strict";
120
121            var fullHeight = function() {
122
123                $('.js-fullheight').css('height', $(window).height());
124                $(window).resize(function(){
125                    $('.js-fullheight').css('height', $(window).height());
126                });
127
128            };
129            fullHeight();
130
131            var burgerMenu = function() {
132
133                $('.js-colorlib-nav-toggle').on('click', function(event) {
134                    event.preventDefault();
135                    var $this = $(this);
136                    if( $('body').hasClass('menu-show') ) {
137                        $('body').removeClass('menu-show');
138                        $('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
139                    } else {
140                        $('body').addClass('menu-show');
141                        setTimeout(function(){
142                            $('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
143                        }, 900);
144                    }
145                })
146            };
147            burgerMenu();
148
149
150            })(jQuery);
151        </script>
152    </body>
153</html>
154html, body {
155    background-color: black;
156
157    color: white;
158    height: 100%;
159    min-height: 100%;
160
161}
162
163#h-100{
164    /*height: 100%;
165    min-height: 100%;*/
166
167    /*padding-top: 30%;
168    padding-bottom: 30%;*/
169
170    text-align: center;
171}
172
173.introduction {
174    background-image: url("beat-saber-intro.jpg");
175    background-repeat: no-repeat;
176    background-attachment: fixed;
177    background-position: center;
178    background-size: cover;
179}
180
181.row{
182    padding-bottom: 10%;
183}
184
185.sketchfab-embed-wrapper{
186    height: 100%;
187    margin-bottom: 200px;
188}
189
190iframe{
191    height: 100%;
192    width: 100%;
193}
194
195header {
196    height: 100%;
197    min-height: 100%;
198}
199
200.center{
201    text-align: center;
202}
203
204/* Menu*/
205.img {
206    background-size: cover;
207    background-repeat: no-repeat;
208    background-position: center center; }
209  
210  #colorlib-main-nav {
211    position: absolute;
212    top: 0;
213    bottom: 0;
214    right: 0;
215    padding: 0;
216    width: 100%;
217    height: 100%;
218    background: rgba(0, 0, 0, 0.99);
219    z-index: 1002;
220    text-align: center;
221    visibility: hidden;
222    opacity: 0;
223    -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
224    -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
225    -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
226    -o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
227    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
228    -webkit-transform: scale(0.1);
229    -moz-transform: scale(0);
230    -ms-transform: scale(0);
231    -o-transform: scale(0);
232    transform: scale(0);
233    overflow-y: scroll; }
234    #colorlib-main-nav .colorlib-table {
235      display: table;
236      width: 100%;
237      height: 100%; }
238      #colorlib-main-nav .colorlib-table .img {
239        position: absolute;
240        top: 0;
241        left: 0;
242        bottom: 0;
243        height: 100%;
244        width: 100%;
245        opacity: 1; }
246        #colorlib-main-nav .colorlib-table .img:after {
247          position: absolute;
248          top: 0;
249          left: 0;
250          bottom: 0;
251          right: 0;
252          content: '';
253          background: rgba(0, 0, 0, 0.3); }
254      #colorlib-main-nav .colorlib-table .colorlib-table-cell {
255        display: table-cell;
256        vertical-align: middle; }
257    #colorlib-main-nav .colorlib-nav-toggle {
258      position: absolute;
259      top: 40px;
260      right: 40px;
261      padding: 20px;
262      height: 44px;
263      width: 44px;
264      line-height: 0;
265      padding: 0 !important;
266      visibility: hidden;
267      opacity: 0;
268      -webkit-transition: 0.3s;
269      -o-transition: 0.3s;
270      transition: 0.3s; }
271      @media (prefers-reduced-motion: reduce) {
272        #colorlib-main-nav .colorlib-nav-toggle {
273          -webkit-transition: none;
274          -o-transition: none;
275          transition: none; } }
276      #colorlib-main-nav .colorlib-nav-toggle i {
277        top: 18px !important;
278        left: 0 !important;
279        margin: 0 !important;
280        padding: 0 !important;
281        line-height: 0;
282        text-indent: 0; }
283      #colorlib-main-nav .colorlib-nav-toggle.show {
284        visibility: visible;
285        opacity: 1; }
286      #colorlib-main-nav .colorlib-nav-toggle:hover i::before, #colorlib-main-nav .colorlib-nav-toggle:hover i::after {
287        content: '';
288        width: 40px;
289        height: 2px;
290        background: #fff;
291        position: absolute;
292        left: 0; }
293    .menu-show #colorlib-main-nav {
294      visibility: visible;
295      opacity: 1;
296      -webkit-transform: scale(1);
297      -moz-transform: scale(1);
298      -ms-transform: scale(1);
299      -o-transform: scale(1);
300      transform: scale(1); }
301    #colorlib-main-nav .logo {
302      font-size: 40px;
303      color: #fff;
304      text-transform: uppercase;
305      letter-spacing: 2px;
306      font-weight: 700;
307      position: relative;
308      display: inline-block;
309      margin-bottom: 0;
310      line-height: 1.5;
311      font-family: "Poppins", Arial, sans-serif; }
312      #colorlib-main-nav .logo span {
313        font-size: 14px;
314        display: block;
315        font-weight: 300;
316        color: rgba(255, 255, 255, 0.8);
317        letter-spacing: 8px; }
318    #colorlib-main-nav ul {
319      padding: 0;
320      margin: 0;
321      display: block; }
322      @media (max-width: 767.98px) {
323        #colorlib-main-nav ul {
324          padding: 20px 0 0 0; } }
325      #colorlib-main-nav ul li {
326        padding: 0;
327        margin: 0;
328        list-style: none;
329        font-weight: 600;
330        font-size: 14px;
331        letter-spacing: 5px;
332        text-transform: uppercase; }
333        #colorlib-main-nav ul li a {
334          display: block;
335          color: white;
336          padding: 5px 0; }
337          #colorlib-main-nav ul li a span {
338            color: white;
339            position: relative;
340            padding: 0 10px; }
341            #colorlib-main-nav ul li a span small {
342              position: absolute;
343              bottom: 7px;
344              left: -30px;
345              font-size: 16px;
346              color: rgba(255, 255, 255, 0.3);
347              border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
348          #colorlib-main-nav ul li a:hover, #colorlib-main-nav ul li a:active, #colorlib-main-nav ul li a:focus {
349            outline: none;
350            text-decoration: none; }
351            #colorlib-main-nav ul li a:hover span:before, #colorlib-main-nav ul li a:active span:before, #colorlib-main-nav ul li a:focus span:before {
352              visibility: visible;
353              -webkit-transform: scaleX(1);
354              -moz-transform: scaleX(1);
355              -ms-transform: scaleX(1);
356              -o-transform: scaleX(1);
357              transform: scaleX(1); }
358        #colorlib-main-nav ul li.active a span {
359          color: #f8b500; }
360          #colorlib-main-nav ul li.active a span:before {
361            background: #fec771;
362            visibility: visible;
363            -webkit-transform: scaleX(1);
364            -moz-transform: scaleX(1);
365            -ms-transform: scaleX(1);
366            -o-transform: scaleX(1);
367            transform: scaleX(1); }
368  
369  header {
370    padding: 2em 0;
371    position: absolute;
372    top: 0;
373    left: 0;
374    right: 0;
375    z-index: 9;
376    margin: 0 auto; }
377    @media (max-width: 767.98px) {
378      header {
379        padding: 1em 0;
380        position: absolute; } }
381    header .colorlib-navbar-brand {
382      float: left; }
383      header .colorlib-navbar-brand .colorlib-logo {
384        font-size: 12px;
385        color: #fff;
386        letter-spacing: 5px;
387        font-weight: 600;
388        position: relative;
389        display: inline-block;
390        margin-bottom: 0;
391        line-height: 1.5;
392        font-family: "Poppins", Arial, sans-serif;
393        text-transform: uppercase; }
394        header .colorlib-navbar-brand .colorlib-logo span {
395          font-size: 11px;
396          display: block;
397          font-weight: 300;
398          color: rgba(255, 255, 255, 0.8);
399          letter-spacing: 7px; }
400        header .colorlib-navbar-brand .colorlib-logo i {
401          color: #fec771;
402          position: absolute;
403          top: -18px;
404          bottom: 0;
405          left: 7px;
406          font-size: 48px; }
407        header .colorlib-navbar-brand .colorlib-logo:hover {
408          text-decoration: none !important; }
409        header .colorlib-navbar-brand .colorlib-logo:active, header .colorlib-navbar-brand .colorlib-logo:focus {
410          outline: none;
411          text-decoration: none; }
412  
413  .colorlib-nav-toggle {
414    cursor: pointer;
415    text-decoration: none; }
416    .colorlib-nav-toggle.active i::before, .colorlib-nav-toggle.active i::after {
417      background: #000; }
418    .colorlib-nav-toggle.dark.active i::before, .colorlib-nav-toggle.dark.active i::after {
419      background: #000; }
420    .colorlib-nav-toggle:hover, .colorlib-nav-toggle:focus, .colorlib-nav-toggle:active {
421      outline: none;
422      border-bottom: none !important; }
423    .colorlib-nav-toggle i {
424      position: relative;
425      display: inline-block;
426      width: 20px;
427      height: 2px;
428      color: #000;
429      font: bold 14px/.4 Helvetica;
430      text-transform: uppercase;
431      text-indent: -55px;
432      background: #fff;
433      -webkit-transition: all .2s ease-out;
434      -o-transition: all .2s ease-out;
435      transition: all .2s ease-out; }
436      .menu-show .colorlib-nav-toggle i {
437        background: #fff;
438        color: #fff; }
439      .colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
440        content: '';
441        width: 30px;
442        height: 2px;
443        background: #fff;
444        position: absolute;
445        left: 0;
446        -webkit-transition: 0.2s;
447        -o-transition: 0.2s;
448        transition: 0.2s; }
449        .menu-show .colorlib-nav-toggle i::before, .menu-show .colorlib-nav-toggle i::after {
450          background: #fff; }
451        @media (prefers-reduced-motion: reduce) {
452          .colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
453            -webkit-transition: none;
454            -o-transition: none;
455            transition: none; } }
456    .colorlib-nav-toggle.dark i {
457      position: relative;
458      color: #fff;
459      background: #fff;
460      -webkit-transition: all .2s ease-out;
461      -o-transition: all .2s ease-out;
462      transition: all .2s ease-out; }
463      .colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
464        background: #fff;
465        -webkit-transition: 0.2s;
466        -o-transition: 0.2s;
467        transition: 0.2s; }
468        @media (prefers-reduced-motion: reduce) {
469          .colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
470            -webkit-transition: none;
471            -o-transition: none;
472            transition: none; } }
473  
474  .colorlib-nav-toggle i::before {
475    top: -7px; }
476  
477  .colorlib-nav-toggle i::after {
478    bottom: -7px; }
479  
480  .colorlib-nav-toggle:hover i::before {
481    top: -10px; }
482  
483  .colorlib-nav-toggle:hover i::after {
484    bottom: -10px; }
485  
486  .colorlib-nav-toggle.active i {
487    background: transparent; }
488  
489  .colorlib-nav-toggle.active i::before {
490    top: 0;
491    -webkit-transform: rotateZ(45deg);
492    -moz-transform: rotateZ(45deg);
493    -ms-transform: rotateZ(45deg);
494    -o-transform: rotateZ(45deg);
495    transform: rotateZ(45deg); }
496  
497  .colorlib-nav-toggle.active i::after {
498    bottom: 0;
499    -webkit-transform: rotateZ(-45deg);
500    -moz-transform: rotateZ(-45deg);
501    -ms-transform: rotateZ(-45deg);
502    -o-transform: rotateZ(-45deg);
503    transform: rotateZ(-45deg); }
504  
505  .colorlib-nav-toggle {
506    float: right;
507    z-index: 1003;
508    position: relative;
509    top: 0;
510    right: 0;
511    display: block;
512    margin: 0 auto;
513    cursor: pointer;
514    margin-top: 0; }
515    @media (max-width: 767.98px) {
516      .colorlib-nav-toggle {
517        right: 10px; } }
518  
519  .hero-wrap {
520    background: #202020; }
521    .hero-wrap .slider-text .desc h1 {
522      font-size: 6vw;
523      font-weight: 700;
524      color: #fff;
525      text-transform: uppercase; }
526    .hero-wrap .slider-text .desc h3 {
527      color: rgba(255, 255, 255, 0.8);
528      font-size: 18px; }
529.row {
530  display: -ms-flexbox;
531  display: flex;
532  -ms-flex-wrap: wrap;
533  flex-wrap: wrap;
534  /* margin-right: -15px; */
535  /* margin-left: -15px; */
536}
537

1<!doctype html>
2<html lang="de">
3    <head>
4        <title>VR</title>
5        <!-- Required meta tags -->
6        <meta charset="utf-8">
7        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8
9        <!-- Bootstrap CSS -->
10        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
11        <link rel="stylesheet" href="style.css">
12    </head>
13    <body>
14        <nav id="colorlib-main-nav" role="navigation">
15            <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle active"><i></i></a>
16            <div class="js-fullheight colorlib-table">
17                <div class="img" style="background-image: url(images/bg_3.jpg);"></div>
18                <div class="colorlib-table-cell js-fullheight">
19                <div class="row no-gutters">
20                    <div class="col-md-12 text-center">
21                    <h1 class="mb-4"><a href="index.html" class="logo">Company Logo</a></h1>
22                    <ul>
23                        <li class="active"><a href="index.html"><span>Home</span></a></li>
24                        <li><a href="about.html"><span>About</span></a></li>
25                        <li><a href="blog.html"><span>Blog</span></a></li>
26                        <li><a href="contact.html"><span>Contact</span></a></li>
27                    </ul>
28                    </div>
29                </div>
30                </div>
31            </div>
32        </nav>
33
34        <div class="header h-100">
35            <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle"><i></i></a>
36            <h1 id="h-100" class="introduction h-100">Virtual Reality</h1>
37            
38        </div>
39
40        <div class="h-100">
41            <h2 class="center">Was ist Virtual Reality (VR)</h2>
42            <p class="center">Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann</p>
43        </div>
44        
45
46        <div id="vr-headset-kategorien" class="">
47            <!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right-->
48            <div id="standalone" class="row">
49                <!---->
50                <div class="vr-left_side container col-lg-6">
51                    <div class="sketchfab-embed-wrapper"> <iframe title="Quest 2 Headset - FanArt" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Quest 2 Headset - FanArt </a> by <a href="https://sketchfab.com/josevillotguisan?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> joseVG </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
52                </div>
53                
54                <div class="vr-right_side container col-lg-6">
55                    <h3>Standalone</h3>
56                
57                    <p>Standalone VR-Headsets benötigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super für Anfänger geeignet</p>
58
59                    <p>
60                    Vorteile:<br />
61                    Kein guter PC benötigt<br />
62                    Niedriger Einstiegspreis trotz guter Hardware<br/>
63                    Gut optimierbar, da es für das Heaset nur einen Prozessor gibt</p>
64                    
65                    <p>Nachteile:<br />
66                    Je nach Headset schlechte Performance bei fordernden Spielen</p>
67                </div>
68                
69            </div>
70
71            <div id="pc" class="row">
72                <div class="vr-left_side container col-lg-6">
73                    <div class="sketchfab-embed-wrapper"> <iframe title="HTC Vive" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> HTC Vive </a> by <a href="https://sketchfab.com/EternalRealm?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Eternal Realm </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
74                </div>
75                
76                <div class="vr-right_side container col-lg-6">
77                    <h3>PC-VR</h3>
78                    <p>PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden über ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem schönes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie vor allem für Enthusiasten geeignet</p>
79
80                    <p>Vorteile:<br />
81                    Hohe Auflösung<br />
82                    Wenig Lags</p>
83
84                    <p>Nachteile:<br />
85                    Hoher Einstiegspreis</p>
86                </div>
87            </div>
88
89            <div id="fulldive" class="row">
90                <div class="vr-left_side container col-lg-6">
91                    <div class="sketchfab-embed-wrapper"> <iframe title="neuraLink" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&autostart=1"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> neuraLink </a> by <a href="https://sketchfab.com/rfarencibia?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> rfarencibia </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
92                </div>
93                
94                <div class="vr-right_side container col-lg-6">
95                    <h3>Full-Dive VR</h3>
96                    <p>Tauche komplett in die VR-Welt ein. Full-Dive VR-Headsets befinden sich bereits in Entwicklung. Bei diesem Ansatz wird keine VR-Brille verwendet, die wie ein Monitor funktioniert sondern Full-Dive VR-Headsets greifen direkt auf die Seh-, Tast-, und weitere Nerven zu. Daher ist dies auch die umstrittenste Technologie</p>
97
98                    <p>Vorteile:<br />
99                    Unvergleichliche Immersion</p>
100
101                    <p>Nachteile:<br />
102                    Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber möglich</p>
103                </div>
104            </div>
105
106        </div>
107
108        
109
110      
111        <!-- Optional JavaScript -->
112        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
113        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
114        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
115        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
116        <script>
117            (function($) {
118
119            "use strict";
120
121            var fullHeight = function() {
122
123                $('.js-fullheight').css('height', $(window).height());
124                $(window).resize(function(){
125                    $('.js-fullheight').css('height', $(window).height());
126                });
127
128            };
129            fullHeight();
130
131            var burgerMenu = function() {
132
133                $('.js-colorlib-nav-toggle').on('click', function(event) {
134                    event.preventDefault();
135                    var $this = $(this);
136                    if( $('body').hasClass('menu-show') ) {
137                        $('body').removeClass('menu-show');
138                        $('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
139                    } else {
140                        $('body').addClass('menu-show');
141                        setTimeout(function(){
142                            $('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
143                        }, 900);
144                    }
145                })
146            };
147            burgerMenu();
148
149
150            })(jQuery);
151        </script>
152    </body>
153</html>
154html, body {
155    background-color: black;
156
157    color: white;
158    height: 100%;
159    min-height: 100%;
160
161}
162
163#h-100{
164    /*height: 100%;
165    min-height: 100%;*/
166
167    /*padding-top: 30%;
168    padding-bottom: 30%;*/
169
170    text-align: center;
171}
172
173.introduction {
174    background-image: url("beat-saber-intro.jpg");
175    background-repeat: no-repeat;
176    background-attachment: fixed;
177    background-position: center;
178    background-size: cover;
179}
180
181.row{
182    padding-bottom: 10%;
183}
184
185.sketchfab-embed-wrapper{
186    height: 100%;
187    margin-bottom: 200px;
188}
189
190iframe{
191    height: 100%;
192    width: 100%;
193}
194
195header {
196    height: 100%;
197    min-height: 100%;
198}
199
200.center{
201    text-align: center;
202}
203
204/* Menu*/
205.img {
206    background-size: cover;
207    background-repeat: no-repeat;
208    background-position: center center; }
209  
210  #colorlib-main-nav {
211    position: absolute;
212    top: 0;
213    bottom: 0;
214    right: 0;
215    padding: 0;
216    width: 100%;
217    height: 100%;
218    background: rgba(0, 0, 0, 0.99);
219    z-index: 1002;
220    text-align: center;
221    visibility: hidden;
222    opacity: 0;
223    -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
224    -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
225    -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
226    -o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
227    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
228    -webkit-transform: scale(0.1);
229    -moz-transform: scale(0);
230    -ms-transform: scale(0);
231    -o-transform: scale(0);
232    transform: scale(0);
233    overflow-y: scroll; }
234    #colorlib-main-nav .colorlib-table {
235      display: table;
236      width: 100%;
237      height: 100%; }
238      #colorlib-main-nav .colorlib-table .img {
239        position: absolute;
240        top: 0;
241        left: 0;
242        bottom: 0;
243        height: 100%;
244        width: 100%;
245        opacity: 1; }
246        #colorlib-main-nav .colorlib-table .img:after {
247          position: absolute;
248          top: 0;
249          left: 0;
250          bottom: 0;
251          right: 0;
252          content: '';
253          background: rgba(0, 0, 0, 0.3); }
254      #colorlib-main-nav .colorlib-table .colorlib-table-cell {
255        display: table-cell;
256        vertical-align: middle; }
257    #colorlib-main-nav .colorlib-nav-toggle {
258      position: absolute;
259      top: 40px;
260      right: 40px;
261      padding: 20px;
262      height: 44px;
263      width: 44px;
264      line-height: 0;
265      padding: 0 !important;
266      visibility: hidden;
267      opacity: 0;
268      -webkit-transition: 0.3s;
269      -o-transition: 0.3s;
270      transition: 0.3s; }
271      @media (prefers-reduced-motion: reduce) {
272        #colorlib-main-nav .colorlib-nav-toggle {
273          -webkit-transition: none;
274          -o-transition: none;
275          transition: none; } }
276      #colorlib-main-nav .colorlib-nav-toggle i {
277        top: 18px !important;
278        left: 0 !important;
279        margin: 0 !important;
280        padding: 0 !important;
281        line-height: 0;
282        text-indent: 0; }
283      #colorlib-main-nav .colorlib-nav-toggle.show {
284        visibility: visible;
285        opacity: 1; }
286      #colorlib-main-nav .colorlib-nav-toggle:hover i::before, #colorlib-main-nav .colorlib-nav-toggle:hover i::after {
287        content: '';
288        width: 40px;
289        height: 2px;
290        background: #fff;
291        position: absolute;
292        left: 0; }
293    .menu-show #colorlib-main-nav {
294      visibility: visible;
295      opacity: 1;
296      -webkit-transform: scale(1);
297      -moz-transform: scale(1);
298      -ms-transform: scale(1);
299      -o-transform: scale(1);
300      transform: scale(1); }
301    #colorlib-main-nav .logo {
302      font-size: 40px;
303      color: #fff;
304      text-transform: uppercase;
305      letter-spacing: 2px;
306      font-weight: 700;
307      position: relative;
308      display: inline-block;
309      margin-bottom: 0;
310      line-height: 1.5;
311      font-family: "Poppins", Arial, sans-serif; }
312      #colorlib-main-nav .logo span {
313        font-size: 14px;
314        display: block;
315        font-weight: 300;
316        color: rgba(255, 255, 255, 0.8);
317        letter-spacing: 8px; }
318    #colorlib-main-nav ul {
319      padding: 0;
320      margin: 0;
321      display: block; }
322      @media (max-width: 767.98px) {
323        #colorlib-main-nav ul {
324          padding: 20px 0 0 0; } }
325      #colorlib-main-nav ul li {
326        padding: 0;
327        margin: 0;
328        list-style: none;
329        font-weight: 600;
330        font-size: 14px;
331        letter-spacing: 5px;
332        text-transform: uppercase; }
333        #colorlib-main-nav ul li a {
334          display: block;
335          color: white;
336          padding: 5px 0; }
337          #colorlib-main-nav ul li a span {
338            color: white;
339            position: relative;
340            padding: 0 10px; }
341            #colorlib-main-nav ul li a span small {
342              position: absolute;
343              bottom: 7px;
344              left: -30px;
345              font-size: 16px;
346              color: rgba(255, 255, 255, 0.3);
347              border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
348          #colorlib-main-nav ul li a:hover, #colorlib-main-nav ul li a:active, #colorlib-main-nav ul li a:focus {
349            outline: none;
350            text-decoration: none; }
351            #colorlib-main-nav ul li a:hover span:before, #colorlib-main-nav ul li a:active span:before, #colorlib-main-nav ul li a:focus span:before {
352              visibility: visible;
353              -webkit-transform: scaleX(1);
354              -moz-transform: scaleX(1);
355              -ms-transform: scaleX(1);
356              -o-transform: scaleX(1);
357              transform: scaleX(1); }
358        #colorlib-main-nav ul li.active a span {
359          color: #f8b500; }
360          #colorlib-main-nav ul li.active a span:before {
361            background: #fec771;
362            visibility: visible;
363            -webkit-transform: scaleX(1);
364            -moz-transform: scaleX(1);
365            -ms-transform: scaleX(1);
366            -o-transform: scaleX(1);
367            transform: scaleX(1); }
368  
369  header {
370    padding: 2em 0;
371    position: absolute;
372    top: 0;
373    left: 0;
374    right: 0;
375    z-index: 9;
376    margin: 0 auto; }
377    @media (max-width: 767.98px) {
378      header {
379        padding: 1em 0;
380        position: absolute; } }
381    header .colorlib-navbar-brand {
382      float: left; }
383      header .colorlib-navbar-brand .colorlib-logo {
384        font-size: 12px;
385        color: #fff;
386        letter-spacing: 5px;
387        font-weight: 600;
388        position: relative;
389        display: inline-block;
390        margin-bottom: 0;
391        line-height: 1.5;
392        font-family: "Poppins", Arial, sans-serif;
393        text-transform: uppercase; }
394        header .colorlib-navbar-brand .colorlib-logo span {
395          font-size: 11px;
396          display: block;
397          font-weight: 300;
398          color: rgba(255, 255, 255, 0.8);
399          letter-spacing: 7px; }
400        header .colorlib-navbar-brand .colorlib-logo i {
401          color: #fec771;
402          position: absolute;
403          top: -18px;
404          bottom: 0;
405          left: 7px;
406          font-size: 48px; }
407        header .colorlib-navbar-brand .colorlib-logo:hover {
408          text-decoration: none !important; }
409        header .colorlib-navbar-brand .colorlib-logo:active, header .colorlib-navbar-brand .colorlib-logo:focus {
410          outline: none;
411          text-decoration: none; }
412  
413  .colorlib-nav-toggle {
414    cursor: pointer;
415    text-decoration: none; }
416    .colorlib-nav-toggle.active i::before, .colorlib-nav-toggle.active i::after {
417      background: #000; }
418    .colorlib-nav-toggle.dark.active i::before, .colorlib-nav-toggle.dark.active i::after {
419      background: #000; }
420    .colorlib-nav-toggle:hover, .colorlib-nav-toggle:focus, .colorlib-nav-toggle:active {
421      outline: none;
422      border-bottom: none !important; }
423    .colorlib-nav-toggle i {
424      position: relative;
425      display: inline-block;
426      width: 20px;
427      height: 2px;
428      color: #000;
429      font: bold 14px/.4 Helvetica;
430      text-transform: uppercase;
431      text-indent: -55px;
432      background: #fff;
433      -webkit-transition: all .2s ease-out;
434      -o-transition: all .2s ease-out;
435      transition: all .2s ease-out; }
436      .menu-show .colorlib-nav-toggle i {
437        background: #fff;
438        color: #fff; }
439      .colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
440        content: '';
441        width: 30px;
442        height: 2px;
443        background: #fff;
444        position: absolute;
445        left: 0;
446        -webkit-transition: 0.2s;
447        -o-transition: 0.2s;
448        transition: 0.2s; }
449        .menu-show .colorlib-nav-toggle i::before, .menu-show .colorlib-nav-toggle i::after {
450          background: #fff; }
451        @media (prefers-reduced-motion: reduce) {
452          .colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
453            -webkit-transition: none;
454            -o-transition: none;
455            transition: none; } }
456    .colorlib-nav-toggle.dark i {
457      position: relative;
458      color: #fff;
459      background: #fff;
460      -webkit-transition: all .2s ease-out;
461      -o-transition: all .2s ease-out;
462      transition: all .2s ease-out; }
463      .colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
464        background: #fff;
465        -webkit-transition: 0.2s;
466        -o-transition: 0.2s;
467        transition: 0.2s; }
468        @media (prefers-reduced-motion: reduce) {
469          .colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
470            -webkit-transition: none;
471            -o-transition: none;
472            transition: none; } }
473  
474  .colorlib-nav-toggle i::before {
475    top: -7px; }
476  
477  .colorlib-nav-toggle i::after {
478    bottom: -7px; }
479  
480  .colorlib-nav-toggle:hover i::before {
481    top: -10px; }
482  
483  .colorlib-nav-toggle:hover i::after {
484    bottom: -10px; }
485  
486  .colorlib-nav-toggle.active i {
487    background: transparent; }
488  
489  .colorlib-nav-toggle.active i::before {
490    top: 0;
491    -webkit-transform: rotateZ(45deg);
492    -moz-transform: rotateZ(45deg);
493    -ms-transform: rotateZ(45deg);
494    -o-transform: rotateZ(45deg);
495    transform: rotateZ(45deg); }
496  
497  .colorlib-nav-toggle.active i::after {
498    bottom: 0;
499    -webkit-transform: rotateZ(-45deg);
500    -moz-transform: rotateZ(-45deg);
501    -ms-transform: rotateZ(-45deg);
502    -o-transform: rotateZ(-45deg);
503    transform: rotateZ(-45deg); }
504  
505  .colorlib-nav-toggle {
506    float: right;
507    z-index: 1003;
508    position: relative;
509    top: 0;
510    right: 0;
511    display: block;
512    margin: 0 auto;
513    cursor: pointer;
514    margin-top: 0; }
515    @media (max-width: 767.98px) {
516      .colorlib-nav-toggle {
517        right: 10px; } }
518  
519  .hero-wrap {
520    background: #202020; }
521    .hero-wrap .slider-text .desc h1 {
522      font-size: 6vw;
523      font-weight: 700;
524      color: #fff;
525      text-transform: uppercase; }
526    .hero-wrap .slider-text .desc h3 {
527      color: rgba(255, 255, 255, 0.8);
528      font-size: 18px; }
529.row {
530  display: -ms-flexbox;
531  display: flex;
532  -ms-flex-wrap: wrap;
533  flex-wrap: wrap;
534  /* margin-right: -15px; */
535  /* margin-left: -15px; */
536}
537(function($) {
538
539  "use strict";
540
541  var fullHeight = function() {
542
543    $('.js-fullheight').css('height', $(window).height());
544    $(window).resize(function() {
545      $('.js-fullheight').css('height', $(window).height());
546    });
547
548  };
549  fullHeight();
550
551  var burgerMenu = function() {
552
553    $('.js-colorlib-nav-toggle').on('click', function(event) {
554      event.preventDefault();
555      var $this = $(this);
556      if ($('body').hasClass('menu-show')) {
557        $('body').removeClass('menu-show');
558        $('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
559      } else {
560        $('body').addClass('menu-show');
561        setTimeout(function() {
562          $('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
563        }, 900);
564      }
565    })
566  };
567  burgerMenu();
568
569
570})(jQuery);

1<!doctype html>
2<html lang="de">
3    <head>
4        <title>VR</title>
5        <!-- Required meta tags -->
6        <meta charset="utf-8">
7        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8
9        <!-- Bootstrap CSS -->
10        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
11        <link rel="stylesheet" href="style.css">
12    </head>
13    <body>
14        <nav id="colorlib-main-nav" role="navigation">
15            <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle active"><i></i></a>
16            <div class="js-fullheight colorlib-table">
17                <div class="img" style="background-image: url(images/bg_3.jpg);"></div>
18                <div class="colorlib-table-cell js-fullheight">
19                <div class="row no-gutters">
20                    <div class="col-md-12 text-center">
21                    <h1 class="mb-4"><a href="index.html" class="logo">Company Logo</a></h1>
22                    <ul>
23                        <li class="active"><a href="index.html"><span>Home</span></a></li>
24                        <li><a href="about.html"><span>About</span></a></li>
25                        <li><a href="blog.html"><span>Blog</span></a></li>
26                        <li><a href="contact.html"><span>Contact</span></a></li>
27                    </ul>
28                    </div>
29                </div>
30                </div>
31            </div>
32        </nav>
33
34        <div class="header h-100">
35            <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle"><i></i></a>
36            <h1 id="h-100" class="introduction h-100">Virtual Reality</h1>
37            
38        </div>
39
40        <div class="h-100">
41            <h2 class="center">Was ist Virtual Reality (VR)</h2>
42            <p class="center">Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann</p>
43        </div>
44        
45
46        <div id="vr-headset-kategorien" class="">
47            <!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right-->
48            <div id="standalone" class="row">
49                <!---->
50                <div class="vr-left_side container col-lg-6">
51                    <div class="sketchfab-embed-wrapper"> <iframe title="Quest 2 Headset - FanArt" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Quest 2 Headset - FanArt </a> by <a href="https://sketchfab.com/josevillotguisan?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> joseVG </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
52                </div>
53                
54                <div class="vr-right_side container col-lg-6">
55                    <h3>Standalone</h3>
56                
57                    <p>Standalone VR-Headsets benötigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super für Anfänger geeignet</p>
58
59                    <p>
60                    Vorteile:<br />
61                    Kein guter PC benötigt<br />
62                    Niedriger Einstiegspreis trotz guter Hardware<br/>
63                    Gut optimierbar, da es für das Heaset nur einen Prozessor gibt</p>
64                    
65                    <p>Nachteile:<br />
66                    Je nach Headset schlechte Performance bei fordernden Spielen</p>
67                </div>
68                
69            </div>
70
71            <div id="pc" class="row">
72                <div class="vr-left_side container col-lg-6">
73                    <div class="sketchfab-embed-wrapper"> <iframe title="HTC Vive" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> HTC Vive </a> by <a href="https://sketchfab.com/EternalRealm?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Eternal Realm </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
74                </div>
75                
76                <div class="vr-right_side container col-lg-6">
77                    <h3>PC-VR</h3>
78                    <p>PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden über ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem schönes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie vor allem für Enthusiasten geeignet</p>
79
80                    <p>Vorteile:<br />
81                    Hohe Auflösung<br />
82                    Wenig Lags</p>
83
84                    <p>Nachteile:<br />
85                    Hoher Einstiegspreis</p>
86                </div>
87            </div>
88
89            <div id="fulldive" class="row">
90                <div class="vr-left_side container col-lg-6">
91                    <div class="sketchfab-embed-wrapper"> <iframe title="neuraLink" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&autostart=1"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> neuraLink </a> by <a href="https://sketchfab.com/rfarencibia?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> rfarencibia </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
92                </div>
93                
94                <div class="vr-right_side container col-lg-6">
95                    <h3>Full-Dive VR</h3>
96                    <p>Tauche komplett in die VR-Welt ein. Full-Dive VR-Headsets befinden sich bereits in Entwicklung. Bei diesem Ansatz wird keine VR-Brille verwendet, die wie ein Monitor funktioniert sondern Full-Dive VR-Headsets greifen direkt auf die Seh-, Tast-, und weitere Nerven zu. Daher ist dies auch die umstrittenste Technologie</p>
97
98                    <p>Vorteile:<br />
99                    Unvergleichliche Immersion</p>
100
101                    <p>Nachteile:<br />
102                    Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber möglich</p>
103                </div>
104            </div>
105
106        </div>
107
108        
109
110      
111        <!-- Optional JavaScript -->
112        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
113        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
114        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
115        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
116        <script>
117            (function($) {
118
119            "use strict";
120
121            var fullHeight = function() {
122
123                $('.js-fullheight').css('height', $(window).height());
124                $(window).resize(function(){
125                    $('.js-fullheight').css('height', $(window).height());
126                });
127
128            };
129            fullHeight();
130
131            var burgerMenu = function() {
132
133                $('.js-colorlib-nav-toggle').on('click', function(event) {
134                    event.preventDefault();
135                    var $this = $(this);
136                    if( $('body').hasClass('menu-show') ) {
137                        $('body').removeClass('menu-show');
138                        $('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
139                    } else {
140                        $('body').addClass('menu-show');
141                        setTimeout(function(){
142                            $('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
143                        }, 900);
144                    }
145                })
146            };
147            burgerMenu();
148
149
150            })(jQuery);
151        </script>
152    </body>
153</html>
154html, body {
155    background-color: black;
156
157    color: white;
158    height: 100%;
159    min-height: 100%;
160
161}
162
163#h-100{
164    /*height: 100%;
165    min-height: 100%;*/
166
167    /*padding-top: 30%;
168    padding-bottom: 30%;*/
169
170    text-align: center;
171}
172
173.introduction {
174    background-image: url("beat-saber-intro.jpg");
175    background-repeat: no-repeat;
176    background-attachment: fixed;
177    background-position: center;
178    background-size: cover;
179}
180
181.row{
182    padding-bottom: 10%;
183}
184
185.sketchfab-embed-wrapper{
186    height: 100%;
187    margin-bottom: 200px;
188}
189
190iframe{
191    height: 100%;
192    width: 100%;
193}
194
195header {
196    height: 100%;
197    min-height: 100%;
198}
199
200.center{
201    text-align: center;
202}
203
204/* Menu*/
205.img {
206    background-size: cover;
207    background-repeat: no-repeat;
208    background-position: center center; }
209  
210  #colorlib-main-nav {
211    position: absolute;
212    top: 0;
213    bottom: 0;
214    right: 0;
215    padding: 0;
216    width: 100%;
217    height: 100%;
218    background: rgba(0, 0, 0, 0.99);
219    z-index: 1002;
220    text-align: center;
221    visibility: hidden;
222    opacity: 0;
223    -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
224    -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
225    -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
226    -o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
227    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
228    -webkit-transform: scale(0.1);
229    -moz-transform: scale(0);
230    -ms-transform: scale(0);
231    -o-transform: scale(0);
232    transform: scale(0);
233    overflow-y: scroll; }
234    #colorlib-main-nav .colorlib-table {
235      display: table;
236      width: 100%;
237      height: 100%; }
238      #colorlib-main-nav .colorlib-table .img {
239        position: absolute;
240        top: 0;
241        left: 0;
242        bottom: 0;
243        height: 100%;
244        width: 100%;
245        opacity: 1; }
246        #colorlib-main-nav .colorlib-table .img:after {
247          position: absolute;
248          top: 0;
249          left: 0;
250          bottom: 0;
251          right: 0;
252          content: '';
253          background: rgba(0, 0, 0, 0.3); }
254      #colorlib-main-nav .colorlib-table .colorlib-table-cell {
255        display: table-cell;
256        vertical-align: middle; }
257    #colorlib-main-nav .colorlib-nav-toggle {
258      position: absolute;
259      top: 40px;
260      right: 40px;
261      padding: 20px;
262      height: 44px;
263      width: 44px;
264      line-height: 0;
265      padding: 0 !important;
266      visibility: hidden;
267      opacity: 0;
268      -webkit-transition: 0.3s;
269      -o-transition: 0.3s;
270      transition: 0.3s; }
271      @media (prefers-reduced-motion: reduce) {
272        #colorlib-main-nav .colorlib-nav-toggle {
273          -webkit-transition: none;
274          -o-transition: none;
275          transition: none; } }
276      #colorlib-main-nav .colorlib-nav-toggle i {
277        top: 18px !important;
278        left: 0 !important;
279        margin: 0 !important;
280        padding: 0 !important;
281        line-height: 0;
282        text-indent: 0; }
283      #colorlib-main-nav .colorlib-nav-toggle.show {
284        visibility: visible;
285        opacity: 1; }
286      #colorlib-main-nav .colorlib-nav-toggle:hover i::before, #colorlib-main-nav .colorlib-nav-toggle:hover i::after {
287        content: '';
288        width: 40px;
289        height: 2px;
290        background: #fff;
291        position: absolute;
292        left: 0; }
293    .menu-show #colorlib-main-nav {
294      visibility: visible;
295      opacity: 1;
296      -webkit-transform: scale(1);
297      -moz-transform: scale(1);
298      -ms-transform: scale(1);
299      -o-transform: scale(1);
300      transform: scale(1); }
301    #colorlib-main-nav .logo {
302      font-size: 40px;
303      color: #fff;
304      text-transform: uppercase;
305      letter-spacing: 2px;
306      font-weight: 700;
307      position: relative;
308      display: inline-block;
309      margin-bottom: 0;
310      line-height: 1.5;
311      font-family: "Poppins", Arial, sans-serif; }
312      #colorlib-main-nav .logo span {
313        font-size: 14px;
314        display: block;
315        font-weight: 300;
316        color: rgba(255, 255, 255, 0.8);
317        letter-spacing: 8px; }
318    #colorlib-main-nav ul {
319      padding: 0;
320      margin: 0;
321      display: block; }
322      @media (max-width: 767.98px) {
323        #colorlib-main-nav ul {
324          padding: 20px 0 0 0; } }
325      #colorlib-main-nav ul li {
326        padding: 0;
327        margin: 0;
328        list-style: none;
329        font-weight: 600;
330        font-size: 14px;
331        letter-spacing: 5px;
332        text-transform: uppercase; }
333        #colorlib-main-nav ul li a {
334          display: block;
335          color: white;
336          padding: 5px 0; }
337          #colorlib-main-nav ul li a span {
338            color: white;
339            position: relative;
340            padding: 0 10px; }
341            #colorlib-main-nav ul li a span small {
342              position: absolute;
343              bottom: 7px;
344              left: -30px;
345              font-size: 16px;
346              color: rgba(255, 255, 255, 0.3);
347              border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
348          #colorlib-main-nav ul li a:hover, #colorlib-main-nav ul li a:active, #colorlib-main-nav ul li a:focus {
349            outline: none;
350            text-decoration: none; }
351            #colorlib-main-nav ul li a:hover span:before, #colorlib-main-nav ul li a:active span:before, #colorlib-main-nav ul li a:focus span:before {
352              visibility: visible;
353              -webkit-transform: scaleX(1);
354              -moz-transform: scaleX(1);
355              -ms-transform: scaleX(1);
356              -o-transform: scaleX(1);
357              transform: scaleX(1); }
358        #colorlib-main-nav ul li.active a span {
359          color: #f8b500; }
360          #colorlib-main-nav ul li.active a span:before {
361            background: #fec771;
362            visibility: visible;
363            -webkit-transform: scaleX(1);
364            -moz-transform: scaleX(1);
365            -ms-transform: scaleX(1);
366            -o-transform: scaleX(1);
367            transform: scaleX(1); }
368  
369  header {
370    padding: 2em 0;
371    position: absolute;
372    top: 0;
373    left: 0;
374    right: 0;
375    z-index: 9;
376    margin: 0 auto; }
377    @media (max-width: 767.98px) {
378      header {
379        padding: 1em 0;
380        position: absolute; } }
381    header .colorlib-navbar-brand {
382      float: left; }
383      header .colorlib-navbar-brand .colorlib-logo {
384        font-size: 12px;
385        color: #fff;
386        letter-spacing: 5px;
387        font-weight: 600;
388        position: relative;
389        display: inline-block;
390        margin-bottom: 0;
391        line-height: 1.5;
392        font-family: "Poppins", Arial, sans-serif;
393        text-transform: uppercase; }
394        header .colorlib-navbar-brand .colorlib-logo span {
395          font-size: 11px;
396          display: block;
397          font-weight: 300;
398          color: rgba(255, 255, 255, 0.8);
399          letter-spacing: 7px; }
400        header .colorlib-navbar-brand .colorlib-logo i {
401          color: #fec771;
402          position: absolute;
403          top: -18px;
404          bottom: 0;
405          left: 7px;
406          font-size: 48px; }
407        header .colorlib-navbar-brand .colorlib-logo:hover {
408          text-decoration: none !important; }
409        header .colorlib-navbar-brand .colorlib-logo:active, header .colorlib-navbar-brand .colorlib-logo:focus {
410          outline: none;
411          text-decoration: none; }
412  
413  .colorlib-nav-toggle {
414    cursor: pointer;
415    text-decoration: none; }
416    .colorlib-nav-toggle.active i::before, .colorlib-nav-toggle.active i::after {
417      background: #000; }
418    .colorlib-nav-toggle.dark.active i::before, .colorlib-nav-toggle.dark.active i::after {
419      background: #000; }
420    .colorlib-nav-toggle:hover, .colorlib-nav-toggle:focus, .colorlib-nav-toggle:active {
421      outline: none;
422      border-bottom: none !important; }
423    .colorlib-nav-toggle i {
424      position: relative;
425      display: inline-block;
426      width: 20px;
427      height: 2px;
428      color: #000;
429      font: bold 14px/.4 Helvetica;
430      text-transform: uppercase;
431      text-indent: -55px;
432      background: #fff;
433      -webkit-transition: all .2s ease-out;
434      -o-transition: all .2s ease-out;
435      transition: all .2s ease-out; }
436      .menu-show .colorlib-nav-toggle i {
437        background: #fff;
438        color: #fff; }
439      .colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
440        content: '';
441        width: 30px;
442        height: 2px;
443        background: #fff;
444        position: absolute;
445        left: 0;
446        -webkit-transition: 0.2s;
447        -o-transition: 0.2s;
448        transition: 0.2s; }
449        .menu-show .colorlib-nav-toggle i::before, .menu-show .colorlib-nav-toggle i::after {
450          background: #fff; }
451        @media (prefers-reduced-motion: reduce) {
452          .colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
453            -webkit-transition: none;
454            -o-transition: none;
455            transition: none; } }
456    .colorlib-nav-toggle.dark i {
457      position: relative;
458      color: #fff;
459      background: #fff;
460      -webkit-transition: all .2s ease-out;
461      -o-transition: all .2s ease-out;
462      transition: all .2s ease-out; }
463      .colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
464        background: #fff;
465        -webkit-transition: 0.2s;
466        -o-transition: 0.2s;
467        transition: 0.2s; }
468        @media (prefers-reduced-motion: reduce) {
469          .colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
470            -webkit-transition: none;
471            -o-transition: none;
472            transition: none; } }
473  
474  .colorlib-nav-toggle i::before {
475    top: -7px; }
476  
477  .colorlib-nav-toggle i::after {
478    bottom: -7px; }
479  
480  .colorlib-nav-toggle:hover i::before {
481    top: -10px; }
482  
483  .colorlib-nav-toggle:hover i::after {
484    bottom: -10px; }
485  
486  .colorlib-nav-toggle.active i {
487    background: transparent; }
488  
489  .colorlib-nav-toggle.active i::before {
490    top: 0;
491    -webkit-transform: rotateZ(45deg);
492    -moz-transform: rotateZ(45deg);
493    -ms-transform: rotateZ(45deg);
494    -o-transform: rotateZ(45deg);
495    transform: rotateZ(45deg); }
496  
497  .colorlib-nav-toggle.active i::after {
498    bottom: 0;
499    -webkit-transform: rotateZ(-45deg);
500    -moz-transform: rotateZ(-45deg);
501    -ms-transform: rotateZ(-45deg);
502    -o-transform: rotateZ(-45deg);
503    transform: rotateZ(-45deg); }
504  
505  .colorlib-nav-toggle {
506    float: right;
507    z-index: 1003;
508    position: relative;
509    top: 0;
510    right: 0;
511    display: block;
512    margin: 0 auto;
513    cursor: pointer;
514    margin-top: 0; }
515    @media (max-width: 767.98px) {
516      .colorlib-nav-toggle {
517        right: 10px; } }
518  
519  .hero-wrap {
520    background: #202020; }
521    .hero-wrap .slider-text .desc h1 {
522      font-size: 6vw;
523      font-weight: 700;
524      color: #fff;
525      text-transform: uppercase; }
526    .hero-wrap .slider-text .desc h3 {
527      color: rgba(255, 255, 255, 0.8);
528      font-size: 18px; }
529.row {
530  display: -ms-flexbox;
531  display: flex;
532  -ms-flex-wrap: wrap;
533  flex-wrap: wrap;
534  /* margin-right: -15px; */
535  /* margin-left: -15px; */
536}
537(function($) {
538
539  "use strict";
540
541  var fullHeight = function() {
542
543    $('.js-fullheight').css('height', $(window).height());
544    $(window).resize(function() {
545      $('.js-fullheight').css('height', $(window).height());
546    });
547
548  };
549  fullHeight();
550
551  var burgerMenu = function() {
552
553    $('.js-colorlib-nav-toggle').on('click', function(event) {
554      event.preventDefault();
555      var $this = $(this);
556      if ($('body').hasClass('menu-show')) {
557        $('body').removeClass('menu-show');
558        $('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
559      } else {
560        $('body').addClass('menu-show');
561        setTimeout(function() {
562          $('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
563        }, 900);
564      }
565    })
566  };
567  burgerMenu();
568
569
570})(jQuery);html,
571body {
572  background-color: black;
573  color: white;
574  height: 100%;
575  min-height: 100%;
576  overflow-x: hidden;
577}
578
579#h-100 {
580  /*height: 100%;
581    min-height: 100%;*/
582  /*padding-top: 30%;
583    padding-bottom: 30%;*/
584  text-align: center;
585}
586
587.introduction {
588  background-image: url("beat-saber-intro.jpg");
589  background-repeat: no-repeat;
590  background-attachment: fixed;
591  background-position: center;
592  background-size: cover;
593}
594
595.row {
596  padding-bottom: 10%;
597}
598
599.sketchfab-embed-wrapper {
600  height: 100%;
601  margin-bottom: 200px;
602}
603
604iframe {
605  height: 100%;
606  width: 100%;
607}
608
609header {
610  height: 100%;
611  min-height: 100%;
612}
613
614.center {
615  text-align: center;
616}
617
618
619/* Menu*/
620
621.img {
622  background-size: cover;
623  background-repeat: no-repeat;
624  background-position: center center;
625}
626
627#colorlib-main-nav {
628  position: absolute;
629  top: 0;
630  bottom: 0;
631  right: 0;
632  padding: 0;
633  width: 100%;
634  height: 100%;
635  background: rgba(0, 0, 0, 0.99);
636  z-index: 1002;
637  text-align: center;
638  visibility: hidden;
639  opacity: 0;
640  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
641  -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
642  -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
643  -o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
644  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
645  -webkit-transform: scale(0.1);
646  -moz-transform: scale(0);
647  -ms-transform: scale(0);
648  -o-transform: scale(0);
649  transform: scale(0);
650  overflow-y: scroll;
651}
652
653#colorlib-main-nav .colorlib-table {
654  display: table;
655  width: 100%;
656  height: 100%;
657}
658
659#colorlib-main-nav .colorlib-table .img {
660  position: absolute;
661  top: 0;
662  left: 0;
663  bottom: 0;
664  height: 100%;
665  width: 100%;
666  opacity: 1;
667}
668
669#colorlib-main-nav .colorlib-table .img:after {
670  position: absolute;
671  top: 0;
672  left: 0;
673  bottom: 0;
674  right: 0;
675  content: '';
676  background: rgba(0, 0, 0, 0.3);
677}
678
679#colorlib-main-nav .colorlib-table .colorlib-table-cell {
680  display: table-cell;
681  vertical-align: middle;
682}
683
684#colorlib-main-nav .colorlib-nav-toggle {
685  position: absolute;
686  top: 40px;
687  right: 40px;
688  padding: 20px;
689  height: 44px;
690  width: 44px;
691  line-height: 0;
692  padding: 0 !important;
693  visibility: hidden;
694  opacity: 0;
695  -webkit-transition: 0.3s;
696  -o-transition: 0.3s;
697  transition: 0.3s;
698}
699
700@media (prefers-reduced-motion: reduce) {
701  #colorlib-main-nav .colorlib-nav-toggle {
702    -webkit-transition: none;
703    -o-transition: none;
704    transition: none;
705  }
706}
707
708#colorlib-main-nav .colorlib-nav-toggle i {
709  top: 18px !important;
710  left: 0 !important;
711  margin: 0 !important;
712  padding: 0 !important;
713  line-height: 0;
714  text-indent: 0;
715}
716
717#colorlib-main-nav .colorlib-nav-toggle.show {
718  visibility: visible;
719  opacity: 1;
720}
721
722#colorlib-main-nav .colorlib-nav-toggle:hover i::before,
723#colorlib-main-nav .colorlib-nav-toggle:hover i::after {
724  content: '';
725  width: 40px;
726  height: 2px;
727  background: #fff;
728  position: absolute;
729  left: 0;
730}
731
732.menu-show #colorlib-main-nav {
733  visibility: visible;
734  opacity: 1;
735  -webkit-transform: scale(1);
736  -moz-transform: scale(1);
737  -ms-transform: scale(1);
738  -o-transform: scale(1);
739  transform: scale(1);
740}
741
742#colorlib-main-nav .logo {
743  font-size: 40px;
744  color: #fff;
745  text-transform: uppercase;
746  letter-spacing: 2px;
747  font-weight: 700;
748  position: relative;
749  display: inline-block;
750  margin-bottom: 0;
751  line-height: 1.5;
752  font-family: "Poppins", Arial, sans-serif;
753}
754
755#colorlib-main-nav .logo span {
756  font-size: 14px;
757  display: block;
758  font-weight: 300;
759  color: rgba(255, 255, 255, 0.8);
760  letter-spacing: 8px;
761}
762
763#colorlib-main-nav ul {
764  padding: 0;
765  margin: 0;
766  display: block;
767}
768
769@media (max-width: 767.98px) {
770  #colorlib-main-nav ul {
771    padding: 20px 0 0 0;
772  }
773}
774
775#colorlib-main-nav ul li {
776  padding: 0;
777  margin: 0;
778  list-style: none;
779  font-weight: 600;
780  font-size: 14px;
781  letter-spacing: 5px;
782  text-transform: uppercase;
783}
784
785#colorlib-main-nav ul li a {
786  display: block;
787  color: white;
788  padding: 5px 0;
789}
790
791#colorlib-main-nav ul li a span {
792  color: white;
793  position: relative;
794  padding: 0 10px;
795}
796
797#colorlib-main-nav ul li a span small {
798  position: absolute;
799  bottom: 7px;
800  left: -30px;
801  font-size: 16px;
802  color: rgba(255, 255, 255, 0.3);
803  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
804}
805
806#colorlib-main-nav ul li a:hover,
807#colorlib-main-nav ul li a:active,
808#colorlib-main-nav ul li a:focus {
809  outline: none;
810  text-decoration: none;
811}
812
813#colorlib-main-nav ul li a:hover span:before,
814#colorlib-main-nav ul li a:active span:before,
815#colorlib-main-nav ul li a:focus span:before {
816  visibility: visible;
817  -webkit-transform: scaleX(1);
818  -moz-transform: scaleX(1);
819  -ms-transform: scaleX(1);
820  -o-transform: scaleX(1);
821  transform: scaleX(1);
822}
823
824#colorlib-main-nav ul li.active a span {
825  color: #f8b500;
826}
827
828#colorlib-main-nav ul li.active a span:before {
829  background: #fec771;
830  visibility: visible;
831  -webkit-transform: scaleX(1);
832  -moz-transform: scaleX(1);
833  -ms-transform: scaleX(1);
834  -o-transform: scaleX(1);
835  transform: scaleX(1);
836}
837
838header {
839  padding: 2em 0;
840  position: absolute;
841  top: 0;
842  left: 0;
843  right: 0;
844  z-index: 9;
845  margin: 0 auto;
846}
847
848@media (max-width: 767.98px) {
849  header {
850    padding: 1em 0;
851    position: absolute;
852  }
853}
854
855header .colorlib-navbar-brand {
856  float: left;
857}
858
859header .colorlib-navbar-brand .colorlib-logo {
860  font-size: 12px;
861  color: #fff;
862  letter-spacing: 5px;
863  font-weight: 600;
864  position: relative;
865  display: inline-block;
866  margin-bottom: 0;
867  line-height: 1.5;
868  font-family: "Poppins", Arial, sans-serif;
869  text-transform: uppercase;
870}
871
872header .colorlib-navbar-brand .colorlib-logo span {
873  font-size: 11px;
874  display: block;
875  font-weight: 300;
876  color: rgba(255, 255, 255, 0.8);
877  letter-spacing: 7px;
878}
879
880header .colorlib-navbar-brand .colorlib-logo i {
881  color: #fec771;
882  position: absolute;
883  top: -18px;
884  bottom: 0;
885  left: 7px;
886  font-size: 48px;
887}
888
889header .colorlib-navbar-brand .colorlib-logo:hover {
890  text-decoration: none !important;
891}
892
893header .colorlib-navbar-brand .colorlib-logo:active,
894header .colorlib-navbar-brand .colorlib-logo:focus {
895  outline: none;
896  text-decoration: none;
897}
898
899.colorlib-nav-toggle {
900  cursor: pointer;
901  text-decoration: none;
902}
903
904.colorlib-nav-toggle.active i::before,
905.colorlib-nav-toggle.active i::after {
906  background: #000;
907}
908
909.colorlib-nav-toggle.dark.active i::before,
910.colorlib-nav-toggle.dark.active i::after {
911  background: #000;
912}
913
914.colorlib-nav-toggle:hover,
915.colorlib-nav-toggle:focus,
916.colorlib-nav-toggle:active {
917  outline: none;
918  border-bottom: none !important;
919}
920
921.colorlib-nav-toggle i {
922  position: relative;
923  display: inline-block;
924  width: 20px;
925  height: 2px;
926  color: #000;
927  font: bold 14px/.4 Helvetica;
928  text-transform: uppercase;
929  text-indent: -55px;
930  background: #fff;
931  -webkit-transition: all .2s ease-out;
932  -o-transition: all .2s ease-out;
933  transition: all .2s ease-out;
934}
935
936.menu-show .colorlib-nav-toggle i {
937  background: #fff;
938  color: #fff;
939}
940
941.colorlib-nav-toggle i::before,
942.colorlib-nav-toggle i::after {
943  content: '';
944  width: 30px;
945  height: 2px;
946  background: #fff;
947  position: absolute;
948  left: 0;
949  -webkit-transition: 0.2s;
950  -o-transition: 0.2s;
951  transition: 0.2s;
952}
953
954.menu-show .colorlib-nav-toggle i::before,
955.menu-show .colorlib-nav-toggle i::after {
956  background: #fff;
957}
958
959@media (prefers-reduced-motion: reduce) {
960  .colorlib-nav-toggle i::before,
961  .colorlib-nav-toggle i::after {
962    -webkit-transition: none;
963    -o-transition: none;
964    transition: none;
965  }
966}
967
968.colorlib-nav-toggle.dark i {
969  position: relative;
970  color: #fff;
971  background: #fff;
972  -webkit-transition: all .2s ease-out;
973  -o-transition: all .2s ease-out;
974  transition: all .2s ease-out;
975}
976
977.colorlib-nav-toggle.dark i::before,
978.colorlib-nav-toggle.dark i::after {
979  background: #fff;
980  -webkit-transition: 0.2s;
981  -o-transition: 0.2s;
982  transition: 0.2s;
983}
984
985@media (prefers-reduced-motion: reduce) {
986  .colorlib-nav-toggle.dark i::before,
987  .colorlib-nav-toggle.dark i::after {
988    -webkit-transition: none;
989    -o-transition: none;
990    transition: none;
991  }
992}
993
994.colorlib-nav-toggle i::before {
995  top: -7px;
996}
997
998.colorlib-nav-toggle i::after {
999  bottom: -7px;
1000}
1001
1002.colorlib-nav-toggle:hover i::before {
1003  top: -10px;
1004}
1005
1006.colorlib-nav-toggle:hover i::after {
1007  bottom: -10px;
1008}
1009
1010.colorlib-nav-toggle.active i {
1011  background: transparent;
1012}
1013
1014.colorlib-nav-toggle.active i::before {
1015  top: 0;
1016  -webkit-transform: rotateZ(45deg);
1017  -moz-transform: rotateZ(45deg);
1018  -ms-transform: rotateZ(45deg);
1019  -o-transform: rotateZ(45deg);
1020  transform: rotateZ(45deg);
1021}
1022
1023.colorlib-nav-toggle.active i::after {
1024  bottom: 0;
1025  -webkit-transform: rotateZ(-45deg);
1026  -moz-transform: rotateZ(-45deg);
1027  -ms-transform: rotateZ(-45deg);
1028  -o-transform: rotateZ(-45deg);
1029  transform: rotateZ(-45deg);
1030}
1031
1032.colorlib-nav-toggle {
1033  float: right;
1034  z-index: 1003;
1035  position: relative;
1036  top: 0;
1037  right: 0;
1038  display: block;
1039  margin: 0 auto;
1040  cursor: pointer;
1041  margin-top: 0;
1042}
1043
1044@media (max-width: 767.98px) {
1045  .colorlib-nav-toggle {
1046    right: 10px;
1047  }
1048}
1049
1050.hero-wrap {
1051  background: #202020;
1052}
1053
1054.hero-wrap .slider-text .desc h1 {
1055  font-size: 6vw;
1056  font-weight: 700;
1057  color: #fff;
1058  text-transform: uppercase;
1059}
1060
1061.hero-wrap .slider-text .desc h3 {
1062  color: rgba(255, 255, 255, 0.8);
1063  font-size: 18px;
1064}

1<!doctype html>
2<html lang="de">
3    <head>
4        <title>VR</title>
5        <!-- Required meta tags -->
6        <meta charset="utf-8">
7        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8
9        <!-- Bootstrap CSS -->
10        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
11        <link rel="stylesheet" href="style.css">
12    </head>
13    <body>
14        <nav id="colorlib-main-nav" role="navigation">
15            <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle active"><i></i></a>
16            <div class="js-fullheight colorlib-table">
17                <div class="img" style="background-image: url(images/bg_3.jpg);"></div>
18                <div class="colorlib-table-cell js-fullheight">
19                <div class="row no-gutters">
20                    <div class="col-md-12 text-center">
21                    <h1 class="mb-4"><a href="index.html" class="logo">Company Logo</a></h1>
22                    <ul>
23                        <li class="active"><a href="index.html"><span>Home</span></a></li>
24                        <li><a href="about.html"><span>About</span></a></li>
25                        <li><a href="blog.html"><span>Blog</span></a></li>
26                        <li><a href="contact.html"><span>Contact</span></a></li>
27                    </ul>
28                    </div>
29                </div>
30                </div>
31            </div>
32        </nav>
33
34        <div class="header h-100">
35            <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle"><i></i></a>
36            <h1 id="h-100" class="introduction h-100">Virtual Reality</h1>
37            
38        </div>
39
40        <div class="h-100">
41            <h2 class="center">Was ist Virtual Reality (VR)</h2>
42            <p class="center">Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann</p>
43        </div>
44        
45
46        <div id="vr-headset-kategorien" class="">
47            <!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right-->
48            <div id="standalone" class="row">
49                <!---->
50                <div class="vr-left_side container col-lg-6">
51                    <div class="sketchfab-embed-wrapper"> <iframe title="Quest 2 Headset - FanArt" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Quest 2 Headset - FanArt </a> by <a href="https://sketchfab.com/josevillotguisan?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> joseVG </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
52                </div>
53                
54                <div class="vr-right_side container col-lg-6">
55                    <h3>Standalone</h3>
56                
57                    <p>Standalone VR-Headsets benötigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super für Anfänger geeignet</p>
58
59                    <p>
60                    Vorteile:<br />
61                    Kein guter PC benötigt<br />
62                    Niedriger Einstiegspreis trotz guter Hardware<br/>
63                    Gut optimierbar, da es für das Heaset nur einen Prozessor gibt</p>
64                    
65                    <p>Nachteile:<br />
66                    Je nach Headset schlechte Performance bei fordernden Spielen</p>
67                </div>
68                
69            </div>
70
71            <div id="pc" class="row">
72                <div class="vr-left_side container col-lg-6">
73                    <div class="sketchfab-embed-wrapper"> <iframe title="HTC Vive" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> HTC Vive </a> by <a href="https://sketchfab.com/EternalRealm?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Eternal Realm </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
74                </div>
75                
76                <div class="vr-right_side container col-lg-6">
77                    <h3>PC-VR</h3>
78                    <p>PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden über ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem schönes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie vor allem für Enthusiasten geeignet</p>
79
80                    <p>Vorteile:<br />
81                    Hohe Auflösung<br />
82                    Wenig Lags</p>
83
84                    <p>Nachteile:<br />
85                    Hoher Einstiegspreis</p>
86                </div>
87            </div>
88
89            <div id="fulldive" class="row">
90                <div class="vr-left_side container col-lg-6">
91                    <div class="sketchfab-embed-wrapper"> <iframe title="neuraLink" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&autostart=1"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> neuraLink </a> by <a href="https://sketchfab.com/rfarencibia?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> rfarencibia </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
92                </div>
93                
94                <div class="vr-right_side container col-lg-6">
95                    <h3>Full-Dive VR</h3>
96                    <p>Tauche komplett in die VR-Welt ein. Full-Dive VR-Headsets befinden sich bereits in Entwicklung. Bei diesem Ansatz wird keine VR-Brille verwendet, die wie ein Monitor funktioniert sondern Full-Dive VR-Headsets greifen direkt auf die Seh-, Tast-, und weitere Nerven zu. Daher ist dies auch die umstrittenste Technologie</p>
97
98                    <p>Vorteile:<br />
99                    Unvergleichliche Immersion</p>
100
101                    <p>Nachteile:<br />
102                    Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber möglich</p>
103                </div>
104            </div>
105
106        </div>
107
108        
109
110      
111        <!-- Optional JavaScript -->
112        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
113        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
114        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
115        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
116        <script>
117            (function($) {
118
119            "use strict";
120
121            var fullHeight = function() {
122
123                $('.js-fullheight').css('height', $(window).height());
124                $(window).resize(function(){
125                    $('.js-fullheight').css('height', $(window).height());
126                });
127
128            };
129            fullHeight();
130
131            var burgerMenu = function() {
132
133                $('.js-colorlib-nav-toggle').on('click', function(event) {
134                    event.preventDefault();
135                    var $this = $(this);
136                    if( $('body').hasClass('menu-show') ) {
137                        $('body').removeClass('menu-show');
138                        $('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
139                    } else {
140                        $('body').addClass('menu-show');
141                        setTimeout(function(){
142                            $('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
143                        }, 900);
144                    }
145                })
146            };
147            burgerMenu();
148
149
150            })(jQuery);
151        </script>
152    </body>
153</html>
154html, body {
155    background-color: black;
156
157    color: white;
158    height: 100%;
159    min-height: 100%;
160
161}
162
163#h-100{
164    /*height: 100%;
165    min-height: 100%;*/
166
167    /*padding-top: 30%;
168    padding-bottom: 30%;*/
169
170    text-align: center;
171}
172
173.introduction {
174    background-image: url("beat-saber-intro.jpg");
175    background-repeat: no-repeat;
176    background-attachment: fixed;
177    background-position: center;
178    background-size: cover;
179}
180
181.row{
182    padding-bottom: 10%;
183}
184
185.sketchfab-embed-wrapper{
186    height: 100%;
187    margin-bottom: 200px;
188}
189
190iframe{
191    height: 100%;
192    width: 100%;
193}
194
195header {
196    height: 100%;
197    min-height: 100%;
198}
199
200.center{
201    text-align: center;
202}
203
204/* Menu*/
205.img {
206    background-size: cover;
207    background-repeat: no-repeat;
208    background-position: center center; }
209  
210  #colorlib-main-nav {
211    position: absolute;
212    top: 0;
213    bottom: 0;
214    right: 0;
215    padding: 0;
216    width: 100%;
217    height: 100%;
218    background: rgba(0, 0, 0, 0.99);
219    z-index: 1002;
220    text-align: center;
221    visibility: hidden;
222    opacity: 0;
223    -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
224    -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
225    -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
226    -o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
227    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
228    -webkit-transform: scale(0.1);
229    -moz-transform: scale(0);
230    -ms-transform: scale(0);
231    -o-transform: scale(0);
232    transform: scale(0);
233    overflow-y: scroll; }
234    #colorlib-main-nav .colorlib-table {
235      display: table;
236      width: 100%;
237      height: 100%; }
238      #colorlib-main-nav .colorlib-table .img {
239        position: absolute;
240        top: 0;
241        left: 0;
242        bottom: 0;
243        height: 100%;
244        width: 100%;
245        opacity: 1; }
246        #colorlib-main-nav .colorlib-table .img:after {
247          position: absolute;
248          top: 0;
249          left: 0;
250          bottom: 0;
251          right: 0;
252          content: '';
253          background: rgba(0, 0, 0, 0.3); }
254      #colorlib-main-nav .colorlib-table .colorlib-table-cell {
255        display: table-cell;
256        vertical-align: middle; }
257    #colorlib-main-nav .colorlib-nav-toggle {
258      position: absolute;
259      top: 40px;
260      right: 40px;
261      padding: 20px;
262      height: 44px;
263      width: 44px;
264      line-height: 0;
265      padding: 0 !important;
266      visibility: hidden;
267      opacity: 0;
268      -webkit-transition: 0.3s;
269      -o-transition: 0.3s;
270      transition: 0.3s; }
271      @media (prefers-reduced-motion: reduce) {
272        #colorlib-main-nav .colorlib-nav-toggle {
273          -webkit-transition: none;
274          -o-transition: none;
275          transition: none; } }
276      #colorlib-main-nav .colorlib-nav-toggle i {
277        top: 18px !important;
278        left: 0 !important;
279        margin: 0 !important;
280        padding: 0 !important;
281        line-height: 0;
282        text-indent: 0; }
283      #colorlib-main-nav .colorlib-nav-toggle.show {
284        visibility: visible;
285        opacity: 1; }
286      #colorlib-main-nav .colorlib-nav-toggle:hover i::before, #colorlib-main-nav .colorlib-nav-toggle:hover i::after {
287        content: '';
288        width: 40px;
289        height: 2px;
290        background: #fff;
291        position: absolute;
292        left: 0; }
293    .menu-show #colorlib-main-nav {
294      visibility: visible;
295      opacity: 1;
296      -webkit-transform: scale(1);
297      -moz-transform: scale(1);
298      -ms-transform: scale(1);
299      -o-transform: scale(1);
300      transform: scale(1); }
301    #colorlib-main-nav .logo {
302      font-size: 40px;
303      color: #fff;
304      text-transform: uppercase;
305      letter-spacing: 2px;
306      font-weight: 700;
307      position: relative;
308      display: inline-block;
309      margin-bottom: 0;
310      line-height: 1.5;
311      font-family: "Poppins", Arial, sans-serif; }
312      #colorlib-main-nav .logo span {
313        font-size: 14px;
314        display: block;
315        font-weight: 300;
316        color: rgba(255, 255, 255, 0.8);
317        letter-spacing: 8px; }
318    #colorlib-main-nav ul {
319      padding: 0;
320      margin: 0;
321      display: block; }
322      @media (max-width: 767.98px) {
323        #colorlib-main-nav ul {
324          padding: 20px 0 0 0; } }
325      #colorlib-main-nav ul li {
326        padding: 0;
327        margin: 0;
328        list-style: none;
329        font-weight: 600;
330        font-size: 14px;
331        letter-spacing: 5px;
332        text-transform: uppercase; }
333        #colorlib-main-nav ul li a {
334          display: block;
335          color: white;
336          padding: 5px 0; }
337          #colorlib-main-nav ul li a span {
338            color: white;
339            position: relative;
340            padding: 0 10px; }
341            #colorlib-main-nav ul li a span small {
342              position: absolute;
343              bottom: 7px;
344              left: -30px;
345              font-size: 16px;
346              color: rgba(255, 255, 255, 0.3);
347              border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
348          #colorlib-main-nav ul li a:hover, #colorlib-main-nav ul li a:active, #colorlib-main-nav ul li a:focus {
349            outline: none;
350            text-decoration: none; }
351            #colorlib-main-nav ul li a:hover span:before, #colorlib-main-nav ul li a:active span:before, #colorlib-main-nav ul li a:focus span:before {
352              visibility: visible;
353              -webkit-transform: scaleX(1);
354              -moz-transform: scaleX(1);
355              -ms-transform: scaleX(1);
356              -o-transform: scaleX(1);
357              transform: scaleX(1); }
358        #colorlib-main-nav ul li.active a span {
359          color: #f8b500; }
360          #colorlib-main-nav ul li.active a span:before {
361            background: #fec771;
362            visibility: visible;
363            -webkit-transform: scaleX(1);
364            -moz-transform: scaleX(1);
365            -ms-transform: scaleX(1);
366            -o-transform: scaleX(1);
367            transform: scaleX(1); }
368  
369  header {
370    padding: 2em 0;
371    position: absolute;
372    top: 0;
373    left: 0;
374    right: 0;
375    z-index: 9;
376    margin: 0 auto; }
377    @media (max-width: 767.98px) {
378      header {
379        padding: 1em 0;
380        position: absolute; } }
381    header .colorlib-navbar-brand {
382      float: left; }
383      header .colorlib-navbar-brand .colorlib-logo {
384        font-size: 12px;
385        color: #fff;
386        letter-spacing: 5px;
387        font-weight: 600;
388        position: relative;
389        display: inline-block;
390        margin-bottom: 0;
391        line-height: 1.5;
392        font-family: "Poppins", Arial, sans-serif;
393        text-transform: uppercase; }
394        header .colorlib-navbar-brand .colorlib-logo span {
395          font-size: 11px;
396          display: block;
397          font-weight: 300;
398          color: rgba(255, 255, 255, 0.8);
399          letter-spacing: 7px; }
400        header .colorlib-navbar-brand .colorlib-logo i {
401          color: #fec771;
402          position: absolute;
403          top: -18px;
404          bottom: 0;
405          left: 7px;
406          font-size: 48px; }
407        header .colorlib-navbar-brand .colorlib-logo:hover {
408          text-decoration: none !important; }
409        header .colorlib-navbar-brand .colorlib-logo:active, header .colorlib-navbar-brand .colorlib-logo:focus {
410          outline: none;
411          text-decoration: none; }
412  
413  .colorlib-nav-toggle {
414    cursor: pointer;
415    text-decoration: none; }
416    .colorlib-nav-toggle.active i::before, .colorlib-nav-toggle.active i::after {
417      background: #000; }
418    .colorlib-nav-toggle.dark.active i::before, .colorlib-nav-toggle.dark.active i::after {
419      background: #000; }
420    .colorlib-nav-toggle:hover, .colorlib-nav-toggle:focus, .colorlib-nav-toggle:active {
421      outline: none;
422      border-bottom: none !important; }
423    .colorlib-nav-toggle i {
424      position: relative;
425      display: inline-block;
426      width: 20px;
427      height: 2px;
428      color: #000;
429      font: bold 14px/.4 Helvetica;
430      text-transform: uppercase;
431      text-indent: -55px;
432      background: #fff;
433      -webkit-transition: all .2s ease-out;
434      -o-transition: all .2s ease-out;
435      transition: all .2s ease-out; }
436      .menu-show .colorlib-nav-toggle i {
437        background: #fff;
438        color: #fff; }
439      .colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
440        content: '';
441        width: 30px;
442        height: 2px;
443        background: #fff;
444        position: absolute;
445        left: 0;
446        -webkit-transition: 0.2s;
447        -o-transition: 0.2s;
448        transition: 0.2s; }
449        .menu-show .colorlib-nav-toggle i::before, .menu-show .colorlib-nav-toggle i::after {
450          background: #fff; }
451        @media (prefers-reduced-motion: reduce) {
452          .colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
453            -webkit-transition: none;
454            -o-transition: none;
455            transition: none; } }
456    .colorlib-nav-toggle.dark i {
457      position: relative;
458      color: #fff;
459      background: #fff;
460      -webkit-transition: all .2s ease-out;
461      -o-transition: all .2s ease-out;
462      transition: all .2s ease-out; }
463      .colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
464        background: #fff;
465        -webkit-transition: 0.2s;
466        -o-transition: 0.2s;
467        transition: 0.2s; }
468        @media (prefers-reduced-motion: reduce) {
469          .colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
470            -webkit-transition: none;
471            -o-transition: none;
472            transition: none; } }
473  
474  .colorlib-nav-toggle i::before {
475    top: -7px; }
476  
477  .colorlib-nav-toggle i::after {
478    bottom: -7px; }
479  
480  .colorlib-nav-toggle:hover i::before {
481    top: -10px; }
482  
483  .colorlib-nav-toggle:hover i::after {
484    bottom: -10px; }
485  
486  .colorlib-nav-toggle.active i {
487    background: transparent; }
488  
489  .colorlib-nav-toggle.active i::before {
490    top: 0;
491    -webkit-transform: rotateZ(45deg);
492    -moz-transform: rotateZ(45deg);
493    -ms-transform: rotateZ(45deg);
494    -o-transform: rotateZ(45deg);
495    transform: rotateZ(45deg); }
496  
497  .colorlib-nav-toggle.active i::after {
498    bottom: 0;
499    -webkit-transform: rotateZ(-45deg);
500    -moz-transform: rotateZ(-45deg);
501    -ms-transform: rotateZ(-45deg);
502    -o-transform: rotateZ(-45deg);
503    transform: rotateZ(-45deg); }
504  
505  .colorlib-nav-toggle {
506    float: right;
507    z-index: 1003;
508    position: relative;
509    top: 0;
510    right: 0;
511    display: block;
512    margin: 0 auto;
513    cursor: pointer;
514    margin-top: 0; }
515    @media (max-width: 767.98px) {
516      .colorlib-nav-toggle {
517        right: 10px; } }
518  
519  .hero-wrap {
520    background: #202020; }
521    .hero-wrap .slider-text .desc h1 {
522      font-size: 6vw;
523      font-weight: 700;
524      color: #fff;
525      text-transform: uppercase; }
526    .hero-wrap .slider-text .desc h3 {
527      color: rgba(255, 255, 255, 0.8);
528      font-size: 18px; }
529.row {
530  display: -ms-flexbox;
531  display: flex;
532  -ms-flex-wrap: wrap;
533  flex-wrap: wrap;
534  /* margin-right: -15px; */
535  /* margin-left: -15px; */
536}
537(function($) {
538
539  "use strict";
540
541  var fullHeight = function() {
542
543    $('.js-fullheight').css('height', $(window).height());
544    $(window).resize(function() {
545      $('.js-fullheight').css('height', $(window).height());
546    });
547
548  };
549  fullHeight();
550
551  var burgerMenu = function() {
552
553    $('.js-colorlib-nav-toggle').on('click', function(event) {
554      event.preventDefault();
555      var $this = $(this);
556      if ($('body').hasClass('menu-show')) {
557        $('body').removeClass('menu-show');
558        $('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
559      } else {
560        $('body').addClass('menu-show');
561        setTimeout(function() {
562          $('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
563        }, 900);
564      }
565    })
566  };
567  burgerMenu();
568
569
570})(jQuery);html,
571body {
572  background-color: black;
573  color: white;
574  height: 100%;
575  min-height: 100%;
576  overflow-x: hidden;
577}
578
579#h-100 {
580  /*height: 100%;
581    min-height: 100%;*/
582  /*padding-top: 30%;
583    padding-bottom: 30%;*/
584  text-align: center;
585}
586
587.introduction {
588  background-image: url("beat-saber-intro.jpg");
589  background-repeat: no-repeat;
590  background-attachment: fixed;
591  background-position: center;
592  background-size: cover;
593}
594
595.row {
596  padding-bottom: 10%;
597}
598
599.sketchfab-embed-wrapper {
600  height: 100%;
601  margin-bottom: 200px;
602}
603
604iframe {
605  height: 100%;
606  width: 100%;
607}
608
609header {
610  height: 100%;
611  min-height: 100%;
612}
613
614.center {
615  text-align: center;
616}
617
618
619/* Menu*/
620
621.img {
622  background-size: cover;
623  background-repeat: no-repeat;
624  background-position: center center;
625}
626
627#colorlib-main-nav {
628  position: absolute;
629  top: 0;
630  bottom: 0;
631  right: 0;
632  padding: 0;
633  width: 100%;
634  height: 100%;
635  background: rgba(0, 0, 0, 0.99);
636  z-index: 1002;
637  text-align: center;
638  visibility: hidden;
639  opacity: 0;
640  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
641  -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
642  -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
643  -o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
644  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
645  -webkit-transform: scale(0.1);
646  -moz-transform: scale(0);
647  -ms-transform: scale(0);
648  -o-transform: scale(0);
649  transform: scale(0);
650  overflow-y: scroll;
651}
652
653#colorlib-main-nav .colorlib-table {
654  display: table;
655  width: 100%;
656  height: 100%;
657}
658
659#colorlib-main-nav .colorlib-table .img {
660  position: absolute;
661  top: 0;
662  left: 0;
663  bottom: 0;
664  height: 100%;
665  width: 100%;
666  opacity: 1;
667}
668
669#colorlib-main-nav .colorlib-table .img:after {
670  position: absolute;
671  top: 0;
672  left: 0;
673  bottom: 0;
674  right: 0;
675  content: '';
676  background: rgba(0, 0, 0, 0.3);
677}
678
679#colorlib-main-nav .colorlib-table .colorlib-table-cell {
680  display: table-cell;
681  vertical-align: middle;
682}
683
684#colorlib-main-nav .colorlib-nav-toggle {
685  position: absolute;
686  top: 40px;
687  right: 40px;
688  padding: 20px;
689  height: 44px;
690  width: 44px;
691  line-height: 0;
692  padding: 0 !important;
693  visibility: hidden;
694  opacity: 0;
695  -webkit-transition: 0.3s;
696  -o-transition: 0.3s;
697  transition: 0.3s;
698}
699
700@media (prefers-reduced-motion: reduce) {
701  #colorlib-main-nav .colorlib-nav-toggle {
702    -webkit-transition: none;
703    -o-transition: none;
704    transition: none;
705  }
706}
707
708#colorlib-main-nav .colorlib-nav-toggle i {
709  top: 18px !important;
710  left: 0 !important;
711  margin: 0 !important;
712  padding: 0 !important;
713  line-height: 0;
714  text-indent: 0;
715}
716
717#colorlib-main-nav .colorlib-nav-toggle.show {
718  visibility: visible;
719  opacity: 1;
720}
721
722#colorlib-main-nav .colorlib-nav-toggle:hover i::before,
723#colorlib-main-nav .colorlib-nav-toggle:hover i::after {
724  content: '';
725  width: 40px;
726  height: 2px;
727  background: #fff;
728  position: absolute;
729  left: 0;
730}
731
732.menu-show #colorlib-main-nav {
733  visibility: visible;
734  opacity: 1;
735  -webkit-transform: scale(1);
736  -moz-transform: scale(1);
737  -ms-transform: scale(1);
738  -o-transform: scale(1);
739  transform: scale(1);
740}
741
742#colorlib-main-nav .logo {
743  font-size: 40px;
744  color: #fff;
745  text-transform: uppercase;
746  letter-spacing: 2px;
747  font-weight: 700;
748  position: relative;
749  display: inline-block;
750  margin-bottom: 0;
751  line-height: 1.5;
752  font-family: "Poppins", Arial, sans-serif;
753}
754
755#colorlib-main-nav .logo span {
756  font-size: 14px;
757  display: block;
758  font-weight: 300;
759  color: rgba(255, 255, 255, 0.8);
760  letter-spacing: 8px;
761}
762
763#colorlib-main-nav ul {
764  padding: 0;
765  margin: 0;
766  display: block;
767}
768
769@media (max-width: 767.98px) {
770  #colorlib-main-nav ul {
771    padding: 20px 0 0 0;
772  }
773}
774
775#colorlib-main-nav ul li {
776  padding: 0;
777  margin: 0;
778  list-style: none;
779  font-weight: 600;
780  font-size: 14px;
781  letter-spacing: 5px;
782  text-transform: uppercase;
783}
784
785#colorlib-main-nav ul li a {
786  display: block;
787  color: white;
788  padding: 5px 0;
789}
790
791#colorlib-main-nav ul li a span {
792  color: white;
793  position: relative;
794  padding: 0 10px;
795}
796
797#colorlib-main-nav ul li a span small {
798  position: absolute;
799  bottom: 7px;
800  left: -30px;
801  font-size: 16px;
802  color: rgba(255, 255, 255, 0.3);
803  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
804}
805
806#colorlib-main-nav ul li a:hover,
807#colorlib-main-nav ul li a:active,
808#colorlib-main-nav ul li a:focus {
809  outline: none;
810  text-decoration: none;
811}
812
813#colorlib-main-nav ul li a:hover span:before,
814#colorlib-main-nav ul li a:active span:before,
815#colorlib-main-nav ul li a:focus span:before {
816  visibility: visible;
817  -webkit-transform: scaleX(1);
818  -moz-transform: scaleX(1);
819  -ms-transform: scaleX(1);
820  -o-transform: scaleX(1);
821  transform: scaleX(1);
822}
823
824#colorlib-main-nav ul li.active a span {
825  color: #f8b500;
826}
827
828#colorlib-main-nav ul li.active a span:before {
829  background: #fec771;
830  visibility: visible;
831  -webkit-transform: scaleX(1);
832  -moz-transform: scaleX(1);
833  -ms-transform: scaleX(1);
834  -o-transform: scaleX(1);
835  transform: scaleX(1);
836}
837
838header {
839  padding: 2em 0;
840  position: absolute;
841  top: 0;
842  left: 0;
843  right: 0;
844  z-index: 9;
845  margin: 0 auto;
846}
847
848@media (max-width: 767.98px) {
849  header {
850    padding: 1em 0;
851    position: absolute;
852  }
853}
854
855header .colorlib-navbar-brand {
856  float: left;
857}
858
859header .colorlib-navbar-brand .colorlib-logo {
860  font-size: 12px;
861  color: #fff;
862  letter-spacing: 5px;
863  font-weight: 600;
864  position: relative;
865  display: inline-block;
866  margin-bottom: 0;
867  line-height: 1.5;
868  font-family: "Poppins", Arial, sans-serif;
869  text-transform: uppercase;
870}
871
872header .colorlib-navbar-brand .colorlib-logo span {
873  font-size: 11px;
874  display: block;
875  font-weight: 300;
876  color: rgba(255, 255, 255, 0.8);
877  letter-spacing: 7px;
878}
879
880header .colorlib-navbar-brand .colorlib-logo i {
881  color: #fec771;
882  position: absolute;
883  top: -18px;
884  bottom: 0;
885  left: 7px;
886  font-size: 48px;
887}
888
889header .colorlib-navbar-brand .colorlib-logo:hover {
890  text-decoration: none !important;
891}
892
893header .colorlib-navbar-brand .colorlib-logo:active,
894header .colorlib-navbar-brand .colorlib-logo:focus {
895  outline: none;
896  text-decoration: none;
897}
898
899.colorlib-nav-toggle {
900  cursor: pointer;
901  text-decoration: none;
902}
903
904.colorlib-nav-toggle.active i::before,
905.colorlib-nav-toggle.active i::after {
906  background: #000;
907}
908
909.colorlib-nav-toggle.dark.active i::before,
910.colorlib-nav-toggle.dark.active i::after {
911  background: #000;
912}
913
914.colorlib-nav-toggle:hover,
915.colorlib-nav-toggle:focus,
916.colorlib-nav-toggle:active {
917  outline: none;
918  border-bottom: none !important;
919}
920
921.colorlib-nav-toggle i {
922  position: relative;
923  display: inline-block;
924  width: 20px;
925  height: 2px;
926  color: #000;
927  font: bold 14px/.4 Helvetica;
928  text-transform: uppercase;
929  text-indent: -55px;
930  background: #fff;
931  -webkit-transition: all .2s ease-out;
932  -o-transition: all .2s ease-out;
933  transition: all .2s ease-out;
934}
935
936.menu-show .colorlib-nav-toggle i {
937  background: #fff;
938  color: #fff;
939}
940
941.colorlib-nav-toggle i::before,
942.colorlib-nav-toggle i::after {
943  content: '';
944  width: 30px;
945  height: 2px;
946  background: #fff;
947  position: absolute;
948  left: 0;
949  -webkit-transition: 0.2s;
950  -o-transition: 0.2s;
951  transition: 0.2s;
952}
953
954.menu-show .colorlib-nav-toggle i::before,
955.menu-show .colorlib-nav-toggle i::after {
956  background: #fff;
957}
958
959@media (prefers-reduced-motion: reduce) {
960  .colorlib-nav-toggle i::before,
961  .colorlib-nav-toggle i::after {
962    -webkit-transition: none;
963    -o-transition: none;
964    transition: none;
965  }
966}
967
968.colorlib-nav-toggle.dark i {
969  position: relative;
970  color: #fff;
971  background: #fff;
972  -webkit-transition: all .2s ease-out;
973  -o-transition: all .2s ease-out;
974  transition: all .2s ease-out;
975}
976
977.colorlib-nav-toggle.dark i::before,
978.colorlib-nav-toggle.dark i::after {
979  background: #fff;
980  -webkit-transition: 0.2s;
981  -o-transition: 0.2s;
982  transition: 0.2s;
983}
984
985@media (prefers-reduced-motion: reduce) {
986  .colorlib-nav-toggle.dark i::before,
987  .colorlib-nav-toggle.dark i::after {
988    -webkit-transition: none;
989    -o-transition: none;
990    transition: none;
991  }
992}
993
994.colorlib-nav-toggle i::before {
995  top: -7px;
996}
997
998.colorlib-nav-toggle i::after {
999  bottom: -7px;
1000}
1001
1002.colorlib-nav-toggle:hover i::before {
1003  top: -10px;
1004}
1005
1006.colorlib-nav-toggle:hover i::after {
1007  bottom: -10px;
1008}
1009
1010.colorlib-nav-toggle.active i {
1011  background: transparent;
1012}
1013
1014.colorlib-nav-toggle.active i::before {
1015  top: 0;
1016  -webkit-transform: rotateZ(45deg);
1017  -moz-transform: rotateZ(45deg);
1018  -ms-transform: rotateZ(45deg);
1019  -o-transform: rotateZ(45deg);
1020  transform: rotateZ(45deg);
1021}
1022
1023.colorlib-nav-toggle.active i::after {
1024  bottom: 0;
1025  -webkit-transform: rotateZ(-45deg);
1026  -moz-transform: rotateZ(-45deg);
1027  -ms-transform: rotateZ(-45deg);
1028  -o-transform: rotateZ(-45deg);
1029  transform: rotateZ(-45deg);
1030}
1031
1032.colorlib-nav-toggle {
1033  float: right;
1034  z-index: 1003;
1035  position: relative;
1036  top: 0;
1037  right: 0;
1038  display: block;
1039  margin: 0 auto;
1040  cursor: pointer;
1041  margin-top: 0;
1042}
1043
1044@media (max-width: 767.98px) {
1045  .colorlib-nav-toggle {
1046    right: 10px;
1047  }
1048}
1049
1050.hero-wrap {
1051  background: #202020;
1052}
1053
1054.hero-wrap .slider-text .desc h1 {
1055  font-size: 6vw;
1056  font-weight: 700;
1057  color: #fff;
1058  text-transform: uppercase;
1059}
1060
1061.hero-wrap .slider-text .desc h3 {
1062  color: rgba(255, 255, 255, 0.8);
1063  font-size: 18px;
1064}<!-- Bootstrap CSS -->
1065<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
1066
1067<nav id="colorlib-main-nav" role="navigation">
1068  <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle active"><i></i></a>
1069  <div class="js-fullheight colorlib-table">
1070    <div class="img" style="background-image: url(images/bg_3.jpg);"></div>
1071    <div class="colorlib-table-cell js-fullheight">
1072      <div class="row no-gutters">
1073        <div class="col-md-12 text-center">
1074          <h1 class="mb-4"><a href="index.html" class="logo">Company Logo</a></h1>
1075          <ul>
1076            <li class="active"><a href="index.html"><span>Home</span></a></li>
1077            <li><a href="about.html"><span>About</span></a></li>
1078            <li><a href="blog.html"><span>Blog</span></a></li>
1079            <li><a href="contact.html"><span>Contact</span></a></li>
1080          </ul>
1081        </div>
1082      </div>
1083    </div>
1084  </div>
1085</nav>
1086
1087<div class="header h-100">
1088  <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle"><i></i></a>
1089  <h1 id="h-100" class="introduction h-100">Virtual Reality</h1>
1090
1091</div>
1092
1093<div class="h-100">
1094  <h2 class="center">Was ist Virtual Reality (VR)</h2>
1095  <p class="center">Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann</p>
1096</div>
1097
1098
1099<div id="vr-headset-kategorien" class="">
1100  <!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right-->
1101  <div id="standalone" class="row">
1102    <!---->
1103    <div class="vr-left_side container col-lg-6">
1104      <div class="sketchfab-embed-wrapper"> <iframe title="Quest 2 Headset - FanArt" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share
1105          src="https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&autostart=1&ui_hint=0"> </iframe>
1106        <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Quest 2 Headset - FanArt </a>          by <a href="https://sketchfab.com/josevillotguisan?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> joseVG </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3"
1107            target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p>
1108      </div>
1109    </div>
1110
1111    <div class="vr-right_side container col-lg-6">
1112      <h3>Standalone</h3>
1113
1114      <p>Standalone VR-Headsets benötigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super für Anfänger geeignet</p>
1115
1116      <p>
1117        Vorteile:<br /> Kein guter PC benötigt<br /> Niedriger Einstiegspreis trotz guter Hardware<br/> Gut optimierbar, da es für das Heaset nur einen Prozessor gibt</p>
1118
1119      <p>Nachteile:<br /> Je nach Headset schlechte Performance bei fordernden Spielen</p>
1120    </div>
1121
1122  </div>
1123
1124  <div id="pc" class="row">
1125    <div class="vr-left_side container col-lg-6">
1126      <div class="sketchfab-embed-wrapper"> <iframe title="HTC Vive" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&autostart=1&ui_hint=0"> </iframe>
1127        <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> HTC Vive </a>          by <a href="https://sketchfab.com/EternalRealm?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Eternal Realm </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33"
1128            target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p>
1129      </div>
1130    </div>
1131
1132    <div class="vr-right_side container col-lg-6">
1133      <h3>PC-VR</h3>
1134      <p>PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden über ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem schönes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie
1135        vor allem für Enthusiasten geeignet</p>
1136
1137      <p>Vorteile:<br /> Hohe Auflösung<br /> Wenig Lags</p>
1138
1139      <p>Nachteile:<br /> Hoher Einstiegspreis</p>
1140    </div>
1141  </div>
1142
1143  <div id="fulldive" class="row">
1144    <div class="vr-left_side container col-lg-6">
1145      <div class="sketchfab-embed-wrapper"> <iframe title="neuraLink" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&autostart=1"> </iframe>
1146        <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> neuraLink </a>          by <a href="https://sketchfab.com/rfarencibia?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> rfarencibia </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b"
1147            target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p>
1148      </div>
1149    </div>
1150
1151    <div class="vr-right_side container col-lg-6">
1152      <h3>Full-Dive VR</h3>
1153      <p>Tauche komplett in die VR-Welt ein. Full-Dive VR-Headsets befinden sich bereits in Entwicklung. Bei diesem Ansatz wird keine VR-Brille verwendet, die wie ein Monitor funktioniert sondern Full-Dive VR-Headsets greifen direkt auf die Seh-, Tast-,
1154        und weitere Nerven zu. Daher ist dies auch die umstrittenste Technologie</p>
1155
1156      <p>Vorteile:<br /> Unvergleichliche Immersion</p>
1157
1158      <p>Nachteile:<br /> Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber möglich</p>
1159    </div>
1160  </div>
1161
1162</div>
1163
1164
1165
1166
1167<!-- Optional JavaScript -->
1168<!-- jQuery first, then Popper.js, then Bootstrap JS -->
1169<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
1170<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
1171<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

1    body {
2    background-image: url("https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg");
3}
4
5.header {
6
7}
8
9#heading {
10  text-align: center;
11  font-family: 'Montserrat', sans-serif;
12  color: white;
13}
14
15#logo {
16  display: block;
17  margin-left: auto;
18  margin-right: auto;
19}
20
21.container {
22  border-radius: 5px;
23  background-color: #f2f2f2;
24  padding: 20px;
25  width: 400px;
26  min-height: 350px;
27  margin: 0 auto;
28}
29
30select, input[type=text] {
31  width: 100%;
32  padding: 12px 20px;
33  margin: 8px 0;
34  display: inline-block;
35  border: 1px solid #ccc;
36  border-radius: 4px;
37  box-sizing: border-box;
38}
39
40input[type=submit] {
41  width: 100%;
42  background-color: #4CAF50;
43  color: white;
44  padding: 14px 20px;
45  margin: 8px 0;
46  border: none;
47  border-radius: 4px;
48  cursor: pointer;
49}
50
51input[type=submit]:hover {
52  background-color: #45a049;
53}
54
55label {
56  font-family: 'Spinnaker', sans-serif;
57}
58
59#deviceSelector select {
60  width: 50%;
61  padding: 16px 20px;
62  border: none;
63  border-radius: 4px;
64  background-color: #DDDDDD;
65}<div class="header">
66    <img src="logo.png" id="logo">
67    <h1 id="heading">Tidsbokning</h1>
68</div>
69<div class='container'>
70    <form action='' method='post' id='firstForm' autocomplete='off'>
71        <label for='people'>Välj antal personer</label>
72        <select id='people' name='people'>
73            <option value='1'>1</option>
74            <option value='2'>2</option>
75            <option value='3'>3</option>
76            <option value='4'>4</option>
77            <option value='5'>5</option>
78            <option value='6'>6</option>
79            <option value='7'>7</option>
80            <option value='8'>8</option>
81            <option value='9'>9</option>
82            <option value='10'>10</option>
83        </select>
84        <div id='deviceSelector'>
85            <label for='device1'>Välj enhet (person 1)</label><br>
86            <select id='device1' name='device1'>
87                <option value='VR'>Virtual Reality</option>
88                <option value='RacingSim'>Racing Simulator</option>
89                <option value='PC'>Dator</option>
90                <option value='Switch'>Nintendo Switch</option>
91            </select><br>
92        </div>
93        <label for='time'>Välj tid</label>
94        <select id='time' name='time'>
95            <option value='30'>30 min</option>
96            <option value='60'>1h</option>
97            <option value='90'>1h 30min</option>
98            <option value='120'>2h</option>
99            <option value='150'>2h 30 min</option>
100            <option value='180'>3h</option>
101            <option value='210'>3h 30 min</option>
102            <option value='240'>4h</option>
103            <option value='270'>4h 30 min</option>
104            <option value='300'>5h</option>
105        </select>
106        <label for='priceTotal'>Pris</label>
107        <input type='text' id='priceTotal' name='priceTotal' value='50 kr' disabled>
108        <input type='submit' name='submit' value='Fortsätt'>
109    </form>
110</div>@media screen and (max-width: 480px) {
111  .container {width: 300px;}
112}
113

1    body {
2    background-image: url("https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg");
3}
4
5.header {
6
7}
8
9#heading {
10  text-align: center;
11  font-family: 'Montserrat', sans-serif;
12  color: white;
13}
14
15#logo {
16  display: block;
17  margin-left: auto;
18  margin-right: auto;
19}
20
21.container {
22  border-radius: 5px;
23  background-color: #f2f2f2;
24  padding: 20px;
25  width: 400px;
26  min-height: 350px;
27  margin: 0 auto;
28}
29
30select, input[type=text] {
31  width: 100%;
32  padding: 12px 20px;
33  margin: 8px 0;
34  display: inline-block;
35  border: 1px solid #ccc;
36  border-radius: 4px;
37  box-sizing: border-box;
38}
39
40input[type=submit] {
41  width: 100%;
42  background-color: #4CAF50;
43  color: white;
44  padding: 14px 20px;
45  margin: 8px 0;
46  border: none;
47  border-radius: 4px;
48  cursor: pointer;
49}
50
51input[type=submit]:hover {
52  background-color: #45a049;
53}
54
55label {
56  font-family: 'Spinnaker', sans-serif;
57}
58
59#deviceSelector select {
60  width: 50%;
61  padding: 16px 20px;
62  border: none;
63  border-radius: 4px;
64  background-color: #DDDDDD;
65}<div class="header">
66    <img src="logo.png" id="logo">
67    <h1 id="heading">Tidsbokning</h1>
68</div>
69<div class='container'>
70    <form action='' method='post' id='firstForm' autocomplete='off'>
71        <label for='people'>Välj antal personer</label>
72        <select id='people' name='people'>
73            <option value='1'>1</option>
74            <option value='2'>2</option>
75            <option value='3'>3</option>
76            <option value='4'>4</option>
77            <option value='5'>5</option>
78            <option value='6'>6</option>
79            <option value='7'>7</option>
80            <option value='8'>8</option>
81            <option value='9'>9</option>
82            <option value='10'>10</option>
83        </select>
84        <div id='deviceSelector'>
85            <label for='device1'>Välj enhet (person 1)</label><br>
86            <select id='device1' name='device1'>
87                <option value='VR'>Virtual Reality</option>
88                <option value='RacingSim'>Racing Simulator</option>
89                <option value='PC'>Dator</option>
90                <option value='Switch'>Nintendo Switch</option>
91            </select><br>
92        </div>
93        <label for='time'>Välj tid</label>
94        <select id='time' name='time'>
95            <option value='30'>30 min</option>
96            <option value='60'>1h</option>
97            <option value='90'>1h 30min</option>
98            <option value='120'>2h</option>
99            <option value='150'>2h 30 min</option>
100            <option value='180'>3h</option>
101            <option value='210'>3h 30 min</option>
102            <option value='240'>4h</option>
103            <option value='270'>4h 30 min</option>
104            <option value='300'>5h</option>
105        </select>
106        <label for='priceTotal'>Pris</label>
107        <input type='text' id='priceTotal' name='priceTotal' value='50 kr' disabled>
108        <input type='submit' name='submit' value='Fortsätt'>
109    </form>
110</div>@media screen and (max-width: 480px) {
111  .container {width: 300px;}
112}
113body {
114    background-image:url("https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg");
115}
116
117.header {
118
119}
120
121#heading {
122  text-align: center;
123  font-family: 'Montserrat', sans-serif;
124  color: white;
125}
126
127#logo {
128  display: block;
129  margin-left: auto;
130  margin-right: auto;
131}
132
133.container {
134  border-radius: 5px;
135  background-color: #f2f2f2;
136  padding: 20px;
137  width: 400px;
138  min-height: 350px;
139  margin: 0 auto;
140}
141
142@media screen and (max-width: 480px) {
143   .container {width: 300px;}
144 }
145
146select, input[type=text] {
147  width: 100%;
148  padding: 12px 20px;
149  margin: 8px 0;
150  display: inline-block;
151  border: 1px solid #ccc;
152  border-radius: 4px;
153  box-sizing: border-box;
154}
155
156input[type=submit] {
157  width: 100%;
158  background-color: #4CAF50;
159  color: white;
160  padding: 14px 20px;
161  margin: 8px 0;
162  border: none;
163  border-radius: 4px;
164  cursor: pointer;
165}
166
167input[type=submit]:hover {
168  background-color: #45a049;
169}
170
171label {
172  font-family: 'Spinnaker', sans-serif;
173}
174
175#deviceSelector select {
176  width: 50%;
177  padding: 16px 20px;
178  border: none;
179  border-radius: 4px;
180  background-color: #DDDDDD;
181}

1    body {
2    background-image: url("https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg");
3}
4
5.header {
6
7}
8
9#heading {
10  text-align: center;
11  font-family: 'Montserrat', sans-serif;
12  color: white;
13}
14
15#logo {
16  display: block;
17  margin-left: auto;
18  margin-right: auto;
19}
20
21.container {
22  border-radius: 5px;
23  background-color: #f2f2f2;
24  padding: 20px;
25  width: 400px;
26  min-height: 350px;
27  margin: 0 auto;
28}
29
30select, input[type=text] {
31  width: 100%;
32  padding: 12px 20px;
33  margin: 8px 0;
34  display: inline-block;
35  border: 1px solid #ccc;
36  border-radius: 4px;
37  box-sizing: border-box;
38}
39
40input[type=submit] {
41  width: 100%;
42  background-color: #4CAF50;
43  color: white;
44  padding: 14px 20px;
45  margin: 8px 0;
46  border: none;
47  border-radius: 4px;
48  cursor: pointer;
49}
50
51input[type=submit]:hover {
52  background-color: #45a049;
53}
54
55label {
56  font-family: 'Spinnaker', sans-serif;
57}
58
59#deviceSelector select {
60  width: 50%;
61  padding: 16px 20px;
62  border: none;
63  border-radius: 4px;
64  background-color: #DDDDDD;
65}<div class="header">
66    <img src="logo.png" id="logo">
67    <h1 id="heading">Tidsbokning</h1>
68</div>
69<div class='container'>
70    <form action='' method='post' id='firstForm' autocomplete='off'>
71        <label for='people'>Välj antal personer</label>
72        <select id='people' name='people'>
73            <option value='1'>1</option>
74            <option value='2'>2</option>
75            <option value='3'>3</option>
76            <option value='4'>4</option>
77            <option value='5'>5</option>
78            <option value='6'>6</option>
79            <option value='7'>7</option>
80            <option value='8'>8</option>
81            <option value='9'>9</option>
82            <option value='10'>10</option>
83        </select>
84        <div id='deviceSelector'>
85            <label for='device1'>Välj enhet (person 1)</label><br>
86            <select id='device1' name='device1'>
87                <option value='VR'>Virtual Reality</option>
88                <option value='RacingSim'>Racing Simulator</option>
89                <option value='PC'>Dator</option>
90                <option value='Switch'>Nintendo Switch</option>
91            </select><br>
92        </div>
93        <label for='time'>Välj tid</label>
94        <select id='time' name='time'>
95            <option value='30'>30 min</option>
96            <option value='60'>1h</option>
97            <option value='90'>1h 30min</option>
98            <option value='120'>2h</option>
99            <option value='150'>2h 30 min</option>
100            <option value='180'>3h</option>
101            <option value='210'>3h 30 min</option>
102            <option value='240'>4h</option>
103            <option value='270'>4h 30 min</option>
104            <option value='300'>5h</option>
105        </select>
106        <label for='priceTotal'>Pris</label>
107        <input type='text' id='priceTotal' name='priceTotal' value='50 kr' disabled>
108        <input type='submit' name='submit' value='Fortsätt'>
109    </form>
110</div>@media screen and (max-width: 480px) {
111  .container {width: 300px;}
112}
113body {
114    background-image:url("https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_coco_16x9_9ccd7110.jpeg");
115}
116
117.header {
118
119}
120
121#heading {
122  text-align: center;
123  font-family: 'Montserrat', sans-serif;
124  color: white;
125}
126
127#logo {
128  display: block;
129  margin-left: auto;
130  margin-right: auto;
131}
132
133.container {
134  border-radius: 5px;
135  background-color: #f2f2f2;
136  padding: 20px;
137  width: 400px;
138  min-height: 350px;
139  margin: 0 auto;
140}
141
142@media screen and (max-width: 480px) {
143   .container {width: 300px;}
144 }
145
146select, input[type=text] {
147  width: 100%;
148  padding: 12px 20px;
149  margin: 8px 0;
150  display: inline-block;
151  border: 1px solid #ccc;
152  border-radius: 4px;
153  box-sizing: border-box;
154}
155
156input[type=submit] {
157  width: 100%;
158  background-color: #4CAF50;
159  color: white;
160  padding: 14px 20px;
161  margin: 8px 0;
162  border: none;
163  border-radius: 4px;
164  cursor: pointer;
165}
166
167input[type=submit]:hover {
168  background-color: #45a049;
169}
170
171label {
172  font-family: 'Spinnaker', sans-serif;
173}
174
175#deviceSelector select {
176  width: 50%;
177  padding: 16px 20px;
178  border: none;
179  border-radius: 4px;
180  background-color: #DDDDDD;
181}<div class="header">
182    <img src="logo.png" id="logo">
183    <h1 id="heading">Tidsbokning</h1>
184</div>
185<div class='container'>
186    <form action='' method='post' id='firstForm' autocomplete='off'>
187        <label for='people'>Välj antal personer</label>
188        <select id='people' name='people'>
189            <option value='1'>1</option>
190            <option value='2'>2</option>
191            <option value='3'>3</option>
192            <option value='4'>4</option>
193            <option value='5'>5</option>
194            <option value='6'>6</option>
195            <option value='7'>7</option>
196            <option value='8'>8</option>
197            <option value='9'>9</option>
198            <option value='10'>10</option>
199        </select>
200        <div id='deviceSelector'>
201            <label for='device1'>Välj enhet (person 1)</label><br>
202            <select id='device1' name='device1'>
203                <option value='VR'>Virtual Reality</option>
204                <option value='RacingSim'>Racing Simulator</option>
205                <option value='PC'>Dator</option>
206                <option value='Switch'>Nintendo Switch</option>
207            </select><br>
208        </div>
209        <label for='time'>Välj tid</label>
210        <select id='time' name='time'>
211            <option value='30'>30 min</option>
212            <option value='60'>1h</option>
213            <option value='90'>1h 30min</option>
214            <option value='120'>2h</option>
215            <option value='150'>2h 30 min</option>
216            <option value='180'>3h</option>
217            <option value='210'>3h 30 min</option>
218            <option value='240'>4h</option>
219            <option value='270'>4h 30 min</option>
220            <option value='300'>5h</option>
221        </select>
222        <label for='priceTotal'>Pris</label>
223        <input type='text' id='priceTotal' name='priceTotal' value='50 kr' disabled>
224        <input type='submit' name='submit' value='Fortsätt'>
225    </form>
226</div>

1karaf@root()> bundle:list
2START LEVEL 100 , List Threshold: 50
3 ID | State  | Lvl | Version            | Name
4----+--------+-----+--------------------+---------------------------------------------------------------------------
5 31 | Active |  80 | 4.3.0              | Apache Karaf :: OSGi Services :: Event
6 54 | Active |  80 | 1.3.2              | Apache Aries SPI Fly Dynamic Weaving Bundle
7 55 | Active |  80 | 9.0.0              | org.objectweb.asm
8 56 | Active |  80 | 9.0.0              | org.objectweb.asm.commons
9 57 | Active |  80 | 9.0.0              | org.objectweb.asm.tree
10 58 | Active |  80 | 9.0.0              | org.objectweb.asm.tree.analysis
11 59 | Active |  80 | 9.0.0              | org.objectweb.asm.util
12 60 | Active |  80 | 2.0.17             | OpenWebBeans Core
13 61 | Active |  80 | 2.0.17             | SPI definition
14 62 | Active |  80 | 1.1.3              | Apache Aries CDI - CDI Component Runtime (CCR)
15 63 | Active |  80 | 1.1.3              | Apache Aries CDI - SPI classes for Portable Extensions
16 64 | Active |  80 | 1.1.3              | Apache Aries CDI - Container using Apache OpenWebBeans
17 65 | Active |  80 | 1.1.3              | Apache Aries CDI - SPI
18 66 | Active |  80 | 1.0.12             | Apache Felix Converter
19 67 | Active |  80 | 1.2.0              | Apache Geronimo JSR-330 Spec 1.0
20 68 | Active |  80 | 1.1.0              | Apache Geronimo Expression Language Spec 2.2
21 69 | Active |  80 | 1.2.0              | Apache Geronimo Interceptor Spec 1.2
22 70 | Active |  80 | 1.2.0              | Apache Geronimo JCDI Spec 2.0
23 71 | Active |  80 | 1.3.0.3            | Apache ServiceMix :: Specs :: Annotation API 1.3
24 72 | Active |  80 | 4.17.0             | Apache XBean :: ASM shaded (repackaged)
25 73 | Active |  80 | 4.17.0             | Apache XBean OSGI Bundle Utilities
26 74 | Active |  80 | 4.17.0             | Apache XBean :: Finder shaded (repackaged)
27 75 | Active |  80 | 1.0.1.201505202024 | org.osgi:org.osgi.namespace.extender
28 76 | Active |  80 | 1.0.0.201505202024 | org.osgi:org.osgi.namespace.implementation
29 77 | Active |  80 | 1.0.0.201505202024 | org.osgi:org.osgi.namespace.service
30 78 | Active |  80 | 1.0.0.201810101357 | org.osgi:org.osgi.service.cdi
31 79 | Active |  80 | 1.1.0.201802012106 | org.osgi:org.osgi.util.function
32 80 | Active |  80 | 1.1.0.201802012106 | org.osgi:org.osgi.util.promise
33 81 | Active |  80 | 4.3.1.SNAPSHOT     | Apache Karaf :: OSGi Services :: Event
34134 | Active |  80 | 1.0.0              | Virtual reality server
35135 | Active |  80 | 0.0.1.SNAPSHOT     | VRComponent
36136 | Active |  80 | 0.0.1.SNAPSHOT     | VRFrame
37142 | Active |  80 | 0.0.1.SNAPSHOT     | Virtual reality integrated development environment (VRIDE)
38karaf@root()>
3910:00:42.193 WARN [fileinstall-C:\Program Files\apache-karaf-4.3.0/deploy] Error while creating extension
40java.lang.NoClassDefFoundError: Lde/e_nexus/vr/tk/VRFrame;
41        at java.lang.Class.getDeclaredFields0(Native Method) ~[?:1.8.0_232]
42        at java.lang.Class.privateGetDeclaredFields(Class.java:2611) ~[?:1.8.0_232]
43        at java.lang.Class.getDeclaredFields(Class.java:1944) ~[?:1.8.0_232]
44        at org.apache.aries.cdi.container.internal.util.Reflection.allFields(Reflection.java:47) ~[!/:1.1.3]
45        at org.apache.aries.cdi.container.internal.annotated.AnnotatedTypeImpl.<init>(AnnotatedTypeImpl.java:42) ~[!/:1.1.3]
46        at org.apache.aries.cdi.container.internal.container.Discovery.lambda$discover$8(Discovery.java:133) ~[!/:1.1.3]
47        at java.util.HashMap$Values.forEach(HashMap.java:981) ~[?:1.8.0_232]
48package de.e_nexus.desktop.vr.ide;
49
50import java.util.logging.Logger;
51
52import javax.annotation.PostConstruct;
53import javax.annotation.PreDestroy;
54import javax.enterprise.context.ApplicationScoped;
55import javax.inject.Inject;
56
57import org.osgi.service.cdi.annotations.Reference;
58import org.osgi.service.cdi.annotations.Service;
59
60import de.e_nexus.vr.server.ClientKeyboardScancode;
61import de.e_nexus.vr.server.VRClientHelmetAndControllerListener;
62import de.e_nexus.vr.server.VRClientKeyboardListener;
63import de.e_nexus.vr.server.VRServer;
64import de.e_nexus.vr.server.listeners.VRClientRequestAppInfo;
65import de.e_nexus.vr.server.listeners.VRClientStatusListener;
66import de.e_nexus.vr.server.listeners.interaction.HelmetAndControllerInfo;
67import de.e_nexus.vr.server.osgi.inter.VRServerService;
68import de.e_nexus.vr.tk.VRFrame;
69
70@ApplicationScoped
71@Service
72public class StartIDE implements VRClientStatusListener, VRClientRequestAppInfo, VRClientHelmetAndControllerListener, VRClientKeyboardListener {
73    /**
74     * The logger for this class.
75     */
76    private static final Logger LOG = Logger.getLogger(StartIDE.class.getCanonicalName());
77
78    private final static Object lock = new Object();
79
80    private VRServer vrServer;
81
82    public void notifyStatus(boolean connected) {
83        if (!connected) {
84            synchronized (lock) {
85                lock.notify();
86            }
87        }
88    }
89
90    @Reference
91    @Inject
92    private VRServerService vrServerService;
93
94    private VRFrame applicationFrame;
95
96    @PostConstruct
97    public void initialize() {
98        LOG.fine("Starting VR IDE");
99        vrServer = vrServerService.getVRServer();
100        applicationFrame = new VRFrame(vrServer, "test");
101
102        LOG.info(getLatin1Title() + " started successfully!");
103    }
104
105    @PreDestroy
106    public void teardown() {
107        applicationFrame.remove();
108        LOG.info("Stoped " + getLatin1Title() + " successfully!");
109        vrServer = null;
110    }
111
112    public VRServer getVrServer() {
113        return vrServer;
114    }
115
116    @Override
117    public void notify(HelmetAndControllerInfo haci) {
118
119    }
120
121    @Override
122    public String getLatin1Title() {
123        return "VR IDE";
124    }
125
126    @Override
127    public void notifyKeyboardEvent(ClientKeyboardScancode[] downs, ClientKeyboardScancode[] ups, long incomingTime) {
128        System.out.println("me");
129    }
130}
131java.lang.NoClassDefFoundError: Lde/e_nexus/vr/tk/VRFrame;
132        at java.lang.Class.getDeclaredFields0(Native Method) ~[?:1.8.0_232]
133        at java.lang.Class.privateGetDeclaredFields(Class.java:2611) ~[?:1.8.0_232]
134        at java.lang.Class.getDeclaredFields(Class.java:1944) ~[?:1.8.0_232]
135        at org.apache.aries.cdi.container.internal.util.Reflection.allFields(Reflection.java:47) ~[!/:1.1.3]
136        at org.apache.aries.cdi.container.internal.annotated.AnnotatedTypeImpl.<init>(AnnotatedTypeImpl.java:42) ~[!/:1.1.3]
137        at org.apache.aries.cdi.container.internal.container.Discovery.lambda$discover$8(Discovery.java:133) ~[!/:1.1.3]
138        at java.util.HashMap$Values.forEach(HashMap.java:981) ~[?:1.8.0_232]
139        at org.apache.aries.cdi.container.internal.container.Discovery.discover(Discovery.java:130) ~[!/:1.1.3]
140        at org.apache.aries.cdi.container.internal.container.ContainerState.<init>(ContainerState.java:178) ~[!/:1.1.3]
141        at org.apache.aries.cdi.container.internal.Activator.doCreateExtension(Activator.java:209) [!/:1.1.3]
142        at org.apache.felix.utils.extender.AbstractExtender.createExtension(AbstractExtender.java:242) [!/:1.1.3]
143        at org.apache.felix.utils.extender.AbstractExtender.modifiedBundle(AbstractExtender.java:227) [!/:1.1.3]
144        at org.osgi.util.tracker.BundleTracker$Tracked.customizerModified(BundleTracker.java:488) [osgi.core-7.0.0.jar:?]
145        at org.osgi.util.tracker.BundleTracker$Tracked.customizerModified(BundleTracker.java:420) [osgi.core-7.0.0.jar:?]
146        at org.osgi.util.tracker.AbstractTracked.track(AbstractTracked.java:232) [osgi.core-7.0.0.jar:?]
147        at org.osgi.util.tracker.BundleTracker$Tracked.bundleChanged(BundleTracker.java:450) [osgi.core-7.0.0.jar:?]
148        at org.apache.felix.framework.EventDispatcher.invokeBundleListenerCallback(EventDispatcher.java:915) [org.apache.felix.framework-6.0.3.jar:?]
149        at org.apache.felix.framework.EventDispatcher.fireEventImmediately(EventDispatcher.java:834) [org.apache.felix.framework-6.0.3.jar:?]
150        at org.apache.felix.framework.EventDispatcher.fireBundleEvent(EventDispatcher.java:516) [org.apache.felix.framework-6.0.3.jar:?]
151        at org.apache.felix.framework.Felix.fireBundleEvent(Felix.java:4817) [org.apache.felix.framework-6.0.3.jar:?]
152        at org.apache.felix.framework.Felix.startBundle(Felix.java:2336) [org.apache.felix.framework-6.0.3.jar:?]
153        at org.apache.felix.framework.BundleImpl.start(BundleImpl.java:998) [org.apache.felix.framework-6.0.3.jar:?]
154        at org.apache.felix.fileinstall.internal.DirectoryWatcher.startBundle(DirectoryWatcher.java:1260) [!/:3.6.8]
155        at org.apache.felix.fileinstall.internal.DirectoryWatcher.startBundles(DirectoryWatcher.java:1233) [!/:3.6.8]
156        at org.apache.felix.fileinstall.internal.DirectoryWatcher.doProcess(DirectoryWatcher.java:520) [!/:3.6.8]
157        at org.apache.felix.fileinstall.internal.DirectoryWatcher.process(DirectoryWatcher.java:365) [!/:3.6.8]
158        at org.apache.felix.fileinstall.internal.DirectoryWatcher.run(DirectoryWatcher.java:316) [!/:3.6.8]
159Caused by: java.lang.ClassNotFoundException: de.e_nexus.vr.tk.VRFrame not found by de.e-nexus.component [87]
160        at org.apache.felix.framework.BundleWiringImpl.findClassOrResourceByDelegation(BundleWiringImpl.java:1597) ~[?:?]
161        at org.apache.felix.framework.BundleWiringImpl.access$300(BundleWiringImpl.java:79) ~[?:?]
162        at org.apache.felix.framework.BundleWiringImpl$BundleClassLoader.loadClass(BundleWiringImpl.java:1982) ~[?:?]
163        at java.lang.ClassLoader.loadClass(ClassLoader.java:351) ~[?:1.8.0_232]
164        at org.apache.felix.framework.BundleWiringImpl.getClassByDelegation(BundleWiringImpl.java:1375) ~[?:?]
165        at org.apache.felix.framework.BundleWiringImpl.searchImports(BundleWiringImpl.java:1618) ~[?:?]
166        at org.apache.felix.framework.BundleWiringImpl.findClassOrResourceByDelegation(BundleWiringImpl.java:1548) ~[?:?]
167        at org.apache.felix.framework.BundleWiringImpl.access$300(BundleWiringImpl.java:79) ~[?:?]
168        at org.apache.felix.framework.BundleWiringImpl$BundleClassLoader.loadClass(BundleWiringImpl.java:1982) ~[?:?]
169        at java.lang.ClassLoader.loadClass(ClassLoader.java:351) ~[?:1.8.0_232]
170        ... 27 more
171<plugin>
172    <groupId>org.apache.felix</groupId>
173    <artifactId>maven-bundle-plugin</artifactId>
174    <version>5.1.1</version>
175    <extensions>true</extensions>
176    <configuration>
177        <instructions>
178            <Bundle-SymbolicName>${project.artifactId}</Bundle-SymbolicName>
179            <Bundle-Version>${project.version}</Bundle-Version>
180            <Bundle-Activator>${Bundle-Activator}</Bundle-Activator>
181            <Export-Package>
182                de.*;version=${project.version}
183            </Export-Package>
184            <Import-Package>
185                *
186            </Import-Package>
187        </instructions>
188    </configuration>
189</plugin>
190

1karaf@root()> bundle:list
2START LEVEL 100 , List Threshold: 50
3 ID | State  | Lvl | Version            | Name
4----+--------+-----+--------------------+---------------------------------------------------------------------------
5 31 | Active |  80 | 4.3.0              | Apache Karaf :: OSGi Services :: Event
6 54 | Active |  80 | 1.3.2              | Apache Aries SPI Fly Dynamic Weaving Bundle
7 55 | Active |  80 | 9.0.0              | org.objectweb.asm
8 56 | Active |  80 | 9.0.0              | org.objectweb.asm.commons
9 57 | Active |  80 | 9.0.0              | org.objectweb.asm.tree
10 58 | Active |  80 | 9.0.0              | org.objectweb.asm.tree.analysis
11 59 | Active |  80 | 9.0.0              | org.objectweb.asm.util
12 60 | Active |  80 | 2.0.17             | OpenWebBeans Core
13 61 | Active |  80 | 2.0.17             | SPI definition
14 62 | Active |  80 | 1.1.3              | Apache Aries CDI - CDI Component Runtime (CCR)
15 63 | Active |  80 | 1.1.3              | Apache Aries CDI - SPI classes for Portable Extensions
16 64 | Active |  80 | 1.1.3              | Apache Aries CDI - Container using Apache OpenWebBeans
17 65 | Active |  80 | 1.1.3              | Apache Aries CDI - SPI
18 66 | Active |  80 | 1.0.12             | Apache Felix Converter
19 67 | Active |  80 | 1.2.0              | Apache Geronimo JSR-330 Spec 1.0
20 68 | Active |  80 | 1.1.0              | Apache Geronimo Expression Language Spec 2.2
21 69 | Active |  80 | 1.2.0              | Apache Geronimo Interceptor Spec 1.2
22 70 | Active |  80 | 1.2.0              | Apache Geronimo JCDI Spec 2.0
23 71 | Active |  80 | 1.3.0.3            | Apache ServiceMix :: Specs :: Annotation API 1.3
24 72 | Active |  80 | 4.17.0             | Apache XBean :: ASM shaded (repackaged)
25 73 | Active |  80 | 4.17.0             | Apache XBean OSGI Bundle Utilities
26 74 | Active |  80 | 4.17.0             | Apache XBean :: Finder shaded (repackaged)
27 75 | Active |  80 | 1.0.1.201505202024 | org.osgi:org.osgi.namespace.extender
28 76 | Active |  80 | 1.0.0.201505202024 | org.osgi:org.osgi.namespace.implementation
29 77 | Active |  80 | 1.0.0.201505202024 | org.osgi:org.osgi.namespace.service
30 78 | Active |  80 | 1.0.0.201810101357 | org.osgi:org.osgi.service.cdi
31 79 | Active |  80 | 1.1.0.201802012106 | org.osgi:org.osgi.util.function
32 80 | Active |  80 | 1.1.0.201802012106 | org.osgi:org.osgi.util.promise
33 81 | Active |  80 | 4.3.1.SNAPSHOT     | Apache Karaf :: OSGi Services :: Event
34134 | Active |  80 | 1.0.0              | Virtual reality server
35135 | Active |  80 | 0.0.1.SNAPSHOT     | VRComponent
36136 | Active |  80 | 0.0.1.SNAPSHOT     | VRFrame
37142 | Active |  80 | 0.0.1.SNAPSHOT     | Virtual reality integrated development environment (VRIDE)
38karaf@root()>
3910:00:42.193 WARN [fileinstall-C:\Program Files\apache-karaf-4.3.0/deploy] Error while creating extension
40java.lang.NoClassDefFoundError: Lde/e_nexus/vr/tk/VRFrame;
41        at java.lang.Class.getDeclaredFields0(Native Method) ~[?:1.8.0_232]
42        at java.lang.Class.privateGetDeclaredFields(Class.java:2611) ~[?:1.8.0_232]
43        at java.lang.Class.getDeclaredFields(Class.java:1944) ~[?:1.8.0_232]
44        at org.apache.aries.cdi.container.internal.util.Reflection.allFields(Reflection.java:47) ~[!/:1.1.3]
45        at org.apache.aries.cdi.container.internal.annotated.AnnotatedTypeImpl.<init>(AnnotatedTypeImpl.java:42) ~[!/:1.1.3]
46        at org.apache.aries.cdi.container.internal.container.Discovery.lambda$discover$8(Discovery.java:133) ~[!/:1.1.3]
47        at java.util.HashMap$Values.forEach(HashMap.java:981) ~[?:1.8.0_232]
48package de.e_nexus.desktop.vr.ide;
49
50import java.util.logging.Logger;
51
52import javax.annotation.PostConstruct;
53import javax.annotation.PreDestroy;
54import javax.enterprise.context.ApplicationScoped;
55import javax.inject.Inject;
56
57import org.osgi.service.cdi.annotations.Reference;
58import org.osgi.service.cdi.annotations.Service;
59
60import de.e_nexus.vr.server.ClientKeyboardScancode;
61import de.e_nexus.vr.server.VRClientHelmetAndControllerListener;
62import de.e_nexus.vr.server.VRClientKeyboardListener;
63import de.e_nexus.vr.server.VRServer;
64import de.e_nexus.vr.server.listeners.VRClientRequestAppInfo;
65import de.e_nexus.vr.server.listeners.VRClientStatusListener;
66import de.e_nexus.vr.server.listeners.interaction.HelmetAndControllerInfo;
67import de.e_nexus.vr.server.osgi.inter.VRServerService;
68import de.e_nexus.vr.tk.VRFrame;
69
70@ApplicationScoped
71@Service
72public class StartIDE implements VRClientStatusListener, VRClientRequestAppInfo, VRClientHelmetAndControllerListener, VRClientKeyboardListener {
73    /**
74     * The logger for this class.
75     */
76    private static final Logger LOG = Logger.getLogger(StartIDE.class.getCanonicalName());
77
78    private final static Object lock = new Object();
79
80    private VRServer vrServer;
81
82    public void notifyStatus(boolean connected) {
83        if (!connected) {
84            synchronized (lock) {
85                lock.notify();
86            }
87        }
88    }
89
90    @Reference
91    @Inject
92    private VRServerService vrServerService;
93
94    private VRFrame applicationFrame;
95
96    @PostConstruct
97    public void initialize() {
98        LOG.fine("Starting VR IDE");
99        vrServer = vrServerService.getVRServer();
100        applicationFrame = new VRFrame(vrServer, "test");
101
102        LOG.info(getLatin1Title() + " started successfully!");
103    }
104
105    @PreDestroy
106    public void teardown() {
107        applicationFrame.remove();
108        LOG.info("Stoped " + getLatin1Title() + " successfully!");
109        vrServer = null;
110    }
111
112    public VRServer getVrServer() {
113        return vrServer;
114    }
115
116    @Override
117    public void notify(HelmetAndControllerInfo haci) {
118
119    }
120
121    @Override
122    public String getLatin1Title() {
123        return "VR IDE";
124    }
125
126    @Override
127    public void notifyKeyboardEvent(ClientKeyboardScancode[] downs, ClientKeyboardScancode[] ups, long incomingTime) {
128        System.out.println("me");
129    }
130}
131java.lang.NoClassDefFoundError: Lde/e_nexus/vr/tk/VRFrame;
132        at java.lang.Class.getDeclaredFields0(Native Method) ~[?:1.8.0_232]
133        at java.lang.Class.privateGetDeclaredFields(Class.java:2611) ~[?:1.8.0_232]
134        at java.lang.Class.getDeclaredFields(Class.java:1944) ~[?:1.8.0_232]
135        at org.apache.aries.cdi.container.internal.util.Reflection.allFields(Reflection.java:47) ~[!/:1.1.3]
136        at org.apache.aries.cdi.container.internal.annotated.AnnotatedTypeImpl.<init>(AnnotatedTypeImpl.java:42) ~[!/:1.1.3]
137        at org.apache.aries.cdi.container.internal.container.Discovery.lambda$discover$8(Discovery.java:133) ~[!/:1.1.3]
138        at java.util.HashMap$Values.forEach(HashMap.java:981) ~[?:1.8.0_232]
139        at org.apache.aries.cdi.container.internal.container.Discovery.discover(Discovery.java:130) ~[!/:1.1.3]
140        at org.apache.aries.cdi.container.internal.container.ContainerState.<init>(ContainerState.java:178) ~[!/:1.1.3]
141        at org.apache.aries.cdi.container.internal.Activator.doCreateExtension(Activator.java:209) [!/:1.1.3]
142        at org.apache.felix.utils.extender.AbstractExtender.createExtension(AbstractExtender.java:242) [!/:1.1.3]
143        at org.apache.felix.utils.extender.AbstractExtender.modifiedBundle(AbstractExtender.java:227) [!/:1.1.3]
144        at org.osgi.util.tracker.BundleTracker$Tracked.customizerModified(BundleTracker.java:488) [osgi.core-7.0.0.jar:?]
145        at org.osgi.util.tracker.BundleTracker$Tracked.customizerModified(BundleTracker.java:420) [osgi.core-7.0.0.jar:?]
146        at org.osgi.util.tracker.AbstractTracked.track(AbstractTracked.java:232) [osgi.core-7.0.0.jar:?]
147        at org.osgi.util.tracker.BundleTracker$Tracked.bundleChanged(BundleTracker.java:450) [osgi.core-7.0.0.jar:?]
148        at org.apache.felix.framework.EventDispatcher.invokeBundleListenerCallback(EventDispatcher.java:915) [org.apache.felix.framework-6.0.3.jar:?]
149        at org.apache.felix.framework.EventDispatcher.fireEventImmediately(EventDispatcher.java:834) [org.apache.felix.framework-6.0.3.jar:?]
150        at org.apache.felix.framework.EventDispatcher.fireBundleEvent(EventDispatcher.java:516) [org.apache.felix.framework-6.0.3.jar:?]
151        at org.apache.felix.framework.Felix.fireBundleEvent(Felix.java:4817) [org.apache.felix.framework-6.0.3.jar:?]
152        at org.apache.felix.framework.Felix.startBundle(Felix.java:2336) [org.apache.felix.framework-6.0.3.jar:?]
153        at org.apache.felix.framework.BundleImpl.start(BundleImpl.java:998) [org.apache.felix.framework-6.0.3.jar:?]
154        at org.apache.felix.fileinstall.internal.DirectoryWatcher.startBundle(DirectoryWatcher.java:1260) [!/:3.6.8]
155        at org.apache.felix.fileinstall.internal.DirectoryWatcher.startBundles(DirectoryWatcher.java:1233) [!/:3.6.8]
156        at org.apache.felix.fileinstall.internal.DirectoryWatcher.doProcess(DirectoryWatcher.java:520) [!/:3.6.8]
157        at org.apache.felix.fileinstall.internal.DirectoryWatcher.process(DirectoryWatcher.java:365) [!/:3.6.8]
158        at org.apache.felix.fileinstall.internal.DirectoryWatcher.run(DirectoryWatcher.java:316) [!/:3.6.8]
159Caused by: java.lang.ClassNotFoundException: de.e_nexus.vr.tk.VRFrame not found by de.e-nexus.component [87]
160        at org.apache.felix.framework.BundleWiringImpl.findClassOrResourceByDelegation(BundleWiringImpl.java:1597) ~[?:?]
161        at org.apache.felix.framework.BundleWiringImpl.access$300(BundleWiringImpl.java:79) ~[?:?]
162        at org.apache.felix.framework.BundleWiringImpl$BundleClassLoader.loadClass(BundleWiringImpl.java:1982) ~[?:?]
163        at java.lang.ClassLoader.loadClass(ClassLoader.java:351) ~[?:1.8.0_232]
164        at org.apache.felix.framework.BundleWiringImpl.getClassByDelegation(BundleWiringImpl.java:1375) ~[?:?]
165        at org.apache.felix.framework.BundleWiringImpl.searchImports(BundleWiringImpl.java:1618) ~[?:?]
166        at org.apache.felix.framework.BundleWiringImpl.findClassOrResourceByDelegation(BundleWiringImpl.java:1548) ~[?:?]
167        at org.apache.felix.framework.BundleWiringImpl.access$300(BundleWiringImpl.java:79) ~[?:?]
168        at org.apache.felix.framework.BundleWiringImpl$BundleClassLoader.loadClass(BundleWiringImpl.java:1982) ~[?:?]
169        at java.lang.ClassLoader.loadClass(ClassLoader.java:351) ~[?:1.8.0_232]
170        ... 27 more
171<plugin>
172    <groupId>org.apache.felix</groupId>
173    <artifactId>maven-bundle-plugin</artifactId>
174    <version>5.1.1</version>
175    <extensions>true</extensions>
176    <configuration>
177        <instructions>
178            <Bundle-SymbolicName>${project.artifactId}</Bundle-SymbolicName>
179            <Bundle-Version>${project.version}</Bundle-Version>
180            <Bundle-Activator>${Bundle-Activator}</Bundle-Activator>
181            <Export-Package>
182                de.*;version=${project.version}
183            </Export-Package>
184            <Import-Package>
185                *
186            </Import-Package>
187        </instructions>
188    </configuration>
189</plugin>
190mvn archetype:generate \
191    -DarchetypeGroupId=org.apache.karaf.archetypes \
192    -DarchetypeArtifactId=karaf-bundle-archetype \
193    -DarchetypeVersion=4.3.0 \
194    -DgroupId=io.github.ozkanpakdil \
195    -DartifactId=myfirstbundle \
196    -Dversion=1.0-SNAPSHOT \
197    -Dpackage=io.github.ozkanpakdil
198