You can create contact form using HTML, CSS and JavaScript. Click Here to Live check
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
CSS, javascript
<!--DOCTYPE html-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
.form-container .cancel {
background-color: red;
}
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
</style>
<script>
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
</head>
<body>
<button class="open-button" onclick="openForm()">Enquery Now</button>
<div class="form-popup" id="myForm">
<form action="#" class="form-container">
<input type="text" placeholder="Enter Email" name="email" required>
<input type="password" placeholder="Enter Password" name="psw" required>
<textarea cols="36" rows="4" placeholder="Enter Message" name="psw" required></textarea>
<button type="submit" class="btn">Submit Here</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>
</body>
</html>
January 20, 2019
Bootstrap, CSS
January 20, 2019
You can create bootstrap modal on page load only you have to write some script which is given below
Click Here To Live check
<html lang="en">
<head>
<title>Auto Loading Bootstrap Modal on Page Load</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</head>
<body>
<br /><br />
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title text-center">
How to launch Bootstrap modal on page load</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" placeholder="Name" type="text" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Email Address" type="email" />
</div>
<div class="form-group">
<input class="form-control" placeholder="***************" type="password" />
</div>
<button class="btn btn-primary btn-block" type="submit">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Click Here To Live check
Bootstrap, CSS
<!--DOCTYPE html-->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.btnw{width:49%;}
.login-or {
position: relative;
font-size: 18px;
color: #aaa;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.span-or {
display: block;
position: absolute;
left: 50%;
top: -2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
}
.hr-or {
background-color: #cdcdcd;
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.btn-primary{
background-image: -webkit-linear-gradient(top,#e85b54 0,#b22520 100%);
}
.btn-info{
background-image: -webkit-linear-gradient(top,#295fa0 0,#4c95d6 100%);
}
.btn-success{
background-image: -webkit-linear-gradient(top,#58e854 0,#70b245 100%);
}
</style>
</head>
<body>
<br><br>
<div class="row">
<div class="container">
<div class="col-sm-offset-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-heading text-center"><strong>Login Form</strong></div>
<div class="panel-body">
<form class="form-horizontal" action="#">
<div class="form-group">
<div class="col-sm-12">
<a href="#" class="btn btn-primary btnw">Facebook</a>
<a href="#" class="btn btn-info btnw">Google</a>
</div>
</div>
<div class="login-or">
<hr class="hr-or">
<span class="span-or">or</span>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class=" col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-success btn-block">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
December 31, 2018
Create Responsive Login Form using Bootstrap.
Bootstrap, CSS
<!--DOCTYPE html-->
<html>
<head>
<title>Interal CSS</title>
<style>
p{
color:red;
}
#abc{
color:blue;
}
.ab{
color:green;
}
</style>
</head>
<body>
<p>Hello How r u[Tag based calling]</p>
<p id="abc">Hello[ Id based call]</p>
<p class="ab" [Class based call]>My Name is Mohan</p>
</body>
</html>
December 26, 2018
CSS
<!--DOCTYPE html-->
<html>
<head>
<style>
@font-face{
font-family:Aclonica;
src: url(Aclonica.ttf);
}
@font-face{
font-family:Acme-Regular;
src: url(Acme-Regular.ttf);
}
h1{
font-family:Aclonica;
}
h2{
font-family:Acme-Regular;
}
</style>
</head>
<body>
<h1>AclonicThe @font-face Rule</h1>
<h2>AclonicThe @font-face Rule</h2>
</body>
</html>
December 26, 2018
CSS
<!--DOCTYPE html-->
<html>
<head>
<title>LINK STATE</title>
<style>
#ab1:active{
color:red;
}
#ab2:hover{
color:red;
}
#ab2:hover{
color:red;
}
#ab3:visited{
color:red;
}
</style>
</head>
<body>
<a href="#" id="ab1">ACTIVE [click mee]</a>
<br>
<a href="#" id="ab2">HOVER [TOUCH ME]</a>
<br>
<a href="#" id="ab3">Visited [ YOU HAVE VISITED LINE]</a>
</body>
</html>
December 12, 2018
CSS
<!--DOCTYPE html-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
z-index: 2;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
z-index: 1;
}
</style>
</head>
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img alt="" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vYzeJ8yLewjLbAkPpCGIKofM8C1ETSZbAHq8BOBaQXfKPsbt8vZhjZMAMZrBr4imEWfQnryKHIix9pdIW7kA-jp6kdaR3YNuo_5yc7xBODXw7dTZLniadnyAj2m7KcbYkxivyUv8crGMPQCcY4Vt9ILlEkFuFt2uQYHzfYOHJKC2B4FaOBBLPa=s0-d">
</div>
<div class="flip-card-back">
<h1>HELLO DUDE</h1>
<p>YOU ARE FOOL?</p>
<p>I KNOW YOU ARE DEVELOPER</p>
</div>
</div>
</div>
</body>
</html>
December 03, 2018
HELLO DUDE
YOU ARE FOOL?
I KNOW YOU ARE DEVELOPER
CSS
<!--DOCTYPE html-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.image-wrap {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.image-wrap img {
top: -50px;
left: -150px;
height: 400px;
width: 400px;
transition: all 500ms ease-in;
position: absolute;
}
.image-wrap img:hover {
top: 0;
left: 0;
height: 200px;
width: 200px;
}
</style>
<div class="image-wrap">
<img alt="" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vYzeJ8yLewjLbAkPpCGIKofM8C1ETSZbAHq8BOBaQXfKPsbt8vZhjZMAMZrBr4imEWfQnryKHIix9pdIW7kA-jp6kdaR3YNuo_5yc7xBODXw7dTZLniadnyAj2m7KcbYkxivyUv8crGMPQCcY4Vt9ILlEkFuFt2uQYHzfYOHJKC2B4FaOBBLPa=s0-d">
</div>
</body>
</html>
December 02, 2018
CSS
Agyan adda
<!--DOCTYPE html-->
<html lang="en">
<head>
<title>Agyanadda</title>
<style>
#overlay {
border: 1px solid black;
width: 300px;
height: 300px;
display: inline-block;
background-image: url('https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vYzeJ8yLewjLbAkPpCGIKofM8C1ETSZbAHq8BOBaQXfKPsbt8vZhjZMAMZrBr4imEWfQnryKHIix9pdIW7kA-jp6kdaR3YNuo_5yc7xBODXw7dTZLniadnyAj2m7KcbYkxivyUv8crGMPQCcY4Vt9ILlEkFuFt2uQYHzfYOHJKC2B4FaOBBLPa=s0-d');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<img height="300px" id="imgZoom" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vYzeJ8yLewjLbAkPpCGIKofM8C1ETSZbAHq8BOBaQXfKPsbt8vZhjZMAMZrBr4imEWfQnryKHIix9pdIW7kA-jp6kdaR3YNuo_5yc7xBODXw7dTZLniadnyAj2m7KcbYkxivyUv8crGMPQCcY4Vt9ILlEkFuFt2uQYHzfYOHJKC2B4FaOBBLPa=s0-d" width="300px">
<div id="overlay" onmousemove="zoomIn(event)"></div>
<script>
function zoomIn(event) {
var element = document.getElementById("overlay");
element.style.display = "inline-block";
var img = document.getElementById("imgZoom");
var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
element.style.backgroundPosition = (-posX * 4) + "px " + (-posY * 4) + "px";
}
function zoomOut() {
var element = document.getElementById("overlay");
element.style.display = "none";
}
</script>
</body>
</html>
December 02, 2018
CSS
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
August 10, 2018
HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements. This example contains four HTML elements:
Datalist is used as a drop-down menu. It is similar as select tag in HTML.
<form>
<input type="text" placeholder="Select country..." list="abc">
<datalist id="abc">
<option>India</option>
<option>Pakistan</option>
<option>China</option>
<option>Cikago</option>
</datalist>
</form>
Output
Subscribe to:
Posts (Atom)
