Bootstrap intro sections

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

1. App intro

2. Contact Form intro

3. Classic Register Form intro

4. Video Background Intro


App intro MDB Pro component

Display of full page app intro page.

                        <template>
  <div>
    <!--Navbar-->
    <navbar position="top" navStyle="margin-top: 60px;" dark scrolling transparent>
        <navbar-collapse style="max-width: 1140px;" class="mx-auto">
          <mdb-navbar-brand href="#"><strong>MDB</strong></mdb-navbar-brand>
          <navbar-nav>
            <navbar-item href="#" waves-fixed active>Home</navbar-item>
            <navbar-item href="#" waves-fixed>Link</navbar-item>
            <navbar-item href="#" waves-fixed>Profile</navbar-item>
          </navbar-nav>
          <!--Search form -->
          <form>
            <md-input type="text" class="text-white f-flex" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
          </form>
          <!--/.Search form -->
        </navbar-collapse>
    </navbar>
    <!--/.Navbar-->
    <!--ViewWrapper-->
    <view-wrapper>
      <md-mask class="gradient d-flex justify-content-center align-items-center">
        <container>
          <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>
              <btn color="white">Download</btn>
              <btn outline="white">Learn More</btn>
            </div>
            <column md="6" xl="5" class="mt-xl-5">
              <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/admin-new.png" class="img-fluid"/>
            </column>
          </row>
        </container>
      </md-mask>
    </view-wrapper>
    <!--/.ViewWrapper-->

    <container>
      <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>
      </row>
    </container>
  </div>
</template>

<script>
import { Container, Row, Column, Navbar, NavbarCollapse, NavbarNav, NavbarItem, MdInput, ViewWrapper, MdMask, Btn, mdbNavbarBrand } from 'mdbvue';

export default {
  name: 'AppPage',
  components: {
    Container,
    Row,
    Column,
    Navbar,
    NavbarCollapse,
    NavbarNav,
    NavbarItem,
    MdInput,
    ViewWrapper,
    MdMask,
    Btn,
    mdbNavbarBrand
  }
};
</script>
                    

.navbar {
  transition: 1s;
}
.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
                      
                          <template>
  <div>
    <header>
      <!--Navbar-->
      <navbar position="top" navStyle="margin-top: 60px;" dark scrolling transparent>
          <navbar-collapse style="max-width: 1140px;" class="mx-auto">
            <mdb-navbar-brand href="#"><strong>MDB</strong></mdb-navbar-brand>
            <navbar-nav>
              <navbar-item href="#" waves-fixed active>Home</navbar-item>
              <navbar-item href="#" waves-fixed>Link</navbar-item>
              <navbar-item href="#" waves-fixed>Profile</navbar-item>
            </navbar-nav>
            <!--Search form -->
            <form>
              <md-input type="text" class="text-white f-flex" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
            </form>
            <!--/.Search form -->
          </navbar-collapse>
      </navbar>
      <!--/.Navbar-->

      <!--ViewWrapper-->
      <view-wrapper>
        <md-mask overlay="indigo-strong" class="d-flex justify-content-center align-items-center">
          <container>
              <!--Grid row-->
              <row class="pt-lg-5 mt-lg-5">
                <!--Grid column-->
                <column 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>
                  <btn outline="white">Learn more</btn>
                </column>
                <!--Grid column-->
                <!--Grid column-->
                <column md="6" xl="5" class="mb-4">
                  <!--Form-->
                  <card>
                    <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-->
                        <md-input type="text" icon="user" iconClass="grey-text" label="Your name" id="form-name"/>
                        <md-input type="text" icon="envelope" iconClass="grey-text" label="Your mail" id="form-email"/>
                        <!--Textarea with icon prefix-->
                        <md-textarea icon="pencil" iconClass="grey-text" label="Your message" id="form-text" :rows="3"/>
                      </div>
                      <div class="text-center mt-3">
                        <btn color="indigo">Send</btn>
                        <hr>
                        <fieldset class="form-check">
                          <md-input type="checkbox" label="Subscribe me to the newsletter" id="form-subscribe" inline/>
                        </fieldset>
                      </div>
                    </card-body>
                  </card>
                  <!--/.Form-->
                </column>
                <!--Grid column-->
              </row>
              <!--Grid row-->
          </container>
        </md-mask>
      </view-wrapper>
      <!--/.ViewWrapper-->
    </header>

    <main>
      <container>
        <row class="py-5">
          <column 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>
        </column>
        </row>
      </container>
    </main>
  </div>
</template>

<script>
import { Navbar, NavbarCollapse, NavbarNav, NavbarItem, MdInput, MdTextarea, ViewWrapper, MdMask, Row, Column, Container, Btn, Card, CardBody, mdbNavbarBrand } from 'mdbvue';

export default {
  name: 'ContactFormPage',
  components: {
    Navbar,
    NavbarCollapse,
    NavbarNav,
    NavbarItem,
    MdInput,
    MdTextarea,
    ViewWrapper,
    MdMask,
    Row,
    Column,
    Container,
    Btn,
    Card,
    CardBody,
    mdbNavbarBrand
  }
};
</script>

                      
                    
.navbar {
  transition: 1s;
}
.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;
}

Classic Register Form intro MDB Pro component

Display of a page with a classic register form.
          
              <template>
  <div class="classic-form-page">
    <navbar navStyle="margin-top: 60px; align-items: center; justify-content: center;" position="top" dark transparent scrolling>
      <navbar-collapse style="max-width: 1140px">
        <mdb-navbar-brand href="#"><strong>MDB</strong></mdb-navbar-brand>
        <navbar-nav>
          <navbar-item href="#" waves-fixed active>Home</navbar-item>
          <navbar-item href="#" waves-fixed>Features</navbar-item>
          <navbar-item href="#" waves-fixed>Pricing</navbar-item>
        </navbar-nav>
        <!-- Search form -->
        <form>
          <md-input type="text" class="text-white" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
        </form>
      </navbar-collapse>
    </navbar>

    <view-wrapper>
      <md-mask class="d-flex gradient justify-content-center align-items-center">
        <container>
          <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>
              <btn outline="white" color="white">Learn More</btn>
            </div>
            <column md="6" xl="5" class="mb-4">
              <card id="classic-card">
                <card-body class="z-depth-2 white-text">
                  <h3 class="text-center"><fa icon="user"/> Register:</h3>
                  <hr class="hr-light"/>
                  <md-input label="Your name" labelColor="white" icon="user"/>
                  <md-input label="Your email" labelColor="white" icon="envelope"/>
                  <md-input label="Your password" labelColor="white" icon="lock" type="password"/>
                  <div class="text-center mt-4 black-text">
                    <btn color="indigo">Sign Up</btn>
                    <hr class="hr-light"/>
                    <div class="text-center d-flex justify-content-center white-label">
                      <a class="p-2 m-2">
                        <fa icon="twitter" class="white-text"/>
                      </a>
                      <a class="p-2 m-2">
                        <fa icon="linkedin" class="white-text"/>
                      </a>
                      <a class="p-2 m-2">
                        <fa icon="instagram" class="white-text"/>
                      </a>
                    </div>
                  </div>
                </card-body>
              </card>
            </column>
          </row>
        </container>
      </md-mask>
    </view-wrapper>

    <container>
      <row class="py-5">
        <column 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>
        </column>
      </row>
    </container>
  </div>
</template>

<script>
import { Container, Row, Column, Navbar, NavbarItem, NavbarNav, NavbarCollapse, ViewWrapper, MdMask, Btn, Card, CardBody, MdInput, Fa, mdbNavbarBrand } from 'mdbvue';

export default {
  name: 'ClassicFormPage',
  components: {
    Container, Row, Column, Navbar, NavbarItem, NavbarNav, NavbarCollapse, ViewWrapper, MdMask, Btn, Card, CardBody, MdInput, Fa, mdbNavbarBrand
  },
  data() {
    return {
      active: {
        0: false
      }
    };
  },
  methods: {
    toggleDropdown(index) {
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        if (index !== i) {
          this.active[i] = false;
        }
      }
      this.active[index] = !this.active[index];
    },
    allDropdownsClose(target) {
      for (let i = 0; i < Object.keys(this.active).length; i++) {
        this.active[i] = false;
      }
    },
    onClick(e) {
      let parent = e.target;
      let body = document.getElementsByTagName('body')[0];
      while (parent !== body) {
        if (parent.classList.contains('dropdown') || parent.classList.contains('btn-group')) {
          return;
        }
        parent = parent.parentNode;
      }
      this.allDropdownsClose(e.target);
    }
  },
  mounted() {
    document.addEventListener('click', this.onClick);
  },
  destroyed() {
    document.removeEventListener('click', this.onClick);
  }
};
</script>

          
        
.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: 100vh;
}

.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
                      
                          <template>
  <div class="video-background-page">
    <navbar navStyle="margin-top: 60px; align-items: center; justify-content: center;" color="indigo" position="top" dark transparent scrolling>
      <navbar-collapse style="max-width: 1140px">
        <mdb-navbar-brand href="#"><strong>MDB</strong></mdb-navbar-brand>
        <navbar-nav>
          <navbar-item href="#" waves-fixed>Home</navbar-item>
          <navbar-item href="#" waves-fixed>About</navbar-item>
          <navbar-item href="#" waves-fixed>Features</navbar-item>
          <navbar-item href="#" waves-fixed>Services</navbar-item>
          <navbar-item href="#" waves-fixed>Opinions</navbar-item>
          <navbar-item href="#" waves-fixed>Team</navbar-item>
          <navbar-item href="#" waves-fixed>Contact</navbar-item>
        </navbar-nav>
        <navbar-nav right>
          <navbar-item href="#!" waves-fixed><fa icon="facebook" class="light-green-text-2"/></navbar-item>
          <navbar-item href="#!" waves-fixed><fa icon="twitter" class="light-green-text-2"/></navbar-item>
          <navbar-item href="#!" waves-fixed><fa icon="instagram" class="light-green-text-2"/></navbar-item>
        </navbar-nav>
      </navbar-collapse>
    </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>
      <md-mask class="d-flex justify-content-center align-items-center gradient">
        <container class="px-md-3 px-sm-0">
          <row>
            <column 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>
              <btn outline="white" rounded color="white"><fa icon="home"/> Visit us</btn>
            </column>
          </row>
        </container>
      </md-mask>
    </view-wrapper>

    <container>
      <row class="pt-5 pb-4">
        <column 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>
        </column>
      </row>
    </container>
  </div>
</template>

<script>
import { Container, Row, Column, ViewWrapper, MdMask, MdInput, Btn, Fa, Navbar, NavbarItem, NavbarNav, NavbarCollapse, mdbNavbarBrand  } from 'mdbvue';

export default {
  name: 'VideoBackgroundPage',
  components: {
    Container, Row, Column, ViewWrapper, MdMask, MdInput, Btn, Fa, Navbar, NavbarItem, NavbarNav, NavbarCollapse, mdbNavbarBrand
  }

};
</script>

                      
                    
.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: 100vh;
}

.video-background-page .navbar {
  transition: background .5s ease-in-out,padding .5s ease-in-out;
}

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