Skip to content

Instantly share code, notes, and snippets.

@Robin-bob
Robin-bob / _slider.liquid
Last active July 8, 2016 14:09
Custom slider with video background.
<section class="slider-first-screen">
<div class="slider">
{% if settings.data.slide_1.image_1_1250x710 != "" or settings.data.slide_1.video_1 != "" %}
<div>
<div class="slider-first-screen__shadow--top"></div>
{% if settings.data.slide_1.video_1 != "" %}
<video class="slider-first-screen__video" loop autoplay>
<source src="{{settings.data.slide_1.video_1}}" type="video/mp4">
</video>
{% endif %}
@Robin-bob
Robin-bob / .html
Created July 6, 2016 16:57
fixed button if footer scroll to top page
<!-- to up button -->
<div class="to-up">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</div>
<!-- end to up button -->
@Robin-bob
Robin-bob / .css
Last active July 8, 2016 09:46
download chapters in program page
/* -------------------- DOWNLOAD BLOCK -------------------- */
.download-block {
padding: 10px 20px;
background-color: #363f4b;
margin-top: 20px;
color: #fff;
}
.download-block__title {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
text-transform: uppercase;
@Robin-bob
Robin-bob / .scss
Last active August 30, 2016 22:04
slick arrow default styles
.slick-arrow {
outline: none;
background: none;
border: none;
position: absolute;
top: 50%;
transform: translate(0, -50%);
cursor: pointer;
z-index: 2;
&:hover, &:focus {
@Robin-bob
Robin-bob / .html
Last active July 15, 2016 23:24
Stars rating in css only
<div class="rating">
<input type="radio" class="rating-input" id="rating-input-1-5" name="rating-input-1">
<label for="rating-input-1-5" class="rating-star"></label>
<input type="radio" class="rating-input" id="rating-input-1-4" name="rating-input-1">
<label for="rating-input-1-4" class="rating-star"></label>
<input type="radio" class="rating-input" id="rating-input-1-3" name="rating-input-1">
<label for="rating-input-1-3" class="rating-star"></label>
<input type="radio" class="rating-input" id="rating-input-1-2" name="rating-input-1">
<label for="rating-input-1-2" class="rating-star"></label>
<input type="radio" class="rating-input" id="rating-input-1-1" name="rating-input-1">
@Robin-bob
Robin-bob / .scss
Created July 15, 2016 23:15
placeholder style color
input {
&::-webkit-input-placeholder {
color: #c3c3c3;
}
&::-moz-placeholder {
color: #c3c3c3;
}
&:-moz-placeholder {
color: #c3c3c3;
}
@Robin-bob
Robin-bob / .html
Created July 16, 2016 23:52
plus-minus button with input
<div class="plus-minus-element">
<button class="dec plus-minus-element__button">-</button>
<input type="text" name="" value="2">
<button class="inc plus-minus-element__button">+</button>
</div>
@Robin-bob
Robin-bob / main.js
Created October 28, 2016 16:11
local storage check
if (localStorage.getItem('dontLoad') === null) {
console.log('visited in not in LocalStorage')
localStorage.setItem('dontLoad', 'visited');
} else {
console.log('visited is in LocalStorage')
}
@Robin-bob
Robin-bob / radio-button.scss
Last active November 18, 2016 00:43
radio-button custom
.questions-form__block-radio {
position: relative;
margin-bottom: 18px;
input {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
@Robin-bob
Robin-bob / main.css
Created December 29, 2016 10:19
fix full width video player (Uscreen)
/* fix safary full width player bug */
:-webkit-full-screen-ancestor:not(iframe) .page-header__nav.off-canvas__menu {
opacity: 0;
}
:-webkit-full-screen-ancestor:not(iframe) .content-wrapper {
max-width: none;
}