Created
September 5, 2017 06:16
-
-
Save iamrobert/39058bf68a0f06871cb22eadc9f23b1f to your computer and use it in GitHub Desktop.
Portfolio Blocks for iamrobert.com
This file contains hidden or 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
### FULL WIDTH GRID ### IMAGE RIGHT ### 3 images | |
<div class="grid-x"> | |
<div class="cell small-12 medium-4"> | |
<div class="grid-y min-100vh"> | |
<div class="cell small-6"> | |
Left Cell Top | |
</div> | |
<div class="cell small-6 vertical-center"> | |
Left Cell Bottom Vertically Centered | |
</div> | |
</div> | |
</div> | |
<div class="cell auto"> | |
Content | |
</div> | |
</div> | |
### FULL WIDTH GRID ### IMAGE LEFT ### 3 images | |
<div class="grid-x"> | |
<div class="cell auto"> | |
Content | |
</div> | |
<div class="cell small-12 medium-4"> | |
<div class="grid-y min-100vh"> | |
<div class="cell small-6"> | |
Left Cell Top | |
</div> | |
<div class="cell small-6 vertical-center"> | |
Left Cell Bottom Vertically Centered | |
</div> | |
</div> | |
</div> | |
</div> | |
### FULL WIDTH GRID ### IMAGE LEFT TEXT RIGHT BOTTOM | |
<div class="grid-x align-stretch"> | |
<div class="cell auto"><img alt="" class="w100" src="images/case.jpg"> | |
</div> | |
<div class="cell small-12 medium-4 align-self-bottom"> | |
ddd | |
</div> | |
</div> | |
### SPLIT GRID MAX HEIGHT = 100vh | |
<div class="grid-x max-100vh"> | |
<div class="cell small-12 medium-6"><img class="w100" src="images/banner-bars.jpg"> | |
</div> | |
<div class="cell small-12 medium-6"><img class="w100" src="images/banner-bars.jpg"> | |
</div> | |
</div> | |
### TEXT OVERLAY IMAGE | |
<div class="relative"> | |
<div class="grid-x max-100vh"> | |
<div class="cell"> | |
<img class="w100" src="images/banner-bars.jpg"> | |
<!--TEXT BOX--> | |
<div class="abs-text portfolio"> | |
<div class="text-table"> | |
<div class="text-bottom-left"> | |
<h1>TEXT</h1> | |
</div> | |
</div> | |
</div> | |
<!--/TEXT BOX--> | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment