added web page test
This commit is contained in:
josephroy99
parent
d064d29951
commit
21e3639f8d
|
|
@ -0,0 +1,214 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
|
||||
button {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: rgb(197, 197, 197);
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #169D00;
|
||||
color: black;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: #A8A8A8;
|
||||
margin: 1.7em 0em;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
body {
|
||||
background: rgb(0,13,4);
|
||||
background: linear-gradient(133deg, rgba(0,13,4,1) 0%, rgba(3,38,0,1) 81%, rgba(0,59,18,1) 100%) no-repeat;
|
||||
color: #EDEDED;
|
||||
font-family: 'Poppins';
|
||||
background-attachment: fixed; /*edit*/
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.vertical-break {
|
||||
width: 1px;
|
||||
min-width: none;
|
||||
height: 600px;
|
||||
background-color: #424242;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.control-regions {
|
||||
padding: 50px;
|
||||
vertical-align: top;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.control-regions h1 {
|
||||
font-weight: 400;
|
||||
font-size: 2.1em;
|
||||
width: 6em;
|
||||
text-align: left;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.control-regions p {
|
||||
font-weight: 200;
|
||||
text-align: left;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.control-regions input {
|
||||
background-color: #09190B;
|
||||
color: #EDEDED;
|
||||
border: #052400;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-radius: 5px;
|
||||
font-weight: 100;
|
||||
text-align: left;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
caret-color: white;
|
||||
margin: 0px;
|
||||
padding: 6px;
|
||||
|
||||
box-sizing:border-box;
|
||||
-moz-box-sizing:border-box;
|
||||
}
|
||||
|
||||
.control-regions button {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 1em;
|
||||
padding: 0.4em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.input-container-region {
|
||||
margin-top: 3em;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.green-bar {
|
||||
background-color: #169D00;
|
||||
height: 0.2em;
|
||||
width: 50%;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.control-regions .forgot-password {
|
||||
font-size: 0.6em;
|
||||
color:#169D00;
|
||||
font-weight: 300;
|
||||
margin: 30px 0em;
|
||||
}
|
||||
|
||||
.signup-section button {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1100px) {
|
||||
.signup-section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.only-mobile {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.vertical-break {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.login-section {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1100px) {
|
||||
.only-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.control-regions {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<span class="login-section control-regions">
|
||||
<h1>Login To Finance</h1>
|
||||
<div class="green-bar"></div>
|
||||
<div class="input-container-region">
|
||||
<div class="input-container">
|
||||
<p>Email</p>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<p>Password</p>
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
<p class="forgot-password">Forgot password?</p>
|
||||
<button>
|
||||
Login
|
||||
</button>
|
||||
|
||||
<div class="only-mobile">
|
||||
<hr>
|
||||
|
||||
<button>
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="vertical-break"></span>
|
||||
|
||||
<span class="signup-section control-regions">
|
||||
<h1>Sign Up To Finance</h1>
|
||||
<div class="green-bar"></div>
|
||||
|
||||
<div class="input-container-region">
|
||||
<div class="input-container">
|
||||
<p>Email</p>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="input-container">
|
||||
<p>Password</p>
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button>
|
||||
Sign Up
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -73,6 +73,10 @@
|
|||
background-color: #609926;
|
||||
}
|
||||
|
||||
.webpagetest-button:hover {
|
||||
background-color: #00450a;
|
||||
}
|
||||
|
||||
.login-signup-button {
|
||||
font-size: 30px;
|
||||
margin: auto;
|
||||
|
|
@ -115,6 +119,11 @@
|
|||
Drive
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="webpagetest-button" href="LoginPage.html">
|
||||
Web Page Test
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue