article:
Elements Design: Light User Interface PSD
article:
Typography: QuickHand - Free Hand Written Web Font

Elements Design & Code: Blueprint Notice PSD and HTML

Advertisement

A gorgeous little advert/notice design with a “blueprint” look and feel. Contains some promotional text, a button, paperclip, and a layered “stack” design. The perfect basis for a little ad.


Implementation

use image

Resource: Blueprint Notice PSD and HTML


HTML
<div id="content">
    <h1>Blue Notes</h1>
    <div id="content-main-center">
        <div id="blue-notes-fixed">
            <p>Blue Notes</p>
            <div class="blue-notes-fixed-text">Vivamus sem ligula, blandit vel rhoncus ut, euismod sed felis. Nullam ac libero erat. Vestibulum faucibus augue ac leo lacinia tristique. Aliquam auctor dui sit amet est gravida ultricies dictum tincidunt erat. Aenean accumsan lectus venenatis justo hendrerit sit amet blandit nunc dapibus. Nulla auctor malesuada congue. Duis a est et felis malesuada scelerisque. Cras luctus mauris sed dui tristique sit amet euismod velit posuere. Sed enim nunc, consequat in fermentum et, scelerisque eu elit.</div>
            <div class="blue-notes-button">
                <a href="#" alt="" class="my-btn">Get It Now</a>
            </div> <!-- blue-notes-button -->
        </div> <!-- blue-notes-fixed -->
    </div> <!-- content-main-center -->
</div> <!-- content -->

CSS
#content{background:transparent;overflow:hidden;width:415x;padding:10px;float:left}
#content h1{font-family:'PT Sans Narrow',sans-serif;font-size:30px;font-weight:700;margin-bottom:30px;margin-top:10px}
#content-main-center{width:415px;height:500px;margin:0 auto;margin-top:50px;background:transparent}
#blue-notes-fixed{background:url(../images/blue-notice.png) no-repeat;width:425px;height:365px}
#blue-notes-fixed p{background:transparent;font-family:'Pacifico',cursive;font-weight:400;-o-transform:rotate(-10deg);-khtml-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);-ms-filter:"progid:dximagetransform.Microsoft.Matrix(m11=0.98480775,m12=0.17364818,m21=-0.17364818,m22=0.98480775,sizingmethod='auto expand')";filter:progid:dximagetransform.Microsoft.Matrix(m11=0.98480775,m12=0.17364818,m21=-0.17364818,m22=0.98480775,sizingmethod='auto expand');-moz-transform:matrix(.98480775,-.17364818,.17364818,.98480775,0,0);-webkit-transform:matrix(.98480775,-.17364818,.17364818,.98480775,0,0);-o-transform:matrix(.98480775,-.17364818,.17364818,.98480775,0,0);margin-left:45px;margin-top:55px;font-size:28px;display:inline-table}
.blue-notes-fixed-text{color:#333;font-size:16px;margin-left:55px;margin-top:35px;overflow:hidden;width:310px;font-family:'Open Sans Condensed',sans-serif}
.blue-notes-button{color:#333;font-family:'Open Sans Condensed',sans-serif;font-size:16px;margin:25px auto 0;overflow:hidden;width:130px}
.my-btn{-moz-box-shadow:inset 0 1px 0 0 #f7c5c0;-webkit-box-shadow:inset 0 1px 0 0 #f7c5c0;box-shadow:inset 0 1px 0 0 #f7c5c0;background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#fc8d83),color-stop(1,#e4685d));background:-moz-linear-gradient(center top,#fc8d83 5%,#e4685d 100%);filter:progid:dximagetransform.Microsoft.gradient(startcolorstr='#fc8d83',endcolorstr='#e4685d');background-color:#fc8d83;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;border:1px solid #d83526;display:inline-block;color:#fff;font-family:arial;font-size:15px;font-weight:700;padding:6px 24px;text-decoration:none;text-shadow:1px 1px 0 #b23e35}
.my-btn:hover{background:-webkit-gradient(linear,left top,left bottom,color-stop(.05,#e4685d),color-stop(1,#fc8d83));background:-moz-linear-gradient(center top,#e4685d 5%,#fc8d83 100%);filter:progid:dximagetransform.Microsoft.gradient(startcolorstr='#e4685d',endcolorstr='#fc8d83');background-color:#e4685d}
.my-btn:active{position:relative;top:1px}
.blue-notes-fixed-sign{font-size:16px;width:140px;margin-top:25px;overflow:hidden;float:left;margin-left:55px;font-family:'Open Sans Condensed',sans-serif}
.blue-notes-fixed-sign>a{text-decoration:none}

Result

Resource: Blueprint Notice PSD and HTML


Download it for free, don`t forget to add comments, link-back or screenshot, previews if you use it.



demo
download
source psd

Advertisement
Tags: blue print notice psd css html design interface

Leave a Comment

No Comment

© Creative3x Ltd.