mirror/flexbox-patterns
1
0
Fork 0
mirror of https://github.com/cjcenizal/flexbox-patterns.git synced 2025-08-04 23:27:34 +02:00
Code Issues Releases Wiki Activity
Files
master
flexbox-patterns/dist/index.html
CJ Cenizal f856b14c88 Build dist.css.
2017-01-10 17:33:53 -08:00

299 lines
9.5 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<title>Flexbox Patterns Demo Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="styles.css" rel="stylesheet" type="text/css">
<style>
body {
padding: 40px;
font-family: "Lato", "Helvetica", sans-serif;
font-size: 14px;
line-height: 1.5;
}
.demo {
max-width: 500px;
margin-bottom: 40px;
}
</style>
</head>
<body>
<!-- Stepper input-->
<div class="demo"><div class="stepperInput">
<button class="button button--addOnLeft">-</button>
<input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
<button class="button button--addOnRight">+</button>
</div>
</div>
<!-- Tabs-->
<div class="demo"><div class="tabs">
<div class="tab is-tab-selected">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tab">Tab 4</div>
</div>
</div>
<!-- Site header-->
<div class="demo"><div class="siteHeader">
<!-- This section gets pushed to the left side-->
<div class="siteHeader__section">
<div class="siteHeader__item siteHeaderLogo">
<div class="fa fa-inbox"></div>
</div>
<div class="siteHeader__item siteHeaderButton is-site-header-item-selected">Inbox</div>
<div class="siteHeader__item siteHeaderButton">Sent</div>
<div class="siteHeader__item siteHeaderButton">Trash</div>
</div>
<!-- This section gets pushed to the right side-->
<div class="siteHeader__section">
<div class="siteHeader__item siteHeaderButton">Settings</div>
<div class="siteHeader__item siteHeaderButton">Log out</div>
</div>
</div>
</div>
<!-- Form footer-->
<div class="demo"><div class="formFooter">
<!-- This section gets pushed to the left side-->
<div class="formFooter__section">
<div class="formFooter__item formFooterFeedback">
<div class="fa fa-spinner formFooterSpinner"></div>&nbsp;Saving...
</div>
</div>
<!-- This section gets pushed to the right side-->
<div class="formFooter__section">
<div class="formFooter__item button button--clear">Reset</div>
<div class="formFooter__item button">Save</div>
</div>
</div>
</div>
<!-- Post-->
<div class="demo"><div class="post">
<div class="postUser">
<div class="postUser__portrait">
<span class="icon fa fa-user-circle-o"></span>
</div>
<div class="postUser__name">Sherlyn S.</div>
</div>
<div class="postBody">
<div class="postBody__content">
I built a tree house out of reclaimed cedar and gave it a coat of my home-made
organic coffee-based varnish. Tree housewarming party this weekend!
</div>
<div class="postBody__date">
December 4
</div>
</div>
</div>
</div>
<!-- Side bar-->
<div class="demo"><div class="sideBar">
<!-- This section gets pushed to the top-->
<div class="sideBar__section">
<div class="sideBar__item is-side-bar-item-selected">Inbox</div>
<div class="sideBar__item">Contacts</div>
<div class="sideBar__item">Account</div>
</div>
<!-- This section gets pushed to the bottom-->
<div class="sideBar__section">
<div class="sideBar__item">Change theme</div>
<div class="sideBar__item">Legal</div>
</div>
</div>
</div>
<!-- Centered prompt-->
<div class="demo"><div class="centeredPrompt">
<div class="centeredPrompt__item centeredPromptIcon">
<div class="icon fa fa-smile-o"></div>
</div>
<div class="centeredPrompt__item centeredPromptLabel">Welcome to the app!</div>
<div class="centeredPrompt__item centeredPromptDetails">Thanks for signing up. Let&rsquo;s take a look around.</div>
<div class="centeredPrompt__item button">Begin tour</div>
</div>
</div>
<!-- Centered icon-->
<div class="demo"><div class="centeredIcon">
<div class="icon fa fa-phone"></div>
</div>
</div>
<!-- Feature list-->
<div class="demo"><div class="featureListItem">
<div class="featureListItem__icon">
<div class="icon fa fa-calendar"></div>
</div>
<div class="featureListItem__description">The calendar feature makes scheduling a snap.</div>
</div>
<div class="featureListItem featureListItem--reverse">
<div class="featureListItem__icon">
<div class="icon fa fa-dashboard"></div>
</div>
<div class="featureListItem__description">Our dashboard gives you a bird&rsquo;s-eye-view-at-a-glance-on-the-go.</div>
</div>
<div class="featureListItem">
<div class="featureListItem__icon">
<div class="icon fa fa-envelope"></div>
</div>
<div class="featureListItem__description">You can get notified by email or SMS.</div>
</div>
</div>
<!-- Stream-->
<div class="demo"><div class="stream">
<div class="post">
<div class="postUser">
<div class="postUser__portrait">
<span class="icon fa fa-user-circle-o"></span>
</div>
<div class="postUser__name">CJ C.</div>
</div>
<div class="postBody">
<div class="postBody__content">
Going hiking with @karla in Yosemite!
</div>
<div class="postBody__date">
May 27
</div>
</div>
</div>
<div class="post">
<div class="postUser">
<div class="postUser__portrait">
<span class="icon fa fa-user-circle-o"></span>
</div>
<div class="postUser__name">Jatesh V.</div>
</div>
<div class="postBody">
<div class="postBody__content">
Flexboxpatterns.com is the most amazing flexbox resource I've ever used! It's changed my
life forever and now everybody tells me that *I'M* amazing, too! Use flexboxpatterns.com!
Love flexboxpatterns.com!
</div>
<div class="postBody__date">
May 28
</div>
</div>
</div>
<div class="post">
<div class="postUser">
<div class="postUser__portrait">
<span class="icon fa fa-user-circle-o"></span>
</div>
<div class="postUser__name">Damien S.</div>
</div>
<div class="postBody">
<div class="postBody__content">
Anybody else wondering when the Blade Runner and Westworld tie-in will be released? #crossover
#replicant
</div>
<div class="postBody__date">
June 1
</div>
</div>
</div>
<div class="post">
<div class="postUser">
<div class="postUser__portrait">
<span class="icon fa fa-user-circle-o"></span>
</div>
<div class="postUser__name">Ziggie G.</div>
</div>
<div class="postBody">
<div class="postBody__content">
I love eating pizza!!!!!!!
</div>
<div class="postBody__date">
June 5
</div>
</div>
</div>
</div>
</div>
<!-- Card-->
<div class="demo"><div class="card card--fixedWidth">
<div class="card__description">
<div class="icon fa fa-flask card__descriptionIcon"></div>
<div class="card__descriptionText">Science potion</div>
</div>
<div class="card__price">Costs $5</div>
</div>
</div>
<!-- Card group-->
<div class="demo"><div class="cardGroup">
<div class="card cardGroup__card">
<div class="card__description cardGroup__cardDescription">
<div class="icon fa fa-thumbs-o-up card__descriptionIcon"></div>
<div class="card__descriptionText">Trial</div>
</div>
<div class="card__price">Free!</div>
</div>
<div class="card cardGroup__card">
<div class="card__description cardGroup__cardDescription">
<div class="icon fa fa-trophy card__descriptionIcon"></div>
<div class="card__descriptionText">Basic tier<br/>(most popular)</div>
</div>
<div class="card__price">$10.00</div>
</div>
<div class="card cardGroup__card">
<div class="card__description cardGroup__cardDescription">
<div class="icon fa fa-bolt card__descriptionIcon"></div>
<div class="card__descriptionText">Advanced tier<br/>(only for enterprise-level professionals)</div>
</div>
<div class="card__price">$6,000.00</div>
</div>
</div>
</div>
<!-- Photo-->
<div class="demo"><div class="photo photo1 photo--large">
Sup, dog
</div>
</div>
<!-- Gallery-->
<div class="demo"><div class="gallery">
<div class="photo photo1 photo--large">1</div>
<div class="photo photo2 photo--large">2</div>
<div class="photo photo3 photo--large">3</div>
<div class="photo photo4 photo--large">4</div>
<div class="photo photo5 photo--large">5</div>
<div class="photo photo6 photo--large">6</div>
<div class="photo photo7 photo--large">7</div>
<div class="photo photo8 photo--large">8</div>
<div class="photo photo9 photo--large">9</div>
<div class="photo photo10 photo--large">10</div>
</div>
</div>
<!-- Mosaic-->
<div class="demo"><div class="mosaic">
<div class="photo photo1 photo--small">1</div>
<div class="photo photo2 photo--medium">2</div>
<div class="photo photo3 photo--large">3</div>
<div class="photo photo4 photo--small">4</div>
<div class="photo photo5 photo--large">5</div>
<div class="photo photo6 photo--small">6</div>
<div class="photo photo7 photo--large">7</div>
<div class="photo photo8 photo--medium">8</div>
<div class="photo photo9 photo--medium">9</div>
<div class="photo photo10 photo--small">10</div>
<div class="photo photo11 photo--large">11</div>
<div class="photo photo12 photo--medium">12</div>
<div class="photo photo13 photo--large">13</div>
<div class="photo photo14 photo--medium">14</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink