From 7ecfa9ec045f5a2d9d0fa945c979517663cacc68 Mon Sep 17 00:00:00 2001
From: Sabhariesh <cb.en.u4cse14238@cb.students.amrita.edu>
Date: Fri, 13 Oct 2017 23:19:30 +0530
Subject: [PATCH] Modified color schemes and landing page
---
css/la.css | 24 ++++++++-------
css/style.css | 24 +++++++++------
l.js | 12 --------
land.html | 82 +++++++++++++++++++++++++++++++++++++++++----------
4 files changed, 95 insertions(+), 47 deletions(-)
delete mode 100644 l.js
diff --git a/css/la.css b/css/la.css
index 5b90d73..b28a283 100644
--- a/css/la.css
+++ b/css/la.css
@@ -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;
diff --git a/css/style.css b/css/style.css
index b28a67e..8da9f05 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,9 +1,9 @@
.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 {
}
<!------------------------------------------------------------------ -->
-
diff --git a/l.js b/l.js
deleted file mode 100644
index 4875750..0000000
--- a/l.js
+++ /dev/null
@@ -1,12 +0,0 @@
- $("#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
diff --git a/land.html b/land.html
index b619d5c..e61a39a 100644
--- a/land.html
+++ b/land.html
@@ -3,25 +3,24 @@
<head>
<meta charset="UTF-8">
<title>Hodor</title>
-
-
-
- <link rel="stylesheet" href="css/la.css">
-
+ <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>
- </form>
- </div>
-
+ <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>
-
- <script src="l.js"></script>
+ <!--<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#login-modal">Open Modal</button> -->
+
+
+ <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>
--
GitLab