-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathmedia.html
1 lines (1 loc) · 7.28 KB
/
media.html
1
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css"><link href="http://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet" type="text/css"><link href="http://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet" type="text/css"><title>inuit kitchen sink | media demo</title><meta name="description" content="inuit kitchen sink lists you all modules of inuitcss and helps you getting started with the framework."><meta name="viewport" content="width=device-width,minimum-scale=1"><link rel="stylesheet" href="build/assets/css/style.css"><link rel="shortcut icon" href="src/assets/img/favicon.png" type="image/png"></head><body><header class="[ page-head ] [ pv- mb ]"><div class="[ page-wrap ] [ clearfix ]"><h6 class="[ float--left ] [ mb0 ]"><a class="site-logo" href="index.html">inuit kitchen sink</a></h6><a class="[ site-nav-trigger ] [ float--right ]" href="#site-nav"></a></div></header><div class="[ page-wrap ] [ mb+ ]"><div class="mb"><a class="zeta" href="objects.media.html">back to description.</a></div><hr><div class="[ demo ] [ mb ]"><h4 id="-media-"><code>.media</code></h4><div class="media"><img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img"><p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p></div><p><br></p><hr><h4 id="-media-tiny-"><code>.media--tiny</code></h4><div class="[ media media--tiny ]"><img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img"><p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p></div><p><br></p><hr><h4 id="-media-small-"><code>.media--small</code></h4><div class="[ media media--small ]"><img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img"><p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p></div><p><br></p><hr><h4 id="-media-large-"><code>.media--large</code></h4><div class="[ media media--large ]"><img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img"><p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p></div><p><br></p><hr><h4 id="-media-huge-"><code>.media--huge</code></h4><div class="[ media media--huge ]"><img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img"><p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p></div><p><br></p><hr><h4 id="-media-flush-"><code>.media--flush</code></h4><div class="[ media media--flush ]"><img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img"><p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p></div><p><br></p><hr><h4 id="-media-rev-"><code>.media--rev</code></h4><div class="[ media media--rev ]"><img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img"><p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p></div><p><br></p><hr><h4 id="-media-responsive-"><code>.media--responsive</code></h4><div class="[ media media--responsive ]"><img src="http://placehold.it/200x150/dddddd/4a8ec2" class="media__img"><p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ratione hic molestias suscipit aspernatur atque consequatur, commodi. Dolor necessitatibus voluptate quasi nihil assumenda, minus quo. Earum, accusantium tempora in fugiat, nisi ipsa iste tenetur eos!</p></div><p><br></p></div><hr><div class="mb"><a class="zeta" href="objects.media.html">back to description.</a></div></div><hr><div class="page-wrap"><nav role="navigation"><ul id="site-nav" class="[ site-nav ] [ list-bare ] [ portable-p- ]"><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">settings</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="settings.default.html">default</a></li><li><a href="settings.responsive.html">responsive</a></li></ul></li><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">tools</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="tools.functions.html">functions</a></li><li><a href="tools.mixins.html">mixins</a></li><li><a href="tools.responsive.html">responsive</a></li></ul></li><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">base</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="base.headings.html">headings</a></li><li><a href="base.paragraphs.html">paragraphs</a></li></ul></li><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">objects</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="objects.media.html">media</a></li><li><a href="objects.flag.html">flag</a></li><li><a href="objects.block.html">block</a></li><li><a href="objects.pack.html">pack</a></li><li><a href="objects.box.html">box</a></li><li><a href="objects.list-bare.html">list-bare</a></li><li><a href="objects.list-inline.html">list-inline</a></li><li><a href="objects.list-block.html">list-block</a></li><li><a href="objects.list-ui.html">list-ui</a></li><li><a href="objects.tabs.html">tabs</a></li><li><a href="objects.buttons.html">buttons</a></li><li><a href="objects.tables.html">tables</a></li><li><a href="objects.layout.html">layout</a></li></ul></li><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">trumps</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="trumps.headings.html">headings</a></li><li><a href="trumps.spacing.html">spacing</a></li><li><a href="trumps.spacing-responsive.html">spacing-responsive</a></li><li><a href="trumps.widths.html">widths</a></li><li><a href="trumps.widths-responsive.html">widths-responsive</a></li><li><a href="trumps.clearfix.html">clearfix</a></li></ul></li></ul></nav></div><footer class="[ page-foot ] [ pv+ ]"><ul class="[ list-inline ] [ page-wrap ]"><li><a href="https://github.com/csshugs/inuit-kitchen-sink">Contribute on GitHub</a></li></ul></footer></body></html>