Created
November 28, 2017 22:33
-
-
Save clondon/e37ef1c3439af7deebd31f41412573fc to your computer and use it in GitHub Desktop.
Flex Layout
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
<html class="no-js" lang=""> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="x-ua-compatible" content="ie=edge"> | |
<title></title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="manifest" href="site.webmanifest"> | |
<link rel="apple-touch-icon" href="icon.png"> | |
<!-- Place favicon.ico in the root directory --> | |
<link rel="stylesheet" href="css/normalize.css"> | |
<link rel="stylesheet" href="css/main.css"> | |
</head> | |
<body> | |
<!--[if lte IE 9]> | |
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> | |
<![endif]--> | |
<!-- Add your site or application content here --> | |
<h1 layout="row center-center" class="header">Testing with flex-layout-attribute.min.css</h1> | |
<div layout="row center-center-justify"> | |
<div><h1>Header</h2> | |
Ut ea ut adipisicing in aliquip eiusmod esse duis dolor magna tempor dolor enim.Alcohol sign grenade j-pop neon assassin footage corrupted market bicycle savant claymore mine. Towards long-chain hydrocarbons woman sensory singularity construct sprawl meta-spook monofilament-ware artisanal. Sprawl soul-delay monofilament narrative tube dead pistol Chiba wristwatch warehouse pre-saturation point rifle concrete face forwards youtube order-flow.-ware otaku tube euro-pop office semiotics sprawl spook concrete order-flow math-cartel. Digital-space drone faded plastic Shibuya into RAF meta-savant knife. Singularity hacker gang beef noodles grenade 3D-printed human tattoo sunglasses A.I. market assassin vinyl. Refrigerator uplink rebar convenience store range-rover bomb urban free-market pen nodal point nano-futurity sub-orbital.-ware vinyl San Francisco order-flow otaku uplink math-render-farm cardboard spook man systemic. Monofilament shanty town tanto hacker marketing neon alcohol meta-face forwards dissident. </div> | |
<div><h1 class="cube1">Header 2</h1> | |
Ut ea ut adipisicing in aliquip eiusmod esse duis dolor magna tempor dolor enim.Alcohol sign grenade j-pop neon assassin footage corrupted market bicycle savant claymore mine. Towards long-chain hydrocarbons woman sensory singularity construct sprawl meta-spook monofilament-ware artisanal. Sprawl soul-delay monofilament narrative tube dead pistol Chiba wristwatch warehouse pre-saturation point rifle concrete face forwards youtube order-flow.-ware otaku tube euro-pop office semiotics sprawl spook concrete order-flow math-cartel. Digital-space drone faded plastic Shibuya into RAF meta-savant knife. Singularity hacker gang beef noodles grenade 3D-printed human tattoo sunglasses A.I. market assassin vinyl. Refrigerator uplink rebar convenience store range-rover bomb urban free-market pen nodal point nano-futurity sub-orbital.-ware vinyl San Francisco order-flow otaku uplink math-render-farm cardboard spook man systemic. Monofilament shanty town tanto hacker marketing neon alcohol meta-face forwards dissident. | |
</div> | |
<div><h1>Header 3</h1> | |
<p> | |
Ut ea ut adipisicing in aliquip eiusmod esse duis dolor magna tempor dolor enim.Alcohol sign grenade j-pop neon assassin footage corrupted market bicycle savant claymore mine. Towards long-chain hydrocarbons woman sensory singularity construct sprawl meta-spook monofilament-ware artisanal. Sprawl soul-delay monofilament narrative tube dead pistol Chiba wristwatch warehouse pre-saturation point rifle concrete face forwards youtube order-flow.-ware otaku tube euro-pop office semiotics sprawl spook concrete order-flow math-cartel. Digital-space drone faded plastic Shibuya into RAF meta-savant knife. Singularity hacker gang beef noodles grenade 3D-printed human tattoo sunglasses A.I. market assassin vinyl. Refrigerator uplink rebar convenience store range-rover bomb urban free-market pen nodal point nano-futurity sub-orbital.-ware vinyl San Francisco order-flow otaku uplink math-render-farm cardboard spook man systemic. Monofilament shanty town tanto hacker marketing neon alcohol meta-face forwards dissident. </p> | |
</div> | |
</div> | |
<script src="js/vendor/modernizr-3.5.0.min.js"> | |
</div> | |
</script> | |
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> | |
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script> | |
<script src="js/plugins.js"></script> | |
<script src="js/main.js"></script> | |
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. --> | |
<script> | |
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date; | |
ga('create','UA-XXXXX-Y','auto');ga('send','pageview') | |
</script> | |
<script src="https://www.google-analytics.com/analytics.js" async defer></script> | |
</body> | |
</html> |
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
@import url('https://fonts.googleapis.com/css?family=Montserrat') | |
$color_tundora_approx: rgba(68, 68, 68, 1) | |
$color_light_turquoise_approx: rgba(0, 216, 255, 0.1) | |
$black: rgba(0, 0, 0, 1) | |
$color_bright_turquoise_approx: rgba(0, 216, 255, 1) | |
$color_light_turquoise_approx: rgba(0, 216, 255, 0.1) | |
$color_celeste_approx: rgba(204, 204, 204, 1) | |
$color_suva_gray_approx: rgba(136, 136, 136, 1) | |
$white_100: rgba(255, 255, 255, 1) | |
//fonts | |
$font_0: Helvetica | |
$font_1: Arial | |
$font_2: sans-serif | |
body | |
font-family: 'Montserrat', sans-serif | |
padding: 10px | |
.header | |
h1 | |
font-size: 50px | |
background-color: red | |
.a1-style | |
background-color: lightblue | |
padding: 10px | |
.a2-style | |
background-color: lightgreen | |
padding: 10px | |
.sm-full-style | |
background-color: beige | |
background-size: 100% | |
.one | |
height: 200px | |
font-weight: 200px | |
border: 1px solid yellow | |
padding: 80px | |
.cube1 | |
background-image: url(https://static.pexels.com/photos/8263/pexels-photo.jpg) | |
background-size: cover | |
background-repeat: no-repeat | |
.tomato | |
background: yellow | |
background-image: url(https://static.pexels.com/photos/106344/pexels-photo-106344.jpeg) | |
background-size: cover | |
.top-block | |
background: #445577 | |
color: red | |
h2 | |
font-family: 'Lalezar', cursive font-size: 2em | |
color: #ffffee |
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
<link href="https://cdnjs.cloudflare.com/ajax/libs/flex-layout-attribute/1.0.3/css/flex-layout-attribute.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment