Skip to content

Instantly share code, notes, and snippets.

@bernEsp

bernEsp/dabblet.css

Created March 28, 2012 17:31
Show Gist options
  • Save bernEsp/2228476 to your computer and use it in GitHub Desktop.
Save bernEsp/2228476 to your computer and use it in GitHub Desktop.
Download ZIP
landing mockup
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
.texture-layer {
background: url("texture-chunk-layer.png") repeat scroll 0 0 transparent;
margin: 70px 0 0;
min-height: 400px;
opacity: 0.6;
z-index: 8;
}
.opacity-wrapper {
background-color: rgba(0, 0, 0, 0.7);
margin: 0;
min-height: 570px;
position: absolute;
z-index: 12;
}
.content-layer {
margin: 70px 0 0;
position: absolute;
z-index: 94;
}
.content-layer .subscribe-layer {
border-bottom: 0 solid black;
margin-top: 40px;
opacity: 1;
padding: 30px 0;
z-index: 94;
}
.content-layer .subscribe-layer h3 {
color: #FFFFFF;
font-size: 38px;
line-height: 46px;
}
.content-layer .subscribe-layer hr {
background-color: #48474D;
border-color: #48474D;
}
.content-layer .subscribe-layer p {
color: #CCCCCC;
font-size: 18px;
font-weight: 100;
line-height: 19px;
}
.content-layer .subscribe-layer p span {
color: #F04A26;
margin-left: 10px;
}
.content-layer .login-layer {
border-bottom: 0 solid black;
margin-top: 40px;
opacity: 1;
padding: 30px 0;
z-index: 94;
}
.content-layer .login-layer h3 {
color: #CCCCCC;
font-size: 22px;
line-height: 26px;
padding: 10px 0;
}
.content-layer .login-layer .btn-landing {
margin: 12px 0 0;
}
.content-layer .login-layer .providers-legend {
font-size: 13px;
margin: 18px 0 0;
text-align: center;
}
.content-layer .login-layer .providers-legend:before {
content: "____";
float: left;
margin-top: -5px;
}
.content-layer .login-layer .providers-legend:after {
content: "____";
float: right;
margin-top: -5px;
}
.content-layer .login-layer .providers {
list-style-type: none;
margin-top: 20px;
}
.content-layer .login-layer .providers li {
background-color: #666666;
border-radius: 50% 50% 50% 50%;
height: 32px;
margin-left: 15px;
width: 32px;
}
.content-layer .login-layer .providers li .name, .content-layer .login-layer .providers li .name:hover, .content-layer .login-layer .providers li .name:visited {
background-image: url("icons.png");
color: #000000;
font-size: 22px;
font-weight: bold;
height: 18px;
text-align: center;
width: 22px;
}
.content-layer .login-layer .providers li .facebook {
background-position: 0 0;
margin: 6px 0 0 10px;
}
.content-layer .login-layer .providers li .twitter {
background-position: -20px 0;
margin: 6px 0 0 5px;
}
.content-layer .login-layer .providers li .google {
background-position: -40px 0;
margin: 6px 0 0 1px;
}
.submit, .btn-landing {
background-color: #F3652B;
background-repeat: repeat-x;
border: 1px solid #D3370A;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px 3px #252525;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
margin-right: -40px;
padding: 10px 30px;
text-shadow: -1px -1px 0 #D3370A;
}
.field {
background-color: #CCCCCC;
background-image: -moz-linear-gradient(left center , white, #CCCCCC);
background-repeat: repeat-x;
border: 1px solid #C6D3DB;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 3px #2E2E2F;
color: #999999;
font-family: Arial,sans-serif;
font-size: 16px;
font-weight: lighter;
margin: 5px 10px 5px 0;
padding: 11px 4px;
position: relative;
}
.field-label {
display: none !important;
}
.btn-landing {
margin-top: 6px;
}
.pull-margin0 {
margin-left: 0 !important;
}
.pull-margin1 {
margin-left: 2% !important;
}
.pull-margin3 {
margin-left: 6% !important;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<section id="login-system" class="pull-left">
<div class="span12 opacity-wrapper"></div><!--black-opacity wrapper layer -->
<div class="span12 texture-layer"></div><!--gray texture first layer-->
<div class="span12 content-layer">
<div class="row-fluid">
<div class=" span7 subscribe-layer pull-margin3">
<div class="row">
<h3 class="span5">What do you want to <br/>change today?</h3>
<hr class="span6"/>
<p class="span4">Are you new?<span>Request an invite code</span></p>
<form class="subscription span8 form-inline">
<fieldset class="pull-left">
<label class="field-label span1">subscribe</label>
<input type="text" placeholder="subscribre" class="field span4"/>
</fieldset><!--main fields of subscription form-->
<fieldset class="pull-left">
<button class="span2 btn-landing pull-margin1" type="submit">Send</button>
</fieldset><!--button send-->
</form><!--subscription-->
</div><!--row-->
</div><!--subscribe content-->
<div class="span4 login-layer pull-margin0">
<h3>User Sign In</h3>
<form class="login">
<fieldset class="pull-left">
<label class="field-label">email:</label>
<input type="text" placeholder="email" class="field span3"/>
</fieldset><!--nickname field-->
<fieldset class="pull-left">
<label class="field-label">password:</label>
<input type="password" placeholder="password" class="field span3"/>
</fieldset><!--password field-->
<fieldset class="pull-left">
<button class="span2 btn-landing" type="submit">Log In</button>
</fieldset><!--button send-->
</form><!--login-->
<p class="span3 providers-legend pull-left">Or connect with the providers bellow</p>
<ul class="providers span4">
<li class="pull-left"><a href="#" class="name pull-left facebook">f</a></li>
<li class="pull-left"><a href="#" class="name pull-left twitter">t</a></li>
<li class="pull-left"><a href="#" class="name pull-left google">g</a></li>
</ul>
</div><!--login content-->
</div>
</div><!--content layer-->
</section><!--login-system section
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment