Dipesh Patil 2411: Tybsc It'C'

Dipesh Patil 2411
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"

Inherits="WebApplication74.WebForm1" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
TYBsc IT’C’
Dipesh Patil 2411
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
padding-top: 60px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
border: 1px solid #888;
width: 80%;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Mystic World Login Form</h2>
<button onclick="document.getElementById('id01').style.display='block'"
style="width:auto;">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="/action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close"
title="Close Modal">×</span>
TYBsc IT’C’
Dipesh Patil 2411
<img src="NewFolder1/icon.png" width="200" height="200" alt="Avatar"
class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button"
onclick="document.getElementById('id01').style.display='none'"
class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
</div>
<script>
var modal = document.getElementById('id01');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
TYBsc IT’C’
Dipesh Patil 2411
TYBsc IT’C’
Dipesh Patil 2411
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
}
* {
}
.container {
padding: 16px;
background-color: white;
}
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
a {
color: dodgerblue;
}
.signin {
background-color: #f1f1f1;
text-align: center;
}
TYBsc IT’C’
Dipesh Patil 2411
</style>
</head>
<body>
<form action="/action_page.php">
<h1>Register for creating account</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>

<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>

</div>
<div class="container signin">

<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</body>
</html>
TYBsc IT’C’
Dipesh Patil 2411
TYBsc IT’C’
Dipesh Patil 2411

<!DOCTYPE html>
<html>
<head>
<style>
* {
}
input[type=text], select, textarea {

width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
}
input[type=submit] {
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.row:after {
TYBsc IT’C’
Dipesh Patil 2411
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h2>FeedBack Form</h2>
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<label for="lname">Last Name</label>
</div>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<label for="country">Country</label>
</div>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">India</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<label for="subject">FeedBack</label>
</div>
<textarea id="subject" name="subject" placeholder="Write something.."
style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
TYBsc IT’C’
Dipesh Patil 2411
</form>
</div>
</body>
</html>
TYBsc IT’C’
Dipesh Patil 2411
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 50%;
flex: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
.btn {
border: none;
outline: none;
padding: 10px 16px;
cursor: pointer;
font-size: 18px;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
TYBsc IT’C’
Dipesh Patil 2411
background-color: #666;
color: white;
}
</style>
</head>
<body>


<div class="header" id="myHeader">
<h1>Image Grid</h1>
<p>Click on the buttons to change the grid view.</p>
<button class="btn" onclick="one()">1</button>
<button class="btn active" onclick="two()">2</button>
<button class="btn" onclick="four()">4</button>
</div>


<div class="row">
<div class="column">
<img src="NewFolder1/1.jpg" style="width:100%">
</div>
<img src="NewFolder1/7.jpg"style="width:100%">
<img src="NewFolder1/10.jpg " style="width:100%">
</div>
</div>
<img src="NewFolder1/7.jpg"style="width:100%">
</div>
</div>
<script>
var elements = document.getElementsByClassName("column");
var i;
function one() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "100%"; // IE10
elements[i].style.flex = "100%";
}
}
TYBsc IT’C’
Dipesh Patil 2411
function two() {
}
}
function four() {
}
}
// Add active class to the current button (highlight it)

var header = document.getElementById("myHeader");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
TYBsc IT’C’

Dipesh Patil 2411: Tybsc It'C'

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dipesh Patil 2411: Tybsc It'C'

Uploaded by

Copyright:

Available Formats

Dipesh Patil 2411

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"

<label for="psw-repeat"><b>Repeat Password</b></label>

<button type="submit" class="registerbtn">Register</button>

<div class="container signin">

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs"

input[type=text], select, textarea {

var elements = document.getElementsByClassName("column");

// Add active class to the current button (highlight it)

You might also like