Rate these docs

Vue Bootstrap Intro Sections

Vue Intro Sections - Bootstrap 4 & Material Design

Vue Bootstrap Intro Sections are full-page templates which can make Your website outstanding.

Use one of the stunning, full-page intros to make your website outstanding.

1. App intro

2. Contact Form intro

3. Call to Action Buttons intro

4. Parallax Effect intro

5. Classic Register Form intro

6. Video Background Intro

7. Minimalist intro


App intro MDB Pro component

Display of full page app intro page.

                    <div>
                        <!--Navbar-->
                        <mdb-navbar :color="'primary'" position="top" dark href="#" transparent scrolling>
                          <mdb-container>
                            <mdb-navbar-brand href="#"><strong>MDB</strong></mdb-navbar-brand>
                            <mdb-navbar-toggler style="max-width: 1140px">
                              <mdb-navbar-nav left>
                                <mdb-nav-item href="#" waves-fixed active>Home</mdb-nav-item>
                                <mdb-nav-item href="#" waves-fixed>Link</mdb-nav-item>
                                <mdb-nav-item href="#" waves-fixed>Profile</mdb-nav-item>
                              </mdb-navbar-nav>
                              <!--Search form -->
                              <mdb-navbar-nav right>
                                <form>
                                  <mdb-input type="text" class="text-white f-flex" placeholder="Search" aria-label="Search" navInput waves waves-fixed/>
                                </form>
                              </mdb-navbar-nav>
                              <!--/.Search form -->
                            </mdb-navbar-toggler>
                          </mdb-container>
                        </mdb-navbar>
                        <!--/.Navbar-->
                        <!--ViewWrapper-->
                        <mdb-view>
                          <mdb-mask class="gradient d-flex justify-content-center align-items-center">
                            <mdb-container>
                              <mdb-row>
                                <div class="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5">
                                  <h1 class="h1-responsive font-weight-bold mt-sm-5">Make purchases with our app </h1>
                                  <hr class="hr-light"/>
                                  <h6 class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt
                                  dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae
                                  iste.</h6>
                                  <mdb-btn color="white">Download</mdb-btn>
                                  <mdb-btn outline="white">Learn More</mdb-btn>
                                </div>
                                <mdb-col md="6" xl="5" class="mt-xl-5">
                                  <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/admin-new.png" class="img-fluid"/>
                                </mdb-col>
                              </mdb-row>
                            </mdb-container>
                          </mdb-mask>
                        </mdb-view>
                        <!--/.ViewWrapper-->
                    
                        <mdb-container>
                          <mdb-row class="py-5">
                            <col md="12" class="text-center">
                              <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                              </p>
                          </mdb-row>
                        </mdb-container>
                      </div>
                

                    import { mdbContainer, mdbRow, mdbCol, mdbNavbar, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbInput, mdbView, mdbMask, mdbBtn, mdbNavbarBrand } from 'mdbvue';

                    export default {
                      name: 'AppPage',
                      components: {
                        mdbContainer,
                        mdbRow,
                        mdbCol,
                        mdbNavbar,
                        mdbNavbarToggler,
                        mdbNavbarNav,
                        mdbNavItem,
                        mdbInput,
                        mdbView,
                        mdbMask,
                        mdbBtn,
                        mdbNavbarBrand
                      }
                    };
              

.navbar .md-form {
  margin: 0;
}
.top-nav-collapse {
  background-color: #424f95 !important;
}
@media (max-width: 990px){
  .navbar {
    background-color: #424f95 !important;
  }
}
.view {
  background-image: url('https://mdbootstrap.com/img/Photos/Others/architecture.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: calc(100vh - 60px);
}
.gradient {
  background: -moz-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
  background: -webkit-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
  background: -webkit-gradient(linear, 45deg, from(rgba(42, 27, 161, 0.7)), to(rgba(29, 210, 177, 0.7)));
  background: -o-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
  background: linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
}
h6 {
  line-height: 1.7;
}
                

Contact Form intro MDB Pro component

Display of full page contact form intro

  <div>
    <header>
      <!--mdbNavbar-->
      <mdb-navbar position="top" dark scrolling transparent>
          <mdb-navbar-toggler style="max-width: 1140px;" class="mx-auto">
            <mdb-navbar-brand href="#"><strong>MDB</strong></mdb-navbar-brand>
            <mdb-navbar-nav>
              <mdb-nav-item href="#" waves-fixed active>Home</mdb-nav-item>
              <mdb-nav-item href="#" waves-fixed>Link</mdb-nav-item>
              <mdb-nav-item href="#" waves-fixed>Profile</mdb-nav-item>
            </mdb-navbar-nav>
            <!--Search form -->
            <form>
              <mdb-input type="text" class="text-white f-flex" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
            </form>
            <!--/.Search form -->
          </mdb-navbar-toggler>
      </mdb-navbar>
      <!--/.mdbNavbar-->

      <!--mdbView-->
      <mdb-view>
        <mdb-mask overlay="indigo-strong" class="d-flex justify-content-center align-items-center">
          <mdb-container>
              <!--Grid row-->
              <mdb-row class="pt-lg-5 mt-lg-5">
                <!--Grid column-->
                <mdb-col md="6" class="mb-5 mt-md-0 mt-5 white-text text-center text-md-left">
                  <h1 class="display-4 font-weight-bold">Lorem ipsum</h1>
                  <hr class="hr-light">
                  <h6 class="mb-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga
                  nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea
                  dolor molestiae, quisquam iste.</h6>
                  <mdb-btn outline="white">Learn more</mdb-btn>
                </mdb-col>
                <!--Grid column-->
                <!--Grid column-->
                <mdb-col md="6" xl="5" class="mb-4">
                  <!--Form-->
                  <mdb-card>
                    <mdb-card-body class="z-depth-2">
                      <!--Header-->
                      <div class="text-center">
                        <h3 class="dark-grey-text">
                          <strong>Write to us:</strong>
                        </h3>
                        <hr>
                      </div>
                      <!--Body-->
                      <div class="md-form">
                      <!--Input with icon prefix-->
                        <mdb-input type="text" icon="user" iconClass="grey-text" label="Your name" id="form-name"/>
                        <mdb-input type="text" icon="envelope" iconClass="grey-text" label="Your mail" id="form-email"/>
                        <!--Textarea with icon prefix-->
                        <mdb-textarea icon="pencil" iconClass="grey-text" label="Your message" id="form-text" :rows="3"/>
                      </div>
                      <div class="text-center mt-3">
                        <mdb-btn color="indigo">Send</mdb-btn>
                        <hr>
                        <fieldset class="form-check">
                          <mdb-input type="checkbox" label="Subscribe me to the newsletter" id="form-subscribe" inline/>
                        </fieldset>
                      </div>
                    </mdb-card-body>
                  </mdb-card>
                  <!--/.Form-->
                </mdb-col>
                <!--Grid column-->
              </mdb-row>
              <!--Grid row-->
          </mdb-container>
        </mdb-mask>
      </mdb-view>
      <!--/.mdbView-->
    </header>

    <main>
      <mdb-container>
        <mdb-row class="py-5">
          <mdb-col md="12" class="text-center">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </mdb-col>
        </mdb-row>
      </mdb-container>
    </main>
  </div>


import { mdbNavbar, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbInput, mdbTextarea, mdbView, mdbMask, mdbRow, mdbCol, mdbContainer, mdbBtn, mdbCard, mdbCardBody, mdbNavbarBrand } from 'mdbvue';

export default {
  name: 'ContactFormPage',
  components: {
    mdbNavbar,
    mdbNavbarToggler,
    mdbNavbarNav,
    mdbNavItem,
    mdbInput,
    mdbTextarea,
    mdbView,
    mdbMask,
    mdbRow,
    mdbCol,
    mdbContainer,
    mdbBtn,
    mdbCard,
    mdbCardBody,
    mdbNavbarBrand
  }
};
                

.navbar .md-form {
  margin: 0;
}
.top-nav-collapse {
    background-color: #39448c !important;
}
@media (max-width: 990px){
  .navbar {
    background-color: #424f95 !important;
  }
}
.view {
  background-image: url(https://mdbootstrap.com/img/Photos/Others/images/89.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: calc(100vh - 60px);
}
h6 {
    line-height: 1.7;
}
                

Call to Action Buttons intro MDB Pro component

Display of a full page intro page with call to action buttons

                  <div>
                      <!--Navbar-->
                      <mdb-navbar position="top" href="#" transparent scrolling>
                        <mdb-container>
                          <mdb-navbar-brand href="#"><strong>MDB</strong></mdb-navbar-brand>
                          <mdb-navbar-toggler style="max-width: 1140px">
                            <mdb-navbar-nav left>
                              <mdb-nav-item waves-fixed active>Home</mdb-nav-item>
                              <mdb-nav-item waves-fixed>Link</mdb-nav-item>
                              <mdb-nav-item waves-fixed>Profile</mdb-nav-item>
                            </mdb-navbar-nav>
                            <!--Search form -->
                            <mdb-navbar-nav right>
                              <form>
                                <mdb-input type="text" class="text-white f-flex" placeholder="Search" aria-label="Search" navInput waves waves-fixed/>
                              </form>
                            </mdb-navbar-nav>
                            <!--/.Search form -->
                          </mdb-navbar-toggler>
                        </mdb-container>
                      </mdb-navbar>
                      <!--/.Navbar-->
                  
                      <mdb-parallax
                        src="https://mdbootstrap.com/img/Photos/Others/gradient2.png"
                        height="full"
                        factor="2"
                      >
                        <mdb-mask overlay="purple-slight" color="#78909c" class="d-flex justify-content-center align-items-center">
                          <mdb-container>
                            <mdb-row class="mt-5 pt-5">
                              <mdb-col md="12" class="text-center">
                                <h1 class="h1-reponsive font-weight-bold">
                                  <strong>Our New Course is Ready</strong>
                                </h1>
                                <h5 class="mb-5 pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5">It comes with a lot of new features, easy to follow videos and images. Check it out now!</h5>
                                <mdb-btn color="purple" rounded icon="user">sign up!</mdb-btn>
                                <mdb-btn outline="purple" rounded>learn more</mdb-btn>
                              </mdb-col>
                            </mdb-row>
                          </mdb-container>
                        </mdb-mask>
                      </mdb-parallax>
                      <main>
                        <mdb-container>
                          <mdb-row class="py-5">
                            <mdb-col md="12" class="text-center">
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  
                              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
                  
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                  
                              <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
                            </mdb-col>
                          </mdb-row>
                        </mdb-container>
                      </main>
                    </div>
              

    import { mdbContainer, mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbInput, mdbParallax, mdbMask, mdbRow, mdbCol, mdbBtn } from 'mdbvue';
    export default {
      name: 'CallToActionButtonsIntro',
      components: {
        mdbContainer,
        mdbNavbar,
        mdbNavbarToggler,
        mdbNavbarBrand,
        mdbNavbarNav,
        mdbNavItem,
        mdbInput,
        mdbParallax,
        mdbMask,
        mdbRow,
        mdbCol,
        mdbBtn
      }
    };
              

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

Parallax Effect intro MDB Pro component

Display of intro page with a minimalistic form

                  <div>
                      <mdb-navbar position="top" color="light-blue" dark transparent scrolling>
                        <mdb-container>
                          <mdb-navbar-brand href="#"><strong>MDB</strong></mdb-navbar-brand>
                          <mdb-navbar-toggler style="max-width: 1140px">
                            <mdb-navbar-nav left>
                              <mdb-nav-item waves-fixed active>Home</mdb-nav-item>
                              <mdb-nav-item waves-fixed>Link</mdb-nav-item>
                              <mdb-nav-item waves-fixed>Profile</mdb-nav-item>
                            </mdb-navbar-nav>
                            <!--Search form -->
                            <mdb-navbar-nav right>
                              <form>
                                <mdb-input type="text" class="text-white f-flex" placeholder="Search" aria-label="Search" navInput waves waves-fixed/>
                              </form>
                            </mdb-navbar-nav>
                            <!--/.Search form -->
                          </mdb-navbar-toggler>
                        </mdb-container>
                      </mdb-navbar>
                  
                      <mdb-parallax
                        src="https://mdbootstrap.com/img/Photos/Others/images/76.jpg'"
                        height="full"
                        factor="1.3"
                        >
                        <mdb-mask overlay="blue-slight" flexCenter>
                          <mdb-row class="mb-5 pb-5 text-center white-text">
                            <mdb-col md="12" xl="8" class="mx-auto">
                              <h1 class="display-3 font-weight-bold">Natalie <a class="indigo-text">Smith</a></h1>
                              <h5 class="font-weight-bold pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5">Web developer & graphic designer</h5>
                              <mdb-btn size="lg" color="light-blue">portfolio</mdb-btn>
                              <mdb-btn size="lg" color="indigo">about me</mdb-btn>
                            </mdb-col>
                          </mdb-row>
                        </mdb-mask>
                      </mdb-parallax>
                      <main>
                        <mdb-container>
                            <!--Grid row-->
                            <mdb-row class="py-5">
                  
                              <!--Grid column-->
                              <mdb-col md="12" class="text-center">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
                  
                              </mdb-col>
                              <!--Grid column-->
                            </mdb-row>
                            <!--Grid row-->
                        </mdb-container>
                      </main>
                    </div>
              

    import { mdbNavbar, mdbNavbarBrand, mdbNavbarToggler, mdbNavbarNav, mdbNavItem, mdbInput, mdbContainer, mdbParallax, mdbMask, mdbRow, mdbCol, mdbBtn } from 'mdbvue';
    export default {
      name: 'ParallaxPage',
      components: {
        mdbNavbar,
        mdbNavbarBrand,
        mdbNavbarToggler,
        mdbNavbarNav,
        mdbNavItem,
        mdbInput,
        mdbContainer,
        mdbParallax,
        mdbMask,
        mdbRow,
        mdbCol,
        mdbBtn
      }
    };
              

                  .top-nav-collapse {
                    background-color: #82b1ff !important;
                  }
                  
                  h1, h5 {
                    text-transform: uppercase;
                  }
                  
                  h5 {
                    letter-spacing: 3px;
                  }
              

Classic Register Form intro MDB Pro component

Display of a page with a classic register form.

                    <div class="classic-form-page">
                        <mdb-navbar style="margin-top: 60px" :color="'primary'" position="top" dark href="#" transparent scrolling>
                          <mdb-container>
                            <mdbNavbarBrand href="#"><strong>MDB</strong></mdbNavbarBrand>
                            <mdb-navbar-toggler style="max-width: 1140px">
                              <mdb-navbar-nav left>
                                <mdb-nav-item href="#" waves-fixed active>Home</mdb-nav-item>
                                <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                                <mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
                              </mdb-navbar-nav>
                              <form>
                                <mdb-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
                              </form>
                            </mdb-navbar-toggler>
                          </mdb-container>
                        </mdb-navbar>
                    
                        <view-wrapper>
                          <mdb-mask class="d-flex gradient justify-content-center align-items-center">
                            <mdb-container>
                              <mdb-row>
                                <div class="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5">
                                  <h1 class="h1-responsive font-weight-bold">Sign up right now! </h1>
                                  <hr class="hr-light"/>
                                  <h6 class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellendus quasi fuga nesciunt dolorum nulla magnam veniam sapiente, fugiat! Commodi sequi non animi ea dolor molestiae, quisquam iste, maiores. Nulla.</h6>
                                  <mdb-btn outline="white" color="white">Learn More</mdb-btn>
                                </div>
                                <mdb-col md="6" xl="5" class="mb-4">
                                  <mdb-card id="classic-card">
                                    <mdb-card-body class="z-depth-2 white-text">
                                      <h3 class="text-center"><mdb-icon icon="user"/> Register:</h3>
                                      <hr class="hr-light"/>
                                      <mdb-input label="Your name" labelColor="white" icon="user"/>
                                      <mdb-input label="Your email" labelColor="white" icon="envelope"/>
                                      <mdb-input label="Your password" labelColor="white" icon="lock" type="password"/>
                                      <div class="text-center mt-4 black-text">
                                        <mdb-btn color="indigo">Sign Up</mdb-btn>
                                        <hr class="hr-light"/>
                                        <div class="text-center d-flex justify-content-center white-label">
                                          <a class="p-2 m-2">
                                            <mdb-icon fab icon="twitter" class="white-text"/>
                                          </a>
                                          <a class="p-2 m-2">
                                            <mdb-icon fab icon="linkedin" class="white-text"/>
                                          </a>
                                          <a class="p-2 m-2">
                                            <mdb-icon fab icon="instagram" class="white-text"/>
                                          </a>
                                        </div>
                                      </div>
                                    </mdb-card-body>
                                  </mdb-card>
                                </mdb-col>
                              </mdb-row>
                            </mdb-container>
                          </mdb-mask>
                        </view-wrapper>
                    
                        <mdb-container>
                          <mdb-row class="py-5">
                            <mdb-col md="12" class="text-center">
                              <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                              </p>
                            </mdb-col>
                          </mdb-row>
                        </mdb-container>
                      </div>
                

      import { mdbContainer, mdbRow, mdbCol, mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, ViewWrapper, mdbMask, mdbBtn, mdbCard, mdbCardBody, mdbInput, mdbIcon, mdbNavbarBrand } from 'mdbvue';

      export default {
        name: 'ClassicFormPage',
        components: {
          mdbContainer,
          mdbRow,
          mdbCol,
          mdbNavbar,
          mdbNavItem,
          mdbNavbarNav,
          mdbNavbarToggler,
          ViewWrapper,
          mdbMask,
          mdbBtn,
          mdbCard,
          mdbCardBody,
          mdbInput,
          mdbIcon,
          mdbNavbarBrand
        }
      };
                

                    .classic-form-page .view {
                      background-image: url('http://mdbootstrap.com/img/Photos/Others/images/91.jpg');
                      background-repeat: no-repeat;
                      background-size: cover;
                      background-position: center center;
                      height: calc(100vh - 60px);
                    }
                    
                    .classic-form-page .gradient {
                      background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%);
                      background: linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%);
                    }
                    
                    .classic-form-page .card {
                      background-color: rgba(126, 123, 215, 0.2);
                    }
                    
                    .classic-form-page h6 {
                      line-height: 1.7;
                    }
                    
                    .classic-form-page .navbar {
                      transition: background .5s ease-in-out,padding .5s ease-in-out;
                    }
                    
                    .classic-form-page .navbar .md-form {
                      margin: 0;
                    }
                    
                    .top-nav-collapse {
                      background: #424f95 !important;
                    }
                    
                    @media (max-width: 768px) {
                      .classic-form-page .navbar:not(.top-nav-collapse) {
                          background: #424f95 !important;
                      }
                    }
                    
                    .classic-form-page label {
                      color: #fff!important;
                    }
                

Video background intro MDB Pro component

Display of intro page with video

                    <div class="video-background-page">
                        <mdb-navbar style="margin-top: 60px" color="primary" position="top" dark href="#" transparent scrolling>
                          <mdb-container>
                            <mdbNavbarBrand href="#"><strong>MDB</strong></mdbNavbarBrand>
                            <mdb-navbar-toggler style="max-width: 1140px">
                              <mdb-navbar-nav left>
                                <mdb-nav-item href="#" waves-fixed>Home</mdb-nav-item>
                                <mdb-nav-item href="#" waves-fixed>About</mdb-nav-item>
                                <mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
                                <mdb-nav-item href="#" waves-fixed>Services</mdb-nav-item>
                                <mdb-nav-item href="#" waves-fixed>Opinions</mdb-nav-item>
                                <mdb-nav-item href="#" waves-fixed>Team</mdb-nav-item>
                                <mdb-nav-item href="#" waves-fixed>Contact</mdb-nav-item>
                              </mdb-navbar-nav>
                              <mdb-navbar-nav right>
                                <mdb-nav-item href="#!" waves-fixed><mdb-icon fab icon="facebook-f" class="light-green-text-2"/></mdb-nav-item>
                                <mdb-nav-item href="#!" waves-fixed><mdb-icon fab icon="twitter" class="light-green-text-2"/></mdb-nav-item>
                                <mdb-nav-item href="#!" waves-fixed><mdb-icon fab icon="instagram" class="light-green-text-2"/></mdb-nav-item>
                              </mdb-navbar-nav>
                            </mdb-navbar-toggler>
                          </mdb-container>
                        </mdb-navbar>
                    
                        <view-wrapper>
                          <video class="video-intro" poster="https://mdbootstrap.com/img/Photos/Others/background.jpg" playsInline autoPlay muted="" loop>
                            <source src="https://mdbootstrap.com/img/video/animation.mp4" type="video/mp4"/>
                          </video>
                          <mdb-mask class="d-flex justify-content-center align-items-center gradient">
                            <mdb-container class="px-md-3 px-sm-0">
                              <mdb-row>
                                <mdb-col md="12" class="mb-4 white-text text-center">
                                  <h3 class="display-3 font-weight-bold mb-0 pt-md-5">Creative Agency </h3>
                                  <hr class="hr-light my-4 w-75"/>
                                  <h4 class="subtext-header mt-2 mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit deleniti consequuntur nihil.</h4>
                                  <mdb-btn outline="white" rounded color="white"><mdb-icon icon="home"/> Visit us</mdb-btn>
                                </mdb-col>
                              </mdb-row>
                            </mdb-container>
                          </mdb-mask>
                        </view-wrapper>
                    
                        <mdb-container>
                          <mdb-row class="pt-5 pb-4">
                            <mdb-col md="12" class="text-center">
                              <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                              </p>
                            </mdb-col>
                          </mdb-row>
                        </mdb-container>
                      </div>
                

      import { mdbContainer, mdbRow, mdbCol, ViewWrapper, mdbMask, mdbBtn, mdbIcon, mdbNavbar, mdbNavItem, mdbNavbarNav, mdbNavbarToggler, mdbNavbarBrand  } from 'mdbvue';

      export default {
        name: 'VideoBackgroundPage',
        components: {
          mdbContainer,
          mdbRow,
          mdbCol,
          ViewWrapper,
          mdbMask,
          mdbBtn,
          mdbIcon,
          mdbNavbar,
          mdbNavItem,
          mdbNavbarNav,
          mdbNavbarToggler,
          mdbNavbarBrand
        }
      };
                

                    .video-background-page .gradient {
                      background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
                      background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
                      background: linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
                  }
                  
                  .video-background-page .view video {
                    top: 0!important;
                    left: 0!important;
                    transform: none!important;
                    height: calc(100vh - 60px);
                  }
                  
                  .video-background-page .navbar {
                    transition: background .5s ease-in-out,padding .5s ease-in-out;
                  }
                  
                  .top-nav-collapse {
                    background-color: #563e91 !important;
                  }