API tools faq
paste
ayand04

login

ayand04
May 6th, 2016
84
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.30 KB | None | 0 0
raw download clone embed print report
  1. slider_popper.js
  2.  
  3.  
  4. $(document).ready(function(){
  5.  
  6. function updateContainers(){
  7. var currentWidth = window.innerWidth;
  8. if(currentWidth < 320){
  9. //code here
  10. }
  11. else if(currentWidth > 320 && currentWidth <= 480 ){
  12. $("#signup").click(function(){
  13. $("#signup_container").show("slide",{direction:'down'});
  14. });
  15. $("#signin").click(function(){
  16. $("#login_container").show("slide",{direction:'down'});
  17. });
  18. }
  19. else if(currentWidth > 480 && currentWidth <= 768){
  20. $('#signup_container').hide();
  21. $('#login_container').hide();
  22.  
  23.  
  24. $("#signup").click(function(){
  25. $("#signup_container").hide("slide",{direction:'up'});
  26. });
  27. $("#signin").click(function(){
  28. $("#login_container").hide("slide",{direction:'up'});
  29. });
  30.  
  31.  
  32. }
  33. else if(currentWidth > 768 && currentWidth <= 1024){
  34.  
  35. $('#signup_container').hide();
  36. $('#login_container').hide();
  37.  
  38. $("#signup").click(function(){
  39. $("#signup_container").hide("slide",{direction:'up'});
  40. });
  41. $("#signin").click(function(){
  42. $("#login_container").hide("slide",{direction:'up'});
  43. });
  44. }
  45. else{
  46. //width greater than 1024px
  47. }
  48. }
  49.  
  50. updateContainers();
  51.  
  52. $(window).resize(function(){
  53. updateContainers();
  54. });
  55. });
  56.  
  57.  
  58.  
  59. login.css
  60.  
  61. @charset "utf-8";
  62. /* CSS Document */
  63. html, body
  64. {
  65. width:100%;
  66. height: 100%;
  67. }
  68. body
  69. {
  70. background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)), url(../images/bg.jpg);
  71. background-attachment: fixed;
  72. background-position: center center;
  73. background-repeat: no-repeat;
  74. background-size: cover;
  75. }
  76. /*---Login Page---*/
  77. h7
  78. {
  79. font-family: 'Roboto', sans-serif;
  80. font-size:70px;
  81. color:#DDDDDD;
  82. }
  83. #container
  84. {
  85. margin-left:25%;
  86. margin-right:25%;
  87. }
  88. #greeting
  89. {
  90. width:100%;
  91. margin-top:15%;
  92. margin-bottom:15%;
  93. }
  94. #first_part, #second_part
  95. {
  96. text-align:center;
  97. }
  98. #first_part
  99. {
  100. font-size:52px;
  101. line-height:0.8;
  102. margin-bottom:30px;
  103. }
  104. #second_part
  105. {
  106. font-size:30px;
  107. }
  108. #google
  109. {
  110. background-color: #D34836;
  111. width:70%;
  112. height:35px;
  113. margin-bottom:20px;
  114. margin-left:15%;
  115. margin-right:15%;
  116. border:none;
  117. color:#FFFFFF;
  118. font-family:'Source Sans Pro', sans serif;
  119. font-size:15px;
  120. border-radius:5px;
  121. -moz-border-radius: 5px;
  122. -webkit-border-radius:5px;
  123. }
  124. #signup, #signin
  125. {
  126. font-family:'Source Sans Pro', sans serif;
  127. font-size:15px;
  128. background-color:transparent;
  129. border: solid 1px;
  130. border-color:#FFFFFF;
  131. border-radius:5px;
  132. -moz-border-radius: 5px;
  133. -webkit-border-radius:5px;
  134. color:#FFFFFF;
  135. width:33.6%;
  136. height:35px;
  137. }
  138. #signup
  139. {
  140. margin-left: 15%;
  141. margin-right:1%;
  142. }
  143. #signin
  144. {
  145. margin-right: 15%;
  146. margin-left:1%;
  147. }
  148. #signup_container, #login_container
  149. {
  150. width:50%;
  151. background-color:#FFFFFF;
  152. overflow:hidden;
  153. text-align:center;
  154. border-top: 1px solid #D1D1D1;
  155. box-shadow:0px -1px 2px #888888;
  156. -webkit-box-shadow:0px -1px 2px #888888;
  157. -moz-box-shadow:0px -1px 2px #888888;
  158. opacity:0.9;
  159. display:none;
  160. }
  161.  
  162. @media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait)
  163. {
  164. /*---Login Page---*/
  165. h7
  166. {
  167. font-family: 'Roboto', sans-serif;
  168. font-size:52px;
  169. color:#DDDDDD;
  170. }
  171. #container
  172. {
  173. margin-left:8%;
  174. margin-right:8%;
  175. }
  176. #greeting
  177. {
  178. width:100%;
  179. margin-top:28%;
  180. margin-bottom:32%;
  181. }
  182. #first_part
  183. {
  184. font-size:38px;
  185. line-height:0.8;
  186. margin-bottom:30px;
  187. }
  188. #second_part
  189. {
  190. font-size:22px;
  191. }
  192. #google
  193. {
  194. margin:0px;
  195. width:100%;
  196. margin-bottom:20px;
  197. }
  198. #signup, #signin
  199. {
  200. font-family:'Source Sans Pro', sans serif;
  201. font-size:15px;
  202. background-color:transparent;
  203. border: solid 1px;
  204. border-color:#FFFFFF;
  205. border-radius:5px;
  206. -moz-border-radius: 5px;
  207. -webkit-border-radius:5px;
  208. color:#FFFFFF;
  209. width:48%;
  210. height:35px;
  211. margin:0px;
  212. }
  213. #signin
  214. {
  215. margin-left: 3%;
  216. }
  217. #signup_container, #login_container
  218. {
  219. width:100%;
  220. overflow:hidden;
  221. text-align:center;
  222. border-top: 1px solid #D1D1D1;
  223. box-shadow:0px -1px 2px #888888;
  224. -webkit-box-shadow:0px -1px 2px #888888;
  225. -moz-box-shadow:0px -1px 2px #888888;
  226. opacity:0.9;
  227. position:absolute;
  228. bottom:0px;
  229. display:none;
  230. }
  231.  
  232. #forgot
  233. {
  234. font-size:14px;
  235. margin-top:4%;
  236. }
  237. input[type=text], input[type=email], input[type=password]
  238. {
  239. width:100%;
  240. padding-bottom:20px;
  241. padding-top:10px;
  242. padding-left:10px;
  243. padding-right:10px;
  244. -webkit-box-sizing: border-box;
  245. -moz-box-sizing: border-box;
  246. box-sizing: border-box;
  247. border:none;
  248. border-bottom: 1px solid #D1D1D1;
  249. color:#2A2929;
  250. }
  251. #join, #login
  252. {
  253. font-family:'Source Sans Pro', sans serif;
  254. font-size:15px;
  255. background-color:#111111;
  256. border: solid 1px;
  257. border-color:#111111;
  258. border-radius:5px;
  259. -moz-border-radius: 5px;
  260. -webkit-border-radius:5px;
  261. color:#FFFFFF;
  262. width:94%;
  263. height:35px;
  264. margin-left:3%;
  265. margin-right:3%;
  266. margin-top:2%;
  267. margin-bottom:5%;
  268. }
  269. }
  270.  
  271.  
  272. login.php
  273.  
  274. <!doctype html>
  275. <html>
  276. <head>
  277. <meta charset="utf-8">
  278. <title>Hungry | Get Started</title>
  279. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  280. <link href="css/global.css" rel="stylesheet">
  281. <link href="css/header.css" rel="stylesheet">
  282. <link href="css/login.css" rel="stylesheet">
  283. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
  284. <link href='https://fonts.googleapis.com/css?family=Roboto:700|Source+Sans+Pro' rel='stylesheet' type='text/css'>
  285. <script src="js/jquery-1.11.3.min.js"></script>
  286. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  287. <script src="js/slider_popper.js"></script>
  288. </head>
  289.  
  290. <body>
  291. <?php include('includes/header.php'); ?>
  292. <div id="container">
  293.  
  294. <div id="greeting">
  295. <div id="first_part">
  296. <span>Go<br></span>
  297. <span><h7>Hungry</h7><br><br></span>
  298. </div>
  299. <div id="second_part">
  300. <span><i>love,</i><br></span>
  301. <span><u>yum yum</u></span>
  302. </div>
  303. </div>
  304.  
  305. <div id="actions_container">
  306. <button id="google" type="button"><i class="fa fa-google fa-lg fa-fw" aria-hidden="true">&nbsp;</i>CONNECT WITH GOOGLE</button>
  307. <button id="signup" type="button">SIGN UP</button>
  308. <button id="signin" type="button">SIGN IN</button>
  309. </div>
  310. </div>
  311.  
  312.  
  313. <div id="signup_container">
  314. <input type="text" placeholder="First Name">
  315. <input type="text" placeholder="Last Name">
  316. <input type="email" placeholder="Email">
  317. <input type="password" placeholder="Create Password">
  318. <button id="join" type="button">JOIN YUM YUM</button>
  319. </div>
  320.  
  321. <div id="login_container">
  322. <input type="email" placeholder="Email">
  323. <input type="password" placeholder="Password">
  324. <div id="forgot">Forgot Your Password?</div>
  325. <button id="login" type="button">SIGN INTO YUM YUM</button>
  326. </div>
  327. </body>
  328. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!