Horizon

Responsive template made for Kigo system (Vacation Rental Software).

Date: Jul 2013
Status: Online
Design: George Vintila

Home

Home page

$gray-darker: #222;
$gray-dark: #333;
$gray: #555;
$gray-light: #999;
$gray-lighter: #eee;
$accent-color: #40b7ff;

// ICON FONTS
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

// STYLE INPUT
* {
  margin:0;
  padding:0;
  @include box-sizing(border-box);
}

.container {
  text-align: left;
  width: 300px;
  padding: 30px;
  height:auto;
  margin:60px auto;
  background:$gray-lighter;
  box-shadow:0 0 30px rgba($gray-dark,0.4);
}

input {
 	color: $gray-darker;
	font-size: 18px;
  display: block;
	padding: 0 42px 0 10px;
  height: 40px;
  width: 100%;
	border: solid 1px $gray-light;
	background-color: #fff;
	@include background-image(linear-gradient(bottom, #f4f4f4 36%, #fff 56%));
  
  &:focus {
    border-color: $gray-dark;
  }
}

fieldset {
  padding: 0;
  margin: 0;
  border: none;
  position: relative;

  &:after {
    font-family: 'FontAwesome', sans-serif;
    content:"\f073";
    color: #fff;
	  position: absolute;
    text-align: center;
    right: 3px;
    bottom: 3px;
    height: 34px;
    line-height: 34px;
    width: 34px;
    background:$accent-color;
    @include text-shadow(rgba($gray-darker, 0.4) 1px 1px 1px);
   }  
}

See the Pen %= penName %> by aluciu (@aluciu) on CodePen

Code example for input

Make request
Make request-mobile

Request page: desktop version vs. mobile version