LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

BOXLY

  • Clients
  • Sitters
  • Admin
  • Reports
  • Functions
  • Keys
  • Accounting
  • New Client
  • Alerts

Matthew Reichardt

  • Founder
  • St. Louis, MO
Alerts
  • Upcoming appointment
  • Lorem ipsum dolar
  • Some random alert
  • This design is slick!
Completed Alerts
  • Upcoming appointment
  • Lorem ipsum dolar
  • Some random alert
  • This design is slick!
Completed Jobs
  • 3 jobs complete
  • 7 uncompleted jobs
Staff Online
Grant Burns
Active
Grant Burns
Active
Calendar

28

Sunday

December/2014

<

>

  • Upcoming appointment
  • Lorem ipsum dolar
  • Some random alert
  • This design is slick!
Schedule Requests
  • Meet the team

    T-Rex St Loius

  • Build Initial Specs

    T-Rex St Loius

  • Design User Board

    Remote

Revenue
Daily

$2.089

.00

COMMISSION: 1,000.00
2.7%
Monthly

$27.125

.00

COMMISSION: 16,000.00
1.5%
Yesterday

$86.079

.86

COMMISSION: 16,000.00
3.1%
Arivals | Departures
Late Timeframes
Current Login's [STAFF]
  • Matthew Reichardt
  • Grant Burns
  • Lorem Ipsum
  • Ipsum Lorem
Clients
Daily Cancellations
Today
8
  • Week
  • Month
  • Total
  • 3
  • 32
  • 57
CSS
/* COLOR SETUP */
/* HELPER CLASSES */
.no-margin {
  margin-left: 0px;
}

.no-pad-bottom {
  padding-bottom: 0px;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.hr {
  border-bottom: 1px solid #e3e3e3;
}

.hr-dotted {
  border-bottom: 1px dotted #e3e3e3;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.block-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.push-top-sm {
  margin-top: 15px;
}

.cancellation-count {
  margin-top: 40px;
  margin-bottom: 40px;
  bottom: -20px;
  text-align: center;
  font-size: 700%;
  color: #31F7DD;
}

.cancellations {
  background: #31F7DD;
  padding-top: 0px;
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: -15px;
  height: 45px;
  color: #fff;
}
.cancellations ul {
  margin: 0px;
  margin-bottom: -15px;
  padding-left: 10px;
  padding-right: 10px;
  list-style-type: none;
  text-align: justify;
}
.cancellations ul.big {
  margin-top: -20px;
}
.cancellations ul.big li {
  font-size: 140%;
}
.cancellations ul:after {
  content: "";
  width: 100%;
  display: inline-block;
}
.cancellations li {
  display: inline;
  font-size: 75%;
}

/* IMAGE CLASSES */
.avatar {
  height: 150px;
  width: 150px;
  border: 8px solid #eaeaea;
  border-radius: 50%;
}

/* MAIN CLASSES */
body {
  background: #efefef;
  color: #777777;
}

.header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background: #49535b;
  color: lightgray;
  padding-top: 15px;
}
.header h3 {
  margin: 0px;
  color: white;
}
.header i {
  margin-right: 5px;
  font-size: 120%;
}
.header ul {
  float: right;
  margin: 0px;
  line-height: 30px;
  list-style-type: none;
}
.header ul li {
  display: inline;
  padding: 0px 2px 0px 2px;
}
.header ul li:hover {
  color: #a6a6a6;
}

.content {
  position: relative;
  top: 110px;
}
.content .block-content {
  background: #FCFCFC;
  padding: 15px;
  margin-bottom: 12px;
  -webkit-box-shadow: 0px 5px 5px -3px #bcbcbc;
  -moz-box-shadow: 0px 5px 5px -3px #bcbcbc;
  box-shadow: 0px 5px 5px -3px #bcbcbc;
}
.content .block-content h5 {
  padding-bottom: 3px;
}
.content .cal-alerts {
  margin-top: 85px;
  margin-bottom: -15px;
}
.content .cal-alerts i {
  width: 30px;
  font-size: 130%;
  margin: 0 auto;
  margin-right: 5px;
}
.content .cal-alerts li {
  line-height: 10px;
  letter-spacing: 0px;
  font-size: 85%;
  color: #777777;
}
.content .cal-alerts li .red {
  color: red;
}
.content .cal-alerts li .yellow {
  color: yellow;
}
.content .cal-alerts li .green {
  color: #00dc00;
}
.content .user-details, .content .user-alerts {
  margin-bottom: -15px;
}
.content .user-details .sub-heading, .content .user-alerts .sub-heading {
  margin-top: -3px;
  font-size: 85%;
}
.content .user-details i, .content .user-alerts i {
  width: 30px;
  font-size: 130%;
  margin: 0 auto;
  margin-right: 5px;
}
.content .user-details li, .content .user-alerts li {
  line-height: 10px;
  letter-spacing: 0px;
  font-size: 85%;
  color: #777777;
}
.content .user-details li .red, .content .user-alerts li .red {
  color: red;
}
.content .user-details li .yellow, .content .user-alerts li .yellow {
  color: #d6d600;
}
.content .user-details li .green, .content .user-alerts li .green {
  color: #00dc00;
}
.content .staff i {
  font-size: 170%;
}
.content .staff .red {
  color: red;
}
.content .staff .green {
  color: #00b300;
}
.content .staff img {
  margin-top: 10px;
  height: 40px;
  width: 40px;
  border: none;
}
.content .staff .staff-name {
  font-weight: bold;
  font-size: 110%;
  margin-top: 5px;
  text-align: center;
}
.content .staff .online {
  font-size: 85%;
  margin-top: -3px;
}
.content .footer {
  width: 100%;
  margin-left: -15px;
  margin-right: -30px;
  padding: 1px;
  background-color: #F47A60;
}
.content .calendar {
  float: left;
  width: 100%;
  margin-left: -15px;
  margin-right: -15px;
  padding: 15px;
  background-color: #F47A60;
  color: #FCFCFC;
}
.content .calendar h3.day {
  float: left;
  color: #FCFCFC;
}
.content .calendar .extend-day {
  float: left;
}
.content .calendar .extend-day p {
  float: left;
  clear: left;
  margin: 0px;
  margin-left: 10px;
}
.content .calendar .extend-day .pull {
  margin-top: -5px;
  font-size: 75%;
  color: #dddddd;
}
.content .calendar .toggle-month {
  float: right;
}
.content .calendar .toggle-month h3 {
  display: inline;
  color: #FCFCFC;
}
.content .sheet {
  padding-top: 85px;
  font-size: 85%;
}
.content .sheet li {
  display: inline;
  padding-left: 3px;
  padding-right: 3px;
}
.content .sheet .sheet-day {
  margin-top: -5px;
}
.content .sheet .sheet-day li {
  margin-right: 3px;
  padding: 9px;
  background: #e3e3e3;
  font-size: 93%;
}
.content .sheet .sheet-day li.empty {
  padding-right: 19px;
  background: transparent;
}
.content .sheet .calendar-footer {
  width: 100%;
  height: 10px;
  margin-left: -15px;
  margin-right: -15px;
  padding: 15px;
  background-color: #F47A60;
  color: #FCFCFC;
}
.content .sched-request {
  clear: left;
}
.content .revenue-icon {
  font-size: 180%;
  color: #a6a6a6;
}
.content .revenue {
  margin: 0px;
  margin-top: 10px;
  padding-right: 0px;
}
.content .revenue h4 {
  line-height: 45px;
  color: #8d8d8d;
}
.content .revenue .percent {
  clear: left;
  font-size: 40%;
  line-height: 0px;
  color: #a6a6a6;
}
.content .revenue .up {
  color: #00b300;
}
.content .revenue .down {
  color: red;
}
.content .revenue .commission {
  clear: left;
  margin-top: -15px;
  font-size: 40%;
  font-weight: bold;
}

Description

Boxly was inspired by the wonderful design @ http://drbl.in/nlJg.
Term
Mon, 11/27/2017 - 21:20

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv