Skip to content

SAKSHI_SAXENA #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sakshisaxena12 wants to merge 5 commits into
base: master
Choose a base branch
from
Open

SAKSHI_SAXENA #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
764b38e
Final commit
sakshisaxena12 Mar 25, 2020
2a86106
Task completed
sakshisaxena12 Mar 25, 2020
55e11a3
commit final
sakshisaxena12 Mar 25, 2020
27b8d82
created readme.md
sakshisaxena12 Mar 25, 2020
a96b718
Merge branch 'master' into task
sakshisaxena12 Mar 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions Documentation.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
- Full Name: SAKSHI SAXENA
- College: JAYPEE UNIVERSITY OF ENGINEERING AND TECHNOLOGY,GUNA
- stream of study: COMPUTER SCIENCE ENGINEERING
- year of study: 3rd year
- Current Location (City of residence): Kanpur(Uttar Pradesh)
7 changes: 7 additions & 0 deletions LoginPageTask/bootstrap/css/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions LoginPageTask/bootstrap/js/bootstrap.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions LoginPageTask/bootstrap/js/jquery-3.3.1.slim.min.js
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions LoginPageTask/bootstrap/js/popper.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added LoginPageTask/image.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
252 changes: 172 additions & 80 deletions LoginPageTask/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,177 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Work+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans&display=swap" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<!--Navabr starts here-->
<nav class="navbar navbar-expand-lg navbar navbar-light nav-section" style="padding:3px">
<div class="hero-section">
<a class="navbar-brand" href="#"><img src="https://incubateind.com/images/IncubateIND%20Black.png" class="logo" alt=""></a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>LoginPage</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css?family=Play"
rel="stylesheet"
/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active ">
<a class="nav-link" href="#" style="color:white">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"style="color:white">Log in</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:white">Sign up</a>
</li>
</ul>
</div>
</nav>
<!-- Beautify This -->
<div class="log-form">

<h2 class="mb-4 form-heading">Enter your details</h2>
<form name="myForm"action="/sucess.html" onsubmit="return validateForm()" method="post">
<div class="form-group">
<input type="text" class="form-control" title="username" name="user" placeholder="Enter username"/>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" title="email" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<input type="number" class="form-control" name="phone" title="phone" id="exampleInputphone" aria-describedby="emailHelp" placeholder="Enter phonenumber">
</div>
<div class="form-group">
<input type="password"title="cnfpassword" name="password" class="form-control" id="exampleInputPassword1" placeholder="Confirm password">
</div>
<div class="form-group">
<textarea class="form-control" name="message" cols="35" rows="4" placeholder="Enter message" id="exampleFormControlTextarea1"></textarea>
</div>
<div class="form-check form-check-inline">
<p>Enter your Age</p>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="above" checked>
<label class="form-check-label" for="exampleRadios1">
Above 18
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="Below">
<label class="form-check-label" for="exampleRadios2">
Below 18
</label>
</div>
<button type="Submit" class="btn-outline-secondary btn-block submit-button">Submit</button>
</div>
</form>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
#msg {
visibility: hidden;
min-width: 250px;
background-color: yellow;
color: #000;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
top: 30px;
font-size: 17px;
margin-right: 30px;
}

</div>
<!-- Beautify Ends -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
#msg.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
from {
top: 0;
opacity: 0;
}
to {
top: 30px;
opacity: 1;
}
}

@keyframes fadein {
from {
top: 0;
opacity: 0;
}
to {
top: 30px;
opacity: 1;
}
}

@-webkit-keyframes fadeout {
from {
top: 30px;
opacity: 1;
}
to {
top: 0;
opacity: 0;
}
}

@keyframes fadeout {
from {
top: 30px;
opacity: 1;
}
to {
top: 0;
opacity: 0;
}
}
</style>
</head>
<body>
<img
src="https://incubateind.com/images/IncubateIND%20Black.png"
class="logo"
alt=""
style="width: 130px; height: 50px;"
/>
<!-- Beautify This -->
<div class="container-fluid">
<div class="log-form">
<h2>SIGN UP</h2>
<form name="myForm" method="post" submit="validate()">
<input
type="text"
title="username"
placeholder="username"
required
/><br />
<input
type="email"
title="email"
placeholder="email"
required
/><br />
<input
type="password"
title="password"
placeholder="password"
required
/><br />
<input
type="password"
title="cnfpassword"
placeholder="confirm password"
required
/><br />
<input
type="tel"
title="phoneNumber"
id="phone"
placeholder="Phone Number"
required
/>
<br />
<br />

<textarea
name="message"
id="message"
cols="35"
rows="4"
placeholder="enter message"
></textarea>
<br />
<br />

<div class="my">
<p>
Age: &nbsp;
<input type="radio" name="rad" value="above" /><label
>Above 18</label
><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="rad" value="below" />Below 18
</p>
</div>

<br />
<input
type="button"
value="SUBMIT"
class="btn"
onclick="myFunction()"
/>
<div id="msg">Congratulations You Sign Up successfully!!</div>
</form>
</div>
</div>
<!-- Beautify Ends -->

</body>
</html>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="bootstrap/js/jquery-3.3.1.slim.min.js"></script>
<script
src="bootstrap/js/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="bootstrap/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
</body>
</html>
96 changes: 88 additions & 8 deletions LoginPageTask/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,19 @@
}

body {
font-family: "open sans", helvetica, arial, sans;
}
.logo{
width: 100px;
font-family: Tahoma, Geneva, sans-serif;
background: url(image.jpg);
background-size: cover;
background-image: no-repeat ;

}

.log-form {
/* width: 50%;

min-width: 320px;
max-width: 475px;*/

width: 100%;
min-width:240px;
max-width:500px;
Expand All @@ -22,16 +29,25 @@ body {
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: rgba(44, 62, 80, 0.7);
}

h2 {
text-align: center;
color: white;
}
.log-form {
padding: 2em;
-webkit-box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.30);
-moz-box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.30);
box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.30);
-webkit-box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.3);
-moz-box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.3);
box-shadow: 4px -1px 53px -7px rgba(138, 138, 138, 0.3);
}
.form-heading
{

text-align:center;
font-weight: bold;
font-family: 'Work Sans', sans-serif;
}
.form-heading
{
Expand All @@ -45,4 +61,68 @@ form {
display: block;
text-align: center;
width: 100%;
}
}
/* ========================WRITE YOUR CSS FROM HERE======================== */

input {
color: aliceblue;
text-align: center;
background: transparent;
border: none;
border-bottom: 1px solid #fff;
font-family: "Play", sans-serif;
font-size: 16px;
font-weight: 200px;
padding: 10px 0;
transition: border 0.5s;
outline: none;
}
input[type="button"] {
color: white;
border: none;
width: 190px;
background: black;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
border-radius: 15px;
cursor: pointer;
}
input[type="button"]:hover {
color: black;
background-color: white;
}
input[type="radio"] {
color: aliceblue;
opacity: 0.8;
font-family: "Play", sans-serif;
font-size: 16px;
font-weight: 200px;
}

#message {
color: #fff;
width: 240px;
text-align: center;
background: transparent;
border: 2px solid #fff;
font-family: "Play", sans-serif;
font-size: 16px;
font-weight: 200px;
padding: 10px 0;
transition: border 0.5s;
outline: none;
}
::placeholder {
color: aliceblue;
opacity: 0.8;
}

.my {
font-family: "Play", sans-serif;
text-align: center;
color: white;
font-size: 16px;
font-weight: 200px;
}

Loading