Buttons
Small Button
Link Button
Button
HTML Code
<![CDATA[
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
]]>
CSS Code
<![CDATA[
.button {
background-color: #333300;
color: #ffffff;
text-decoration: none;
padding: 15px 32px;
font-size: 12px;
margin: 4px 2px;
cursor: pointer;
border-radius:8px;
}
]]>
Medium Buttons
Link Button
Button
HTML Code
<![CDATA[
<a href="#" class="button2">Link Button</a>
<button class="button2">Button</button>
<input type="button2" class="button2" value="Input Button">
]]>
CSS Code
<![CDATA[
.button2 {
background-color: #ffffff;
border:8px solid #2eb82e;
color: #000000;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
]]>
Large Buttons
Link Button
Button
HTML Code
<![CDATA[
<a href="#" class="button3">Link Button</a>
<button class="button3">Button</button>
<input type="button3" class="button3" value="Input Button">
]]>
CSS Code
<![CDATA[
.button3 {
background-color: white;
border:3px solid #008CBA;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius:12px;
}
]]>
Hover Button
Hover Button
HTML Code
<![CDATA[
<button class="button4">Hover Button</button>
]]>
CSS Code
<![CDATA[
.button4 {
background-color: white;
color: black;
border: 2px solid #ffff00;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button4:hover {
background-color: #ffff00;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
]]>
Shadow Button
Shadow Button
HTML Code
<![CDATA[
<button class=" button3 button5">Shadow Button</button>
]]>
CSS Code
<![CDATA[
.button3 {
background-color: white;
border:3px solid #008CBA;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius:12px;
}
.button5:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
]]>
Disabled Button
Disabled Button
HTML Code
<![CDATA[
<button class=" button3 disabled">Disabled Button</button>
]]>
CSS Code
<![CDATA[
.button3 {
background-color: white;
border:3px solid #008CBA;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
border-radius:12px;
}
.disabled {
opacity: 0.4;
cursor: not-allowed;
}
]]>
Header Section
This is a Header section in this pattern library. There are
three different type of Heading. Heading 1 in uppercase letter, Heading 2 in normal and
Heading 3 in lowercase.
Heading 1
Heading 2
Heading 3
HTML Code
<![CDATA[
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
]]>
CSS Code
<![CDATA[
header
{
text-align:left;
line-height:50px;
padding:20px;
margin:0 auto;
}
h1 {
text-transform: uppercase;
font-family:verdana;
color:#997a00;
}
h2 {
font-family:sans-serif;
color:#004d00;
}
h3 {
text-transform: lowercase;
font-family:Times New Roman;
color:#333300;
}
]]>
Navigations Section
HTML Code
<![CDATA[
<nav>
<ul class="main_menu">
<li><a href="index.html">Home</a></li>
<li><a href="Evidence.html">Pattern</a></li>
<li><a href="Development.html">Library</a></li>
<li><a href="Standards.html">Contact Us</a></li>
</ul>
</nav>
]]>
CSS Code
<![CDATA[
.main_menu {
padding: 5px 0 5px 0;
margin:0;
text-align: center;
line-height:32px;
background-color: #000000;
}
ul.main_menu {
margin-top: 0px;
}
.main_menu li {
display:inline;
padding: 0 0 0 0;
font-size: 20px;
}
.main_menu a {text-decoration:none;
color:#fff;
padding:8px;
font-variant:small-caps;
}
.main_menu a:hover {
color: #59d5d8;
}
]]>
Footer Section
HTML Code
<![CDATA[
<footer>
<div class="footer1">
<div class="social">
<h5> Find me on Social media </h5>
<a href=""><img src="facebook1.png" /></a>
<a href=""><img src="twitter.png" /></a>
<a href=""><img src="youtube.png" /></a>
<a href=""><img src="instagram.png" /></a>
</div>
<div class="para">
<p>Saurav designing company is a Limited Company
registered in England and Wales. </p>
</div>
</div>
</footer>
]]>
CSS Code
<![CDATA[
h5 {
text-align:center;
color:white;
font-size:2em;
}
.footer1{
border-top: 5px solid white;
background-color: #000000;
width:100%;
}
.social {
text-align:center;
}
.social img {
width:6%;
height:8%;
}
.para {
color:white;
text-align:center;
}
]]>
Jumbotron
Jumbotron
This is how we do....
HTML Code
<![CDATA[
<div class="jumbotron jumbotron-billboard">
<div class="img"></div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Jumbotron</h1>
<p>
This is how we do....
</p>
</div>
</div>
</div>
</div>
]]>
CSS Code
<![CDATA[
.jumbotron-billboard .img {
opacity: 0.2;
color: #fff;
background: #000 url("http://kingofwallpapers.com/hd-background-images-for-websites/hd-background-images-for-websites-009.jpg") center center;
width: 100%;
height: 100%;
background-size: cover;
position:absolute;
top:0;left:0;
}
.jumbotron {position:relative;padding:50px;}
}
]]>
Form
HTML Code
<![CDATA[
<div id="form-main">
<div id="form-div">
<form class="form" id="form1">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
</p>
<p class="text">
<textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
</p>
<div class="submit">
<input type="submit" value="SEND" id="button-blue"/>
<div class="ease"></div>
</div>
</div>
</div>
]]>
CSS Code
<![CDATA[
/*section control the Form*/
section {
height:100%;
width:100%;
margin-bottom:-17%;
}
/*displaying the code for FORM*/
/*layout the form box*/
#form-main{
width:100%;
float:left;
padding-top:0px;
}
#form-div {
background-color:rgba(72,72,72,0.4);
padding-left:35px;
padding-right:35px;
padding-top:35px;
padding-bottom:50px;
width: 20%;
float: left;
left: 80%;
position: absolute;
margin-top:3%;
margin-left: -40%;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/*size of fonts which is inside the form*/
.feedback-input {
color:#3c3c3c;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 0;
line-height: 22px;
background-color: #fbfbfb;
padding: 13px 13px 13px 54px;
margin-bottom: 10px;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid rgba(0,0,0,0);
}
.feedback-input:focus{
background: #fff;
box-shadow: 0;
border: 3px solid #3498db;
color: #3498db;
outline: none;
padding: 13px 13px 13px 54px;
}
.focused{
color:#30aed6;
border:#30aed6 solid 3px;
}
/* Here are Icons images code which is display on my Form */
#name{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#name:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
background-size: 30px 30px;
background-position: 8px 5px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#email:focus{
background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
#comment{
background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
background-size: 30px 30px;
background-position: 11px 8px;
background-repeat: no-repeat;
}
/*only targeting the comment box section*/
textarea {
width: 100%;
height: 150px;
line-height: 150%;
resize:vertical;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
background-color:white;
}
#button-blue{
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
float:left;
width: 100%;
border: #fbfbfb solid 4px;
cursor:pointer;
background-color: #3498db;
color:white;
font-size:24px;
padding-top:22px;
padding-bottom:22px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-top:-4px;
font-weight:700;
}
#button-blue:hover{
background-color: rgba(0,0,0,0);
color: #0493bd;
}
.submit:hover {
color: #3498db;
}
.ease {
width: 0px;
height: 74px;
background-color: #fbfbfb;
-webkit-transition: .3s ease;
-moz-transition: .3s ease;
-o-transition: .3s ease;
-ms-transition: .3s ease;
transition: .3s ease;
}
.submit:hover .ease{
width:100%;
background-color:white;
}
]]>