Skip to content

Instantly share code, notes, and snippets.

@alex-boom
alex-boom / amp-proportional-image.html
Last active February 4, 2019 18:28
amp-proportional-image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>amp proportional image</title>
<style>
.box-img {
max-width: 300px;
img {
@alex-boom
alex-boom / massonry-css.html
Created August 21, 2018 09:28
massonry-css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Massonry</title>
<style>
.block-portfolio {
column-count: 3;
column-gap: 0;
background: #131212;
@alex-boom
alex-boom / ie-bug-link
Created May 15, 2018 14:39
ie-bug-link
@alex-boom
alex-boom / accessibility.html
Last active May 2, 2018 13:43
accessibility
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.accessibility {
display: inline-block;
position:absolute;
left:-10000px;
@alex-boom
alex-boom / google-map.html
Last active May 2, 2018 12:17
google-map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>google map</title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6-Rn3HHXzDyy7N3wVjPmPsyY6Cq8tQ7s"></script>
</head>
<style>
.map-holder {
width: 100%;
.tooltip {
&.show {
opacity: 1;
}
>.tooltip-inner {
background-color: $white;
color: #ABABAB;
max-width: 561px;
@alex-boom
alex-boom / custom-checkbox-bootstrap.scss
Created April 26, 2018 11:56
custom-checkbox-bootstrap
.custom-checkbox {
.custom-control-input {
&:checked {
~ {
.custom-control-label {
&::before {
@alex-boom
alex-boom / slick-slider-shadow.html
Created April 13, 2018 13:51
slick-slider-shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slick-slider shadow</title>
</head>
<script>
$('.slider').slick({
autoplay: false,
dots: false,
.slides {
transition: all 100ms ease-in;
transform: scale(1);
&:hover {
transition: all 200ms ease-in;
transform: scale(1.1);
}
}
@alex-boom
alex-boom / label-instead-placeholder.html
Last active April 3, 2018 13:49
label-instead-placeholder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>label instead placeholder</title>
<style>
@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
form {
max-width: 450px;
margin: 0 auto;