API tools faq
paste
ayand04

updated JS and CSS

ayand04
May 8th, 2016
47
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.35 KB | None | 0 0
raw download clone embed print report
  1. CSS
  2.  
  3. @charset "utf-8";
  4. /* CSS Document */
  5.     html, body
  6.     {
  7.         width:100%;
  8.         height: 100%;
  9.     }
  10.     body
  11.     {
  12.         background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)), url(../images/bg.jpg);
  13.         background-attachment: fixed;
  14.         background-position: center center;
  15.         background-repeat: no-repeat;
  16.         background-size: cover;
  17.     }
  18.     /*---Login Page---*/
  19.     h7
  20.     {
  21.         font-family: 'Roboto', sans-serif;
  22.         font-size:70px;
  23.         color:#DDDDDD;
  24.     }
  25.     #container
  26.     {
  27.         margin-left:25%;
  28.         margin-right:25%;
  29.     }
  30.     #greeting
  31.     {
  32.         width:100%;
  33.         margin-top:15%;
  34.         margin-bottom:15%;
  35.     }
  36.     #first_part, #second_part
  37.     {
  38.         text-align:center;
  39.     }
  40.     #first_part
  41.     {
  42.         font-size:52px;
  43.         line-height:0.8;
  44.         margin-bottom:30px;
  45.     }
  46.     #second_part
  47.     {
  48.         font-size:30px;
  49.     }
  50.     #google
  51.     {
  52.         background-color: #D34836;
  53.         width:70%;
  54.         height:35px;
  55.         margin-bottom:20px;
  56.         margin-left:15%;
  57.         margin-right:15%;
  58.         border:none;
  59.         color:#FFFFFF;
  60.         font-family:'Source Sans Pro', sans serif;
  61.         font-size:15px;
  62.         border-radius:5px;
  63.         -moz-border-radius: 5px;
  64.         -webkit-border-radius:5px;
  65.     }
  66.     #signup, #signin
  67.     {
  68.         font-family:'Source Sans Pro', sans serif;
  69.         font-size:15px;
  70.         background-color:transparent;
  71.         border: solid 1px;
  72.         border-color:#FFFFFF;
  73.         border-radius:5px;
  74.         -moz-border-radius: 5px;
  75.         -webkit-border-radius:5px;
  76.         color:#FFFFFF;
  77.         width:33.6%;
  78.         height:35px;
  79.     }
  80.     #signup
  81.     {
  82.         margin-left: 15%;
  83.         margin-right:1%;
  84.     }
  85.     #signin
  86.     {
  87.         margin-right: 15%;
  88.         margin-left:1%;
  89.     }
  90.    
  91.    
  92.    
  93.     #signup_container, #login_container
  94.     {
  95.         overflow:hidden;
  96.         text-align:center;
  97.         border-top: 1px solid #D1D1D1;
  98.         box-shadow:0px -1px 2px #888888;
  99.         -webkit-box-shadow:0px -1px 2px #888888;
  100.         -moz-box-shadow:0px -1px 2px #888888;
  101.         opacity:0.9;
  102.         position:absolute;
  103.         bottom:0px;
  104.         display:none;
  105.         background-color:#FFFFFF;
  106.     }
  107.     .wideActive
  108.     {
  109.         margin:25%;
  110.         width:50%;
  111.     }
  112.     .narrowActive
  113.     {
  114.         margin:0;
  115.         width:100%;
  116.     }
  117.     #forgot
  118.     {
  119.         font-size:14px;
  120.         margin-top:4%;
  121.     }
  122.     input[type=text], input[type=email], input[type=password]
  123.     {
  124.         width:100%;
  125.         padding-bottom:20px;
  126.         padding-top:10px;
  127.         padding-left:10px;
  128.         padding-right:10px;
  129.         -webkit-box-sizing: border-box;
  130.         -moz-box-sizing: border-box;
  131.         box-sizing: border-box;
  132.         border:none;
  133.         border-bottom: 1px solid #D1D1D1;
  134.         color:#2A2929;
  135.     }
  136.     #join, #login
  137.     {
  138.         font-family:'Source Sans Pro', sans serif;
  139.         font-size:15px;
  140.         background-color:#111111;
  141.         border: solid 1px;
  142.         border-color:#111111;
  143.         border-radius:5px;
  144.         -moz-border-radius: 5px;
  145.         -webkit-border-radius:5px;
  146.         color:#FFFFFF;
  147.         width:94%;
  148.         height:35px;
  149.         margin-left:3%;
  150.         margin-right:3%;
  151.         margin-top:2%;
  152.         margin-bottom:5%;
  153.     }
  154.  
  155.    
  156. @media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait)
  157. {
  158.     /*---Login Page---*/
  159.     h7
  160.     {
  161.         font-family: 'Roboto', sans-serif;
  162.         font-size:52px;
  163.         color:#DDDDDD;
  164.     }
  165.     #container
  166.     {
  167.         margin-left:8%;
  168.         margin-right:8%;
  169.     }
  170.     #greeting
  171.     {
  172.         width:100%;
  173.         margin-top:28%;
  174.         margin-bottom:32%;
  175.     }
  176.     #first_part
  177.     {
  178.         font-size:38px;
  179.         line-height:0.8;
  180.         margin-bottom:30px;
  181.     }
  182.     #second_part
  183.     {
  184.         font-size:22px;
  185.     }
  186.     #google
  187.     {
  188.         margin:0px;
  189.         width:100%;
  190.         margin-bottom:20px;
  191.     }
  192.     #signup, #signin
  193.     {
  194.         font-family:'Source Sans Pro', sans serif;
  195.         font-size:15px;
  196.         background-color:transparent;
  197.         border: solid 1px;
  198.         border-color:#FFFFFF;
  199.         border-radius:5px;
  200.         -moz-border-radius: 5px;
  201.         -webkit-border-radius:5px;
  202.         color:#FFFFFF;
  203.         width:48%;
  204.         height:35px;
  205.         margin:0px;
  206.     }
  207.     #signin
  208.     {
  209.         margin-left: 3%;
  210.     }
  211.  
  212.     input[type=text], input[type=email], input[type=password]
  213.     {
  214.         width:100%;
  215.         padding-bottom:20px;
  216.         padding-top:10px;
  217.         padding-left:10px;
  218.         padding-right:10px;
  219.         -webkit-box-sizing: border-box;
  220.         -moz-box-sizing: border-box;
  221.         box-sizing: border-box;
  222.         border:none;
  223.         border-bottom: 1px solid #D1D1D1;
  224.         color:#2A2929;
  225.     }
  226.     #join, #login
  227.     {
  228.         font-family:'Source Sans Pro', sans serif;
  229.         font-size:15px;
  230.         background-color:#111111;
  231.         border: solid 1px;
  232.         border-color:#111111;
  233.         border-radius:5px;
  234.         -moz-border-radius: 5px;
  235.         -webkit-border-radius:5px;
  236.         color:#FFFFFF;
  237.         width:94%;
  238.         height:35px;
  239.         margin-left:3%;
  240.         margin-right:3%;
  241.         margin-top:2%;
  242.         margin-bottom:5%;
  243.     }
  244.     #signup_container, #login_container{
  245.          display: none;
  246.     }
  247. }
  248. @media screen and (min-width: 480px){
  249.      #signup_container, #login_container{
  250.          display: none;
  251.      }
  252. }
  253.  
  254.  
  255. JS
  256.  
  257. $(document).ready(function(){
  258.         $(window).resize(function()
  259.         {  
  260.             var currentWidth = window.innerWidth;
  261.             $('#signup_container:visible').hide();
  262.             $('#login_container:visible').hide();
  263.             if(currentWidth > 320 && currentWidth <= 480 ){
  264.                 $('#signup').click(function(){
  265.                     $('#signup_container').removeClass().addClass('narrowActive').show("slide",{direction:'down'});
  266.                 });
  267.                 $('#signin').click(function(){
  268.                     $('#login_container').removeClass().addClass('narrowActive').show("slide",{direction:'down'});
  269.                 });      
  270.             }
  271.             else if(currentWidth > 480){
  272.                 $('#signup').click(function(){
  273.                     $('#signup_container').removeClass().addClass('wideActive').fadeIn('slow');
  274.                 });
  275.                 $('#signin').click(function(){
  276.                     $('#login_container').removeClass().addClass('wideActive').fadeIn('slow');
  277.                 });
  278.  
  279.             }
  280.         }).resize();
  281. });
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!