LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Inbox

  • Sarach Connor Jul 15

    I've been hunted - A crazing robot ...

  • Jeremy Clarkson Jul 15

    The brand new season of Top Gear

  • Eureka.com Jul 14

    Interface design - Hi Greg ...

  • Jeremy Legrand Jul 13

    CSS Responsive - Here is my hack to ...

  • Noe Vella Jul 13

    Personal resume - Hi Greg, as expected ...

  • Dribbble Jul 12

    Thank you for purchaseing a pro account

  • Dribbble Jul 12

    Work inquiry from Andy Blast - the foll...

  • Behance Jul 12

    Raj sent you a direct message -

  • Behance Jul 12

    Raj sent you a direct message -

  • Dribbble Jul 11

    Peter Avey is now following you - Hi ...

The brand new season of Top Gear

Hi Greg,

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam modi possimus dignissimos maxime ipsa unde voluptatum consectetur harum debitis dolorum quas quibusdam vero iusto ducimus blanditiis. Enim autem illo praesentium est quis ab voluptate sequi quia magnam deleniti vero dicta iste. Harum velit asperiores expedita inventore error nulla eius nostrum voluptas aspernatur at quia eaque ipsa deserunt quas doloribus totam incidunt mollitia iure! Libero laudantium nobis necessitatibus veniam autem molestias distinctio voluptas quos aliquam vitae. Consequuntur adipisci natus hic sed rerum dolore cumque numquam illum rem at quaerat reprehenderit iste quis maiores fuga voluptates delectus suscipit dicta nulla itaque placeat.

Cheers

My file enclosed.pdf
65%
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
* {
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.clr {
  clear: both;
}

a {
  text-decoration: none;
}

.btn {
  border-radius: 4px;
  padding: 6px 10px;
  text-align: center;
  text-shadow: none;
  color: #fff;
  background: #fff;
}
.btn.btn-primary {
  background: #44c4e7;
}

.container {
  display: flex;
  width: 100%;
  height: 100%;
}

.sidebar {
  width: 250px;
  background: #34393d;
  order: 1;
  flex-flow: column;
  color: #fff;
}
.sidebar a {
  color: #fff;
}
.sidebar h1 {
  font-weight: 400;
  background: #19a0c5;
  line-height: 80px;
  margin: 0;
  padding: 0 30px;
}
.sidebar .main-nav {
  margin: 30px 0;
}
.sidebar .main-nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar .main-nav > ul > li {
  transition: background-color .3s ease;
}
.sidebar .main-nav > ul > li.active, .sidebar .main-nav > ul > li:hover {
  background: #40464b;
}
.sidebar .main-nav > ul > li > a {
  padding: 20px 30px;
  display: block;
  color: #999;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.sidebar .main-nav > ul > li > .btn {
  display: block;
  color: #fff;
  text-shadow: none;
  margin: 10px 30px;
  padding: 10px;
  font-weight: 400;
}
.sidebar .main-nav > ul > li > ul {
  list-style: none;
  margin: 0;
  padding: 10px 0;
}
.sidebar .main-nav > ul > li > ul.labels {
  border-top: 1px solid #555;
  margin-top: 20px;
}
.sidebar .main-nav > ul > li > ul > li {
  transition: background-color .3s ease;
  padding: 10px 30px;
}
.sidebar .main-nav > ul > li > ul > li.active, .sidebar .main-nav > ul > li > ul > li:hover {
  background: #4b5359;
}
.sidebar .main-nav > ul > li > ul > li .btn {
  font-size: .875rem;
  padding: 5px;
  float: right;
  position: relative;
  top: -4px;
}
.sidebar .main-nav > ul > li > ul > li .label {
  width: 20px;
  height: 20px;
  display: inline-block;
  top: 0;
}
.sidebar .main-nav > ul > li > ul > li a {
  color: #999;
}

.main {
  -webkit-flex: 1;
  order: 2;
  background: #f5f5f5;
}
.main .header {
  background: #44c4e7;
  min-height: 80px;
}
.main .header form {
  padding: 20px;
  display: inline-block;
}
.main .header form input[type="search"] {
  background: #19a0c5;
  border: none;
  border-radius: 3px;
  line-height: 40px;
  width: 500px;
  padding: 0 10px;
  outline: none;
}
.main .header form input[type="search"]::-webkit-input-placeholder {
  color: #fff;
}
.main .header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main .header .nav-settings {
  float: right;
  line-height: 80px;
  border-left: 1px solid #1cb3dc;
}
.main .header .nav-settings li {
  display: inline-block;
}
.main .header .nav-settings li:hover {
  background: #2dbde4;
}
.main .header .nav-settings li a {
  padding: 0 20px;
  color: #fff;
  display: inline-block;
}

.messages {
  order: 1;
  width: 400px;
  background: #fff;
  border-right: 1px solid #DDD;
}
.messages h1 {
  margin: 0;
  padding: 20px;
  font-weight: 400;
  color: #777;
  border-bottom: 1px solid #DDD;
}
.messages form {
  padding: 20px;
  background: #FCFCFC;
}
.messages form input[type="search"] {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 10px;
  box-sizing: border-box;
  outline: none;
}
.messages .message-list {
  padding: 0;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid #ddd;
}
.messages .message-list li {
  background: #F8F6F4;
  transition: background-color .3s ease;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 3px solid #1cb3dc;
  padding: 10px 20px;
  display: flex;
  cursor: pointer;
}
.messages .message-list li input[type="checkbox"] {
  appearance: none;
  cursor: pointer;
  margin: 5px 10px 0 0;
  order: 1;
  width: 15px;
  height: 15px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
}
.messages .message-list li input[type="checkbox"]:checked {
  background: #EFEFEF;
}
.messages .message-list li .preview {
  flex: 1;
  order: 2;
}
.messages .message-list li .preview h3 {
  margin: 0;
  font-weight: 400;
  color: #333;
}
.messages .message-list li .preview h3 small {
  float: right;
  color: #AAA;
  font-size: .8125rem;
}
.messages .message-list li .preview p {
  color: #888;
  margin: 5px 0;
}
.messages .message-list li:hover {
  background: #fff;
}
.messages .message-list li.active {
  background: #fd9162;
  border-right: 3px solid rgba(0, 0, 0, 0.1);
}
.messages .message-list li.active .preview h3, .messages .message-list li.active .preview h3 small, .messages .message-list li.active .preview p {
  color: #fff;
}
.messages .message-list li.new {
  background: #fff;
  border-right: 3px solid #44c4e7;
}

.message {
  -webkit-flex: 1;
  order: 2;
  background: #fff;
}
.message h2 {
  margin: 0;
  padding: 20px 30px;
  font-weight: 400;
}
.message .meta-data {
  margin: 10px 30px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  line-height: 50px;
  color: #888;
}
.message .meta-data .user {
  color: #fd9162;
}
.message .meta-data img {
  display: inline;
  vertical-align: middle;
  margin-right: 20px;
  border-radius: 3px;
}
.message .meta-data .date {
  float: right;
  color: #aaa;
}
.message .body {
  padding: 20px 30px;
}
.message .action {
  background: #fcfcfc;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 20px 30px;
}
.message .action .options {
  list-style: none;
  margin: 0;
  padding: 0;
}
.message .action .options li {
  float: left;
}
.message .action .options li:first-child {
  border-right: 1px solid #ddd;
}
.message .action .options li:first-child a {
  padding-left: 0;
}
.message .action .options li a {
  color: #888;
  padding: 0 10px;
}
.message .action .options li a.active {
  color: #333;
}
.message .action .textarea {
  background: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  position: relative;
  margin: 20px 0;
}
.message .action .textarea:before {
  content: '';
  display: block;
  border: 10px solid transparent;
  border-bottom: 10px solid #FFF;
  position: absolute;
  top: -19px;
  left: 25px;
  -webkit-filter: drop-shadow(0 -1px 0 #ddd);
}
.message .action .textarea textarea {
  width: 100%;
  min-height: 300px;
  appearance: none;
  border: none;
  resize: none;
  outline: none;
  margin-bottom: 50px;
}
.message .action .textarea .fileupload {
  background: #FCFCFC;
  border: 1px solid #ddd;
  padding: 10px;
  color: #888;
  justify-content: space-between;
}
.message .action .textarea .fileupload .fileinfo {
  flex: 1;
}
.message .action .textarea .fileupload .progress {
  width: 80%;
  border: 1px solid #ddd;
  background: #fff;
  padding: 2px;
}
.message .action .textarea .fileupload .progress .bar {
  background: #44c4e7;
  width: 65%;
  text-align: right;
  color: #fff;
  padding: 3px;
  font-size: .75rem;
}

Description

Really wanted to try out some flexbox so I saw this design on dribbble and gave it a shot.
Term
Mon, 11/27/2017 - 21:21

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv