diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000..16f740955f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+/nbproject/private/
+/styles_BUILD/
+/scripts/onepager.min.js
+/styles/onepager.css
+/styles/onepager.css.map
\ No newline at end of file
diff --git a/.htaccess b/.htaccess
new file mode 100644
index 0000000000..1aa684c521
--- /dev/null
+++ b/.htaccess
@@ -0,0 +1,71 @@
+#Header set cache-control: no-transform,public,max-age=300,s-maxage=900
+
+# compress text, html, javascript, css, xml:
+
+ AddOutputFilterByType DEFLATE text/plain
+ AddOutputFilterByType DEFLATE text/html
+ AddOutputFilterByType DEFLATE text/css
+ AddOutputFilterByType DEFLATE text/xml
+ AddOutputFilterByType DEFLATE font/ttf
+ AddOutputFilterByType DEFLATE text/javascript
+ AddOutputFilterByType DEFLATE application/x-javascript
+ AddOutputFilterByType DEFLATE application/xhtml+xml
+ AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
+
+
+# Add correct content-type for fonts
+AddType font/ttf .ttf
+AddType font/woff .woff
+AddType font/woff2 .woff
+AddType font/eot .eot
+AddType application/x-font-ttf .ttf
+AddType application/x-font-opentype .otf
+AddType application/x-font-woff .woff
+# AddType font/svg .svg Do NOT activate this, after this all svg+xml images will not appear.
+
+AddType image/svg+xml svg svgz
+AddEncoding gzip svgz
+
+# Or, compress certain file types by extension:
+
+ SetOutputFilter DEFLATE
+
+
+
+ SetOutputFilter DEFLATE
+
+
+
+ SetOutputFilter DEFLATE
+
+
+# Set expire information for some types.
+
+ ExpiresActive On
+ ExpiresDefault "access plus 1 month"
+ ExpiresByType image/gif "access plus 1 month"
+ ExpiresByType image/jpg "access plus 1 month"
+ ExpiresByType image/jpeg "access plus 1 month"
+ ExpiresByType image/png "access plus 1 month"
+ ExpiresByType image/svg+xml "access plus 1 month"
+ ExpiresByType image/svg "access plus 1 month"
+ ExpiresByType text/css "access plus 1 month"
+ ExpiresByType text/html "access plus 1 month"
+ ExpiresByType text/javascript "access plus 1 month"
+ ExpiresByType application/x-javascript "access plus 1 month"
+ ExpiresByType application/javascript "access plus 1 month"
+ ExpiresByType font/ttf "access plus 1 month"
+ ExpiresByType font/eot "access plus 1 month"
+ ExpiresByType font/woff "access plus 1 month"
+ ExpiresByType font/woff2 "access plus 1 month"
+ ExpiresByType font/svg "access plus 1 month"
+
+
+
+ Options +FollowSymLinks
+ IndexIgnore */*
+ RewriteEngine On
+ RewriteCond %{REQUEST_FILENAME} !-f
+ RewriteCond %{REQUEST_FILENAME} !-d
+ RewriteRule (.*) /
+
\ No newline at end of file
diff --git a/bilder/NetBeans Logos/Logo-NetBeans-160401-03.svg b/bilder/NetBeans Logos/Logo-NetBeans-160401-03.svg
new file mode 100644
index 0000000000..9f7ffd2c7b
--- /dev/null
+++ b/bilder/NetBeans Logos/Logo-NetBeans-160401-03.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/bilder/NetBeans Logos/Logo-NetBeans-160401-04.svg b/bilder/NetBeans Logos/Logo-NetBeans-160401-04.svg
new file mode 100644
index 0000000000..149d9281cf
--- /dev/null
+++ b/bilder/NetBeans Logos/Logo-NetBeans-160401-04.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/bilder/NetBeans Logos/Logo-NetBeans-160401-07.svg b/bilder/NetBeans Logos/Logo-NetBeans-160401-07.svg
new file mode 100644
index 0000000000..086418d1e3
--- /dev/null
+++ b/bilder/NetBeans Logos/Logo-NetBeans-160401-07.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-02.jpg b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-02.jpg
new file mode 100644
index 0000000000..af12d50aae
Binary files /dev/null and b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-02.jpg differ
diff --git a/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-03.jpg b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-03.jpg
new file mode 100644
index 0000000000..a89c12fb20
Binary files /dev/null and b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-03.jpg differ
diff --git a/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-04.jpg b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-04.jpg
new file mode 100644
index 0000000000..e530567ec6
Binary files /dev/null and b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-04.jpg differ
diff --git a/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-05.jpg b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-05.jpg
new file mode 100644
index 0000000000..1c57ad586b
Binary files /dev/null and b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-05.jpg differ
diff --git a/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-06.jpg b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-06.jpg
new file mode 100644
index 0000000000..3db2fba9dc
Binary files /dev/null and b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-06.jpg differ
diff --git a/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-07.jpg b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-07.jpg
new file mode 100644
index 0000000000..1c16463a7e
Binary files /dev/null and b/bilder/Netbeans logos Neu/JPG/Logo-NetBeans-160401-ohnetext-07.jpg differ
diff --git "a/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 2.svg" "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 2.svg"
new file mode 100644
index 0000000000..5e7042c12f
--- /dev/null
+++ "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 2.svg"
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git "a/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 3.svg" "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 3.svg"
new file mode 100644
index 0000000000..19f92802ab
--- /dev/null
+++ "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 3.svg"
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git "a/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 4.svg" "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 4.svg"
new file mode 100644
index 0000000000..e54d9d0ba2
--- /dev/null
+++ "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 4.svg"
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git "a/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 5.svg" "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 5.svg"
new file mode 100644
index 0000000000..d804e3f0e1
--- /dev/null
+++ "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie 5.svg"
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git "a/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie.svg" "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie.svg"
new file mode 100644
index 0000000000..8e99cc6432
--- /dev/null
+++ "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2 Kopie.svg"
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git "a/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2.svg" "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2.svg"
new file mode 100644
index 0000000000..8530f30f12
--- /dev/null
+++ "b/bilder/Netbeans logos Neu/SVG/Zeichenfl\303\244che 2.svg"
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/bilder/android.png b/bilder/android.png
new file mode 100644
index 0000000000..775b422f34
Binary files /dev/null and b/bilder/android.png differ
diff --git a/bilder/angularjs.png b/bilder/angularjs.png
new file mode 100644
index 0000000000..b1d398b8b7
Binary files /dev/null and b/bilder/angularjs.png differ
diff --git a/bilder/ant.gif b/bilder/ant.gif
new file mode 100644
index 0000000000..59c0c4b603
Binary files /dev/null and b/bilder/ant.gif differ
diff --git a/bilder/arduino.png b/bilder/arduino.png
new file mode 100644
index 0000000000..bb96883a54
Binary files /dev/null and b/bilder/arduino.png differ
diff --git a/bilder/bower.png b/bilder/bower.png
new file mode 100644
index 0000000000..600f60fec5
Binary files /dev/null and b/bilder/bower.png differ
diff --git a/bilder/bugzilla.png b/bilder/bugzilla.png
new file mode 100644
index 0000000000..f3790e9977
Binary files /dev/null and b/bilder/bugzilla.png differ
diff --git a/bilder/cakephp.png b/bilder/cakephp.png
new file mode 100644
index 0000000000..abc4554b4a
Binary files /dev/null and b/bilder/cakephp.png differ
diff --git a/bilder/cassandra.png b/bilder/cassandra.png
new file mode 100644
index 0000000000..2bd18ef1d0
Binary files /dev/null and b/bilder/cassandra.png differ
diff --git a/bilder/coffeescript.png b/bilder/coffeescript.png
new file mode 100644
index 0000000000..d78e5518bc
Binary files /dev/null and b/bilder/coffeescript.png differ
diff --git a/bilder/controlsjs.png b/bilder/controlsjs.png
new file mode 100644
index 0000000000..8728d67be5
Binary files /dev/null and b/bilder/controlsjs.png differ
diff --git a/bilder/cordova.png b/bilder/cordova.png
new file mode 100644
index 0000000000..81f3363609
Binary files /dev/null and b/bilder/cordova.png differ
diff --git a/bilder/couchapp.png b/bilder/couchapp.png
new file mode 100644
index 0000000000..a0be4f355e
Binary files /dev/null and b/bilder/couchapp.png differ
diff --git a/bilder/couchbase.png b/bilder/couchbase.png
new file mode 100644
index 0000000000..4bdc3876ff
Binary files /dev/null and b/bilder/couchbase.png differ
diff --git a/bilder/db.png b/bilder/db.png
new file mode 100644
index 0000000000..b8fdcccb11
Binary files /dev/null and b/bilder/db.png differ
diff --git a/bilder/docker.png b/bilder/docker.png
new file mode 100644
index 0000000000..48d3d08f52
Binary files /dev/null and b/bilder/docker.png differ
diff --git a/bilder/doctrine.png b/bilder/doctrine.png
new file mode 100644
index 0000000000..084b35760f
Binary files /dev/null and b/bilder/doctrine.png differ
diff --git a/bilder/es6.png b/bilder/es6.png
new file mode 100644
index 0000000000..b47e16127d
Binary files /dev/null and b/bilder/es6.png differ
diff --git a/bilder/eslint.png b/bilder/eslint.png
new file mode 100644
index 0000000000..162f09ad72
Binary files /dev/null and b/bilder/eslint.png differ
diff --git a/bilder/git.png b/bilder/git.png
new file mode 100644
index 0000000000..eab8c2daae
Binary files /dev/null and b/bilder/git.png differ
diff --git a/bilder/github.png b/bilder/github.png
new file mode 100644
index 0000000000..db813165f6
Binary files /dev/null and b/bilder/github.png differ
diff --git a/bilder/gradle.png b/bilder/gradle.png
new file mode 100644
index 0000000000..3f3af049e6
Binary files /dev/null and b/bilder/gradle.png differ
diff --git a/bilder/grunt.svg b/bilder/grunt.svg
new file mode 100644
index 0000000000..fd02b77f58
--- /dev/null
+++ b/bilder/grunt.svg
@@ -0,0 +1,294 @@
+
+
+
+
diff --git a/bilder/gulp.png b/bilder/gulp.png
new file mode 100644
index 0000000000..56dc46c3e4
Binary files /dev/null and b/bilder/gulp.png differ
diff --git a/bilder/handlebars.png b/bilder/handlebars.png
new file mode 100644
index 0000000000..183a222e8b
Binary files /dev/null and b/bilder/handlebars.png differ
diff --git a/bilder/ionic.png b/bilder/ionic.png
new file mode 100644
index 0000000000..d717b17cef
Binary files /dev/null and b/bilder/ionic.png differ
diff --git a/bilder/javaee.png b/bilder/javaee.png
new file mode 100644
index 0000000000..b8d2b3e3f4
Binary files /dev/null and b/bilder/javaee.png differ
diff --git a/bilder/javafx.png b/bilder/javafx.png
new file mode 100644
index 0000000000..4e683d15a4
Binary files /dev/null and b/bilder/javafx.png differ
diff --git a/bilder/jenkins.png b/bilder/jenkins.png
new file mode 100644
index 0000000000..f8813eb312
Binary files /dev/null and b/bilder/jenkins.png differ
diff --git a/bilder/jira.png b/bilder/jira.png
new file mode 100644
index 0000000000..d457a12cd5
Binary files /dev/null and b/bilder/jira.png differ
diff --git a/bilder/jquery.png b/bilder/jquery.png
new file mode 100644
index 0000000000..d9f119349f
Binary files /dev/null and b/bilder/jquery.png differ
diff --git a/bilder/jshint.png b/bilder/jshint.png
new file mode 100644
index 0000000000..444ca71038
Binary files /dev/null and b/bilder/jshint.png differ
diff --git a/bilder/karmajs.png b/bilder/karmajs.png
new file mode 100644
index 0000000000..77a34ff9f3
Binary files /dev/null and b/bilder/karmajs.png differ
diff --git a/bilder/knockout.png b/bilder/knockout.png
new file mode 100644
index 0000000000..6a08dab058
Binary files /dev/null and b/bilder/knockout.png differ
diff --git a/bilder/kotlin.png b/bilder/kotlin.png
new file mode 100644
index 0000000000..1163ebadc2
Binary files /dev/null and b/bilder/kotlin.png differ
diff --git a/bilder/laravel.png b/bilder/laravel.png
new file mode 100644
index 0000000000..11cc0ea137
Binary files /dev/null and b/bilder/laravel.png differ
diff --git a/bilder/logo-1.svg b/bilder/logo-1.svg
new file mode 100644
index 0000000000..5e7042c12f
--- /dev/null
+++ b/bilder/logo-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/bilder/logo-2.svg b/bilder/logo-2.svg
new file mode 100644
index 0000000000..8e99cc6432
--- /dev/null
+++ b/bilder/logo-2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/bilder/maven.png b/bilder/maven.png
new file mode 100644
index 0000000000..7bfc052209
Binary files /dev/null and b/bilder/maven.png differ
diff --git a/bilder/mercurial.png b/bilder/mercurial.png
new file mode 100644
index 0000000000..706240a35d
Binary files /dev/null and b/bilder/mercurial.png differ
diff --git a/bilder/mongodb.png b/bilder/mongodb.png
new file mode 100644
index 0000000000..2b9c66ccb4
Binary files /dev/null and b/bilder/mongodb.png differ
diff --git a/bilder/mssql.jpg b/bilder/mssql.jpg
new file mode 100644
index 0000000000..a0c37101dd
Binary files /dev/null and b/bilder/mssql.jpg differ
diff --git a/bilder/mssql.png b/bilder/mssql.png
new file mode 100644
index 0000000000..4be29baa05
Binary files /dev/null and b/bilder/mssql.png differ
diff --git a/bilder/mysql.png b/bilder/mysql.png
new file mode 100644
index 0000000000..eb4865e7f8
Binary files /dev/null and b/bilder/mysql.png differ
diff --git a/bilder/netbeans.png b/bilder/netbeans.png
new file mode 100644
index 0000000000..a12f92d9b5
Binary files /dev/null and b/bilder/netbeans.png differ
diff --git a/bilder/nodejs.png b/bilder/nodejs.png
new file mode 100644
index 0000000000..cb4cdb35ae
Binary files /dev/null and b/bilder/nodejs.png differ
diff --git a/bilder/npm.png b/bilder/npm.png
new file mode 100644
index 0000000000..c790010c7b
Binary files /dev/null and b/bilder/npm.png differ
diff --git a/bilder/ojet.jpg b/bilder/ojet.jpg
new file mode 100644
index 0000000000..877aa61372
Binary files /dev/null and b/bilder/ojet.jpg differ
diff --git a/bilder/perl.png b/bilder/perl.png
new file mode 100644
index 0000000000..5ca7e8766c
Binary files /dev/null and b/bilder/perl.png differ
diff --git a/bilder/pl-sql.png b/bilder/pl-sql.png
new file mode 100644
index 0000000000..f42886023f
Binary files /dev/null and b/bilder/pl-sql.png differ
diff --git a/bilder/polymer.png b/bilder/polymer.png
new file mode 100644
index 0000000000..86b06752ba
Binary files /dev/null and b/bilder/polymer.png differ
diff --git a/bilder/postgresql.png b/bilder/postgresql.png
new file mode 100644
index 0000000000..dbb8e71c2b
Binary files /dev/null and b/bilder/postgresql.png differ
diff --git a/bilder/puppet.png b/bilder/puppet.png
new file mode 100644
index 0000000000..e1e4996436
Binary files /dev/null and b/bilder/puppet.png differ
diff --git a/bilder/python.png b/bilder/python.png
new file mode 100644
index 0000000000..f0f22cbbce
Binary files /dev/null and b/bilder/python.png differ
diff --git a/bilder/react.png b/bilder/react.png
new file mode 100644
index 0000000000..2ce06c446c
Binary files /dev/null and b/bilder/react.png differ
diff --git a/bilder/redmine.png b/bilder/redmine.png
new file mode 100644
index 0000000000..2eacf307ac
Binary files /dev/null and b/bilder/redmine.png differ
diff --git a/bilder/requirejs.png b/bilder/requirejs.png
new file mode 100644
index 0000000000..e7fd732b72
Binary files /dev/null and b/bilder/requirejs.png differ
diff --git a/bilder/scala.png b/bilder/scala.png
new file mode 100644
index 0000000000..659915f663
Binary files /dev/null and b/bilder/scala.png differ
diff --git a/bilder/selenium.png b/bilder/selenium.png
new file mode 100644
index 0000000000..ca5889d64b
Binary files /dev/null and b/bilder/selenium.png differ
diff --git a/bilder/shell.png b/bilder/shell.png
new file mode 100644
index 0000000000..ca4d4fa4f1
Binary files /dev/null and b/bilder/shell.png differ
diff --git a/bilder/silverstripe.png b/bilder/silverstripe.png
new file mode 100644
index 0000000000..7e177faab3
Binary files /dev/null and b/bilder/silverstripe.png differ
diff --git a/bilder/sonar.png b/bilder/sonar.png
new file mode 100644
index 0000000000..167d2c6baa
Binary files /dev/null and b/bilder/sonar.png differ
diff --git a/bilder/spring.png b/bilder/spring.png
new file mode 100644
index 0000000000..9f5b20aa67
Binary files /dev/null and b/bilder/spring.png differ
diff --git a/bilder/sqlite.png b/bilder/sqlite.png
new file mode 100644
index 0000000000..90949fb5f3
Binary files /dev/null and b/bilder/sqlite.png differ
diff --git a/bilder/svn.png b/bilder/svn.png
new file mode 100644
index 0000000000..1af91a53c5
Binary files /dev/null and b/bilder/svn.png differ
diff --git a/bilder/symfony.png b/bilder/symfony.png
new file mode 100644
index 0000000000..0cc594d159
Binary files /dev/null and b/bilder/symfony.png differ
diff --git a/bilder/typescript.png b/bilder/typescript.png
new file mode 100644
index 0000000000..1ac5170e7e
Binary files /dev/null and b/bilder/typescript.png differ
diff --git a/bilder/uml.png b/bilder/uml.png
new file mode 100644
index 0000000000..e30231d6c7
Binary files /dev/null and b/bilder/uml.png differ
diff --git a/bilder/wordpress.png b/bilder/wordpress.png
new file mode 100644
index 0000000000..8850a33f40
Binary files /dev/null and b/bilder/wordpress.png differ
diff --git a/bilder/zend.png b/bilder/zend.png
new file mode 100644
index 0000000000..c728b3edf4
Binary files /dev/null and b/bilder/zend.png differ
diff --git a/fonts/puls.svg b/fonts/puls.svg
new file mode 100644
index 0000000000..a0bb2068c7
--- /dev/null
+++ b/fonts/puls.svg
@@ -0,0 +1,24 @@
+
+
+
\ No newline at end of file
diff --git a/fonts/puls.ttf b/fonts/puls.ttf
new file mode 100644
index 0000000000..ddaf4e0a89
Binary files /dev/null and b/fonts/puls.ttf differ
diff --git a/fonts/puls.woff b/fonts/puls.woff
new file mode 100644
index 0000000000..209f1b88ab
Binary files /dev/null and b/fonts/puls.woff differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000..99087f9329
--- /dev/null
+++ b/index.html
@@ -0,0 +1,615 @@
+
+
+
+ NetBeans - Fits the pieces together
+
+
+
+
+
+
+
+
+
+
+

+
+
+
+
+
+
+
NetBeans IDE
+ Fits the Pieces Together
+
+
+
+
+
+ Quickly and easily develop desktop, mobile and web applications
+ with Java, JavaScript, HTML5, PHP, C/C++ and more.
+
+
+ NetBeans IDE is FREE, open source, and has a worldwide community
+ of users and developers.
+
+
+
+
+
+
+
+
+
+
+
NetBeans IDE supports a lot of languages...
+
+
* These are 3rd Party Plugins.
+
+
+
+
+
+
+
+
+
...and has support for lots of technologies and frameworks...
+
+
+
+
+
+
+
+
...and it is highly customizable!
+
+
There are many more plugins available, take a look at the NetBeans Plugin Portal
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000..fee5a9f0b8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "NetBeans Redesign",
+ "version": "1.0.0",
+ "keywords": [
+ "util",
+ "functional",
+ "server",
+ "client",
+ "browser"
+ ],
+ "author": "Chris",
+ "contributors": [
+ ],
+ "dependencies": {}
+}
\ No newline at end of file
diff --git a/scripts/components/contactForm/contactForm.js b/scripts/components/contactForm/contactForm.js
new file mode 100644
index 0000000000..3b68858200
--- /dev/null
+++ b/scripts/components/contactForm/contactForm.js
@@ -0,0 +1,70 @@
+/* global grecaptcha */
+
+(function() {
+ 'use strict';
+
+ var http = new XMLHttpRequest(),
+
+ xhr = function(method, url, params, success, error, complete) {
+ http.onreadystatechange = function() {
+ if (http.readyState === 4 && http.status === 200) {
+ success(http.responseText);
+ } else {
+ error(http.responseText);
+ }
+ };
+
+ http.open(method, url, true);
+
+ if (method === 'POST') {
+ //Send the proper header information along with the request
+ http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+ http.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+
+ http.send('payload='+params);
+ }
+
+ complete();
+ };
+
+ document.querySelector('.submit').addEventListener('click', function() {
+ var captchaValue = document.querySelector('#g-recaptcha-response').value;
+
+ checkForm().then(function(isFormValid) {
+ if (isFormValid && !!captchaValue) {
+ var validFields = [];
+
+ setValidationClass('.g-recaptcha', true);
+
+ [].slice.call(document.querySelectorAll('#multi-form .validation-field.mf-valid [data-validators]')).forEach(function(field) {
+ validFields.push({
+ id: field.getAttribute('id'),
+ value: field.getAttribute('id') === 'captcha' ? captchaValue : field.value,
+ placeholder: field.getAttribute('data-placeholder'),
+ validators: field.getAttribute('data-validators').split(' ')
+ });
+ });
+
+ xhr('POST', "backend/contact.php?extraParam=contact", JSON.stringify({data: validFields}), function() {
+ document.querySelector('#responseMessage').innerText = 'Vielen Dank, die E-Mail wurde versandt.';
+ document.contactForm.reset();
+
+ removeClass(document.querySelector('#responseMessage'), 'error');
+ addClass(document.querySelector('#responseMessage'), 'success');
+ }, function(res) {
+ if (res) {
+ document.querySelector('#responseMessage').innerHTML = res.statusText || "Oops da ist wohl was schiefgelaufen,
schreib uns bitte an kontakt@puls-webagentur.de";
+ removeClass(document.querySelector('#responseMessage'), 'success');
+ addClass(document.querySelector('#responseMessage'), 'error');
+ } else {
+// console.log('Error: ', res || res.statusText);
+ }
+ }, function() {
+ grecaptcha.reset();
+ });
+ } else {
+ setValidationClass('.g-recaptcha', false);
+ }
+ });
+ }, true);
+}());
\ No newline at end of file
diff --git a/scripts/components/contactForm/formValidation.js b/scripts/components/contactForm/formValidation.js
new file mode 100644
index 0000000000..bc774e648d
--- /dev/null
+++ b/scripts/components/contactForm/formValidation.js
@@ -0,0 +1,211 @@
+/* global Q */
+
+(function () {
+ 'use strict';
+
+ var validators = [],
+ validatorObject = {
+ isNotEmpty: function (field) {
+ var result = Q.defer(),
+ isValid = (field.value !== '');
+
+ result.resolve({
+ isValid: isValid,
+ errorMessage: isValid ? '' : 'Bitte ' + field.getAttribute('data-placeholder') + ' angeben.'
+ });
+
+ return result.promise;
+ },
+
+ isMailValid: function (field) {
+ var result = Q.defer(),
+ isValid = (/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*(\.[a-zA-Z]{2,4})$/).test(field.value);
+
+ result.resolve({
+ isValid: isValid,
+ errorMessage: isValid ? '' : 'Bitte gib eine gültige E-Mailadresse an.'
+ });
+
+ return result.promise;
+ },
+
+ isCaptchaValid: function () {
+ var result = Q.defer();
+
+ result.resolve({
+ isValid: true,
+ errorMessage: ''
+ });
+
+ return result.promise;
+ }
+ },
+
+ isFieldValidatorValid = function (field) {
+ return Q.all(validators.map(function(validator) {
+ var result = Q.defer();
+
+ validator(field).then(function(val) {
+ if (!val.isValid) {
+ result.resolve({
+ isValid: false,
+ errorMessage: val.errorMessage
+ });
+ }
+
+ result.resolve({
+ isValid: true,
+ errorMessage: ''
+ });
+ });
+
+ return result.promise;
+ }));
+ },
+
+ showError = function (validationField, errorMsg) {
+ validationField.querySelector('.error-message').innerText = errorMsg;
+ removeClass(validationField, 'mf-valid');
+ addClass(validationField, 'mf-error');
+ },
+
+ hideError = function (validationField) {
+ removeClass(validationField, 'mf-error');
+ addClass(validationField, 'mf-valid');
+ },
+
+ validateField = function (field) {
+ validators.length = 0;
+
+ field.getAttribute('data-validators').split(' ').forEach(function (validator) {
+ validators.push(validatorObject[validator]);
+ });
+
+ var prom = Q.defer();
+
+ isFieldValidatorValid(field).then(function(results) {
+ var invalidField = results.find(function(elem) {
+ elem.isValid ? hideError(getParents(field, '.validation-field')) : showError(getParents(field, '.validation-field'), elem.errorMessage);
+
+ return !elem.isValid;
+ });
+
+ prom.resolve(invalidField ? invalidField.isValid : true);
+ });
+
+ return prom.promise;
+ },
+
+ checkForm = function () {
+ var activeFieldset = document.querySelector('#multi-form fieldset.active'),
+ isFormValidResult = Q.defer();
+
+ if (activeFieldset) {
+ var validatableFields = [].slice.call(activeFieldset.querySelectorAll('li.opened .validation-field [data-validators], div.opened .validation-field [data-validators]'));
+
+ Q.all(validatableFields.map(function(validatableField) {
+ return validateField(validatableField);
+ })).done(function(result) {
+ var isOneFieldInvalid = result.find(function(elem) {
+ return !elem;
+ });
+
+ var errorFields = document.querySelectorAll('#multi-form fieldset.active .validation-field.mf-error [data-validators], .opened .validation-field.mf-error [data-validators]');
+
+ if (errorFields.length > 0) {
+ errorFields[0].focus();
+ }
+
+ isFormValidResult.resolve(isOneFieldInvalid === undefined ? true : isOneFieldInvalid);
+ });
+
+ return isFormValidResult.promise;
+ }
+ },
+
+ setValidationClass = function(selector, isValid) {
+ var field = getParents(document.querySelector(selector), '.validation-field');
+
+ if (isValid) {
+ removeClass(field, 'mf-error');
+ addClass(field, 'mf-valid');
+ } else {
+ removeClass(field, 'mf-valid');
+ addClass(field, 'mf-error', 'setVal');
+ }
+ },
+
+ addClass = function(elem, className, t) {
+ if (elem.className.indexOf(className) === -1) {
+ elem.className += ' ' + className;
+ }
+ },
+
+ removeClass = function(elem, className) {
+ var classes = elem.className.replace(' ' + className, '');
+ elem.className = classes;
+ },
+
+ getParents = function(el, findingElem) {
+ var parents = [],
+ p = el.parentNode;
+
+ if (findingElem) {
+ var findingElements = [].slice.call(document.querySelectorAll(findingElem));
+
+ var isParentOfChild = findingElements.some(function(elem) {
+ return p === elem;
+ });
+
+ if (isParentOfChild) {
+ return p;
+ }
+
+ while (p !== findingElem) {
+ var o = p;
+ p = o.parentNode;
+ }
+
+ return p;
+ } else {
+ while (p !== document) {
+ var o = p;
+
+ parents.push(o);
+ p = o.parentNode;
+ }
+
+ return parents;
+ }
+ };
+
+ [].slice.call(document.querySelectorAll('.validation-field [data-validators]')).forEach(function(validationField) {
+ validationField.addEventListener('focus', function () {
+ addClass(getParents(this, '.validation-field'), 'focused');
+ }, true);
+ });
+
+ [].slice.call(document.querySelectorAll('.validation-field [data-validators]')).forEach(function(validationField) {
+ validationField.addEventListener('blur', function () {
+ removeClass(getParents(this, '.validation-field'), 'focused');
+
+ if (this.getAttribute('type') === 'number' && typeof this.value === 'string') {
+ this.value = (this.value.replace(/[^0-9]+/g, ''));
+ }
+
+ validateField(this);
+ }, true);
+ });
+
+ [].slice.call(document.querySelectorAll('.validation-field [data-validators]')).forEach(function(validationField) {
+ validationField.addEventListener('keyup', function () {
+ validateField(this);
+ }, true);
+ });
+
+ window.checkForm = checkForm;
+ window.validation = validateField;
+ window.setValidationClass = setValidationClass;
+ window.removeClass = removeClass;
+ window.addClass = addClass;
+}());
\ No newline at end of file
diff --git a/scripts/components/contactForm/multiForm.css b/scripts/components/contactForm/multiForm.css
new file mode 100644
index 0000000000..7945aa4ed6
--- /dev/null
+++ b/scripts/components/contactForm/multiForm.css
@@ -0,0 +1,2 @@
+#multi-form{width:100%;margin:0 auto}#multi-form *{outline:0}#multi-form ul{list-style:none}#multi-form ul li{list-style:none}#multi-form form{margin:0 auto;text-align:center}#multi-form form fieldset{box-sizing:border-box;width:100%;vertical-align:top;border:0;margin:0;padding:0}#multi-form form fieldset.mf-valid .fs-title:after{font-family:"pulsweb";content:"\f00c";color:green;margin-left:.5em;font-size:100%}#multi-form form textarea,#multi-form form input[type="text"]{border:0;border-bottom:1px solid #999;border-radius:2px;padding:.75em .5em;width:100%;box-sizing:border-box;font-size:15px}#multi-form form .action-button-wrapper .standalone{width:100%}#multi-form form .action-button-wrapper .standalone a{display:block;width:50%;margin:0 auto;padding:.5em}#multi-form form .action-button-wrapper div{display:inline-block;margin-top:.5em}#multi-form form .action-button-wrapper div:first-child{padding-right:.5em}#multi-form form .action-button-wrapper div:last-child{padding-left:.5em}#multi-form form label{color:white;margin-bottom:0}#multi-form form .submit{border:1px solid gray;border-radius:2px;width:auto;height:auto}.validation-field{position:relative;width:100%;margin-bottom:2em}.validation-field label{position:absolute;top:.5em;left:8px;color:#aaa !important;padding:0 5px;font-weight:100;transition:top 300ms ease-out, ackground-color 300ms ease-out, transform 300ms ease-out, left 300ms ease-out}.validation-field.focused label,.validation-field.mf-valid label{top:-.8em;left:0;transform:scale3d(0.85, 0.85, 1)}.validation-field.focused label,.validation-field.mf-valid label{background-color:#fff}.validation-field .validation-hint{position:absolute;right:.6em;top:.5em}.validation-field.mf-valid .validation-hint:after{font-family:"pulsweb";content:"\f00c";color:green;font-size:90%}.validation-field.mf-error textarea,.validation-field.mf-error iframe,.validation-field.mf-error [type="text"],.validation-field.mf-error [type="password"],.validation-field.mf-error [type="number"]{border-bottom:1px solid orange !important}.validation-field.mf-error .validation-hint:after{font-family:"Glyphicons Halflings";content:'!';color:orange}.validation-field .error-message{opacity:0;width:auto;padding:.5em;border-radius:1px;position:absolute;top:-3em;right:0;font-size:90%;white-space:nowrap;pointer-events:none}.validation-field.mf-error.focused .error-message{opacity:1;color:white;background:orange;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.validation-field.mf-error.focused .error-message:after{content:'';position:absolute;bottom:-.3em;right:1em;border-top:5px solid orange !important;border-left:10px solid transparent;border-right:10px solid transparent}#post .validation-field:first-child{padding-right:.5em}#post .validation-field:last-child{padding-left:.5em}#post .validation-field:first-child.mf-error .validation-hint,#post .validation-field:first-child.mf-valid .validation-hint{right:1.1em}.hidden-fields{display:none}.hidden-fields div,.hidden-fields label{display:none}#captcha{transform:scale(0.7);width:80px}#captcha>div>div{width:100% !important}@media (min-width: 450px){#captcha{transform:none;width:100%}}
+/*# sourceMappingURL=multiForm.css.map */
diff --git a/scripts/components/contactForm/multiForm.css.map b/scripts/components/contactForm/multiForm.css.map
new file mode 100644
index 0000000000..54b886078d
--- /dev/null
+++ b/scripts/components/contactForm/multiForm.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["multiForm.scss"],
+"names": [],
+"file": "multiForm.css"
+}
diff --git a/scripts/components/contactForm/multiForm.scss b/scripts/components/contactForm/multiForm.scss
new file mode 100644
index 0000000000..28e9e342a0
--- /dev/null
+++ b/scripts/components/contactForm/multiForm.scss
@@ -0,0 +1,226 @@
+/*
+ Created on : 02.03.2015, 22:25:12
+ Author : Chris
+*/
+
+#multi-form {
+ width: 100%;
+ margin: 0 auto;
+
+ * {
+ outline: 0;
+ }
+
+ ul {
+ list-style: none;
+ }
+
+ ul li {
+ list-style: none;
+ }
+
+ form {
+ margin: 0 auto;
+ text-align: center;
+
+ fieldset {
+ box-sizing: border-box;
+ width: 100%;
+ vertical-align: top;
+ border: 0;
+ margin: 0;
+ padding: 0;
+
+ &.mf-valid {
+ .fs-title {
+ &:after {
+ font-family: "pulsweb";
+ content: "\f00c";
+ color: green;
+ margin-left: .5em;
+ font-size: 100%;
+ }
+ }
+ }
+ }
+
+ textarea, input[type="text"] {
+ border: 0;
+ border-bottom: 1px solid #999;
+ border-radius: 2px;
+ padding: .75em .5em;
+ width: 100%;
+ box-sizing: border-box;
+ font-size: 15px;
+ }
+
+ .action-button-wrapper .standalone {
+ width: 100%;
+
+ a {
+ display: block;
+ width: 50%;
+ margin: 0 auto;
+ padding: .5em;
+ }
+ }
+
+ .action-button-wrapper div {
+ display: inline-block;
+ margin-top: .5em;
+
+ &:first-child {
+ padding-right: .5em;
+ }
+
+ &:last-child {
+ padding-left: .5em;
+ }
+ }
+
+ label {
+ color: white;
+ margin-bottom: 0;
+ }
+
+ .submit {
+ border: 1px solid gray;
+ border-radius: 2px;
+ /*padding: .5em .7em;*/
+ width: auto;
+ height: auto;
+ }
+ }
+}
+
+/* Style for validation. */
+@mixin errorStyle() {
+ border-bottom: 1px solid orange !important;
+}
+
+.validation-field {
+ position: relative;
+ width: 100%;
+ margin-bottom: 2em;
+
+ label {
+ position: absolute;
+ top: .5em;
+ left: 8px;
+ color: #aaa !important;
+ padding: 0 5px;
+ font-weight: 100;
+
+ transition: top 300ms ease-out, ackground-color 300ms ease-out, transform 300ms ease-out, left 300ms ease-out;
+ }
+
+ &.focused, &.mf-valid {
+ label {
+ top: -.8em;
+ left: 0;
+ transform: scale3d(.85, .85, 1);
+ }
+ }
+
+ &.focused, &.mf-valid {
+ label {
+ background-color: #fff;
+ }
+ }
+
+ .validation-hint {
+ position: absolute;
+ right: .6em;
+ top: .5em;
+ }
+
+ &.mf-valid .validation-hint:after {
+ font-family: "pulsweb";
+ content: "\f00c";
+ color: green;
+ font-size: 90%;
+ }
+
+ &.mf-error {
+ textarea, iframe, [type="text"], [type="password"], [type="number"] {
+ @include errorStyle();
+ }
+
+ .validation-hint:after {
+ font-family: "Glyphicons Halflings";
+ content: '!';
+ color: orange;
+ }
+ }
+
+ .error-message {
+ opacity: 0;
+ width: auto;
+ padding: .5em;
+ border-radius: 1px;
+ position: absolute;
+ top: -3em;
+ right: 0;
+ font-size: 90%;
+ white-space: nowrap;
+ pointer-events: none;
+ }
+
+ &.mf-error.focused .error-message {
+ opacity: 1;
+ color: white;
+ background: orange;
+
+ -webkit-transition: all .3s;
+ -moz-transition: all .3s;
+ transition: all .3s;
+
+ &:after {
+ content: '';
+ position: absolute;
+ bottom: -.3em;
+ right: 1em;
+ border-top: 5px solid orange !important;
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+ }
+ }
+}
+
+#post .validation-field {
+ &:first-child {
+ padding-right: .5em;
+ }
+ &:last-child {
+ padding-left: .5em;
+ }
+ &:first-child {
+ &.mf-error .validation-hint, &.mf-valid .validation-hint {
+ right: 1.1em;
+ }
+ }
+}
+
+.hidden-fields {
+ display: none;
+
+ div, label {
+ display: none;
+ }
+}
+
+#captcha {
+ > div {
+ > div {
+ width: 100% !important;
+ }
+ }
+
+ transform: scale(.7);
+ width: 80px;
+
+ @media (min-width: 450px) {
+ transform: none;
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/scripts/onepager.js b/scripts/onepager.js
new file mode 100644
index 0000000000..3d892970ad
--- /dev/null
+++ b/scripts/onepager.js
@@ -0,0 +1,155 @@
+(function () {
+ 'use strict';
+
+ var burgerMenu = document.querySelector('#burger-menu'),
+ links = [].slice.call(document.querySelectorAll('.nav-link')),
+
+ body = document.querySelector('body'),
+
+ addClass = function (elem, className) {
+ if (elem.className.indexOf(className) === -1) {
+ elem.className += ' ' + className;
+ }
+ },
+
+ removeClass = function (elem, className) {
+ var classes = elem.className.replace(' ' + className, '');
+ elem.className = classes;
+ },
+
+ toggle = function (elem, expr, className) {
+ if (expr) {
+ addClass(elem, className);
+ } else {
+ removeClass(elem, className);
+ }
+ },
+
+ setPushStateUrl = function (target) {
+ window.history.pushState(null, target.text, target);
+ };
+
+ if (!window.location.hostname === 'localhost') {
+ var path = window.location.pathname.replace('/', '');
+
+ if (path) {
+ window.scrollTo(0, document.querySelector('#' + path).offsetTop);
+ }
+ }
+
+ [].slice.call(document.querySelectorAll('.ripple-btn')).forEach(function (btn) {
+ btn.addEventListener('mousedown', function (event) {
+ var ripple = this.querySelector('.ripple');
+
+ addClass(ripple, 'visible');
+ ripple.style.transform = 'translate(-50%, -50%) translate(' + event.layerX + 'px, ' + event.layerY + 'px) scale(0.0001, 0.0001)';
+
+ setTimeout(function () {
+ ripple.style.transform = ripple.style.transform.replace(' scale(0.0001, 0.0001)', '');
+ }, 200);
+ }, true);
+
+ btn.addEventListener('mouseup', function () {
+ var ripple = this.querySelector('.ripple');
+
+ removeClass(ripple, 'visible');
+ }, true);
+ });
+
+ links.forEach(function (link) {
+ link.addEventListener('click', function (e) {
+ var targetSection = document.querySelector('#' + this.getAttribute('href')),
+ endPos = targetSection.offsetTop,
+ startPos = window.scrollY;
+
+ e.preventDefault();
+
+ window.removeEventListener('scroll', onScrollMethod);
+
+ setPushStateUrl(this);
+
+ if (startPos <= endPos) {
+ animForward(startPos, endPos);
+ } else {
+ animBackward(startPos, endPos);
+ }
+
+ window.addEventListener('scroll', onScrollMethod);
+ }, true);
+ });
+
+ document.querySelector('div.search').addEventListener('click', function() {
+ var searchField = document.querySelector('.search-field');
+
+ toggle(searchField, searchField.className.indexOf('active') === -1 , 'active');
+ });
+
+ var animForward = function (startPos, endPos) {
+ var incrementer = .1,
+ step = function () {
+ var diffEndStart = (endPos - startPos);
+
+ incrementer += 1.25;
+
+ if (diffEndStart < 40) {
+ startPos += diffEndStart;
+ } else {
+ startPos += (1 * incrementer);
+ }
+
+ window.scrollTo(0, startPos);
+
+ if (startPos < endPos) {
+ window.requestAnimationFrame(step);
+ }
+ };
+
+ window.requestAnimationFrame(step);
+ };
+
+ var animBackward = function (startPos, endPos) {
+ var incrementer = .1,
+ step = function () {
+ var diffEndStart = (startPos - endPos);
+
+ incrementer += 1.25;
+
+ if (diffEndStart < 40) {
+ startPos -= diffEndStart;
+ } else {
+ startPos -= (1 * incrementer);
+ }
+
+ window.scrollTo(0, startPos);
+
+ if (startPos > endPos) {
+ window.requestAnimationFrame(step);
+ }
+ };
+
+ window.requestAnimationFrame(step);
+ };
+
+ document.querySelector('.back-to-top').addEventListener('click', function () {
+ window.history.replaceState(null, null, '/');
+
+ animBackward(window.scrollY, 0);
+ }, true);
+
+ burgerMenu.addEventListener('click', function () {
+ if (body.className.indexOf('active') === -1) {
+ addClass(body, 'active');
+ } else {
+ removeClass(body, 'active');
+
+ body.removeEventListener('click', this);
+ }
+ }, true);
+
+ var onScrollMethod = function () {
+ toggle(document.querySelector('header'), document.body.scrollTop >= 100, 'active');
+ toggle(document.querySelector('body'), document.body.scrollTop >= 280, 'scrolled');
+ };
+
+ window.addEventListener('scroll', onScrollMethod);
+}());
diff --git a/styles/onepager.scss b/styles/onepager.scss
new file mode 100644
index 0000000000..9faaac9ec1
--- /dev/null
+++ b/styles/onepager.scss
@@ -0,0 +1,991 @@
+/*
+ Created on : 05.08.2016, 17:11:56
+ Author : Chris
+*/
+
+$default-color: #fff;
+$primary-color: #4181c1;
+$secondary-color: #ebebeb;
+$alternative-color: #272727;
+
+$symbolic-color-php: #6c7eb7; // PHP
+$symbolic-color-html5: #e44d26; // HTML5
+$symbolic-color-css3: #016fba; // CSS3
+$symbolic-color-less: #2b4e85; // LESS
+$symbolic-color-sass: #cf649a; // SASS
+$symbolic-color-markdown: #000; // MarkDown
+$symbolic-color-ftl: #444; // FTL
+$symbolic-color-json: #1984a4; // JSON
+$symbolic-color-jsx: #333; // JSX
+$symbolic-color-ini: #ff6600; // Ini
+$symbolic-color-js: #d6ba33; // JS
+$symbolic-color-java: #e00024; // JAVA
+$symbolic-color-sql: #444; // SQL
+$symbolic-color-cpp: #348ab9; // CPP
+$symbolic-color-xml: #666; // XML
+$symbolic-color-jade: #47c17b; // JADE
+$symbolic-color-twig: #899914; // Twig
+$symbolic-color-groovy: #6398aa; // Groovy
+$symbolic-color-yaml: #888; // Yaml
+
+$symbolic-color-fb: #3b5998; // fb
+$symbolic-color-twitter: #1da1f2; // twitter
+$symbolic-color-plus: #db4437; // plus
+$symbolic-color-slack: #766fba; // slack
+$symbolic-color-youtube: #e62117; // youtube
+
+
+// Sizes
+$small: 768px;
+$medium: 1024px;
+$large: 1260px;
+
+$headerHeight: 50px;
+
+@mixin margin-bottom-reset() {
+ margin: 0;
+ padding: 0;
+}
+
+@mixin fullWidth() {
+ width: 100%;
+ margin: 0 auto;
+ box-sizing: border-box;
+}
+
+@mixin box-shadow($rotated: 1) {
+ box-shadow: 0 3px * $rotated 4px 0 rgba(0, 0, 0, .12), 0 1px * $rotated 2px 0 rgba(0, 0, 0, .24);
+}
+
+@mixin box-shadow-active($rotated: 1) {
+ box-shadow: 0 6px * $rotated 7px 0 rgba(0, 0, 0, .2), 0 1px 10px * $rotated 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
+}
+
+@mixin text-shadow($rotated: 1) {
+ text-shadow: 0 3px 4px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+}
+
+@mixin inner-fullwidth() {
+ @include fullWidth();
+ padding: 35px 15px;
+ max-width: 1200px;
+}
+
+@font-face {
+ font-family: 'PulsIcons';
+ src: url('../fonts/puls.ttf') format('truetype'),
+ url('../fonts/puls.woff') format('woff'),
+ url('../fonts/puls.svg') format('svg');
+}
+
+@keyframes show-hide-ripple {
+ from {
+ transform: scale(0);
+ opacity: .5;
+ }
+ to {
+ transform: scale(30);
+ opacity: 0;
+ }
+}
+
+body {
+ @include margin-bottom-reset();
+
+ font-family: 'Open Sans', sans-serif;
+ line-height: 24px;
+ size: 16px;
+ color: #333;
+ font-weight: 300;
+ width: 100%;
+
+ ul, ol, li, h1, h2, h3, p, div, img {
+ @include margin-bottom-reset();
+ }
+
+ h1, h2, h3 {
+ margin-bottom: 10px;
+ }
+
+ a {
+ color: $alternative-color;
+ text-decoration: none;
+
+ &.external {
+ text-decoration: underline;
+ font-weight: bold;
+ }
+
+ &.no-deco {
+ color: white;
+ }
+ }
+
+ .alternative-color {
+ a:not(.next-section) {
+ color: lighten($primary-color, 15%);
+ }
+ }
+
+ .with-icon {
+ &:after {
+ font-family: 'PulsIcons';
+ }
+ }
+
+ img {
+ max-width: 100%;
+ width: 100%;
+ display: block;
+ }
+
+ ul {
+ list-style: none;
+ margin-left: 0;
+ }
+
+ header, footer {
+ @include margin-bottom-reset();
+ @include fullWidth();
+ }
+
+ header {
+ position: fixed;
+ height: $headerHeight;
+ color: $secondary-color;
+ background-color: transparent;
+ transition: background-color 500ms ease;
+ z-index: 1;
+ user-select: none;
+ -webkit-user-select: none;
+
+ .inner {
+ padding-top: 0;
+ padding-bottom: 0;
+ height: 100%;
+
+ nav {
+ align-items: flex-start;
+ display: flex;
+ flex: 1;
+
+ #burger-menu {
+ min-width: 30px;
+ max-width: 30px;
+ height: 25px;
+ position: relative;
+ z-index: 1;
+ align-self: center;
+
+ > div {
+ border: 2px solid $alternative-color;
+ transition: all 300ms ease-out;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 10px;
+
+ &:first-child {
+ top: 0px;
+ }
+
+ &:last-child {
+ top: 20px;
+ }
+ }
+ }
+
+ ul {
+ background-color: rgba(0, 0, 0, .9);
+ display: block;
+ height: 10000%;
+ left: 0;
+ min-width: 150px;
+ padding-top: $headerHeight + 25;
+ width: 60%;
+ position: absolute;
+ transform: translate3d(-700px, 0, 0);
+ transition: transform 300ms ease-out;
+
+ li {
+ display: block;
+ margin-bottom: 5px;
+
+ .nav-link {
+ color: inherit;
+ display: block;
+ padding: 5px 20px;
+ transition: color 200ms ease-in;
+
+ &.active {
+ color: $primary-color;
+ }
+ }
+ }
+ }
+ }
+
+ #logo {
+ align-self: center;
+ color: $primary-color;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+
+ img {
+ width: 75px;
+ margin-right: -1em;
+ }
+
+ div {
+ align-content: center;
+ align-items: center;
+ }
+ }
+ }
+
+ .search {
+ color: $alternative-color;
+ align-self: center;
+ font-size: 125%;
+ margin: 0 .25em;
+
+ &:after {
+ content: '\f002';
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
+
+ .search-field {
+ @include inner-fullwidth();
+ @include box-shadow();
+
+ display: flex;
+ padding: 0;
+ height: 0;
+ overflow: hidden;
+ transition: height 200ms ease-out;
+ position: absolute;
+ right: 0;
+
+ input[type="text"] {
+ outline: 0;
+ padding: .25em;
+ font-size: 120%;
+ flex: 1 0 80%;
+ }
+
+ button {
+ margin: 0;
+ flex: 1 0 5%;
+ align-self: auto;
+ background-color: $alternative-color;
+ color: $secondary-color;
+ border: 0;
+ }
+
+ &.active {
+ height: 40px;
+ }
+
+ @media (min-width: 600px) {
+ max-width: 600px;
+ margin: 0;
+ }
+
+ @media (min-width: $small) {
+ right: 8em;
+ }
+ }
+
+ &.active {
+ background-color: lighten($alternative-color, 75%);
+ box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .12),
+ 0 1px 2px 0 rgba(0, 0, 0, .24);
+ }
+ }
+
+ main {
+ section {
+ position: relative;
+ padding-top: $headerHeight;
+ height: 100vh;
+
+ .next-section {
+ @include box-shadow(-1);
+
+ position: absolute;
+ bottom: .75em;
+ left: 50%;
+ margin-left: -25px;
+ line-height: 1;
+ color: $secondary-color;
+ font-size: 175%;
+ padding: .5em .7em;
+ line-height: 1;
+ border-radius: 50%;
+ background-color: rgba(0, 0, 0, .3);
+ border: 1px solid $secondary-color;
+ transform: rotate3d(1, 0, 0, 180deg);
+ text-shadow: 0 0 4px rgba(0, 0, 0, 1);
+ transition: text-shadow 500ms ease-out, box-shadow 250ms ease-out;
+
+ &:after {
+ font-family: 'PulsIcons';
+ content: '\f102';
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &:active {
+ text-shadow: 0 -1px 6px rgba(0, 0, 0, 1);
+ box-shadow: 0 -6px 7px 0 rgba(0, 0, 0, .2), 0 -1px 10px 0 rgba(0, 0, 0, .12), 0 -2px 4px -1px rgba(0, 0, 0, .2);
+ }
+ }
+
+ .languages, .technologies {
+ display: flex;
+ flex-direction: row;
+ max-width: 640px;
+ margin: 2em auto;
+ overflow-x: scroll;
+
+ > li {
+ display: flex;
+ }
+
+ @media(min-width: $small) {
+ flex-wrap: wrap;
+ justify-content: space-between;
+ overflow-x: hidden;
+ }
+ }
+
+ .languages {
+ align-content: center;
+
+ > li {
+ .php {
+ background-color: $symbolic-color-php;
+ }
+
+ .js {
+ background-color: $symbolic-color-js;
+ }
+
+ .java {
+ background-color: $symbolic-color-java;
+ }
+
+ .groovy {
+ background-color: $symbolic-color-groovy;
+ }
+
+ .html5 {
+ background-color: $symbolic-color-html5;
+ }
+
+ .css3 {
+ background-color: $symbolic-color-css3;
+ }
+
+ .less {
+ background-color: $symbolic-color-less;
+ }
+
+ .sass {
+ background-color: $symbolic-color-sass;
+ }
+
+ .ftl {
+ background-color: $symbolic-color-ftl;
+ }
+
+ .json {
+ background-color: $symbolic-color-json;
+ }
+
+ .jsx {
+ background-color: $symbolic-color-jsx;
+ }
+
+ .ini {
+ background-color: $symbolic-color-ini;
+ }
+
+ .markdown {
+ background-color: $symbolic-color-markdown;
+ }
+
+ .jade {
+ background-color: $symbolic-color-jade;
+ }
+
+ .twig {
+ background-color: $symbolic-color-twig;
+ }
+
+ .sql {
+ background-color: $symbolic-color-sql;
+ }
+
+ .yaml {
+ background-color: $symbolic-color-yaml;
+ }
+
+ .cpp {
+ background-color: $symbolic-color-cpp;
+ }
+
+ .xml {
+ background-color: $symbolic-color-xml;
+ }
+ }
+ }
+
+ .technologies {
+ max-width: 795px;
+
+ > li {
+ max-width: 85px;
+ text-align: center;
+ margin: .5em;
+ font-weight: bold;
+ font-size: 70%;
+ display: inline-table;
+
+ .name {
+ display: none;
+ }
+
+ @media(min-width: $small) {
+ .name {
+ display: block;
+ }
+ }
+ }
+ }
+
+ &:not(.banner) {
+ height: auto;
+
+ p {
+ text-align: center;
+ }
+
+ @media(min-width: $small) {
+ height: auto;
+ }
+ }
+
+ languages {
+ height: auto;
+
+ .inner {
+ height: 100%;
+ padding-bottom: 6em;
+ }
+ }
+
+ plugins {
+ .inner {
+ padding-bottom: 6em;
+ }
+ }
+ }
+ }
+
+ footer {
+ background: #fff;
+ box-sizing: border-box;
+
+ .back-to-top {
+ @include box-shadow();
+
+ position: fixed;
+ padding: .5em .7em;
+ line-height: 1;
+ bottom: .75em;
+ right: .75em;
+ background-color: $primary-color;
+ border-radius: 50%;
+ transition: box-shadow 250ms ease-out, opacity 250ms ease-out, visibility 250ms ease-out;
+ color: $secondary-color;
+ opacity: 0;
+ visibility: hidden;
+ font-size: 150%;
+
+ &:after {
+ content: '\f102';
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &:active {
+ @include box-shadow-active();
+ }
+ }
+
+ .social-links {
+ display: flex;
+
+ > li {
+ display: flex;
+
+ a {
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ color: white;
+ font-size: 130%;
+ margin: .25em;
+ transition: box-shadow 250ms ease-out, opacity 250ms ease-out, visibility 250ms ease-out;
+
+ &:active {
+ @include box-shadow-active();
+ }
+ }
+
+ .fb {
+ background-color: $symbolic-color-fb;
+
+ &:after {
+ content: '\f09a';
+ }
+ }
+ .twitter {
+ background-color: $symbolic-color-twitter;
+
+ &:after {
+ content: '\f099';
+ }
+ }
+ .plus {
+ background-color: $symbolic-color-plus;
+
+ &:after {
+ content: '\ea8b';
+ }
+ }
+ .slack {
+ background-color: $symbolic-color-slack;
+
+ &:after {
+ content: '\f198';
+ }
+ }
+ .youtube {
+ background-color: $symbolic-color-youtube;
+
+ &:after {
+ content: '\ea9d';
+ }
+ }
+ }
+ }
+ }
+
+ .circle {
+ @include box-shadow();
+ @include text-shadow();
+
+ border-radius: 50%;
+ font-weight: bold;
+ font-size: 100%;
+ background-color: black;
+ width: 75px;
+ height: 75px;
+ line-height: 75px;
+ margin: .5em;
+ text-align: center;
+ flex: 1 0 50%;
+
+ &.small {
+ font-size: 80%;
+ line-height: 3;
+ }
+
+ &.tech {
+ max-width: 100%;
+ max-height: 100%;
+ margin: 0;
+ background-color: transparent;
+ box-shadow: none;
+ }
+ }
+
+ .download-links {
+ margin-top: .5em;
+ font-weight: bold;
+ font-size: 90%;
+ display: flex;
+ justify-content: center;
+
+ a {
+ @include box-shadow();
+
+ padding: 1em;
+ white-space: nowrap;
+ color: white;
+ background-color: orangered;
+ cursor: pointer;
+ border-radius: 2px;
+ transition: box-shadow 250ms ease-out;
+ margin: 0;
+
+ &:active {
+ @include box-shadow-active();
+ }
+ }
+ }
+
+ &.scrolled {
+ footer {
+ .back-to-top {
+ visibility: visible;
+ opacity: 1;
+ }
+ }
+ }
+
+ &.active {
+ .clickable-background {
+ bottom: 0;
+ display: block;
+ left: 0;
+ opacity: .5;
+ position: absolute;
+ right: 0;
+ top: $headerHeight;
+ background-color: rgba(0, 0, 0, 1);
+ z-index: 1;
+ }
+
+ header {
+ nav {
+ #burger-menu {
+ > div {
+ border: 2px solid #ccc;
+
+ &:first-child {
+ transform: rotate3d(0, 0, 1, 45deg);
+ top: 10px;
+ }
+
+ &:nth-child(2n) {
+ opacity: 0;
+ }
+
+ &:last-child {
+ transform: rotate3d(0, 0, 1, -45deg);
+ top: 10px;
+ }
+ }
+ }
+
+ ul {
+ transform: translate3d(0, 0, 0);
+ }
+ }
+ }
+ }
+
+ .primary-color {
+ background-color: $primary-color;
+ color: #fff;
+ }
+
+ .secondary-color {
+ background-color: $secondary-color;
+ }
+
+ .default-color {
+ background-color: $default-color;
+ }
+
+ .alternative-color {
+ background-color: $alternative-color;
+ color: #ddd;
+ }
+
+ .ripple-btn {
+ }
+
+ .inner {
+ @include inner-fullwidth();
+ padding-bottom: 80px;
+
+ @media(min-width: $small) {
+ padding-bottom: 50px;
+ }
+ }
+
+ .flex-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ @media(min-width: $medium) {
+ flex-wrap: wrap;
+
+ > * {
+ flex: 1;
+ }
+ }
+ }
+
+ .flex-container-small {
+ display: flex;
+ justify-content: space-between;
+
+ > * {
+ }
+ }
+
+ .font-light {
+ color: lighten($alternative-color, 2%);
+ }
+
+ .left {
+ text-align: left;
+ }
+
+ .center {
+ text-align: center;
+ }
+
+ .right {
+ text-align: right;
+ }
+
+ .title-img {
+ width: 100%;
+ height: 107%;
+ position: absolute;
+ z-index: -2;
+ background-color: #eee;
+
+ .img-wrapper {
+ position: absolute;
+ left: 1em;
+ right: 1em;
+ bottom: 0;
+
+ img {
+ position: absolute;
+ bottom: -3em;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ box-sizing: border-box;
+ display: none;
+ box-shadow: 0px -2px 12px 3px lighten($alternative-color, 60%);
+
+ @media(min-device-width: 600px) and (max-device-width: 800px) {
+ @media (min-height: 400px) and (orientation: portrait) {
+ max-width: 768px;
+ display: block;
+ bottom: 20em;
+ }
+ }
+
+ @media(min-width: 650px) {
+ @media (min-height: 425px) {
+ max-width: 768px;
+ display: block;
+ }
+ }
+
+ @media(min-width: 810px) {
+ @media (min-height: 500px) {
+ max-width: 760px;
+ bottom: -3em;
+ }
+
+ @media (min-height: 700px) {
+ max-width: 850px;
+ }
+
+ @media (min-height: 850px) {
+ max-width: 1200px;
+ }
+ }
+ }
+ }
+ }
+
+ .banner {
+ text-align: center;
+ box-sizing: border-box;
+
+ .inner {
+ height: auto;
+ padding: 3vh 15px;
+ color: $alternative-color;
+ justify-content: flex-start;
+
+ &.flex-container-small {
+ flex-direction: column;
+ align-items: center;
+
+ .desc {
+ max-width: 500px;
+ margin-top: 2em;
+ }
+
+ .headline-with-downloads {
+ .download-links a {
+ &:last-child {
+ display: none;
+ }
+ }
+ }
+
+ /* Phone Landscape */
+ @media screen and (min-width: 500px)
+ and (min-height: 320px)
+ and (orientation: landscape) {
+ flex-direction: row-reverse;
+ align-items: flex-start;
+ justify-content: center;
+
+ .desc {
+ margin-right: 1em;
+ margin-top: 0;
+ }
+ }
+ }
+
+ .slogan {
+ color: inherit;
+ display: inline-block;
+ padding: 25px;
+ margin-bottom: 1em;
+ background: rgba(255, 255, 255, .7);
+
+ h1 {
+ font-weight: 800;
+ box-sizing: border-box;
+ color: $primary-color;
+ text-shadow: 1px 1px 2px lighten($primary-color, 25%);
+ white-space: nowrap;
+ }
+ }
+
+ p {
+ text-align: justify;
+
+ &:not(:last-child) {
+ margin-bottom: 1em;
+ }
+ }
+
+
+ @media(min-width: $small) {
+ padding: 10vh 15px;
+
+ &.flex-container-small {
+ flex-direction: row-reverse;
+ justify-content: center;
+ align-items: stretch;
+
+ .headline-with-downloads {
+ display: flex;
+ flex-direction: column;
+
+ .download-links a {
+ &:first-child {
+ margin-right: .5em;
+ }
+
+ &:last-child {
+ display: block;
+ }
+ }
+ }
+
+ .slogan {
+ max-width: 300px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .desc {
+ margin-right: 1em;
+ margin-top: 0;
+ }
+ }
+ }
+ }
+
+ /* Portrait Nexus 7 */
+ @media only screen
+ and (min-device-width: 600px)
+ and (max-device-width: 960px)
+ and (orientation: portrait)
+ and (-webkit-min-device-pixel-ratio: 1) {
+ height: 70vh;
+ }
+ }
+
+ @media(min-width: $medium) {
+ header {
+ .inner {
+ nav {
+ flex: 2;
+
+ #burger-menu {
+ display: none;
+ }
+
+ ul {
+ @include margin-bottom-reset();
+
+ display: flex;
+ background: none;
+ transform: translate3d(0, 0, 0);
+ height: auto;
+ position: static;
+ margin-top: 0;
+ width: auto;
+
+ li {
+ margin: 0 2.5em 0 0;
+ padding: 0;
+ cursor: pointer;
+ white-space: nowrap;
+ color: $alternative-color;
+
+ .nav-link {
+ padding: 1em 0;
+
+ &:hover {
+ color: $primary-color;
+ }
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ body {
+ .nav-link:hover {
+ color: #222;
+ border-bottom: 2px solid;
+ }
+ }
+ }
+}
\ No newline at end of file