Topic: Login box to stop at center of page

iliketheinterwebs pro asked 5 years ago


How do I get the login box to stop at the center of the page?  Currently, the animation takes it all the way to the left, but I want it to stop in the center.  I think the problem is because I removed another text box from one of your sample intro pages but I'm not sure how to adjust for the difference in the animation.

TIA

HTML

<!DOCTYPE html>
 <html lang="en">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <title>Permitting for PMNM</title>
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <!-- Bootstrap core CSS -->
 <link href="css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="css/mdb.min.css" rel="stylesheet">
 <!-- Your custom styles (optional) -->
 <link href="css/login.css" rel="stylesheet">
 </head>

<!-- Start your project here-->
 <body>
 <!-- Main navigation -->
 <header>
 <!--Navbar-->
 <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">
 <div class="container">
 <a class="navbar-brand" href="#">
 <strong>PMNM Permitting</strong>
 </a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7" aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarSupportedContent-7">
 <ul class="navbar-nav mr-auto">
 <li class="nav-item active">
 <a class="nav-link" href="#">Home
 <span class="sr-only">(current)</span>
 </a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">FAQ</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Contact</a>
 </li>
 </ul>
 </div>
 </div>
 </nav>
 <!-- Navbar -->
 <!-- Full Page Intro -->
 <div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url('/img/sea-turtle.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
 <!-- Mask & flexbox options-->
 <div class="mask rgba-black-strong d-flex justify-content-center align-items-center">
 <!-- Content -->
 <div class="container">
 <!--Grid column-->
 <div class="col-md-6 col-xl-5 mb-4">
 <!--Form-->
 <div class="card wow fadeInRight" data-wow-delay="0.3s">
 <div class="card-body">
 <!--Header-->
 <div class="text-center">
 <h3 class="white-text">
 <i class="fa fa-user white-text"></i> Login:</h3>
 </div>
 <!--Body-->
 <div class="md-form">
 <i class="fa fa-user prefix white-text active"></i>
 <input type="text" id="form3" class="white-text form-control">
 <label for="form3" class="active">Your name</label>
 </div>
 <div class="md-form">
 <i class="fa fa-envelope prefix white-text active"></i>
 <input type="email" id="form2" class="white-text form-control">
 <label for="form2" class="active">Your email</label>
 </div>
 <div class="md-form">
 <i class="fa fa-lock prefix white-text active"></i>
 <input type="password" id="form4" class="white-text form-control">
 <label for="form4">Your password</label>
 </div>
 <div class="text-center mt-4">
 <button class="btn peach-gradient">Login</button>
 </div>
 </div>
 </div>
 <!--/.Form-->
 </div>
 <!--Grid column-->
 </div>
 <!--Grid row-->
 </div>
 <!-- Content -->
 </div>
 <!-- Mask & flexbox options-->
 </div>
 <!-- Full Page Intro -->
 </header>
 <!-- Main navigation -->

<!--Main Layout-->
 <!--
 <main>

</main>
 -->
 <!--Main Layout-->

<!-- Footer -->
 <footer class="page-footer font-small stylish-color-dark pt-4 mt-4">

<!-- Footer Links -->
 <div class="container text-center text-md-left">

<!-- Grid row -->
 <div class="row">

<!-- Grid column -->
 <div class="col-md-4 mx-auto">

<!-- Content -->
 <h5 class="font-weight-bold text-uppercase mt-3 mb-4">About Papahānaumokuākea Online Permitting</h5>
 <p>This online permitting system allows you to apply to conduct activities within Papahānaumokuākea Marine National Monument. </p>
 </br>
 <p>Once your application is completed using this online permitting system, you will be able to manage your applications, obtain status updates, and subsequently report on your permitting activities.</p>

</div>
 <!-- Grid column -->

<hr class="clearfix w-100 d-md-none">

<!-- Grid column -->
 <div class="col-md-2 mx-auto">

<!-- Links -->
 <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Instructions</h5>

<ul class="list-unstyled">
 <li>
 <a href="#!">Link 1</a>
 </li>
 <li>
 <a href="#!">Link 2</a>
 </li>
 <li>
 <a href="#!">Link 3</a>
 </li>
 <li>
 <a href="#!">Link 4</a>
 </li>
 </ul>

</div>
 <!-- Grid column -->

<hr class="clearfix w-100 d-md-none">

<!-- Grid column -->
 <div class="col-md-2 mx-auto">

<!-- Links -->
 <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Permit Deadlines</h5>

<ul class="list-unstyled">
 <li>
 <a href="#!">Link 1</a>
 </li>
 <li>
 <a href="#!">Link 2</a>
 </li>
 <li>
 <a href="#!">Link 3</a>
 </li>
 <li>
 <a href="#!">Link 4</a>
 </li>
 </ul>

</div>
 <!-- Grid column -->

<hr class="clearfix w-100 d-md-none">

<!-- Grid column -->
 <div class="col-md-2 mx-auto">

<!-- Links -->
 <h5 class="font-weight-bold text-uppercase mt-3 mb-4">Contact Us</h5>

<ul class="list-unstyled">
 <li>
 <a href="#!">Link 1</a>
 </li>
 <li>
 <a href="#!">Link 2</a>
 </li>
 <li>
 <a href="#!">Link 3</a>
 </li>
 <li>
 <a href="#!">Link 4</a>
 </li>
 </ul>

</div>
 <!-- Grid column -->

</div>
 <!-- Grid row -->

</div>
 <!-- Footer Links -->

<hr>

<!-- Call to action -->
 <ul class="list-unstyled list-inline text-center py-2">
 <li class="list-inline-item">
 <h5 class="mb-1">Create an account for free</h5>
 </li>
 <li class="list-inline-item">
 <a href="#!" class="btn peach-gradient btn-lg">Sign up</a>
 </li>
 </ul>
 <!-- Call to action -->

<hr>

<!-- Social buttons -->
 <ul class="list-unstyled list-inline text-center">
 <li class="list-inline-item">
 <a class="btn-floating btn-fb mx-1">
 <i class="fa fa-facebook"> </i>
 </a>
 </li>
 <li class="list-inline-item">
 <a class="btn-floating btn-tw mx-1">
 <i class="fa fa-twitter"> </i>
 </a>
 </li>
 </ul>
 <!-- Social buttons -->

<!-- Copyright -->
 <div class="footer-copyright text-center py-3">© 2017 Copyright:
 <a href="https://papahanaumokuakea.gov"> Papahānaumokuākea Marine National Monument</a>
 </div>
 <!-- Copyright -->

</footer>
 <!-- Footer -->

<!-- SCRIPTS -->
 <!-- JQuery -->
 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 <!-- Bootstrap tooltips -->
 <script type="text/javascript" src="js/popper.min.js"></script>
 <!-- Bootstrap core JavaScript -->
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="js/mdb.min.js"></script>

<script>
 // Animations initialization
 new WOW().init();
 </script>

</body>

</html>



CSS:

Start your code here

/* Required for full background image */

html,
 body,
 header,
 .view {
 height: 100%;
 }

@media (max-width: 740px) {
 html,
 body,
 header,
 .view {
 height: 1000px;
 }
 }
 @media (min-width: 800px) and (max-width: 850px) {
 html,
 body,
 header,
 .view {
 height: 650px;
 }
 }

.top-nav-collapse {
 background-color: #3f51b5 !important;
 }

.navbar:not(.top-nav-collapse) {
 background: transparent !important;
 }

@media (max-width: 768px) {
 .navbar:not(.top-nav-collapse) {
 background: #3f51b5 !important;
 }
 }
 @media (min-width: 800px) and (max-width: 850px) {
 .navbar:not(.top-nav-collapse) {
 background: #3f51b5 !important;
 }
 }

.rgba-gradient {
 background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%);
 background: -webkit-gradient(linear, 45deg, from(rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%)));
 background: linear-gradient(to 45deg, rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%);
 }

.card {
 background-color: rgba(126, 123, 215, 0.2);
 }

.md-form label {
 color: #ffffff;
 }

h6 {
 line-height: 1.7;
 }

Marta Wierzbicka staff answered 5 years ago


Hi, change these lines:
<!-- Mask & flexbox options-->
<div class="mask rgba-black-strong d-flex justify-content-center align-items-center">
 <!-- Content -->
 <div class="container">
to these ones:
<!-- Mask & flexbox options-->
<div class="mask rgba-black-strong">
 <!-- Content -->
 <div class="container d-flex justify-content-center align-items-center h-100">
Best, Marta

iliketheinterwebs pro commented 5 years ago

Thank you this worked!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags