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 { ...@@ -41,11 +41,11 @@ body :-ms-input-placeholder {
background: -webkit-linear-gradient(top left, #545454 0%, #e2e2e2 100%); background: -webkit-linear-gradient(top left, #545454 0%, #e2e2e2 100%);
background: linear-gradient(to bottom right, #545454 0%, #e2e2e2 100%); background: linear-gradient(to bottom right, #545454 0%, #e2e2e2 100%);
position: absolute; position: absolute;
top: 50%; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 400px; height: 100%;
margin-top: -200px; margin-top: 0;
overflow: hidden; overflow: hidden;
} }
.wrapper.form-success .container h1 { .wrapper.form-success .container h1 {
...@@ -53,30 +53,34 @@ body :-ms-input-placeholder { ...@@ -53,30 +53,34 @@ body :-ms-input-placeholder {
transform: translateY(85px); transform: translateY(85px);
} }
.container { .container {
max-width: 600px; max-width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 80px 0; padding: 20% 0;
height: 400px; height: 100%;
text-align: center; text-align: center;
} }
.container h1 { .container h1 {
font-size: 40px; font-size: 40px;
-webkit-transition-duration: 1s; -webkit-transition-duration: 1s;
transition-duration: 1s; transition-duration: 1s;
-webkit-transition-timing-function: ease-in-put; -webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-put; transition-timing-function: ease-in-out;
font-weight: 200; font-weight: 200;
} }
form { .loginform {
padding: 20px 0; padding: 20px 0;
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
.form-group1, .form-group2 {
color: black;
}
form button { form button {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none;
outline: 0; outline: 0;
background-color: white; background-color: white;
border: 0; border: 0;
......
css/style.css
+ 15
− 9
View file @ 7ecfa9ec
.container-fluid{ .container-fluid{
background-color: #eeeeee; background-color: #000000;
} }
html { html {
background-color: #eeeeee; background-color: #000000;
} }
#hodor-logo { #hodor-logo {
...@@ -23,9 +23,9 @@ html { ...@@ -23,9 +23,9 @@ html {
padding: 15px; padding: 15px;
width: 275px; width: 275px;
font-size: 20px; font-size: 20px;
color: white; color: black;
border-radius: 0 5px 5px 0 ; border-radius: 0 5px 5px 0 ;
background-color: #000000; background-color: grey;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
font-family: 'Titillium Web', sans-serif; font-family: 'Titillium Web', sans-serif;
...@@ -39,7 +39,7 @@ html { ...@@ -39,7 +39,7 @@ html {
#sidenavbar>a>i { #sidenavbar>a>i {
position: absolute; position: absolute;
right: 10px; right: 10px;
color: #eceff1; color: #000000;
} }
#sidenavbar>#profile>i { #sidenavbar>#profile>i {
...@@ -57,14 +57,21 @@ html { ...@@ -57,14 +57,21 @@ html {
#sidenavbar a:hover { #sidenavbar a:hover {
left: 0; left: 0;
background-color: #03a9f4; background-color: grey;
} }
#sidenavbar a:hover i {
color: black;
}
#profile { #profile>i {
top: 10%; top: 10%;
} }
#profile {
top: 12.35%;
}
#dashboard { #dashboard {
top: 30%; top: 30%;
} }
...@@ -86,7 +93,7 @@ html { ...@@ -86,7 +93,7 @@ html {
} }
#logout { #logout {
bottom: 5%; top: 80%;
} }
#modal-header img { #modal-header img {
...@@ -107,4 +114,3 @@ html { ...@@ -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 @@ ...@@ -4,24 +4,23 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Hodor</title> <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"> <link rel="stylesheet" href="css/la.css">
</head> </head>
<body> <body>
<div class="wrapper"> <div class="wrapper">
<div class="container"> <div class="container">
<h1>Welcome to Hodor!</h1> <h1>Welcome to Hodor!</h1>
<div class="loginform">
<form class="form"> <form class="login">
<button type="button" id="signup-button">SignUp</button> <button type="button" id="login-button" data-toggle="modal" data-target="#login-modal">Sign-in/Sign-up</button>
<button type="button" id="login-button">Login</button>
</form> </form>
</div> </div>
<ul class="bg-bubbles"> <ul class="bg-bubbles">
<li></li> <li></li>
<li></li> <li></li>
...@@ -34,11 +33,62 @@ ...@@ -34,11 +33,62 @@
<li></li> <li></li>
<li></li> <li></li>
</ul> </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> </body>
</html> </html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment