Skip to content

Instantly share code, notes, and snippets.

View landru247's full-sized avatar

Landru landru247

1 follower · 1 following
  • Earth
View GitHub Profile
@landru247
landru247 / grow.css
Last active July 10, 2017 15:24
grow transition
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
@landru247
landru247 / index.html
Created June 22, 2016 17:43
MAP - (Foundation) -- This google map code displays two locations and the map will switch location on hover
<div id="map-1" class="control-padding-lg topmargin-sm">
<div class="container-fullwidth clearfix">
<div class="fancy-title title-border title-center">
<h2>Two Locations</h2>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
@landru247
landru247 / Bootstrap_Boilerplate.html
Last active June 23, 2016 14:57
Bootstrap Boilerplate html doc
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- css -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
@landru247
landru247 / anchor.html
Created June 6, 2016 15:00
Named Anchor
<a href="#raptors">Read more about raptors!</a>
<a name="raptors"></a>
@landru247
landru247 / iframe.html
Last active June 2, 2016 16:55
Embed Iframe
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
@landru247
landru247 / media-queries.css
Last active May 2, 2017 22:41
Media Queries
@media (max-width: 767px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}
@media (min-width: 768px) {
@landru247
landru247 / grid.css
Created May 17, 2016 22:22
Grid Only - Bootstrap 3
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.row {
margin-left: -15px;
margin-right: -15px
}
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
@landru247
landru247 / center.css
Created May 16, 2016 22:47
Absolute Center
position: absolute;
left: 50%;
transform: translate(-50%, 0);
@landru247
landru247 / link.css
Created May 16, 2016 22:32
CSS File link
@landru247
landru247 / Flexbox-equal-hieght.css
Created February 5, 2015 18:42
CSS: Flexbox - Equal height cols
.equal, .equal > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 0 auto;
}