Turnerabend Page

Repository: GitLab - turnerabend
Link: Turnerabend.ch

Install

Install project dependencies:

npm install
npm install gulp -g

Build the project with gulp:

npm run build

Or run the dev server:

npm run watch

Features

• Ready for GitLab pages deployment
• Static website contact form
• Advanced gulp worfklow
• Configurable theme
• Responsive images

Screenrecord

Todo

[ ] Update favicon from svg logo
[ ] Gulp cache responsive images
[ ] Uglify js and css
[x] Add screenshot and publish on Github
[x] Fix Google Analytics or use Piwik
[x] Fix image enlargement bug in gulp build
[x] Enable ticket frog
[x] Update pictures, sponsoring content (resize sponsor images)
[x] Google Analytics
[x] Update static Image Gallery with flexbox
[x] Create sponsoring section
[x] Increase size of navigation
[x] Add nav mobile shadow
[x] Add favicon
[x] Update form mail
[x] Decrease image size with gulp
[x] Sponsoring slider
[x] Update layout
[x] Update new font
[x] Optimize images with gulp
[x] Import css without path
[x] Find solution to send mail from contact form
[x] Increase line-height
[x] Add logo
[x] Make everything black
[x] Change font color for default to #ababab except for links, small, strong tags
[x] Center navigation
[x] Remove spacing variables
[x] Make background black
[x] Make inverse button
[x] Capital letters for navigation
[x] Make a display of all fonts
[x] Format ul list

Media query classes

// extra small devices
@media (max-width: 543px) {

}
// small devices
@media (min-width: 544px) and (max-width: 767px) {

}
// medium devices
@media (min-width: 768px) and (max-width: 991px) {

}
// large devices
@media (min-width: 992px) and (max-width: 1199px) {

}
// extra large devices
@media (min-width: 1200px) {

}

Source

Setup gulp
https://css-tricks.com/gulp-for-beginners/

Normalize CSS
http://nicolasgallagher.com/about-normalize-css/

Parallax scrollling
https://github.com/nk-o/jarallax

Smooth scrolling and jump links
https://github.com/cferdinandi/smooth-scroll

Inspiration
https://jsfiddle.net/oneeezy/rrfwogxm/

Inspiration for mobile navigation
https://www.panter.ch/

HTML5 semantics
http://www.sichtweise.co/blog/artikel/html5-wann-verwende-ich-article-oder-section

Color palette
https://coolors.co/05668d-028090-00a896-02c39a-f0f3bd

Lorem Ipsum placeholder
https://www.webpagefx.com/web-design/html-ipsum/

Triangle bullet list
https://codepen.io/leetech/pen/bIAah

Send mail from a static site
https://formspree.io/

Slider
https://flickity.metafizzy.co/