Web Designing

Saturday, February 20, 2016

bootstrap toggle menu

<div class="row">

<div class="navbar navbar-default" role="navigation">
<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="sr-only">toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#"><img class="img-responsive" src="images/logo_SOL_1.png"></a>

</div>

<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input class="form-control" type="text" placeholder="search">
<button class="btn btn-default" type="submit">
<i fa fa-search></i>
</div>

</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon-home"></span>Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Rules</a></li>


<li><a href="#">Mandatiry Disclosure</a></li>

</ul>

</div>

</div>

</div>

</div>

Sunday, June 28, 2015

#box{
width:500px;
height:500px;
background: -webkit-linear-gradient(bottom,red,yellow);
background: -moz-linear-gradient(bottom,red,yellow);
background: -ms-linear-gradient(bottom,red,yellow);
background: -o-linear-gradient(bottom,red,yellow);
}

*/ use TOP, BOTTOM, LEFT, RIGHT for gradient direction */

Transparency with gradient

body {
background: -webkit-linear-gradient(black, transparent 70%),
url('images/sky.jpg'), white;
background-repeat: no-repeat;
background-attachment:fixed;
}

How to give gradient to text

h1{
font-size:72px;
font-family:sans-serif;
text-transform:uppercase;
background: -webkit-linear-gradient(yellow,red);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

Friday, June 12, 2015

HTML Contact Form

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.title_form{font-size:16px; padding:10px; width:49%; margin-left:10px; margin-top:20px; float:left; border:1px solid #333;}
.title_form > form{width:100%; float:left;}
.title_form > form label {float: left;padding-left: 20px;padding-top: 10px;width: 208px;}
.career_area ul{width:100%; float:left; padding:10px;}
.career_area ul li{width:100%; float:left; line-height:1.5em;}
/*.123{width:100%; text-align:center; float:left;}*/

select {padding: 8px;width: 200px;}
button:hover{background:#f00;}
.title_form > h1 {background: #333 none repeat scroll 0 0;color: #fff;margin-bottom: 20px;}

.title_form input[type="submit"] {
    background: #666 none repeat scroll 0 0;
    border-radius: 4px;
    color: #fff;
    font-size: 18px;
    margin: 0 auto;
    text-align: center;
}
input{padding:10px;}
</style>
</head>

<body>

   <div class="title_form">
   <A NAME="top"></A>
   <h1>Apply for job</h1>
   <form method="post">
<p> <label for="name">Name</label><input type="text" id="name" name="name" value="" placeholder="Your Name" required></p>
<p><label for="tel">Contact Number</label><input type="tel" id="name" name="contact_number" value="" placeholder="9800098000" required></p>
<p><label for="email">Email Address </label><input type="email" id="name" name="email" value="" placeholder="abc@sample.com" required></p>
<p> <label for="name">Apply for the post of :</label>
<select>
<option value="volvo">PHP</option>
<option value="saab">Web Designing</option>
<option value="opel">Graphic Designing</option>
<option value="audi">Mobile Apps</option>
</select>
</p>
<p><label for="attachment" class="123">Attach Resume </label><input type="file" id="name" value="abc@sample.com" required></p>
<p><label for="description" class="123">Description </label><input type="text" id="name" value="abc@sample.com" required></p>
<p class="123"> <input type="Submit" name="submit" value="Submit"></p>

   </form>

   </div>
</body>
</html>

Wednesday, June 3, 2015

Form formatting input type

form{text-align:center;}
input[type=email]{
width:300px;
}

input[type=button]{
background:#06C;
border-radius:4px;
padding:5px 10px;
box-shadow:none;
color:#fff;
font-size:16px;
text-transform:uppercase;
}

Full page fixed background in css

body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}