Flipping content to a div (Transitions and 3D Transforms)
A Pen by Sayed Rafeeq on CodePen.
Andrew Grant andrew--grant
andrew--grant
/ search.svg
Created
January 4, 2017 04:47
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="app"></app> |
andrew--grant
/ center-absolute-div.html
Last active
October 22, 2016 00:45
How To Centre an Absolutely Positioned Element
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| #content { | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 100px; /* Needs a specific value to work */ | |
| } |
andrew--grant
/ index.html
Created
September 7, 2016 06:39
multiple items per slide in bootstrap carousel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <h1>Use Bootstrap's carousel to show multiple items per slide.</h1> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="carousel slide multi-item-carousel" id="theCarousel"> | |
| <div class="carousel-inner"> | |
| <div class="item active"> | |
| <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div> | |
| </div> | |
| <div class="item"> |
andrew--grant
/ default-bootstrap-breakpoints.css
Created
August 22, 2016 06:42
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*================================================== | |
| = Bootstrap 3 Media Queries = | |
| ==================================================*/ | |
| /*========== Mobile First Method ==========*/ | |
| /* Custom, iPhone Retina */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <h1>Hello World!</h1> | |
| <div class="row"> | |
| <div class="col-sm-6" style="background-color:lavender;"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor | |
| incididunt ut labore et dolore magna aliqua.</p> | |
| <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut | |
| aliquip ex ea commodo consequat.</p> | |
| </div> | |
| <div class="col-sm-6" style="background-color:lavenderblush;"> |
andrew--grant
/ reset.scss
Last active
August 29, 2015 14:26
— forked from HamptonMakes/reset.scss
Reset SCSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* http://meyerweb.com/eric/tools/css/reset/ | |
| v2.0 | 20110126 | |
| License: none (public domain) | |
| */ | |
| html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; |