LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



	
	Button Styles
	
	
	
	
	



	

Flatby UI: Something something, free ui kit.

Get from GitHub, Preview at codepen, designed & developed by Dennis Schipper.


Image

Flatby UI

The subtitle for the main text blurb


What the hell is this? Get out of town, I didn't know you did anything creative. Ah, let me read some. Yeah, but you're uh, you're so, you're so thin. Hey Biff, check out this guy's life preserver, dork thinks he's gonna drown. Doc, you gotta help me. you were the only one who knows how your time machine works.

Call To Action! Buy our stuff!

Recent Activity

Image

Dennis The Dude updated his user profile.

Image

Abe Kobo uploaded a new file new-design.png

Image

Abe Kobo uploaded a new file new-design.png

See all activity



Image

Item title

What the hell is this? Get out of town, I didn't know you did anything creative. Ah, let me read some.

£49.99 Get it now

Content slider

Lorel ipsum dolor sit amet lorel ipsum dolor.

Image
Loading (30%)

Simple Title

This is a simple subtitle

What the hell is this? Get out of town, I didn't know you did anything creative. Ah, let me read some. Yeah, but you're uh, you're so, you're so thin. Hey Biff, check out this guy's life preserver, dork thinks he's gonna drown. Doc, you gotta help me. you were the only one who knows how your time machine works.

Image

What the hell is this? Get out of town, I didn't know you did anything creative. Ah, let me read some. Yeah, but you're uh, you're so, you're so thin. Hey Biff, check out this guy's life preserver, dork thinks he's gonna drown. Doc, you gotta help me. you were the only one who knows how your time machine works.

Read more »

Add a comment

You are logged in as Dennis

Posted by Dennis, three days ago:

What the hell is this? Get out of town, I didn't know you did anything creative. Ah, let me read some. Yeah, but you're uh, you're so, you're so thin. Hey Biff, check out this guy's life preserver, dork thinks he's gonna drown.

Posted by Dennis, three days ago:

What the hell is this? Get out of town, I didn't know you did anything creative. Ah, let me read some. Yeah, but you're uh, you're so, you're so thin. Hey Biff, check out this guy's life preserver, dork thinks he's gonna drown.

Simple Title

This is a simple subtitle

Image

What the hell is this? Get out of town, I didn't know you did anything creative. Ah, let me read some. Yeah, but you're uh, you're so, you're so thin. Hey Biff, check out this guy's life preserver, dork thinks he's gonna drown. Doc, you gotta help me. you were the only one who knows how your time machine works.

Read more »

Simple Title

This is a simple subtitle

Image

What the hell is this? Get out of town, I didn't know you did anything creative. Ah, let me read some. Yeah, but you're uh, you're so, you're so thin. Hey Biff, check out this guy's life preserver, dork thinks he's gonna drown. Doc, you gotta help me. you were the only one who knows how your time machine works.

Read more »
CSS
html, body, div, span, applet, object, iframe,
h1,
.item-footer, 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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

body {
  font-family: "Open Sans", helvetica, arial, sans-serif;
  font-weight: 100;
  background: #edeae9;
  color: #707070;
  line-height: 1.75em;
}

h1, .item-footer, h2, h3 {
  margin-bottom: 12px;
}

h1, .item-footer {
  font-size: 2.2em;
  line-height: 1em;
}

h2 {
  font-size: 1.5em;
}

a {
  color: inherit;
}

p {
  margin-bottom: 12px;
}

strong {
  font-weight: 500;
  color: #fff;
}

.clear {
  clear: both;
  width: 1px;
  height: 1px;
}

.lefty {
  float: left;
}

img.lefty {
  margin-right: 12px;
}

.righty {
  float: right;
}

img.righty {
  margin-left: 12px;
}

section, article, .container {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 2em;
  background: #fff;
  border-radius: 4px;
  position: relative;
}
section article, article article, .container article {
  float: left;
  width: 50%;
}
section.blank, article.blank, .container.blank {
  padding: 0;
  background: none;
}
section.wide, article.wide, .container.wide {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
}
section.wide > div, article.wide > div, .container.wide > div {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
}
section.blurb, section.flatby, article.blurb, .container.blurb, section.container.flatby {
  text-align: center;
  background: #252525;
  background-image: linear-gradient(to bottom, #444444 0%, #242424 100%);
  background-image: -o-linear-gradient(top, #444444 0%, #242424 100%);
  background-image: -moz-linear-gradient(top, #444444 0%, #242424 100%);
  background-image: -webkit-linear-gradient(top, #444444 0%, #242424 100%);
  background-image: -ms-linear-gradient(top, #444444 0%, #242424 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #242424));
  color: #f0f0f0;
}
section.blurb > div, section.flatby > div, article.blurb > div, .container.blurb > div, section.container.flatby > div {
  padding: 3em 3em;
}
section.blurb h1, section.flatby h1, section.blurb .item-footer, section.flatby .item-footer, section.blurb h2, section.flatby h2, section.blurb p, section.flatby p, article.blurb h1, article.blurb .item-footer, article.blurb h2, article.blurb p, .container.blurb h1, section.container.flatby h1, .container.blurb .item-footer, section.container.flatby .item-footer, .container.blurb h2, section.container.flatby h2, .container.blurb p, section.container.flatby p {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
section.blurb h1, section.flatby h1, section.blurb .item-footer, section.flatby .item-footer, article.blurb h1, article.blurb .item-footer, .container.blurb h1, section.container.flatby h1, .container.blurb .item-footer, section.container.flatby .item-footer {
  font-weight: 100;
  font-size: 6em;
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
section.blurb h2, section.flatby h2, article.blurb h2, .container.blurb h2, section.container.flatby h2 {
  margin-bottom: 0.3em;
  font-size: 1.2em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #949494;
}
section.blurb p, section.flatby p, article.blurb p, .container.blurb p, section.container.flatby p {
  margin-bottom: 0;
  font-size: 1em;
  color: #949494;
}
section img, article img, .container img {
  max-width: 100%;
}

body > section, body > header, body > footer, .container {
  max-width: 1180px;
  margin: 0 auto;
  margin-bottom: 20px;
}

nav.navigation {
  background: #444;
  margin-top: 2em;
  border-radius: 4px;
}
nav.navigation > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.navigation > ul > li {
  display: inline;
  border: 0;
  padding: 0;
}
nav.navigation > ul > li.lefty {
  float: right;
}
nav.navigation > ul > li > a {
  color: #cecece;
  display: block;
  font-weight: 500;
  text-shadow: none;
  float: left;
  background: inherit;
  padding: 1em 1.5em;
  text-decoration: none;
}
nav.navigation > ul > li > a:hover {
  background: rgba(255, 255, 255, 0.2);
}
nav.navigation > ul > li > a.focus {
  background: rgba(255, 255, 255, 0.2);
  padding: 1em 1.8em;
}
nav.navigation > ul > li > a.navigation-home:hover {
  background: #00986a;
  color: #fff;
}
nav.navigation > ul > li > a.navigation-settings:hover {
  background: #00986a;
  color: #fff;
}
nav.navigation > ul > li > a.navigation-user:hover {
  background: #00986a;
  color: #fff;
}
nav.tabs {
  background: none;
}
nav.tabs ul li a {
  color: inherit;
  border: 1px solid transparent;
  border-bottom: 1px solid #cecece;
}
nav.tabs ul li a.active {
  border: 1px solid #cecece;
  border-bottom: 1px solid transparent;
  margin-right: -1px;
}
nav.tabs ul li a:hover {
  background: rgba(0, 0, 0, 0.1);
}
nav.breadcrumbs {
  padding-left: 1em;
  font-size: 0.85em;
  color: #838383;
}
nav.breadcrumbs ul li {
  display: inline;
}
nav.breadcrumbs ul li:last-child {
  font-weight: 500;
  color: #444;
}
nav.breadcrumbs ul li a {
  display: inline;
  float: none;
  text-decoration: none;
  color: inherit;
}
nav.breadcrumbs ul li a:hover {
  color: #444;
}
nav.breadcrumbs ul li i {
  position: relative;
  margin-left: 4px;
  margin-right: 4px;
}

ul.dropdown {
  display: inline-block;
  border-radius: 4px;
  background: #444;
  color: #fff;
  min-width: 350px;
}
ul.dropdown:before {
  content: ' ';
  display: block;
  background: none;
  width: 1px;
  height: 1px;
  position: absolute;
  left: 20px;
  top: -10px;
  border: 5px solid transparent;
  border-bottom: 5px solid #444;
}
ul.dropdown li a {
  display: block;
  padding: 0.75em 1em;
  border-bottom: 1px solid #595959;
  text-decoration: none;
  color: #cecece;
}
ul.dropdown li a:hover {
  background: rgba(0, 0, 0, 0.2);
}
ul.dropdown li:last-child a {
  border-bottom: 0;
}

.button, input[type="button"], button {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #444;
  padding: 1em 3em;
  margin: 0;
  text-decoration: none;
  color: #fff;
  border: 0px;
  font-size: 1em;
  font-family: "Open Sans", helvetica, arial, sans-serif;
  cursor: pointer;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  position: relative;
  display: inline-block;
  transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
.button:hover, input[type="button"]:hover, button:hover {
  background: #000;
}
.button.button-and-icon, input[type="button"].button-and-icon, button.button-and-icon {
  padding-left: 6.5em;
}
.button.button-and-icon div, input[type="button"].button-and-icon div, button.button-and-icon div {
  background: rgba(0, 0, 0, 0.2);
  display: inline-block;
  padding: 1em 1.4em;
  position: absolute;
  top: 0px;
  left: 0px;
}
.button.button-small, input[type="button"].button-small, button.button-small {
  padding: 0.5em 1.5em;
  font-size: 0.8em;
  font-weight: 500;
}
.button.button-submit, input[type="button"].button-submit, button.button-submit {
  background: #00986a;
}
.button.button-submit:hover, input[type="button"].button-submit:hover, button.button-submit:hover {
  background: #000;
}
.button.button-cancel, input[type="button"].button-cancel, button.button-cancel {
  background: #a1a1a1;
}
.button.button-cancel:hover, input[type="button"].button-cancel:hover, button.button-cancel:hover {
  background: #000;
}
.button.button-delete, input[type="button"].button-delete, button.button-delete {
  background: #d74518;
}
.button.button-delete:hover, input[type="button"].button-delete:hover, button.button-delete:hover {
  background: #000;
}
.button.button-adjacent, input[type="button"].button-adjacent, button.button-adjacent {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.button.button-cta, input[type="button"].button-cta, button.button-cta {
  display: inline-block;
  font-size: 1.3em;
  background: #444;
  margin-top: 1em;
  padding: 1em 4em;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.2em;
}
.button.button-cta:hover, input[type="button"].button-cta:hover, button.button-cta:hover {
  background: #000;
}
.button.button-buy, input[type="button"].button-buy, button.button-buy {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 1em;
}
.button.button-buy:hover, input[type="button"].button-buy:hover, button.button-buy:hover {
  background: #000;
}
.button .notification, input[type="button"] .notification, button .notification {
  position: absolute;
  right: 0px;
  top: 0px;
  font-size: 0.75em;
  line-height: 1em;
  background: #e27066;
  display: block;
  padding: 0.5em;
  color: #fff;
}

label {
  display: block;
  margin-bottom: 1em;
}
label h2 {
  font-size: 1em;
  margin: 0;
  margin-bottom: 0.2em;
}

form h1, form .item-footer {
  margin-left: 14px;
}
form label {
  margin-left: 14px;
}

input[type="text"], input[type="password"], textarea {
  background: #f6f6f6;
  border: 0;
  font-family: "Open Sans", helvetica, arial, sans-serif;
  padding: 1em 1.3em;
  margin: 0;
  margin-left: -14px;
  font-weight: 100;
  font-size: 1em;
}
input[type="text"].long, input[type="password"].long, textarea.long {
  width: 350px;
}
input[type="text"].button-adjacent, input[type="password"].button-adjacent, textarea.button-adjacent {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

textarea {
  width: 400px;
  height: 180px;
}
textarea.long {
  width: 600px;
}

hr {
  width: 100%;
  height: 1px;
  background: #8d8d8d;
  margin-top: 1em;
  margin-bottom: 1em;
  border: 0px;
  opacity: 0.2;
}

.item {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
  width: 33%;
  background: #fff;
}
.item .item-info {
  padding: 1em 2em;
  padding-bottom: 2em;
}
.item h1, .item .item-footer {
  font-size: 1.5em;
  font-weight: 500;
}
.item p {
  font-size: 0.9em;
  color: #7d7d7d;
}
.item img {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.item-featured {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
  background: #fff;
}
.item-featured .item-info {
  padding: 2em;
}
.item-featured .item-info .button-buy {
  width: auto;
  margin-left: -10px;
}
.item-featured img {
  width: 50%;
  float: left;
  margin-right: 2em;
  border-radius: 0px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.price {
  display: block;
  font-size: 1.4em;
  font-weight: 500;
}

.slider {
  text-align: center;
  position: relative;
  height: 450px;
  overflow: hidden;
}
.slider img {
  max-width: 100%;
  width: 100%;
  width: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 100;
}
.slider * {
  position: relative;
  z-index: 101;
}
.slider h1, .slider .item-footer {
  font-weight: 500;
  color: #fff;
  font-size: 4em;
  margin-top: 100px;
}
.slider h2 {
  color: #fff;
}
.slider .slider-controls {
  position: absolute;
  top: 45%;
  width: 100%;
  z-index: 101;
}
.slider .slider-controls a {
  text-decoration: none;
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #fff;
}
.slider .slider-controls a i {
  position: relative;
  top: 4px;
  opacity: 0.8;
}
.slider .slider-controls a.slider-control-left {
  left: 0px;
}
.slider .slider-controls a.slider-control-right {
  right: 0px;
}

.progress-bar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #cecece;
  color: #fff;
  font-weight: 500;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.progress-bar .progress-bar-30 {
  background: #6ea164;
  padding: 1em;
  width: 30%;
}
.progress-bar.progress-bar-small > div {
  padding: 0.2em 1em;
}

.item-header, .item-footer {
  color: #fff;
  font-weight: 500;
  display: block;
  text-align: center;
  background: #444;
  font-size: 1.3em;
  padding: 1em;
  letter-spacing: 2px;
  margin: 0;
  text-decoration: none;
}

.comments h1, .comments .item-footer, .comments h2 {
  margin-left: 14px;
}
.comments h1, .comments .item-footer {
  margin-bottom: 0.1em;
}
.comments h2 {
  font-size: 1em;
}
.comments form h2 {
  margin-left: 0px;
}
.comments form textarea {
  height: 80px;
}
.comments .comment {
  padding: 1.5em;
  border: 1px solid #e8e8e8;
  margin-bottom: 1em;
}
.comments .comment h3 {
  font-weight: 500;
  margin-bottom: 0;
}
.comments .comment p {
  font-size: 0.9em;
}

.item-footer {
  font-size: 1em;
}
.item-footer.green {
  background: #00986a;
}

.activity {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #444;
  width: 300px;
}
.activity .activity-list-update {
  padding: 6px;
  color: #e0e0e0;
  font-size: 0.9em;
  border-top: 1px solid #5a5a5a;
  line-height: 1.3em;
}
.activity .activity-list-update:hover {
  background: rgba(0, 0, 0, 0.1);
}
.activity p {
  position: relative;
  top: 1em;
}
.activity h2 {
  font-size: 1em;
  font-weight: 500;
  opacity: 0.5;
}
.activity img {
  float: left;
  margin: 10px;
}

section.flatby {
  border-radius: 0px;
  background: none;
  background-repeat: no-repeat;
  background-position: center 40px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABrCAYAAACBtCeBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkY1RTEyMEU1MENCNjExRTM5NkJEQTQxNTIxOEMzMkVFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkY1RTEyMEU2MENCNjExRTM5NkJEQTQxNTIxOEMzMkVFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjVFMTIwRTMwQ0I2MTFFMzk2QkRBNDE1MjE4QzMyRUUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RjVFMTIwRTQwQ0I2MTFFMzk2QkRBNDE1MjE4QzMyRUUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4+pJRhAAAGzklEQVR42uzdXUwc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);
}
section.flatby h1, section.flatby .item-footer {
  font-size: 1.3em;
  color: #727272;
  text-shadow: none;
  font-weight: 100;
  margin-top: 140px;
  text-transform: none;
  letter-spacing: 0px;
}
section.flatby h1 span, section.flatby .item-footer span {
  font-weight: 500;
}
section.flatby h2 {
  font-size: 0.9em;
  letter-spacing: 0px;
  font-weight: 500;
  font-weight: 100;
  text-shadow: none;
  text-transform: none;
}
section.flatby h2 a {
  font-weight: 500;
}
section.flatby hr {
  margin-top: 80px;
}

Description

Work in progress - flat design ui kit. Download at https://github.com/dennisschipper/Flatby
Term
Mon, 11/27/2017 - 21:30

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv