Explore all augmented reality, virtual reality open source software, libraries, packages, source code, cloud functions and APIs.

Augmented reality (AR) is an interactive experience of a real-world environment where the objects that reside in the real world are enhanced by computer-generated perceptual information, sometimes across multiple sensory modalities, including visual, auditory, haptic, somatosensory and olfactory. Virtual reality (VR) is a simulated experience that can be similar to or completely different from the real world. Applications of virtual reality include entertainment (e.g. video games) and education (e.g. medical or military training). Other distinct types of VR-style technology include augmented reality and mixed reality, sometimes referred to as extended reality or XR.

Explore Related Topics

Popular New Releases in Virtual Reality

aframe

v1.2.0

engine

v1.53.2

Relativty

Relativty 2 early Release

MixedRealityToolkit-Unity

Microsoft Mixed Reality Toolkit v2.7.3

openvr

v1.16.8

Popular Libraries in Virtual Reality

AR.js

by jeromeetienne doticonhtmldoticon

star image 15308 doticonMIT

Efficient Augmented Reality for the Web - 60fps on mobile!

ar-cutpaste

by cyrildiagne doticontypescriptdoticon

star image 14263 doticonMIT

Cut and paste your surroundings using AR

aframe

by aframevr doticonjavascriptdoticon

star image 13681 doticonMIT

:a: web framework for building virtual reality experiences.

engine

by playcanvas doticonjavascriptdoticon

star image 7301 doticonMIT

Fast and lightweight JavaScript game engine built on WebGL and glTF

Awesome-ARKit

by olucurious doticonswiftdoticon

star image 6962 doticon

A curated list of awesome ARKit projects and resources. Feel free to contribute!

Relativty

by relativty doticonc++doticon

star image 5416 doticonGPL-3.0

An open source VR headset with SteamVR supports for $200

MixedRealityToolkit-Unity

by microsoft doticoncsharpdoticon

star image 5032 doticonMIT

Mixed Reality Toolkit (MRTK) provides a set of components and features to accelerate cross-platform MR app development in Unity.

ARKit-CoreLocation

by ProjectDent doticonswiftdoticon

star image 4993 doticonMIT

Combines the high accuracy of AR with the scale of GPS data.

openvr

by ValveSoftware doticonc++doticon

star image 4789 doticonBSD-3-Clause

OpenVR SDK

Trending New libraries in Virtual Reality

ar-cutpaste

by cyrildiagne doticontypescriptdoticon

star image 14263 doticonMIT

Cut and paste your surroundings using AR

AR.js

by AR-js-org doticonjavascriptdoticon

star image 3449 doticonMIT

Image tracking, Location Based AR, Marker tracking. All on the Web.

react-xr

by pmndrs doticonjavascriptdoticon

star image 1002 doticonMIT

🤳 VR/AR with react-three-fiber

three-mesh-ui

by felixmariotto doticonjavascriptdoticon

star image 686 doticonMIT

⏹ Make VR user interfaces for Three.js

RealityMixer

by fabio914 doticoncdoticon

star image 641 doticonGPL-2.0

Mixed Reality app for iOS

mind-ar-js

by hiukim doticonjavascriptdoticon

star image 621 doticonMIT

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js

PaintingLight

by lllyasviel doticonpythondoticon

star image 550 doticonApache-2.0

Generating Digital Painting Lighting Effects via RGB-space Geometry (SIGGRAPH2020/TOG2020)

April-Tag-VR-FullBody-Tracker

by ju1ce doticonc++doticon

star image 510 doticonMIT

Full-body tracking in VR using AprilTag markers.

arcore-depth-lab

by googlesamples doticoncsharpdoticon

star image 445 doticonApache-2.0

ARCore Depth Lab is a set of Depth API samples that provides assets using depth for advanced geometry-aware features in AR interaction and rendering. (UIST 2020)

Top Authors in Virtual Reality

1

microsoft

29 Libraries

star icon9752

2

MozillaReality

20 Libraries

star icon2418

3

jeromeetienne

15 Libraries

star icon15863

4

udacity

14 Libraries

star icon98

5

maxxfrazer

13 Libraries

star icon1147

6

PacktPublishing

13 Libraries

star icon144

7

immersive-web

13 Libraries

star icon4977

8

Unity-Technologies

12 Libraries

star icon5925

9

Utopiah

11 Libraries

star icon71

10

marpi

10 Libraries

star icon240

1

29 Libraries

star icon9752

2

20 Libraries

star icon2418

3

15 Libraries

star icon15863

4

14 Libraries

star icon98

5

13 Libraries

star icon1147

6

13 Libraries

star icon144

7

13 Libraries

star icon4977

8

12 Libraries

star icon5925

9

11 Libraries

star icon71

10

10 Libraries

star icon240

Trending Kits in Virtual Reality


The Location based AR Kit is a powerful tool for creating augmented reality apps. It uses the camera and motion sensors to understand your surroundings, then it applies computer vision techniques to place digital objects in real-world scenes. AR Kit can locate horizontal planes like tables and floors, allowing you to place objects on a surface without additional calibration. It can also detect a user's position and direction as they walk around an area, which lets you anchor 3D content to specific locations in the physical world.


We have used many libraries like aframe, three.js, and location-based AR libraries to build this AR kit. An HTML5 web framework of aframe that provides you with all the tools needed to create experiences for desktop and mobile devices using WebGL, WebVR and Web Audio. Three.js is an open-source web framework used to develop augmented reality (AR) projects.


kandi kit provides you with a fully deployable Location Based AR app. Source code included so that you can customize it for your requirement.

Troubleshooting

  1. While running batch file, if you encounter Windows protection alert, select More info --> Run anyway
  2. During kit installer, if you encounter a Windows security alert, click Allow


For a detailed tutorial on installing & executing the solution as well as learning resources including training & certification opportunities, please visit the OpenWeaver Community

Development Environment

Visual studio code IDE is used for this development. It becomes easy and simple to develop an interactive UI with Visual studio code.

Location Based AR Libraries

Geo AR is an advanced technology that allows developers to add digital content to geographical points of interest. This means that unlike the typical marker-based Augmented Reality features like Image Tracking & Object Tracking, Geo AR projects do not need a physical target to trigger the feeling of AR experience.


A-Frame is an open-source web framework used for building Augmented reality (AR) experiences.


Three.js is an open-source web framework used to develop augmented reality (AR) projects.

Support

If you need help using this kit, you may reach us at the OpenWeaver Community.

kandi 1-Click Install

AR Core app allows users to experience augmented reality on their Android devices. This kit helps developers and users to experience their own 3d models in their Android devices. The users have the liberty to choose their own 3d models with all the fun elements also. Please see below a sample solution kit to jumpstart your solution on AR App using Android Kit. To use this kit to build your own solution, scroll down to the Kit Deployment Instructions sections.

Development Environment

The Android Studio IDE is open source and used for this development. It has a rich UI development environment with templates to give new developers launching their innovations into Android development.

Android Libraries

ARCore is the advanced platform that enables Android app developers and users to quickly and easily build AR experiences into their mobile apps and games.

Google Sceneform is an open-source 3D framework that makes it easy for you to build ARCore apps.

Android-Gradle is the open-source Android framework used to develop AR projects.

AR Fragments are used to build these ARCore apps.

Instruction to Replace 3d Models

  1. To place your own 3d model, initially, you need to set up your Android studio with "Google Sceneform Tool (Beta)"
  2. To install Google Sceneform Tool just follow the below steps : a. Go to file > settings b. In settings, click on 'plugins' c. In plugins search for "Google Sceneform Tool" in Marketplace d. Once you find, Install and restart the Android Studio
  3. Place your 3d model obj and mtl file in sampledata folder in the application Note:- Name of the obj file should be in lowercase
  4. Make a raw folder under app > src > main > res > raw
  5. Right-click on the obj file and generate the Sceneform for your 3d model under the raw folder.

Support

If you need help to use this kit, you can email us at kandi.support@openweaver.com or direct message us on Twitter Message @OpenWeaverInc.

kandi 1-Click Install

Most JavaScript libraries support marker-based AR, where users scan a physical marker with their device’s camera to trigger an AR experience. Some libraries support markerless AR, which uses object recognition to trigger AR experiences without requiring a physical marker. Here are the top JavaScript Augmented Reality libraries used to create web AR experiences.  


AR libraries support the display of 3D models in AR, which will allow developers to create immersive experiences which blend digital content with the real world. It supports the display of image and video overlays in AR which can be used for displaying information or creating interactive experiences. It uses advanced tracking algorithms for tracking the orientation and position of the device in real-time, which will allow the AR content to be accurately placed and aligned with the real world. These libraries are optimized for best performance with the help of techniques like feature and image recognition for reducing the amount of processing required for tracking the device’s orientation and position.  


Here is the list of top 19 JavaScript Augmented Reality libraries that are handpicked to help developers: 

three.js: 

  • Is a JavaScript library that makes creating and displaying 3D graphics in a web browser easier.  
  • Is one of the most popular 3D graphics libraries for the web and is widely used by web designers and developers for creating immersive and interactive experiences.  
  • Uses WebGL, a web standard to render 3D graphics, for creating high-performance graphics which can be displayed in a web browser. 

AR.js: 

  • Is a JavaScript library to create AR experiences on the web which uses computer vision to enable marker-based AR experiences without additional plugins or software.  
  • Is a lightweight library for Augmented Reality on the web with features like Location-based AR, Marker Tracking, and Image Tracking.  
  • Supports marker-based AR that will allow users to scan physical markers with their device’s camera to trigger AR experiences. 

three.ar.js: 

  • Is a JavaScript library that extends Three.js and AR.js to provide a framework for creating AR experiences in a web browser.  
  • Is designed to simplify the process of creating an AR experience by offering utilities and tools which integrate seamlessly with AR.js and Three.js.  
  • Is optimized for use on mobile devices and supports both Android and iOS. 

webxr: 

  • The WebXR device API to access VR and AR devices, like head-mounted displays and sensors on the Web.  
  • Is designed for creating immersive augmented reality and virtual experiences in web browsers.  
  • Is designed to be easy to set up and use with a simple API, allowing developers to get started quickly. 

jeelizFaceFilter: 

  • Is lightweight and does not include a 3D engine or third-party library.  
  • Is a JavaScript library that detects and tracks the face in real time from the camera video feed captured with WebRTC.  
  • Offers various demonstrations using the main WebGL 3D engines, which can overlay 3D content for AR applications. 

viro: 

  • Is a platform for developers to build Augmented and Virtual Reality experiences rapidly.  
  • Is a cross-platform AR/VR development platform that allows developers to create immersive experiences for web, virtual reality, and mobile device headsets. 
  • Provides a suite of features and tools for making creating high-quality AR and VR experiences easier. 

exokit: 

  • Is an open source JavaScript engine to create and run immersive experiences in virtual reality headsets, web browsers, and other platforms. 
  • Offers various features and tools, allowing developers to create and deploy immersive experiences and applications. 
  • Supports virtual experiences by allowing developers to create immersive experiences which can run on virtual reality headsets. 

js-aruco: 

  • Is a JavaScript library for marker-based augmented reality.  
  • Is an implementation of the ARToolKit library, allowing developers to create marker-based AR experiences in web browsers.  
  • Includes algorithms for detecting markers in real-time video streams, allowing developers to create experiences that respond to the physical world. 

React-Web-AR: 

  • Is based on the WebXR API and Three.js library, making creating high-quality AR experiences in the browser easier.  
  • Includes various components and tools for creating animations, 3D models, and other assets, making it easier to create high-quality AR content.  
  • Supports image tracking, allowing developers to create experiences triggered by specific patterns or images. 

ar-facedoodle: 

  • Is a JavaScript library that can enable developers to create AR experiences that track and draw on the user’s face in real-time.  
  • Is based on the WebRTC and TensorFlow.js libraries, making it possible to create a high-quality AR experience in web browsers without additional software or plugins.  
  • Is easy to set up and use with a simple API, allowing developers to get started quickly. 

jeelizAR: 

  • Is a JavaScript Object Detection lightweight library for AR that uses convolutional neural networks running on the GPU with WebGL.  
  • Is designed to work on various platforms, like mobile devices and desktops, and is compatible with various browsers.  
  • Includes algorithms to detect markers in real-time video streams, allowing developers to create experiences that respond to the physical world. 

threex.webar: 

  • Is a threex extension for three.js, which offers an easy-to-use extension for experimenting with augmented reality and three.js.  
  • Is built on top of the Three.js library, making it possible to create high-quality AR experiences with 3D graphics and animation.  
  • Has an active community of contributors and developers, making it easy to get support and help when required. 

WebXR-emulator-extension: 

  • Is a browser extension that helps your WebXR content creation and enables you to run WebXR applications on your browser without any XR devices. 
  • Includes multiple XR devices emulation, graphical device emulator control with Three.js, and cross browsers support with WebExtensions API. 
  • Allows developers to customize the environment they are testing their WebEX projects in, like adjusting the room lighting, scale, and other parameters. 

webxr-polyfill: 

  • Is a JavaScript implementation of the WebXR Device API and the WebXR Gamepad Module.  
  • Allows developers to write against the latest specifications, offering support if run on browsers that implement the WebVR 1.1 spec or on mobile devices.  
  • Offers a fallback mechanism for legacy browsers and provides additional functionality unavailable in native WebXR API. 

3dio-js: 

  • Is a JavaScript library that enables developers to create interactive 3D audio experiences in web browsers.  
  • Is built on top of the Web Audio API and Three.js, making it easy to create high-quality audio experiences with 3D spatialization.  
  • Various customization options allow developers to adjust the audio spatialization, sound effects, and other parameters to suit their requirements. 

wasm-sudoku-solver: 

  • Is a JavaScript library that uses WebAssembly to offer an efficient Sudoku-solving algorithm in web browsers.  
  • Is designed for solving sudoku puzzles quickly and accurately, making it a valuable tool for developers creating Sudoku puzzle applications or games.  
  • Various customization options allow developers to adjust the solving algorithm and other parameters to suit their requirements. 

webxr-polyfill: 

  • Is a JavaScript library that offers support for the WebXR API on browsers that do not natively support it. 
  • Is designed to enable responsive and immersive AR and VR experiences on the web, like support for hand tracking, head-mounted displays, and other features. 
  • Includes optimizations for performance, including asynchronous loading of resources, reducing latency, and minimizing the impact on CPU and memory usage. 

aframe-ar: 

  • Is a JavaScript library that offers an effortless way to create AR experiences on the web. 
  • Includes a range of customization options, allowing developers to adjust the appearance and behavior of their AR experiences 
  • Offers an accessible and user-friendly way for developers to create compelling AR experiences on the web. 

WebAR-Article: 

  • Is a JavaScript library created by Google AR which offers a straightforward way to embed AR content into web pages.  
  • Includes various customization options, allowing developers to adjust the behavior and appearance of their AR experiences.  
  • Can be easily integrated with other JavaScript libraries, making it possible to create more complex AR experiences. 

Why is Facebook is rebranding itself to focus on the metaverse? 7 years after its billion-dollar acquisition of Oculus, Facebook is pivoting itself towards virtual reality. While the earlier acquisitions of Instagram and WhatsApp successfully extended social engagement, metaverse is a much bigger bet. While metaverse looks like VR in a new bottle at some levels, betting the company's future on metaverse shows a strategic intent. It was interesting to see Microsoft announce immersive experiences on MS Teams. Multiple metaverses exist today in individual 3D gaming platforms and VR platforms. We are seeing companies fighting it out for cloud and AI platform dominance. Could Meta be positioning itself to own the user engagement channel in a new way? If users move towards using VR as a primary engagement model, this can pay off well. While this will play out over the decade or more, there are multiple low-hanging fruits to build mixed reality experiences into your applications. The kandi kit on Mixed Reality Solutions showcases popular open source libraries across AR, dedicated VR platforms, and device-specific solutions. Get ready for the next platform war!

Web Focused AR and VR Solutions

Virtual Reality Platforms

Virtual Reality Headset Focused Solutions

Facebook's Metaverse is vaporware as of today, but it has people talking and looking at new opportunities. Especially the developers: with virtual reality all set to raid the mainstream, application development that can support 3-dimensional experiences do display certain developmental complications and require experimentation. In fact, Statista reports that virtual reality is a market the size of $4.8 billion (2021). That being so, there is immense potential and a bright future for developers honing their skills in the niche. Metaverse isn’t a single entity, as opposed to common belief: it is merely a “status” or a platform where people can gather, kind of like social media. In fact, tech-biggies like Microsoft and Nvidia have their own purpose-driven versions of metaverse platforms where users can log on and accomplish certain goals. Commercial biggie metaverses apart, there are quite a few open-source metaverses in the realm – like that of Mozilla i.e. Mozilla Hub. Developers take note: virtual reality is soon coming into the mainstream, and the development of applications that can bridge the real and the virtual is going to be in demand. Open source holds quite a leverage in the development of metaverse components, being universal and readily implementable. Much like the 1900s saw a boom in two-dimensional internet, 2020 and onwards is the era of three-dimensional experiences in virtual reality. There is a high opportunity and potential for the developers here. So, if you are looking to kickstart your Metaverse application development, here are trending libraries that help will you ace your requirements.

Virtual, Augmented, and Mixed realities bring in additional dimensions of collaboration in this distributed world. This collection represents a starter collection to experiment with different mixed reality use cases. It showcases toolkits, remote work use cases, and other exciting use cases for you to try across C#, JavaScript, and Java. If you have specific technologies or use cases in mind, use our search to find libraries specific to you.

Augmented reality enables you to bring virtual objects into your environment, augmenting the real world around with new digital content. With AR Kit, you can create experiences that integrate virtual images into the real world to interact with people, things, places, and services; simply by walking around a store, office, outdoors, or at home with a mobile device in their hands. A-Frame is a web framework for building virtual reality experiences. A-Frame is built on top of the web platform to allow it to work across multiple browsers without plugins. Arframe is a library that provides React components for working with A-Frame and React components for working with AR.js (AR library). Networked-aframe is an extension that makes it possible to use interactivity between multiple devices running A-Frame by connecting them over the WebRTC protocol. The entire list of open-source repos, popular and easy to use AR-specific libraries and a demo is provided below.

Aframe for Augmented Reality

A-Frame is an open-source web framework used for building Augmented reality (AR) experiences.

Three.js for AR Libraries

Three.js is the open-source web framework used to develop augmented reality (AR) projects.

Web AR Libraries

Web-based augmented reality (WebAR) is the most advanced technology that allows users to access AR experiences directly from their smartphones.

Node.js is a powerful web framework. It allows developers to build various applications, including virtual and augmented reality experiences. By leveraging the capabilities of Node.js, developers can create immersive applications. It can bridge the gap between real and virtual worlds.  


We can use NodeJS to develop Virtual reality applications. It can range from simple demos to full-blown multi-user virtual reality experiences. Node.js provides a versatile platform. It helps build these applications, offering a pure web solution. We can access it using a web browser. By utilizing frameworks, developers can leverage React components. It helps code to create interactive and engaging virtual reality experiences.  


To create VR applications, developers can start by installing the necessary modules. They can do it using the npm install command. Modules like a frame-react allow the integration of A-Frame and React. It combines the power of A-Frame's lightweight library with React's component-based approach. This results in better user experiences and improved browsing experiences for VR applications.  


The WebXR API is another important tool for creating virtual reality applications. It provides access to core concepts like location-based augmented reality (AR). It allows developers to create applications that blend virtual and physical worlds.  


Creating an application using Node.js involves designing the UI and implementing the code. Utilizing the modules provided by Node.js can create complex UI elements. It can simulate immersive environments through WebGL.  


Debugging VR applications requires familiar tools like code editors and prompt engineering. Developers can identify and fix errors and optimize performance. It will ensure a smooth user experience. Additionally, leveraging platforms like Meta's new framework or Vuforia for marker tracking. It can enhance the functionality of VR applications.  


We can use NodeJS for developing Marketing and selling VR applications. We can do it through various channels. Developers can develop a simple website to showcase their applications. Then promote them on social media platforms or sell them through online marketplaces. We can dedicate it to virtual reality content.  


In conclusion, Node.js provides a robust platform. It helps create VR applications to leverage the power of the web to deliver experiences. It blurs the borders between the real and virtual worlds. Developers can create stunning VR applications using modules, libraries, and frameworks. With Node.js, the possibilities for creating captivating VR experiences are limitless.  

Babylon.js  

  • Used to create interactive 3D experiences, including VR.  
  • Helps in building VR applications with rich graphics and physics simulations.  
  • Supports various VR devices and controllers.  
  • We can use it for developing VR games, architectural visualizations, and training simulations.  

AR.js: 

  • Used to create virtual reality experiences using HTML and JavaScript.  
  • Helps in building immersive VR environments for web browsers.  
  • Supports 3D models, animations, and interactivity.  
  • We can use it for creating VR games, interactive simulations, and virtual tours.  

react-360: 

  • Used to develop VR applications using React.  
  • Helps in building cross-platform VR experiences for web and mobile.  
  • Supports 360-degree media, spatial audio, and interactive UI components.  
  • We can use it for creating VR presentations, educational experiences, and product visualizations.  

viro  

  • Used to build VR experiences using React.  
  • Helps in creating cross-platform VR applications for web and mobile.  
  • Supports 360-degree media, 3D models, and interactive components.  
  • We can use it for developing VR presentations, virtual tours, and immersive storytelling.  

aframe-react  

  • Used to integrate A-Frame with React applications.  
  • It helps in combining the power of A-Frame with the flexibility of React.  
  • Supports creating VR experiences using React's component-based approach.  
  • We can use it for building VR games, data visualizations, and architectural walkthroughs.  

Primrose  

  • Used to develop VR applications and games using WebGL.  
  • Helps in building VR experiences with custom shaders and graphics effects.  
  • Supports immersive audio, motion controllers, and physics simulations.  
  • We can use it for creating games, visualizations, and experiences with graphics capabilities.  

WebVR-Extension  

  • Used to develop VR applications in the browser.  
  • It helps in accessing VR devices and sensors through JavaScript.  
  • It supports building VR experiences without any extra libraries.  
  • We can use it for creating browser-based VR games, educational apps, and visualizations.  

FAQ  

1. What is NodeJS virtual reality library? How can we use it to create virtual and augmented reality experiences?  

A NodeJS VR library is a collection of modules, frameworks, and tools. It enables developers to create virtual and augmented reality experiences using NodeJS. It provides the necessary components and functionalities to build immersive applications. It will merge the real and virtual worlds. By leveraging the NodeJS capabilities, developers can create interactive and engaging VR experiences.  


2. What web solution do NodeJs provide for developing React VR applications?  

NodeJS provides a web solution for developing React VR applications. This web solution helps leverage the React components and code to create applications. With NodeJS, developers can use frameworks to build cross-platform VR experiences.  


3. How do I use the npm start command to develop a React application with NodeJS?  

You can use the npm start order to develop a React application with NodeJS. This command lets you see your real-time changes as you build your application. It helps compile and serve your application. Once you have set up and established the necessary dependencies using npm install. We can also set it by running npm start starts the development server.  


4. Can we use A-Frame and React to build a web-based virtual reality experience?  

A-Frame and React can build a web-based VR experience. A-Frame is a powerful library for creating virtual reality scenes and environments. It helps create interactive and immersive virtual reality experiences. In contrast, React provides a component-based approach to building user interfaces. By combining A-Frame and React, developers can leverage the strengths of both frameworks.  


5. How can we implement the Location API in an application built on NodeJS?  

We can implement the location API in an application built on NodeJS. We can do so by utilizing the capabilities of the WebXR API. We can build WebXR API on top of the WebVR API. It provides access to location-based augmented reality (AR). By utilizing this API, developers can create applications. It will help integrate virtual elements into the physical world. It will enhance the experience by blending real and virtual environments.  

6. What are some advantages of WebXR when creating a VR experience with NodeJS?  

WebXR offers several advantages when creating a VR experience with NodeJS. It provides a standardized and browser-supported API. It allows developers to create immersive content for various devices and platforms. WebXR simplifies the development process by providing access to VR and AR features. It does so by enabling developers to create cross-platform experiences easily. 

One of the advantages of using VRChat is that you can use third-party libraries. This includes things like cats-blender-plugin, UdonSharp, and VRCX. The main reason why people choose to use these libraries is because they provide a ready-to-use avatar model with animations. This saves you time and effort, as you don't have to create your own model from scratch or spend hours on animation. cats-blender-plugin provides a number of utilities for working with meshes and textures. This includes mesh generation, mesh manipulation, and texture extraction from image files. You may also find it useful if you need access to some of the more advanced features of Blender's API. The VRChat SDK provides an API for interacting with users and avatars, as well as an interface for adding new features to your game or experience. There are several popular open source VRChat libraries available for developers

Now, most people have not heard of the hype of augmented reality and virtual reality that is driving the world of technology. Creating a high-quality augmented reality app is not as easy as it sounds. Here you can take a look at the augmented reality framework for iOS or Android and make a few comparisons to help you choose the best-augmented reality framework for your mobile app development.

Types of Augmented Reality Apps

Kudan. AR SDK. or Framework

One of the handiest augmented reality development tools, that works quite fast and allows you to use object-based recognition with posters/ stickers. Kudan recognizes objects by initializing their coordinates and adding a layer up on top of them, although this SDK doesn’t offer much for face detection.

Vuforia, Augmented Reality SDK

Vuforia uses computer vision to recognize and track planar images (Image Targets) and simple 3D objects, such as boxes, in real-time. we can also get to grips with some additional features, Including:

Wikitude SDK

Wikitude is an all-in-one included augmented reality framework for Android, as well as for iOS, which enables developers to use GEO data, create a 3D object, and implement image recognition. Apps like Time Magazine Special, ROOMLE, and Wikitude Navigation were developed with the Wikitude library. Wikitude SDK 8.1 has a number of new features like :

ARToolKit

Another popular framework that is pretty commonly used worldwide is ARToolKit - a well-known open-source augmented reality framework that has compiled SDKs for iOS, Android, Windows, Mac OS, and Linux platforms. It is widely used for various purposes as :

ARKit 2

It is a framework, that allows developers to create all the above-listed types of AR applications. This new cutting-edge platform was designed to prove Augmented Reality development for Apple devices specifically. This technology is unique because it is able to take the corner illumination into account for the correct integration of virtual objects in real life.

Augmented reality (AR) and Virtual Reality (VR) bridge the digital and physical worlds. They allow us to take in information and content visually, in the same way, we take in the world. For easier development of such realities, there are many libraries and frameworks. With the help of these, we could create our own reality environments. Here I've listed some of such frameworks which can be used to get started with.

With Facebook rebranding itself as Meta and multiple corporations betting on the Metaverse, the interest for development on Metaverse and Extended Reality (XR) have peaked. And it’s no surprise: XR technologies are changing the way we interact with our environment while offering immersive experiences. But what is Extended Reality (XR)? Extended Reality (XR) is an environment or experience that combines virtual and physical realities through the use of augmented reality (AR), mixed reality, virtual reality (VR) or any similar immersive technologies. Think Pokemon Go or The Walking Dead: Our World — games that combine your phone’s camera with a layer of 3D animated objects superimposed on top of it. Or imagine being able to virtually open up a virtual world inside of real-world buildings, like in Ready Player One. Whether you’re new to XR and just starting out, or you’re looking for specific tools to help you in your development process, you can use the following open source resources for your Extended Reality (XR) applications.

Trending Discussions on Virtual Reality

Algorithm to fill arbitrary marked/selected tiles on a square grid with the smallest number of rectangles?

Centering element in LaTeX table with fixed column width

How can I display an array of strings of an object as spans in a JS template literal?

Python regular expression unable to find pattern - using pyspark on Apache Spark

Why is my website slightly wider than the window?

Unity Gameobject not visible in Hololens 2

Why does my webpage look different upon resizing the browser window VS on mobile?

NoClassDefFoundError in OSGi although it is exported and imported

Why does the mobile-version navbar pops up automatically when downsizing screen?

count sum of values of selected radio buttons which have particular data-id

QUESTION

Algorithm to fill arbitrary marked/selected tiles on a square grid with the smallest number of rectangles?

Asked 2022-Jan-12 at 15:58

What I am asking here is an algorithm question. I'm not asking for specifics of how to do it in the programming language I'm working in or with the framework and libraries I'm currently using. I want to know how to do this in principle.

As a hobby, I am working on an open source virtual reality remake of the 1992 first-person shooter game Wolfenstein 3D. My program will support classic mods and map packs for WOLF3D made in the original format from the 90s. This means that my program will not know in advance what the maps are going to be. They are loaded in at runtime from user provided files.

A Wolfenstein 3D map is a 2D square grid of normally 64x64 tiles. let's assume I have a 2D array of bools which return true if a particular tile can be traversed by the player and false if the tile will never be traversable no matter what happens in the game.

I want to generate rectangular collision objects for a modern game engine which will prevent collisions into non traversable tiles on the map. Right now, I have a small collision object on each surface of each wall tile with a traversible tile next to it and that is very inefficient because it makes way more collision objects than necessary. What I should have instead is a smaller number of large rectangles which fill all of the squares on the grid where that 2D array I mentioned has a false value to indicate non-traversible.

When I search for any algorithms or research that might have been done for problems similar to this, I find lots of information about rectangle packing for the purposes of making texture atlases for games, which packs rectangles into a square, but I haven't found anything that tries to pack the smallest number of rectangles into an arbitrary set of selected / marked square tiles.

The naive approach which occurs to me is to first make 64 rectangles representing 64 rows and then chop out whatever squares are traversible. but I suspect that there's got to be an algorithm which can do better, meaning that it can fill the same spaces with a smaller number of rectangles. Maybe something that starts with my naive approach and then checks each rectangle for adjacent rectangles which it could merge with? But I'm not sure how far to take that approach or if it will even truly reduce the number of rectangles.

The result doesn't have to be perfect. I am just fishing here to see if anyone has any magic tricks that could take me even a little bit beyond the naive approach.

Has anyone done this before? What is it called? Just knowing what some of the vocabulary words I would need to even talk about this are would help. Thanks!

(later edit)

Here is some sample input as comma-separated values. The 1s represent the area that must be filled with the rectangles while the 0s represent the area that should not be filled with the rectangles.

I expect that the result would be a list of sets of 4 integers where each set represents a rectangle like this:

  1. First integer would be the x coordinate of the left/western edge of the rectangle.
  2. Second integer would be the y coordinate of the top/northern edge of the rectangle.
  3. Third integer would be the width of the rectangle.
  4. Fourth integer would be the depth of the rectangle.

My program is in C# but I'm sure I can translate anything in a normal mainstream general purpose programming language or psuedocode.

ANSWER

Answered 2022-Jan-12 at 14:46
1Mark all tiles as not visited
2For each tile:
3    skip if the tile is not a top-left corner or was visited before
4    # now, the tile is a top-left corner
5    expand right until top-right corner is found
6    expand down
7    save the rectangle
8    mark all tiles in the rectangle as visited
9

However simplistic it looks, it will likely generate minimal number of rectangles - simply because we need at least one rectangle per pair of top corners.

For faster downward expansion, it makes sense to precompute a table holding sum of all element top and left from the tile (aka integral image).

For non-overlapping rectangles, worst case complexity for an n x n "image" should not exceed O(n^3). If rectangles can overlap (would result in smaller number of them), integral image optimization is not applicable and the worst case will be O(n^4).

Source https://stackoverflow.com/questions/70674385

QUESTION

Centering element in LaTeX table with fixed column width

Asked 2021-Dec-02 at 10:09

I am having some problems with LaTeX tables. In particular, I have the following code:

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

This code gives me the following output: generated table.

I would like to center also the last column (using, like in the other columns, >{\centering} ). However, when I try to do so, I have a lot of errors:

  • Misplaced \noalign - You have used a \hline command in the wrong place, probably outside a table. If the \hline command is written inside a table, try including \\ before it (on the 3rd \hline )

  • Extra alignment tab has been changed to \cr - You have written too many alignment tabs in a table, causing one of them to be turned into a line break. Make sure you have specified the correct number of columns in your table (on the \textbf{Gender} line)

  • LaTeX Error: There's no line here to end - You have used a \\ or \newline command where LaTeX was not expecting one. Make sure that you only use line breaks after blocks of text, and be careful using linebreaks inside lists and other environments (on the \textbf{Gender} line)

Could anyone help me? The table is far more beautiful if I manage to center also the last line.

ANSWER

Answered 2021-Dec-02 at 10:09

You can centre the last column with >{\centering\arraybackslash}

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

enter image description here

Source https://stackoverflow.com/questions/70197417

QUESTION

How can I display an array of strings of an object as spans in a JS template literal?

Asked 2021-Aug-20 at 22:55

I have an array of objects. In each object there is a key with a value of an array of strings (the number of strings changes in each object). How can I display each string of the array as <span> in a JS template literal?

If the array contains 2 strings, than 2 <span> should appear, If 3 strings, 3 <span> etc.

Code:

1let items = [{
2  &quot;id&quot;: 1,
3  &quot;name&quot;: &quot;item 1&quot;,
4  &quot;captionTags&quot;: [&quot;Stills&quot;, &quot;Animation&quot;, &quot;Virtual Reality&quot;]
5},
6{
7  &quot;id&quot;: 2,
8  &quot;name&quot;: &quot;item 2&quot;,
9  &quot;captionTags&quot;: [&quot;Configurator&quot;, &quot;Animation&quot;, &quot;Application&quot;]
10},
11{
12  &quot;id&quot;: 3,
13  &quot;name&quot;: &quot;item 3&quot;,
14  &quot;captionTags&quot;: [&quot;Stills&quot;, &quot;Configurator&quot;]
15}];
16
17function displayItems() {
18  let itemsContainer = document.querySelector('.items-container');
19  itemsContainer.innerHTML = '';
20  items.forEach(item =&gt; {
21
22    itemsContainer.innerHTML += `
23        &lt;div class=&quot;items-wrapper&quot;&gt;
24        &lt;div class=&quot;item-caption&quot;&gt;
25            &lt;span class=&quot;item-caption-col&quot;&gt;
26                &lt;h3&gt;${item.name}&lt;/h3&gt;
27                &lt;span class=&quot;item-caption-tags&quot;&gt;
28                I WANT TO DISPLAY HERE EACH ELEMENT OF CAPTION TAGS ARRAY IN EACH OBJECT 
29               AS SPANS 
30                &lt;/span&gt;
31            &lt;/span&gt;
32        &lt;/div&gt;
33    &lt;/div&gt;`
34  });
35};
36
37
38displayItems();
39

Thank you in advance for your help!

ANSWER

Answered 2021-Aug-20 at 12:29

Try this:

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

css is for example only

Source https://stackoverflow.com/questions/68861893

QUESTION

Python regular expression unable to find pattern - using pyspark on Apache Spark

Asked 2021-Jul-15 at 21:31

Can someone let me why the regular expression

1df = df2.withColumn(&quot;extracted&quot;, F.regexp_extract(&quot;title&quot;, &quot;[Pp]ython&quot;, 0))
2

Can find the pattern 'Python' or 'python' from the followng column called title

1df = df2.withColumn(&quot;extracted&quot;, F.regexp_extract(&quot;title&quot;, &quot;[Pp]ython&quot;, 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
10

But the regular expression can't find the pattern Python or python from the following

1df = df2.withColumn(&quot;extracted&quot;, F.regexp_extract(&quot;title&quot;, &quot;[Pp]ython&quot;, 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

Thanks

ANSWER

Answered 2021-Jul-15 at 21:31

Use the ignore case regex;

(?i)-ignore or case-insensitive mode ON

Data

data=[

1df = df2.withColumn(&quot;extracted&quot;, F.regexp_extract(&quot;title&quot;, &quot;[Pp]ython&quot;, 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,&quot;Python Core Development Sprint 2016: 3.6 and beyond&quot;),
19  (2,&quot;Hypothesis.works articles: 3.5.0 and 3.5.1 Releases of Hypothesis for Python&quot;),
20  (3,&quot;CheckiO  games for python and JavaScript coders. ClassRoom support is included&quot;)
21  ]
22df=spark.createDataFrame(data, ['id','title'])
23df.show(truncate=False)
24

Solution

1df = df2.withColumn(&quot;extracted&quot;, F.regexp_extract(&quot;title&quot;, &quot;[Pp]ython&quot;, 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,&quot;Python Core Development Sprint 2016: 3.6 and beyond&quot;),
19  (2,&quot;Hypothesis.works articles: 3.5.0 and 3.5.1 Releases of Hypothesis for Python&quot;),
20  (3,&quot;CheckiO  games for python and JavaScript coders. ClassRoom support is included&quot;)
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

Outcome

1df = df2.withColumn(&quot;extracted&quot;, F.regexp_extract(&quot;title&quot;, &quot;[Pp]ython&quot;, 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,&quot;Python Core Development Sprint 2016: 3.6 and beyond&quot;),
19  (2,&quot;Hypothesis.works articles: 3.5.0 and 3.5.1 Releases of Hypothesis for Python&quot;),
20  (3,&quot;CheckiO  games for python and JavaScript coders. ClassRoom support is included&quot;)
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

Source https://stackoverflow.com/questions/68400780

QUESTION

Why is my website slightly wider than the window?

Asked 2021-May-04 at 13:42

I'm working on a school project in which I have to create a small Webpage introducing you to a topic of choice.

Unfortunately my website has a horizontal scrollbar and I don't have a clue which element causes it. I tried disabling the elements one after another but haven't found a solution

Thanks in advance for any tips!

1&lt;!doctype html&gt;
2&lt;html lang=&quot;de&quot;&gt;
3    &lt;head&gt;
4        &lt;title&gt;VR&lt;/title&gt;
5        &lt;!-- Required meta tags --&gt;
6        &lt;meta charset=&quot;utf-8&quot;&gt;
7        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
8
9        &lt;!-- Bootstrap CSS --&gt;
10        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
11        &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
12    &lt;/head&gt;
13    &lt;body&gt;
14        &lt;nav id=&quot;colorlib-main-nav&quot; role=&quot;navigation&quot;&gt;
15            &lt;a href=&quot;#&quot; class=&quot;js-colorlib-nav-toggle colorlib-nav-toggle active&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
16            &lt;div class=&quot;js-fullheight colorlib-table&quot;&gt;
17                &lt;div class=&quot;img&quot; style=&quot;background-image: url(images/bg_3.jpg);&quot;&gt;&lt;/div&gt;
18                &lt;div class=&quot;colorlib-table-cell js-fullheight&quot;&gt;
19                &lt;div class=&quot;row no-gutters&quot;&gt;
20                    &lt;div class=&quot;col-md-12 text-center&quot;&gt;
21                    &lt;h1 class=&quot;mb-4&quot;&gt;&lt;a href=&quot;index.html&quot; class=&quot;logo&quot;&gt;Company Logo&lt;/a&gt;&lt;/h1&gt;
22                    &lt;ul&gt;
23                        &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;index.html&quot;&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
24                        &lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
25                        &lt;li&gt;&lt;a href=&quot;blog.html&quot;&gt;&lt;span&gt;Blog&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
26                        &lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
27                    &lt;/ul&gt;
28                    &lt;/div&gt;
29                &lt;/div&gt;
30                &lt;/div&gt;
31            &lt;/div&gt;
32        &lt;/nav&gt;
33
34        &lt;div class=&quot;header h-100&quot;&gt;
35            &lt;a href=&quot;#&quot; class=&quot;js-colorlib-nav-toggle colorlib-nav-toggle&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
36            &lt;h1 id=&quot;h-100&quot; class=&quot;introduction h-100&quot;&gt;Virtual Reality&lt;/h1&gt;
37            
38        &lt;/div&gt;
39
40        &lt;div class=&quot;h-100&quot;&gt;
41            &lt;h2 class=&quot;center&quot;&gt;Was ist Virtual Reality (VR)&lt;/h2&gt;
42            &lt;p class=&quot;center&quot;&gt;Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann&lt;/p&gt;
43        &lt;/div&gt;
44        
45
46        &lt;div id=&quot;vr-headset-kategorien&quot; class=&quot;&quot;&gt;
47            &lt;!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right--&gt;
48            &lt;div id=&quot;standalone&quot; class=&quot;row&quot;&gt;
49                &lt;!----&gt;
50                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
51                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;Quest 2 Headset - FanArt&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&amp;autostart=1&amp;ui_hint=0&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; Quest 2 Headset - FanArt &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/josevillotguisan?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; joseVG &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
52                &lt;/div&gt;
53                
54                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
55                    &lt;h3&gt;Standalone&lt;/h3&gt;
56                
57                    &lt;p&gt;Standalone VR-Headsets ben&amp;ouml;tigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super f&amp;uuml;r Anf&amp;auml;nger geeignet&lt;/p&gt;
58
59                    &lt;p&gt;
60                    Vorteile:&lt;br /&gt;
61                    Kein guter PC ben&amp;ouml;tigt&lt;br /&gt;
62                    Niedriger Einstiegspreis trotz guter Hardware&lt;br/&gt;
63                    Gut optimierbar, da es fĂĽr das Heaset nur einen Prozessor gibt&lt;/p&gt;
64                    
65                    &lt;p&gt;Nachteile:&lt;br /&gt;
66                    Je nach Headset schlechte Performance bei fordernden Spielen&lt;/p&gt;
67                &lt;/div&gt;
68                
69            &lt;/div&gt;
70
71            &lt;div id=&quot;pc&quot; class=&quot;row&quot;&gt;
72                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
73                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;HTC Vive&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&amp;autostart=1&amp;ui_hint=0&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; HTC Vive &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/EternalRealm?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; Eternal Realm &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
74                &lt;/div&gt;
75                
76                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
77                    &lt;h3&gt;PC-VR&lt;/h3&gt;
78                    &lt;p&gt;PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden &amp;uuml;ber ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem sch&amp;ouml;nes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie vor allem f&amp;uuml;r Enthusiasten geeignet&lt;/p&gt;
79
80                    &lt;p&gt;Vorteile:&lt;br /&gt;
81                    Hohe Aufl&amp;ouml;sung&lt;br /&gt;
82                    Wenig Lags&lt;/p&gt;
83
84                    &lt;p&gt;Nachteile:&lt;br /&gt;
85                    Hoher Einstiegspreis&lt;/p&gt;
86                &lt;/div&gt;
87            &lt;/div&gt;
88
89            &lt;div id=&quot;fulldive&quot; class=&quot;row&quot;&gt;
90                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
91                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;neuraLink&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&amp;autostart=1&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; neuraLink &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/rfarencibia?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; rfarencibia &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
92                &lt;/div&gt;
93                
94                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
95                    &lt;h3&gt;Full-Dive VR&lt;/h3&gt;
96                    &lt;p&gt;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&lt;/p&gt;
97
98                    &lt;p&gt;Vorteile:&lt;br /&gt;
99                    Unvergleichliche Immersion&lt;/p&gt;
100
101                    &lt;p&gt;Nachteile:&lt;br /&gt;
102                    Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber m&amp;ouml;glich&lt;/p&gt;
103                &lt;/div&gt;
104            &lt;/div&gt;
105
106        &lt;/div&gt;
107
108        
109
110      
111        &lt;!-- Optional JavaScript --&gt;
112        &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
113        &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
114        &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot; integrity=&quot;sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
115        &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
116        &lt;script&gt;
117            (function($) {
118
119            &quot;use strict&quot;;
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 &gt; .js-colorlib-nav-toggle').removeClass('show');
139                    } else {
140                        $('body').addClass('menu-show');
141                        setTimeout(function(){
142                            $('#colorlib-main-nav &gt; .js-colorlib-nav-toggle').addClass('show');
143                        }, 900);
144                    }
145                })
146            };
147            burgerMenu();
148
149
150            })(jQuery);
151        &lt;/script&gt;
152    &lt;/body&gt;
153&lt;/html&gt;
154
1&lt;!doctype html&gt;
2&lt;html lang=&quot;de&quot;&gt;
3    &lt;head&gt;
4        &lt;title&gt;VR&lt;/title&gt;
5        &lt;!-- Required meta tags --&gt;
6        &lt;meta charset=&quot;utf-8&quot;&gt;
7        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
8
9        &lt;!-- Bootstrap CSS --&gt;
10        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
11        &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
12    &lt;/head&gt;
13    &lt;body&gt;
14        &lt;nav id=&quot;colorlib-main-nav&quot; role=&quot;navigation&quot;&gt;
15            &lt;a href=&quot;#&quot; class=&quot;js-colorlib-nav-toggle colorlib-nav-toggle active&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
16            &lt;div class=&quot;js-fullheight colorlib-table&quot;&gt;
17                &lt;div class=&quot;img&quot; style=&quot;background-image: url(images/bg_3.jpg);&quot;&gt;&lt;/div&gt;
18                &lt;div class=&quot;colorlib-table-cell js-fullheight&quot;&gt;
19                &lt;div class=&quot;row no-gutters&quot;&gt;
20                    &lt;div class=&quot;col-md-12 text-center&quot;&gt;
21                    &lt;h1 class=&quot;mb-4&quot;&gt;&lt;a href=&quot;index.html&quot; class=&quot;logo&quot;&gt;Company Logo&lt;/a&gt;&lt;/h1&gt;
22                    &lt;ul&gt;
23                        &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;index.html&quot;&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
24                        &lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
25                        &lt;li&gt;&lt;a href=&quot;blog.html&quot;&gt;&lt;span&gt;Blog&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
26                        &lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
27                    &lt;/ul&gt;
28                    &lt;/div&gt;
29                &lt;/div&gt;
30                &lt;/div&gt;
31            &lt;/div&gt;
32        &lt;/nav&gt;
33
34        &lt;div class=&quot;header h-100&quot;&gt;
35            &lt;a href=&quot;#&quot; class=&quot;js-colorlib-nav-toggle colorlib-nav-toggle&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
36            &lt;h1 id=&quot;h-100&quot; class=&quot;introduction h-100&quot;&gt;Virtual Reality&lt;/h1&gt;
37            
38        &lt;/div&gt;
39
40        &lt;div class=&quot;h-100&quot;&gt;
41            &lt;h2 class=&quot;center&quot;&gt;Was ist Virtual Reality (VR)&lt;/h2&gt;
42            &lt;p class=&quot;center&quot;&gt;Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann&lt;/p&gt;
43        &lt;/div&gt;
44        
45
46        &lt;div id=&quot;vr-headset-kategorien&quot; class=&quot;&quot;&gt;
47            &lt;!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right--&gt;
48            &lt;div id=&quot;standalone&quot; class=&quot;row&quot;&gt;
49                &lt;!----&gt;
50                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
51                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;Quest 2 Headset - FanArt&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&amp;autostart=1&amp;ui_hint=0&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; Quest 2 Headset - FanArt &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/josevillotguisan?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; joseVG &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
52                &lt;/div&gt;
53                
54                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
55                    &lt;h3&gt;Standalone&lt;/h3&gt;
56                
57                    &lt;p&gt;Standalone VR-Headsets ben&amp;ouml;tigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super f&amp;uuml;r Anf&amp;auml;nger geeignet&lt;/p&gt;
58
59                    &lt;p&gt;
60                    Vorteile:&lt;br /&gt;
61                    Kein guter PC ben&amp;ouml;tigt&lt;br /&gt;
62                    Niedriger Einstiegspreis trotz guter Hardware&lt;br/&gt;
63                    Gut optimierbar, da es fĂĽr das Heaset nur einen Prozessor gibt&lt;/p&gt;
64                    
65                    &lt;p&gt;Nachteile:&lt;br /&gt;
66                    Je nach Headset schlechte Performance bei fordernden Spielen&lt;/p&gt;
67                &lt;/div&gt;
68                
69            &lt;/div&gt;
70
71            &lt;div id=&quot;pc&quot; class=&quot;row&quot;&gt;
72                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
73                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;HTC Vive&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&amp;autostart=1&amp;ui_hint=0&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; HTC Vive &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/EternalRealm?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; Eternal Realm &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
74                &lt;/div&gt;
75                
76                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
77                    &lt;h3&gt;PC-VR&lt;/h3&gt;
78                    &lt;p&gt;PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden &amp;uuml;ber ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem sch&amp;ouml;nes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie vor allem f&amp;uuml;r Enthusiasten geeignet&lt;/p&gt;
79
80                    &lt;p&gt;Vorteile:&lt;br /&gt;
81                    Hohe Aufl&amp;ouml;sung&lt;br /&gt;
82                    Wenig Lags&lt;/p&gt;
83
84                    &lt;p&gt;Nachteile:&lt;br /&gt;
85                    Hoher Einstiegspreis&lt;/p&gt;
86                &lt;/div&gt;
87            &lt;/div&gt;
88
89            &lt;div id=&quot;fulldive&quot; class=&quot;row&quot;&gt;
90                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
91                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;neuraLink&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&amp;autostart=1&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; neuraLink &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/rfarencibia?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; rfarencibia &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
92                &lt;/div&gt;
93                
94                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
95                    &lt;h3&gt;Full-Dive VR&lt;/h3&gt;
96                    &lt;p&gt;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&lt;/p&gt;
97
98                    &lt;p&gt;Vorteile:&lt;br /&gt;
99                    Unvergleichliche Immersion&lt;/p&gt;
100
101                    &lt;p&gt;Nachteile:&lt;br /&gt;
102                    Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber m&amp;ouml;glich&lt;/p&gt;
103                &lt;/div&gt;
104            &lt;/div&gt;
105
106        &lt;/div&gt;
107
108        
109
110      
111        &lt;!-- Optional JavaScript --&gt;
112        &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
113        &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
114        &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot; integrity=&quot;sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
115        &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
116        &lt;script&gt;
117            (function($) {
118
119            &quot;use strict&quot;;
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 &gt; .js-colorlib-nav-toggle').removeClass('show');
139                    } else {
140                        $('body').addClass('menu-show');
141                        setTimeout(function(){
142                            $('#colorlib-main-nav &gt; .js-colorlib-nav-toggle').addClass('show');
143                        }, 900);
144                    }
145                })
146            };
147            burgerMenu();
148
149
150            })(jQuery);
151        &lt;/script&gt;
152    &lt;/body&gt;
153&lt;/html&gt;
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(&quot;beat-saber-intro.jpg&quot;);
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: &quot;Poppins&quot;, 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: &quot;Poppins&quot;, 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

ANSWER

Answered 2021-May-04 at 13:34

The margins in your .row class is causing the issue:

1&lt;!doctype html&gt;
2&lt;html lang=&quot;de&quot;&gt;
3    &lt;head&gt;
4        &lt;title&gt;VR&lt;/title&gt;
5        &lt;!-- Required meta tags --&gt;
6        &lt;meta charset=&quot;utf-8&quot;&gt;
7        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
8
9        &lt;!-- Bootstrap CSS --&gt;
10        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
11        &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
12    &lt;/head&gt;
13    &lt;body&gt;
14        &lt;nav id=&quot;colorlib-main-nav&quot; role=&quot;navigation&quot;&gt;
15            &lt;a href=&quot;#&quot; class=&quot;js-colorlib-nav-toggle colorlib-nav-toggle active&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
16            &lt;div class=&quot;js-fullheight colorlib-table&quot;&gt;
17                &lt;div class=&quot;img&quot; style=&quot;background-image: url(images/bg_3.jpg);&quot;&gt;&lt;/div&gt;
18                &lt;div class=&quot;colorlib-table-cell js-fullheight&quot;&gt;
19                &lt;div class=&quot;row no-gutters&quot;&gt;
20                    &lt;div class=&quot;col-md-12 text-center&quot;&gt;
21                    &lt;h1 class=&quot;mb-4&quot;&gt;&lt;a href=&quot;index.html&quot; class=&quot;logo&quot;&gt;Company Logo&lt;/a&gt;&lt;/h1&gt;
22                    &lt;ul&gt;
23                        &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;index.html&quot;&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
24                        &lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
25                        &lt;li&gt;&lt;a href=&quot;blog.html&quot;&gt;&lt;span&gt;Blog&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
26                        &lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
27                    &lt;/ul&gt;
28                    &lt;/div&gt;
29                &lt;/div&gt;
30                &lt;/div&gt;
31            &lt;/div&gt;
32        &lt;/nav&gt;
33
34        &lt;div class=&quot;header h-100&quot;&gt;
35            &lt;a href=&quot;#&quot; class=&quot;js-colorlib-nav-toggle colorlib-nav-toggle&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
36            &lt;h1 id=&quot;h-100&quot; class=&quot;introduction h-100&quot;&gt;Virtual Reality&lt;/h1&gt;
37            
38        &lt;/div&gt;
39
40        &lt;div class=&quot;h-100&quot;&gt;
41            &lt;h2 class=&quot;center&quot;&gt;Was ist Virtual Reality (VR)&lt;/h2&gt;
42            &lt;p class=&quot;center&quot;&gt;Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann&lt;/p&gt;
43        &lt;/div&gt;
44        
45
46        &lt;div id=&quot;vr-headset-kategorien&quot; class=&quot;&quot;&gt;
47            &lt;!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right--&gt;
48            &lt;div id=&quot;standalone&quot; class=&quot;row&quot;&gt;
49                &lt;!----&gt;
50                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
51                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;Quest 2 Headset - FanArt&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&amp;autostart=1&amp;ui_hint=0&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; Quest 2 Headset - FanArt &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/josevillotguisan?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; joseVG &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
52                &lt;/div&gt;
53                
54                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
55                    &lt;h3&gt;Standalone&lt;/h3&gt;
56                
57                    &lt;p&gt;Standalone VR-Headsets ben&amp;ouml;tigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super f&amp;uuml;r Anf&amp;auml;nger geeignet&lt;/p&gt;
58
59                    &lt;p&gt;
60                    Vorteile:&lt;br /&gt;
61                    Kein guter PC ben&amp;ouml;tigt&lt;br /&gt;
62                    Niedriger Einstiegspreis trotz guter Hardware&lt;br/&gt;
63                    Gut optimierbar, da es fĂĽr das Heaset nur einen Prozessor gibt&lt;/p&gt;
64                    
65                    &lt;p&gt;Nachteile:&lt;br /&gt;
66                    Je nach Headset schlechte Performance bei fordernden Spielen&lt;/p&gt;
67                &lt;/div&gt;
68                
69            &lt;/div&gt;
70
71            &lt;div id=&quot;pc&quot; class=&quot;row&quot;&gt;
72                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
73                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;HTC Vive&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&amp;autostart=1&amp;ui_hint=0&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; HTC Vive &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/EternalRealm?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; Eternal Realm &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
74                &lt;/div&gt;
75                
76                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
77                    &lt;h3&gt;PC-VR&lt;/h3&gt;
78                    &lt;p&gt;PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden &amp;uuml;ber ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem sch&amp;ouml;nes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie vor allem f&amp;uuml;r Enthusiasten geeignet&lt;/p&gt;
79
80                    &lt;p&gt;Vorteile:&lt;br /&gt;
81                    Hohe Aufl&amp;ouml;sung&lt;br /&gt;
82                    Wenig Lags&lt;/p&gt;
83
84                    &lt;p&gt;Nachteile:&lt;br /&gt;
85                    Hoher Einstiegspreis&lt;/p&gt;
86                &lt;/div&gt;
87            &lt;/div&gt;
88
89            &lt;div id=&quot;fulldive&quot; class=&quot;row&quot;&gt;
90                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
91                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;neuraLink&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&amp;autostart=1&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; neuraLink &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/rfarencibia?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; rfarencibia &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
92                &lt;/div&gt;
93                
94                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
95                    &lt;h3&gt;Full-Dive VR&lt;/h3&gt;
96                    &lt;p&gt;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&lt;/p&gt;
97
98                    &lt;p&gt;Vorteile:&lt;br /&gt;
99                    Unvergleichliche Immersion&lt;/p&gt;
100
101                    &lt;p&gt;Nachteile:&lt;br /&gt;
102                    Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber m&amp;ouml;glich&lt;/p&gt;
103                &lt;/div&gt;
104            &lt;/div&gt;
105
106        &lt;/div&gt;
107
108        
109
110      
111        &lt;!-- Optional JavaScript --&gt;
112        &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
113        &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
114        &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot; integrity=&quot;sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
115        &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
116        &lt;script&gt;
117            (function($) {
118
119            &quot;use strict&quot;;
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 &gt; .js-colorlib-nav-toggle').removeClass('show');
139                    } else {
140                        $('body').addClass('menu-show');
141                        setTimeout(function(){
142                            $('#colorlib-main-nav &gt; .js-colorlib-nav-toggle').addClass('show');
143                        }, 900);
144                    }
145                })
146            };
147            burgerMenu();
148
149
150            })(jQuery);
151        &lt;/script&gt;
152    &lt;/body&gt;
153&lt;/html&gt;
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(&quot;beat-saber-intro.jpg&quot;);
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: &quot;Poppins&quot;, 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: &quot;Poppins&quot;, 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

You can add overflow-x: hidden; to body as a quickfix.

1&lt;!doctype html&gt;
2&lt;html lang=&quot;de&quot;&gt;
3    &lt;head&gt;
4        &lt;title&gt;VR&lt;/title&gt;
5        &lt;!-- Required meta tags --&gt;
6        &lt;meta charset=&quot;utf-8&quot;&gt;
7        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
8
9        &lt;!-- Bootstrap CSS --&gt;
10        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
11        &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
12    &lt;/head&gt;
13    &lt;body&gt;
14        &lt;nav id=&quot;colorlib-main-nav&quot; role=&quot;navigation&quot;&gt;
15            &lt;a href=&quot;#&quot; class=&quot;js-colorlib-nav-toggle colorlib-nav-toggle active&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
16            &lt;div class=&quot;js-fullheight colorlib-table&quot;&gt;
17                &lt;div class=&quot;img&quot; style=&quot;background-image: url(images/bg_3.jpg);&quot;&gt;&lt;/div&gt;
18                &lt;div class=&quot;colorlib-table-cell js-fullheight&quot;&gt;
19                &lt;div class=&quot;row no-gutters&quot;&gt;
20                    &lt;div class=&quot;col-md-12 text-center&quot;&gt;
21                    &lt;h1 class=&quot;mb-4&quot;&gt;&lt;a href=&quot;index.html&quot; class=&quot;logo&quot;&gt;Company Logo&lt;/a&gt;&lt;/h1&gt;
22                    &lt;ul&gt;
23                        &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;index.html&quot;&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
24                        &lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
25                        &lt;li&gt;&lt;a href=&quot;blog.html&quot;&gt;&lt;span&gt;Blog&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
26                        &lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
27                    &lt;/ul&gt;
28                    &lt;/div&gt;
29                &lt;/div&gt;
30                &lt;/div&gt;
31            &lt;/div&gt;
32        &lt;/nav&gt;
33
34        &lt;div class=&quot;header h-100&quot;&gt;
35            &lt;a href=&quot;#&quot; class=&quot;js-colorlib-nav-toggle colorlib-nav-toggle&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
36            &lt;h1 id=&quot;h-100&quot; class=&quot;introduction h-100&quot;&gt;Virtual Reality&lt;/h1&gt;
37            
38        &lt;/div&gt;
39
40        &lt;div class=&quot;h-100&quot;&gt;
41            &lt;h2 class=&quot;center&quot;&gt;Was ist Virtual Reality (VR)&lt;/h2&gt;
42            &lt;p class=&quot;center&quot;&gt;Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann&lt;/p&gt;
43        &lt;/div&gt;
44        
45
46        &lt;div id=&quot;vr-headset-kategorien&quot; class=&quot;&quot;&gt;
47            &lt;!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right--&gt;
48            &lt;div id=&quot;standalone&quot; class=&quot;row&quot;&gt;
49                &lt;!----&gt;
50                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
51                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;Quest 2 Headset - FanArt&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&amp;autostart=1&amp;ui_hint=0&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; Quest 2 Headset - FanArt &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/josevillotguisan?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; joseVG &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
52                &lt;/div&gt;
53                
54                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
55                    &lt;h3&gt;Standalone&lt;/h3&gt;
56                
57                    &lt;p&gt;Standalone VR-Headsets ben&amp;ouml;tigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super f&amp;uuml;r Anf&amp;auml;nger geeignet&lt;/p&gt;
58
59                    &lt;p&gt;
60                    Vorteile:&lt;br /&gt;
61                    Kein guter PC ben&amp;ouml;tigt&lt;br /&gt;
62                    Niedriger Einstiegspreis trotz guter Hardware&lt;br/&gt;
63                    Gut optimierbar, da es fĂĽr das Heaset nur einen Prozessor gibt&lt;/p&gt;
64                    
65                    &lt;p&gt;Nachteile:&lt;br /&gt;
66                    Je nach Headset schlechte Performance bei fordernden Spielen&lt;/p&gt;
67                &lt;/div&gt;
68                
69            &lt;/div&gt;
70
71            &lt;div id=&quot;pc&quot; class=&quot;row&quot;&gt;
72                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
73                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;HTC Vive&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&amp;autostart=1&amp;ui_hint=0&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; HTC Vive &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/EternalRealm?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; Eternal Realm &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
74                &lt;/div&gt;
75                
76                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
77                    &lt;h3&gt;PC-VR&lt;/h3&gt;
78                    &lt;p&gt;PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden &amp;uuml;ber ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem sch&amp;ouml;nes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie vor allem f&amp;uuml;r Enthusiasten geeignet&lt;/p&gt;
79
80                    &lt;p&gt;Vorteile:&lt;br /&gt;
81                    Hohe Aufl&amp;ouml;sung&lt;br /&gt;
82                    Wenig Lags&lt;/p&gt;
83
84                    &lt;p&gt;Nachteile:&lt;br /&gt;
85                    Hoher Einstiegspreis&lt;/p&gt;
86                &lt;/div&gt;
87            &lt;/div&gt;
88
89            &lt;div id=&quot;fulldive&quot; class=&quot;row&quot;&gt;
90                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
91                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;neuraLink&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&amp;autostart=1&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; neuraLink &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/rfarencibia?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; rfarencibia &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
92                &lt;/div&gt;
93                
94                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
95                    &lt;h3&gt;Full-Dive VR&lt;/h3&gt;
96                    &lt;p&gt;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&lt;/p&gt;
97
98                    &lt;p&gt;Vorteile:&lt;br /&gt;
99                    Unvergleichliche Immersion&lt;/p&gt;
100
101                    &lt;p&gt;Nachteile:&lt;br /&gt;
102                    Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber m&amp;ouml;glich&lt;/p&gt;
103                &lt;/div&gt;
104            &lt;/div&gt;
105
106        &lt;/div&gt;
107
108        
109
110      
111        &lt;!-- Optional JavaScript --&gt;
112        &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
113        &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
114        &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot; integrity=&quot;sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
115        &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
116        &lt;script&gt;
117            (function($) {
118
119            &quot;use strict&quot;;
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 &gt; .js-colorlib-nav-toggle').removeClass('show');
139                    } else {
140                        $('body').addClass('menu-show');
141                        setTimeout(function(){
142                            $('#colorlib-main-nav &gt; .js-colorlib-nav-toggle').addClass('show');
143                        }, 900);
144                    }
145                })
146            };
147            burgerMenu();
148
149
150            })(jQuery);
151        &lt;/script&gt;
152    &lt;/body&gt;
153&lt;/html&gt;
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(&quot;beat-saber-intro.jpg&quot;);
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: &quot;Poppins&quot;, 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: &quot;Poppins&quot;, 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 &gt; .js-colorlib-nav-toggle').removeClass('show');
559      } else {
560        $('body').addClass('menu-show');
561        setTimeout(function() {
562          $('#colorlib-main-nav &gt; .js-colorlib-nav-toggle').addClass('show');
563        }, 900);
564      }
565    })
566  };
567  burgerMenu();
568
569
570})(jQuery);
1&lt;!doctype html&gt;
2&lt;html lang=&quot;de&quot;&gt;
3    &lt;head&gt;
4        &lt;title&gt;VR&lt;/title&gt;
5        &lt;!-- Required meta tags --&gt;
6        &lt;meta charset=&quot;utf-8&quot;&gt;
7        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
8
9        &lt;!-- Bootstrap CSS --&gt;
10        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
11        &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
12    &lt;/head&gt;
13    &lt;body&gt;
14        &lt;nav id=&quot;colorlib-main-nav&quot; role=&quot;navigation&quot;&gt;
15            &lt;a href=&quot;#&quot; class=&quot;js-colorlib-nav-toggle colorlib-nav-toggle active&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
16            &lt;div class=&quot;js-fullheight colorlib-table&quot;&gt;
17                &lt;div class=&quot;img&quot; style=&quot;background-image: url(images/bg_3.jpg);&quot;&gt;&lt;/div&gt;
18                &lt;div class=&quot;colorlib-table-cell js-fullheight&quot;&gt;
19                &lt;div class=&quot;row no-gutters&quot;&gt;
20                    &lt;div class=&quot;col-md-12 text-center&quot;&gt;
21                    &lt;h1 class=&quot;mb-4&quot;&gt;&lt;a href=&quot;index.html&quot; class=&quot;logo&quot;&gt;Company Logo&lt;/a&gt;&lt;/h1&gt;
22                    &lt;ul&gt;
23                        &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;index.html&quot;&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
24                        &lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
25                        &lt;li&gt;&lt;a href=&quot;blog.html&quot;&gt;&lt;span&gt;Blog&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
26                        &lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
27                    &lt;/ul&gt;
28                    &lt;/div&gt;
29                &lt;/div&gt;
30                &lt;/div&gt;
31            &lt;/div&gt;
32        &lt;/nav&gt;
33
34        &lt;div class=&quot;header h-100&quot;&gt;
35            &lt;a href=&quot;#&quot; class=&quot;js-colorlib-nav-toggle colorlib-nav-toggle&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
36            &lt;h1 id=&quot;h-100&quot; class=&quot;introduction h-100&quot;&gt;Virtual Reality&lt;/h1&gt;
37            
38        &lt;/div&gt;
39
40        &lt;div class=&quot;h-100&quot;&gt;
41            &lt;h2 class=&quot;center&quot;&gt;Was ist Virtual Reality (VR)&lt;/h2&gt;
42            &lt;p class=&quot;center&quot;&gt;Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann&lt;/p&gt;
43        &lt;/div&gt;
44        
45
46        &lt;div id=&quot;vr-headset-kategorien&quot; class=&quot;&quot;&gt;
47            &lt;!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right--&gt;
48            &lt;div id=&quot;standalone&quot; class=&quot;row&quot;&gt;
49                &lt;!----&gt;
50                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
51                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;Quest 2 Headset - FanArt&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&amp;autostart=1&amp;ui_hint=0&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; Quest 2 Headset - FanArt &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/josevillotguisan?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; joseVG &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
52                &lt;/div&gt;
53                
54                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
55                    &lt;h3&gt;Standalone&lt;/h3&gt;
56                
57                    &lt;p&gt;Standalone VR-Headsets ben&amp;ouml;tigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super f&amp;uuml;r Anf&amp;auml;nger geeignet&lt;/p&gt;
58
59                    &lt;p&gt;
60                    Vorteile:&lt;br /&gt;
61                    Kein guter PC ben&amp;ouml;tigt&lt;br /&gt;
62                    Niedriger Einstiegspreis trotz guter Hardware&lt;br/&gt;
63                    Gut optimierbar, da es fĂĽr das Heaset nur einen Prozessor gibt&lt;/p&gt;
64                    
65                    &lt;p&gt;Nachteile:&lt;br /&gt;
66                    Je nach Headset schlechte Performance bei fordernden Spielen&lt;/p&gt;
67                &lt;/div&gt;
68                
69            &lt;/div&gt;
70
71            &lt;div id=&quot;pc&quot; class=&quot;row&quot;&gt;
72                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
73                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;HTC Vive&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&amp;autostart=1&amp;ui_hint=0&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; HTC Vive &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/EternalRealm?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; Eternal Realm &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
74                &lt;/div&gt;
75                
76                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
77                    &lt;h3&gt;PC-VR&lt;/h3&gt;
78                    &lt;p&gt;PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden &amp;uuml;ber ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem sch&amp;ouml;nes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie vor allem f&amp;uuml;r Enthusiasten geeignet&lt;/p&gt;
79
80                    &lt;p&gt;Vorteile:&lt;br /&gt;
81                    Hohe Aufl&amp;ouml;sung&lt;br /&gt;
82                    Wenig Lags&lt;/p&gt;
83
84                    &lt;p&gt;Nachteile:&lt;br /&gt;
85                    Hoher Einstiegspreis&lt;/p&gt;
86                &lt;/div&gt;
87            &lt;/div&gt;
88
89            &lt;div id=&quot;fulldive&quot; class=&quot;row&quot;&gt;
90                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
91                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;neuraLink&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&amp;autostart=1&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; neuraLink &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/rfarencibia?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; rfarencibia &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
92                &lt;/div&gt;
93                
94                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
95                    &lt;h3&gt;Full-Dive VR&lt;/h3&gt;
96                    &lt;p&gt;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&lt;/p&gt;
97
98                    &lt;p&gt;Vorteile:&lt;br /&gt;
99                    Unvergleichliche Immersion&lt;/p&gt;
100
101                    &lt;p&gt;Nachteile:&lt;br /&gt;
102                    Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber m&amp;ouml;glich&lt;/p&gt;
103                &lt;/div&gt;
104            &lt;/div&gt;
105
106        &lt;/div&gt;
107
108        
109
110      
111        &lt;!-- Optional JavaScript --&gt;
112        &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
113        &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
114        &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot; integrity=&quot;sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
115        &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
116        &lt;script&gt;
117            (function($) {
118
119            &quot;use strict&quot;;
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 &gt; .js-colorlib-nav-toggle').removeClass('show');
139                    } else {
140                        $('body').addClass('menu-show');
141                        setTimeout(function(){
142                            $('#colorlib-main-nav &gt; .js-colorlib-nav-toggle').addClass('show');
143                        }, 900);
144                    }
145                })
146            };
147            burgerMenu();
148
149
150            })(jQuery);
151        &lt;/script&gt;
152    &lt;/body&gt;
153&lt;/html&gt;
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(&quot;beat-saber-intro.jpg&quot;);
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: &quot;Poppins&quot;, 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: &quot;Poppins&quot;, 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 &gt; .js-colorlib-nav-toggle').removeClass('show');
559      } else {
560        $('body').addClass('menu-show');
561        setTimeout(function() {
562          $('#colorlib-main-nav &gt; .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&lt;!doctype html&gt;
2&lt;html lang=&quot;de&quot;&gt;
3    &lt;head&gt;
4        &lt;title&gt;VR&lt;/title&gt;
5        &lt;!-- Required meta tags --&gt;
6        &lt;meta charset=&quot;utf-8&quot;&gt;
7        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
8
9        &lt;!-- Bootstrap CSS --&gt;
10        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css&quot; integrity=&quot;sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T&quot; crossorigin=&quot;anonymous&quot;&gt;
11        &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
12    &lt;/head&gt;
13    &lt;body&gt;
14        &lt;nav id=&quot;colorlib-main-nav&quot; role=&quot;navigation&quot;&gt;
15            &lt;a href=&quot;#&quot; class=&quot;js-colorlib-nav-toggle colorlib-nav-toggle active&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
16            &lt;div class=&quot;js-fullheight colorlib-table&quot;&gt;
17                &lt;div class=&quot;img&quot; style=&quot;background-image: url(images/bg_3.jpg);&quot;&gt;&lt;/div&gt;
18                &lt;div class=&quot;colorlib-table-cell js-fullheight&quot;&gt;
19                &lt;div class=&quot;row no-gutters&quot;&gt;
20                    &lt;div class=&quot;col-md-12 text-center&quot;&gt;
21                    &lt;h1 class=&quot;mb-4&quot;&gt;&lt;a href=&quot;index.html&quot; class=&quot;logo&quot;&gt;Company Logo&lt;/a&gt;&lt;/h1&gt;
22                    &lt;ul&gt;
23                        &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;index.html&quot;&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
24                        &lt;li&gt;&lt;a href=&quot;about.html&quot;&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
25                        &lt;li&gt;&lt;a href=&quot;blog.html&quot;&gt;&lt;span&gt;Blog&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
26                        &lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
27                    &lt;/ul&gt;
28                    &lt;/div&gt;
29                &lt;/div&gt;
30                &lt;/div&gt;
31            &lt;/div&gt;
32        &lt;/nav&gt;
33
34        &lt;div class=&quot;header h-100&quot;&gt;
35            &lt;a href=&quot;#&quot; class=&quot;js-colorlib-nav-toggle colorlib-nav-toggle&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
36            &lt;h1 id=&quot;h-100&quot; class=&quot;introduction h-100&quot;&gt;Virtual Reality&lt;/h1&gt;
37            
38        &lt;/div&gt;
39
40        &lt;div class=&quot;h-100&quot;&gt;
41            &lt;h2 class=&quot;center&quot;&gt;Was ist Virtual Reality (VR)&lt;/h2&gt;
42            &lt;p class=&quot;center&quot;&gt;Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann&lt;/p&gt;
43        &lt;/div&gt;
44        
45
46        &lt;div id=&quot;vr-headset-kategorien&quot; class=&quot;&quot;&gt;
47            &lt;!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right--&gt;
48            &lt;div id=&quot;standalone&quot; class=&quot;row&quot;&gt;
49                &lt;!----&gt;
50                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
51                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;Quest 2 Headset - FanArt&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&amp;autostart=1&amp;ui_hint=0&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; Quest 2 Headset - FanArt &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/josevillotguisan?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; joseVG &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=ee496aa030bf4f37a52b445196796af3&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
52                &lt;/div&gt;
53                
54                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
55                    &lt;h3&gt;Standalone&lt;/h3&gt;
56                
57                    &lt;p&gt;Standalone VR-Headsets ben&amp;ouml;tigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super f&amp;uuml;r Anf&amp;auml;nger geeignet&lt;/p&gt;
58
59                    &lt;p&gt;
60                    Vorteile:&lt;br /&gt;
61                    Kein guter PC ben&amp;ouml;tigt&lt;br /&gt;
62                    Niedriger Einstiegspreis trotz guter Hardware&lt;br/&gt;
63                    Gut optimierbar, da es fĂĽr das Heaset nur einen Prozessor gibt&lt;/p&gt;
64                    
65                    &lt;p&gt;Nachteile:&lt;br /&gt;
66                    Je nach Headset schlechte Performance bei fordernden Spielen&lt;/p&gt;
67                &lt;/div&gt;
68                
69            &lt;/div&gt;
70
71            &lt;div id=&quot;pc&quot; class=&quot;row&quot;&gt;
72                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
73                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;HTC Vive&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&amp;autostart=1&amp;ui_hint=0&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; HTC Vive &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/EternalRealm?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; Eternal Realm &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=4cee0970fe60444ead77d41fbb052a33&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
74                &lt;/div&gt;
75                
76                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
77                    &lt;h3&gt;PC-VR&lt;/h3&gt;
78                    &lt;p&gt;PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden &amp;uuml;ber ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem sch&amp;ouml;nes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie vor allem f&amp;uuml;r Enthusiasten geeignet&lt;/p&gt;
79
80                    &lt;p&gt;Vorteile:&lt;br /&gt;
81                    Hohe Aufl&amp;ouml;sung&lt;br /&gt;
82                    Wenig Lags&lt;/p&gt;
83
84                    &lt;p&gt;Nachteile:&lt;br /&gt;
85                    Hoher Einstiegspreis&lt;/p&gt;
86                &lt;/div&gt;
87            &lt;/div&gt;
88
89            &lt;div id=&quot;fulldive&quot; class=&quot;row&quot;&gt;
90                &lt;div class=&quot;vr-left_side container col-lg-6&quot;&gt;
91                    &lt;div class=&quot;sketchfab-embed-wrapper&quot;&gt; &lt;iframe title=&quot;neuraLink&quot; frameborder=&quot;0&quot; allowfullscreen mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; allow=&quot;fullscreen; autoplay; vr&quot; xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src=&quot;https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&amp;autostart=1&quot;&gt; &lt;/iframe&gt; &lt;p style=&quot;font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;&quot;&gt; &lt;a href=&quot;https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; neuraLink &lt;/a&gt; by &lt;a href=&quot;https://sketchfab.com/rfarencibia?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt; rfarencibia &lt;/a&gt; on &lt;a href=&quot;https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=6a157c614d0641c2a2d2c7c7628fb01b&quot; target=&quot;_blank&quot; style=&quot;font-weight: bold; color: #1CAAD9;&quot;&gt;Sketchfab&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;
92                &lt;/div&gt;
93                
94                &lt;div class=&quot;vr-right_side container col-lg-6&quot;&gt;
95                    &lt;h3&gt;Full-Dive VR&lt;/h3&gt;
96                    &lt;p&gt;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&lt;/p&gt;
97
98                    &lt;p&gt;Vorteile:&lt;br /&gt;
99                    Unvergleichliche Immersion&lt;/p&gt;
100
101                    &lt;p&gt;Nachteile:&lt;br /&gt;
102                    Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber m&amp;ouml;glich&lt;/p&gt;
103                &lt;/div&gt;
104            &lt;/div&gt;
105
106        &lt;/div&gt;
107
108        
109
110      
111        &lt;!-- Optional JavaScript --&gt;
112        &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
113        &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot; integrity=&quot;sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
114        &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js&quot; integrity=&quot;sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
115        &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
116        &lt;script&gt;
117            (function($) {
118
119            &quot;use strict&quot;;
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 &gt; .js-colorlib-nav-toggle').removeClass('show');
139                    } else {
140                        $('body').addClass('menu-show');
141                        setTimeout(function(){
142                            $('#colorlib-main-nav &gt; .js-colorlib-nav-toggle').addClass('show');
143                        }, 900);
144                    }
145                })
146            };
147            burgerMenu();
148
149
150            })(jQuery);
151        &lt;/script&gt;
152    &lt;/body&gt;
153&lt;/html&gt;
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(&quot;beat-saber-intro.jpg&quot;);
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: &quot;Poppins&quot;, 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: &quot;Poppins&quot;, 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 &gt; .js-colorlib-nav-toggle').removeClass('show');
559      } else {
560        $('body').addClass('menu-show');
561        setTimeout(function() {
562          $('#colorlib-main-nav &gt; .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;