Skip to content
Snippets Groups Projects
Commit 7ecfa9ec authored by Sabhariesh's avatar Sabhariesh
Browse files

Modified color schemes and landing page

parent 8ddd0d41
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
css/la.css
+ 14
− 10
View file @ 7ecfa9ec
......@@ -41,11 +41,11 @@ body :-ms-input-placeholder {
background: -webkit-linear-gradient(top left, #545454 0%, #e2e2e2 100%);
background: linear-gradient(to bottom right, #545454 0%, #e2e2e2 100%);
position: absolute;
top: 50%;
top: 0;
left: 0;
width: 100%;
height: 400px;
margin-top: -200px;
height: 100%;
margin-top: 0;
overflow: hidden;
}
.wrapper.form-success .container h1 {
......@@ -53,30 +53,34 @@ body :-ms-input-placeholder {
transform: translateY(85px);
}
.container {
max-width: 600px;
max-width: 100%;
margin: 0 auto;
padding: 80px 0;
height: 400px;
padding: 20% 0;
height: 100%;
text-align: center;
}
.container h1 {
font-size: 40px;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-put;
transition-timing-function: ease-in-put;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
font-weight: 200;
}
form {
.loginform {
padding: 20px 0;
position: relative;
z-index: 2;
}
.form-group1, .form-group2 {
color: black;
}
form button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: white;
border: 0;
......
css/style.css
+ 15
− 9
View file @ 7ecfa9ec
.container-fluid{
background-color: #eeeeee;
background-color: #000000;
}
html {
background-color: #eeeeee;
background-color: #000000;
}
#hodor-logo {
......@@ -23,9 +23,9 @@ html {
padding: 15px;
width: 275px;
font-size: 20px;
color: white;
color: black;
border-radius: 0 5px 5px 0 ;
background-color: #000000;
background-color: grey;
text-align: center;
text-decoration: none;
font-family: 'Titillium Web', sans-serif;
......@@ -39,7 +39,7 @@ html {
#sidenavbar>a>i {
position: absolute;
right: 10px;
color: #eceff1;
color: #000000;
}
#sidenavbar>#profile>i {
......@@ -57,14 +57,21 @@ html {
#sidenavbar a:hover {
left: 0;
background-color: #03a9f4;
background-color: grey;
}
#sidenavbar a:hover i {
color: black;
}
#profile {
#profile>i {
top: 10%;
}
#profile {
top: 12.35%;
}
#dashboard {
top: 30%;
}
......@@ -86,7 +93,7 @@ html {
}
#logout {
bottom: 5%;
top: 80%;
}
#modal-header img {
......@@ -107,4 +114,3 @@ html {
}
<!------------------------------------------------------------------ -->
l.js deleted 100644 → 0
+ 0
− 12
View file @ 8ddd0d41
$("#login-button").click(function(event){
event.preventDefault();
$('form').fadeOut(500);
$('.wrapper').addClass('form-success');
});
$("#signup-button").click(function(event){
event.preventDefault();
$('form').fadeOut(500);
$('.wrapper').addClass('form-success');
});
\ No newline at end of file
land.html
+ 66
− 16
View file @ 7ecfa9ec
......@@ -4,24 +4,23 @@
<meta charset="UTF-8">
<title>Hodor</title>
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/la.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<h1>Welcome to Hodor!</h1>
<form class="form">
<button type="button" id="signup-button">SignUp</button>
<button type="button" id="login-button">Login</button>
<div class="loginform">
<form class="login">
<button type="button" id="login-button" data-toggle="modal" data-target="#login-modal">Sign-in/Sign-up</button>
</form>
</div>
<ul class="bg-bubbles">
<li></li>
<li></li>
......@@ -34,11 +33,62 @@
<li></li>
<li></li>
</ul>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#login-modal">Open Modal</button> -->
<script src="l.js"></script>
<div id="login-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="pill" href="#login">Login</a></li>
<li><a data-toggle="pill" href="#register">Register</a></li>
</ul>
<div id="login" class="tab-pane fade">
<form class="form1">
<div class="form-group1">
<label for="usrname">Username</label>
<input type="text" class="form-control" id="usrname">
</div>
<div class="form-group1">
<label for="pword">Password:</label>
<input type="password" class="form-control" id="pword">
</div>
<button type="submit" class="btn btn-success" style="align-self: center">Login</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</form>
</div>
<div id="register" class="tab-pane fade">
<form class="form2">
<div class="form-group2">
<label for="name">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group2">
<label for="uname">Username</label>
<input type="text" class="form-control" id="uname">
</div>
<div class="form-group2">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group2">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<label for="rpwd"> Re-enter Password:</label>
<input type="password" class="form-control" id="rpwd">
</div>
<button type="submit" class="btn btn-success" style="align-self: center">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment