Scribd
Upload
38 views13 pages

Dipesh Patil 2411: Tybsc It'C'

The document contains code for a login form with CSS styling. It includes HTML and CSS code to create a login modal popup with fields for username, password, login and cancel buttons. The modal can be closed by clicking outside of it or on the close button. Additional JavaScript code handles displaying and closing the modal.

Uploaded by

Bharat Malviya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
38 views13 pages

Dipesh Patil 2411: Tybsc It'C'

The document contains code for a login form with CSS styling. It includes HTML and CSS code to create a login modal popup with fields for username, password, login and cancel buttons. The modal can be closed by clicking outside of it or on the close button. Additional JavaScript code handles displaying and closing the modal.

Uploaded by

Bharat Malviya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

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">&times;</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
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs"
Inherits="WebApplication74.WebForm2" %>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
}

* {
box-sizing: border-box;
}
.container {
padding: 16px;
background-color: white;
}
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
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 {
background-color: #4CAF50;
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">
<div class="container">
<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

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


Inherits="WebApplication74.WebForm3" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

input[type=text], select, textarea {


width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}

label {
padding: 12px 12px 12px 0;
display: inline-block;
}

input[type=submit] {
background-color: #4CAF50;
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;
background-color: #f2f2f2;
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>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<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">
<div class="col-25">
<label for="subject">FeedBack</label>
</div>
<div class="col-75">
<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
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="WebApplication75.WebForm1" %>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}

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;
background-color: #f1f1f1;
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>

<!-- Header -->


<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>

<!-- Photo Grid -->


<div class="row">
<div class="column">
<img src="NewFolder1/1.jpg" style="width:100%">
<img src="NewFolder1/2.jpg" style="width:100%">
<img src="NewFolder1/4.jpg" style="width:100%">
<img src="NewFolder1/5.jpg" style="width:100%">
</div>
<div class="column">
<img src="NewFolder1/7.jpg"style="width:100%">
<img src="NewFolder1/8.jpg" style="width:100%">
<img src="NewFolder1/6.jpg" style="width:100%">
<img src="NewFolder1/10.jpg " style="width:100%">
</div>
<div class="column">
<img src="NewFolder1/11.jpg" style="width:100%">
<img src="NewFolder1/12.jpg" style="width:100%">
<img src="NewFolder1/13.jpg" style="width:100%">
<img src="NewFolder1/14.jpg" style="width:100%">
</div>
<div class="column">
<img src="NewFolder1/7.jpg"style="width:100%">
<img src="NewFolder1/8.jpg" style="width:100%">
<img src="NewFolder1/11.jpg" style="width:100%">
<img src="NewFolder1/12.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() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "50%"; // IE10
elements[i].style.flex = "50%";
}
}

function four() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "25%"; // IE10
elements[i].style.flex = "25%";
}
}

// 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’

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy