"Fancy navbar login / sign in form"
Bootstrap 3.2.0 Snippet by abinayamuthukumar15

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <body> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="head"> <p style="text-align:center"><strong> Climate Change Information System (CLICIS)</strong></p> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a> <ul id="login-dp" class="dropdown-menu"> <li> <div class="row"> <div class="col-md-12"> Login <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Username</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Password</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required> <div class="help-block text-right"><a href="">Forget the password ?</a></div> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block">Sign in</button> </div> <div class="checkbox"> <label> <input type="checkbox"> keep me logged-in </label> </div> </form> </div> <div class="bottom text-center"> New User <a href="#"><b>Register</b></a> </div> </div> </li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> <hr> <div class="row"> <p style="text-align:justify"> Climate Change Information Service (CLICIS)@GeoSpace is an interagency project, co-lead by NEA and SLA, that aims to I.Establish an integrated and coherent geospatial climate change database, platform and analysis services to facilitate policy and decision making, including scenario based applications and simulations in addressing climate change impacts for RWG Clusters. II.Provide a platform for RWG agencies to collaborate and ensure technical coherence of their resilience studies (V & A) for RWG adaptation recommendations to IMCCC.</p> </div> <hr> <div class="row"> <p style="text-align:justify">In 2007, NEA commissioned a study involving local and foreign experts to understand our vulnerabilities to climate change. The first phase of the study covering the physical impacts of climate change has concluded. The results have been peer reviewed by international experts who noted that the study adopted well-established methodologies and that the findings are plausible. The study projects that the average daily temperature in Singapore could increase by between 2.7 to 4.2°C from the current average of 26.8°C by 2100 and the mean sea level around Singapore could rise by 24 to 65 cm by 2100. These findings are within the range of our expectations and consistent with global projections by the Intergovernmental Panel on Climate Change. These findings are not the last word on this subject as climate science is a complex and evolving subject. We are not certain, for instance, about the impact of ice sheet melting. NEA will continue to keep abreast of developments in this area. We will improve our understanding as more information and data become available and climate change models become more robust. As a result of our long-term approach to infrastructure planning, we already have some measures in place which will help address the potential impacts of climate change. For example, PUB's current requirements for reclaimed land to be constructed to a platform level of 125cm above the highest tide level should give us an adequate buffer against the projected sea level rise in the short to medium term. In addition, we are enhancing our response to the impact of floods by expanding our network of water level sensors, and we will be studying if our drainage design standards need to be revised to cater for heavier storms. NEA has embarked on a second phase of the Vulnerability Study to investigate in detail the impacts of climate change on public health, urban temperature and urban biodiversity. This will inform future adaptation measures that the government will put in place to address the longer term impacts of climate change. MND leads an inter-agency Adaptation Taskforce to review the sufficiency of Singapore's existing adaptation measures and identify new measures as necessary.</p> </div> </body>
body{ padding:50px; } #head{ background-color:white; border: none; color: #0C7AC5 ; } #head p{ background-color: white; border: none; color:#0C7AC5; } #login-dp{ min-width: 250px; padding: 14px 14px 0; overflow:hidden; } #login-dp .help-block{ font-size:12px } #login-dp .bottom{ border-top:1px solid #ddd; clear:both; padding:14px; } #login-dp .social-buttons{ margin:12px 0 } #login-dp .social-buttons a{ width: 49%; } #login-dp .form-group { margin-bottom: 10px; } .btn-fb{ color: #fff; background-color:#3b5998; } .btn-fb:hover{ color: #fff; background-color:#496ebc } .btn-tw{ color: #fff; background-color:#55acee; } .btn-tw:hover{ color: #fff; background-color:#59b5fa; } @media(max-width:768px){ #login-dp{ background-color: inherit; color: #fff; } #login-dp .bottom{ background-color: inherit; border-top:0 none; } }

Related: See More


Questions / Comments: