React Intros Sections
React Intros Sections - Bootstrap 4 & Material Design
React Bootstrap Intro Sections are full-page templates which can make Your website outstanding.
App intro MDB Pro component
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
MDBNavbar,
MDBNavbarBrand,
MDBNavbarNav,
MDBNavItem,
MDBNavLink,
MDBNavbarToggler,
MDBCollapse,
MDBMask,
MDBRow,
MDBCol,
MDBBtn,
MDBView,
MDBContainer,
MDBFormInline,
MDBAnimation
} from 'mdbreact';
import './AppPage.css';
class AppPage extends React.Component {
state = {
collapsed: false
};
handleTogglerClick = () => {
const { collapsed } = this.state;
this.setState({
collapsed: !collapsed
});
};
componentDidMount() {
document.querySelector('nav').style.height = '65px';
}
componentWillUnmount() {
document.querySelector('nav').style.height = 'auto';
}
render() {
const { collapsed } = this.state;
const overlay = (
<div
id='sidenav-overlay'
style={{ backgroundColor: 'transparent' }}
onClick={this.handleTogglerClick}
/>
);
return (
<div id='apppage'>
<Router>
<div>
<MDBNavbar
color='primary-color'
dark
expand='md'
fixed='top'
scrolling
transparent
style={{ marginTop: '65px' }}
>
<MDBContainer>
<MDBNavbarBrand>
<strong className='white-text'>MDB</strong>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={this.handleTogglerClick} />
<MDBCollapse isOpen={collapsed} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to='#!'>Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to='#!'>Link</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to='#!'>Profile</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBFormInline waves>
<div className='md-form my-0'>
<input
className='form-control mr-sm-2'
type='text'
placeholder='Search'
aria-label='Search'
/>
</div>
</MDBFormInline>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
{collapsed && overlay}
</div>
</Router>
<MDBView>
<MDBMask className='white-text gradient' />
<MDBContainer
style={{ height: '100%', width: '100%', paddingTop: '10rem' }}
className='d-flex justify-content-center white-text align-items-center'
>
<MDBRow>
<MDBCol md='6' className='text-center text-md-left mt-xl-5 mb-5'>
<MDBAnimation type='fadeInLeft' delay='.3s'>
<h1 className='h1-responsive font-weight-bold mt-sm-5'>
Make purchases with our app
</h1>
<hr className='hr-light' />
<h6 className='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>
<MDBBtn color='white'>Download</MDBBtn>
<MDBBtn outline color='white'>
Learn More
</MDBBtn>
</MDBAnimation>
</MDBCol>
<MDBCol md='6' xl='5' className='mt-xl-5'>
<MDBAnimation type='fadeInRight' delay='.3s'>
<img
src='https://mdbootstrap.com/img/Mockups/Transparent/Small/admin-new.webp'
alt=''
className='img-fluid'
/>
</MDBAnimation>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBView>
<MDBContainer>
<MDBRow className='py-5'>
<MDBCol md='12' className='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>
</MDBCol>
</MDBRow>
</MDBContainer>
</div>
);
}
}
export default AppPage;
#apppage .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%
);
}
#apppage .view {
background-image: url('https://mdbootstrap.com/img/Photos/Others/architecture.webp');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
min-height: 100vh;
}
#apppage h6 {
line-height: 1.7;
}
Contact Form Intro MDB Pro component
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
MDBNavbar,
MDBNavbarBrand,
MDBNavbarNav,
MDBNavItem,
MDBNavLink,
MDBNavbarToggler,
MDBCollapse,
MDBMask,
MDBRow,
MDBCol,
MDBBtn,
MDBView,
MDBContainer,
MDBFormInline,
MDBCard,
MDBCardBody,
MDBInput
} from 'mdbreact';
import './ContactFormPage.css';
class ContactFormPage extends React.Component {
state = {
collapseID: ''
};
toggleCollapse = collapseID => () =>
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ''
}));
componentDidMount() {
document.querySelector('nav').style.height = '65px';
}
componentWillUnmount() {
document.querySelector('nav').style.height = 'auto';
}
render() {
const { collapseID } = this.state;
const navStyle = { marginTop: '65px' };
const overlay = (
<div
id='sidenav-overlay'
style={{ backgroundColor: 'transparent' }}
onClick={this.toggleCollapse('navbarCollapse')}
/>
);
return (
<div id='contactformpage'>
<Router>
<div>
<MDBNavbar
style={navStyle}
color='deep-purple darken-4'
dark
expand='md'
fixed='top'
scrolling
transparent
>
<MDBContainer>
<MDBNavbarBrand>
<strong className='white-text'>MDB</strong>
</MDBNavbarBrand>
<MDBNavbarToggler
onClick={this.toggleCollapse('navbarCollapse')}
/>
<MDBCollapse id='navbarCollapse' isOpen={collapseID} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to='#!'>Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to='#!'>Link</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to='#!'>Profile</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBFormInline waves>
<div className='md-form my-0'>
<input
className='form-control mr-sm-2'
type='text'
placeholder='Search'
aria-label='Search'
/>
</div>
</MDBFormInline>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
{collapseID && overlay}
</div>
</Router>
<MDBView>
<MDBMask overlay='indigo-strong' />
<MDBContainer
style={{ height: '100%', width: '100%', paddingTop: '10rem' }}
className='d-flex justify-content-center align-items-center'
>
<MDBRow>
<div className='white-text text-center text-md-left col-md-6 mt-xl-5 mb-5'>
<h1 className='display-4 font-weight-bold'>Lorem ipsum </h1>
<hr className='hr-light' />
<h6 className='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>
<MDBBtn outline color='white'>
Learn More
</MDBBtn>
</div>
<MDBCol md='6' xl='5' className='mb-4'>
<MDBCard className='dark-grey-text'>
<MDBCardBody className='z-depth-2'>
<h3 className='dark-grey-text text-center'>
<strong>Write to us:</strong>
</h3>
<hr />
<MDBInput label='Your name' icon='user' />
<MDBInput label='Your email' icon='envelope' />
<MDBInput
label='Your message'
icon='pencil-alt'
type='textarea'
rows='3'
/>
<div className='text-center mt-3 black-text'>
<MDBBtn color='indigo'>Send</MDBBtn>
<hr />
<MDBInput
type='checkbox'
id='checkbox'
label='Subscribe me to the newsletter'
/>
</div>
</MDBCardBody>
</MDBCard>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBView>
<MDBContainer>
<MDBRow className='py-5'>
<MDBCol md='12' className='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>
</MDBCol>
</MDBRow>
</MDBContainer>
</div>
);
}
}
export default ContactFormPage;
#contactformpage .view {
background-image: url('https://mdbootstrap.com/img/Photos/Others/images/89.webp');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
min-height: 100vh;
}
#contactformpage h6 {
line-height: 1.7;
}
#contactformpage .form-check {
margin-bottom: 0 !important;
}
#contactformpage i {
color: #9e9e9e !important;
}
Call to Action Buttons Intro MDB Pro component
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
MDBNavbar,
MDBNavbarBrand,
MDBNavbarNav,
MDBNavItem,
MDBNavLink,
MDBNavbarToggler,
MDBCollapse,
MDBMask,
MDBRow,
MDBCol,
MDBFormInline,
MDBBtn,
MDBView,
MDBContainer,
MDBIcon
} from 'mdbreact';
import './CallToActionIntro.css';
class CallToActionIntro extends React.Component {
state = {
collapsed: false
};
handleTogglerClick = () => {
const { collapsed } = this.state;
this.setState({
collapsed: !collapsed
});
};
componentDidMount() {
document.querySelector('nav').style.height = '65px';
}
componentWillUnmount() {
document.querySelector('nav').style.height = 'auto';
}
render() {
const { collapsed } = this.state;
const navStyle = { marginTop: '4rem' };
const overlay = (
<div
id='sidenav-overlay'
style={{ backgroundColor: 'transparent' }}
onClick={this.handleTogglerClick}
/>
);
return (
<div id='caltoaction'>
<Router>
<div>
<MDBNavbar
color='secondary-color'
style={navStyle}
light
expand='md'
fixed='top'
scrolling
transparent
>
<MDBContainer>
<MDBNavbarBrand>
<strong>MDB</strong>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={this.handleTogglerClick} />
<MDBCollapse isOpen={collapsed} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to='#!'>Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to='#!'>Link</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to='#!'>Profile</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBFormInline waves>
<div className='md-form my-0'>
<input
className='form-control mr-sm-2'
type='text'
placeholder='Search'
aria-label='Search'
/>
</div>
</MDBFormInline>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
{collapsed && overlay}
</div>
</Router>
<MDBView src='https://mdbootstrap.com/img/Photos/Others/gradient2.webp'>
<MDBMask className='rgba-purple-slight ' />
<MDBContainer
style={{ height: '100%', width: '100%', paddingTop: '14rem' }}
className='d-flex justify-content-center align-items-center'
>
<MDBRow>
<MDBCol md='12' className='mb-4 text-center'>
<h1 className='display-4 font-weight-bold mb-0 pt-md-5 pt-5'>
Our New Course is Ready
</h1>
<h5 className='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>
<MDBBtn rounded className='btn-purple'>
<MDBIcon icon='user' className='mr-2' /> Sign up!
</MDBBtn>
<MDBBtn outline color='purple' rounded>
<MDBIcon icon='book' className='mr-2' /> Learn more
</MDBBtn>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBView>
</div>
);
}
}
export default CallToActionIntro;
#caltoaction .view {
min-height: 100vh !important;
height: unset !important;
}
Parallax Effect intro MDB Pro component
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
MDBNavbar,
MDBNavbarBrand,
MDBNavbarNav,
MDBNavItem,
MDBNavLink,
MDBNavbarToggler,
MDBCollapse,
MDBMask,
MDBRow,
MDBCol,
MDBFormInline,
MDBBtn,
MDBView,
MDBContainer
} from 'mdbreact';
import './ParallaxIntro.css';
class ParallaxIntro extends React.Component {
state = {
collapsed: false
};
handleTogglerClick = () => {
this.setState({
collapsed: !this.state.collapsed
});
};
componentDidMount() {
document.querySelector('nav').style.height = '65px';
}
componentWillUnmount() {
document.querySelector('nav').style.height = 'auto';
}
render() {
const navStyle = { marginTop: '4rem' };
const overlay = (
<div
id='sidenav-overlay'
style={{ backgroundColor: 'transparent' }}
onClick={this.handleTogglerClick}
/>
);
const { collapsed } = this.state;
return (
<div id='parallaxintro'>
<Router>
<div>
<MDBNavbar
color='primary-color'
style={navStyle}
dark
expand='md'
fixed='top'
scrolling
transparent
>
<MDBContainer>
<MDBNavbarBrand>
<MDBNavLink to='https://mdbootstrap.com/'>
<strong className='white-text'>MDB</strong>
</MDBNavLink>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={this.handleTogglerClick} />
<MDBCollapse isOpen={collapsed} navbar>
<MDBNavbarNav left>
<MDBNavItem>
<MDBNavLink to='#'>Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to='#'>About</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBFormInline waves>
<div className='md-form my-0'>
<input
className='form-control mr-sm-2'
type='text'
placeholder='Search'
aria-label='Search'
/>
</div>
</MDBFormInline>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
{collapsed && overlay}
</div>
</Router>
<MDBView
src={'https://mdbootstrap.com/img/Photos/Others/images/76.webp'}
fixed
>
<MDBMask className='rgba-white-light' />
<MDBContainer
className='d-flex justify-content-center align-items-center'
style={{ height: '100%', width: '100%', paddingTop: '15rem' }}
>
<MDBRow>
<MDBCol md='12' className='mb-4 white-text text-center'>
<h1 className='display-3 mb-0 pt-md-5 pt-5 white-text font-weight-bold'>
MDB
<span className='indigo-text font-weight-bold'>Parallax</span>
</h1>
<hr className='hr-light my-4' />
<h5 className='text-uppercase pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5 white-text font-weight-bold'>
Check documentation to see how to use MDBParallax
</h5>
<MDBBtn
className='btn-indigo'
size='lg'
href='https://mdbootstrap.com/docs/b4/react/css/parallax/'
target='_blank'
>
Parallax documentation
</MDBBtn>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBView>
<main>
<MDBContainer>
<MDBRow className='py-5'>
<MDBCol md='12' className='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>
</MDBCol>
</MDBRow>
</MDBContainer>
</main>
</div>
);
}
}
export default ParallaxIntro;
#parallaxintro .view {
min-height: 100vh !important;
height: unset !important;
}
Classic Register Form intro MDB Pro component
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
MDBNavbar,
MDBNavbarBrand,
MDBNavbarNav,
MDBNavItem,
MDBNavLink,
MDBNavbarToggler,
MDBCollapse,
MDBMask,
MDBRow,
MDBCol,
MDBIcon,
MDBBtn,
MDBView,
MDBContainer,
MDBCard,
MDBCardBody,
MDBInput,
MDBFormInline,
MDBAnimation
} from 'mdbreact';
import './ClassicFormPage.css';
class ClassicFormPage extends React.Component {
state = {
collapseID: ''
};
toggleCollapse = collapseID => () =>
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ''
}));
componentDidMount() {
document.querySelector('nav').style.height = '65px';
}
componentWillUnmount() {
document.querySelector('nav').style.height = 'auto';
}
render() {
const { collapseID } = this.state;
const overlay = (
<div
id='sidenav-overlay'
style={{ backgroundColor: 'transparent' }}
onClick={this.toggleCollapse('navbarCollapse')}
/>
);
return (
<div id='classicformpage'>
<Router>
<div>
<MDBNavbar
dark
expand='md'
scrolling
fixed='top'
style={{ marginTop: '65px' }}
>
<MDBContainer>
<MDBNavbarBrand>
<strong className='white-text'>MDB</strong>
</MDBNavbarBrand>
<MDBNavbarToggler
onClick={this.toggleCollapse('navbarCollapse')}
/>
<MDBCollapse id='navbarCollapse' isOpen={collapseID} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to='#!'>Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to='#!'>Link</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to='#!'>Profile</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBFormInline waves>
<div className='md-form my-0'>
<input
className='form-control mr-sm-2'
type='text'
placeholder='Search'
aria-label='Search'
/>
</div>
</MDBFormInline>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
{collapseID && overlay}
</div>
</Router>
<MDBView>
<MDBMask className='d-flex justify-content-center align-items-center gradient' />
<MDBContainer
style={{ height: '100%', width: '100%', paddingTop: '10rem' }}
className='mt-5 d-flex justify-content-center align-items-center'
>
<MDBRow>
<MDBAnimation
type='fadeInLeft'
delay='.3s'
className='white-text text-center text-md-left col-md-6 mt-xl-5 mb-5'
>
<h1 className='h1-responsive font-weight-bold'>
Sign up right now!
</h1>
<hr className='hr-light' />
<h6 className='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>
<MDBBtn outline color='white'>
Learn More
</MDBBtn>
</MDBAnimation>
<MDBCol md='6' xl='5' className='mb-4'>
<MDBAnimation type='fadeInRight' delay='.3s'>
<MDBCard id='classic-card'>
<MDBCardBody className='white-text'>
<h3 className='text-center'>
<MDBIcon icon='user' /> Register:
</h3>
<hr className='hr-light' />
<MDBInput
className='white-text'
iconClass='white-text'
label='Your name'
icon='user'
/>
<MDBInput
className='white-text'
iconClass='white-text'
label='Your email'
icon='envelope'
/>
<MDBInput
className='white-text'
iconClass='white-text'
label='Your password'
icon='lock'
type='password'
/>
<div className='text-center mt-4 black-text'>
<MDBBtn color='indigo'>Sign Up</MDBBtn>
<hr className='hr-light' />
<div className='text-center d-flex justify-content-center white-label'>
<a href='#!' className='p-2 m-2'>
<MDBIcon
fab
icon='twitter'
className='white-text'
/>
</a>
<a href='#!' className='p-2 m-2'>
<MDBIcon
fab
icon='linkedin'
className='white-text'
/>
</a>
<a href='#!' className='p-2 m-2'>
<MDBIcon
fab
icon='instagram'
className='white-text'
/>
</a>
</div>
</div>
</MDBCardBody>
</MDBCard>
</MDBAnimation>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBView>
<MDBContainer>
<MDBRow className='py-5'>
<MDBCol md='12' className='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>
</MDBCol>
</MDBRow>
</MDBContainer>
</div>
);
}
}
export default ClassicFormPage;
#classicformpage .view {
background-image: url('http://mdbootstrap.com/img/Photos/Others/images/91.webp');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
min-height: 100vh;
}
#classicformpage .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(
45deg,
rgba(0, 0, 0, 0.7),
rgba(72, 15, 144, 0.4) 100%
);
}
#classicformpage .card {
background-color: rgba(126, 123, 215, 0.2);
}
#classicformpage h6 {
line-height: 1.7;
}
#classicformpage .navbar {
transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
}
#classicformpage .top-nav-collapse {
background: #424f95 !important;
}
@media (max-width: 768px) {
#classicformpage .navbar:not(.top-nav-collapse) {
background: #424f95 !important;
}
}
#classicformpage label {
color: #fff !important;
}
Video background intro MDB Pro component
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
MDBNavbar,
MDBNavbarBrand,
MDBNavbarNav,
MDBNavItem,
MDBNavLink,
MDBNavbarToggler,
MDBCollapse,
MDBMask,
MDBRow,
MDBCol,
MDBIcon,
MDBBtn,
MDBView,
MDBContainer
} from 'mdbreact';
import './VideoBackgroundPage.css';
class VideoBackgroundPage extends React.Component {
state = {
collapseID: ''
};
toggleCollapse = collapseID => () =>
this.setState(prevState => ({
collapseID: prevState.collapseID !== collapseID ? collapseID : ''
}));
componentDidMount() {
document.querySelector('nav').style.height = '65px';
}
componentWillUnmount() {
document.querySelector('nav').style.height = 'auto';
}
render() {
const { collapseID } = this.state;
const navStyle = { marginTop: '4rem' };
const overlay = (
<div
id='sidenav-overlay'
style={{ backgroundColor: 'transparent' }}
onClick={this.toggleCollapse('navbarCollapse')}
/>
);
return (
<div id='videobackground'>
<Router>
<div>
<MDBNavbar style={navStyle} dark scrolling expand='md' fixed='top'>
<MDBContainer>
<MDBNavbarBrand>
<span className='white-text'>MDBNavbar</span>
</MDBNavbarBrand>
<MDBNavbarToggler
onClick={this.toggleCollapse('navbarCollapse')}
/>
<MDBCollapse id='navbarCollapse' isOpen={collapseID} navbar>
<MDBNavbarNav left>
<MDBNavItem>
<MDBNavLink to='#!'>Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink link to='#!'>
About
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink link to='#!'>
Features
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink link to='#!'>
Services
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink link to='#!'>
Opinions
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink link to='#!'>
Team
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink link to='#!'>
Contact
</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBNavLink link to='!#'>
<MDBIcon fab icon='facebook' />
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink link to='!#'>
<MDBIcon fab icon='twitter' />
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink link to='!#'>
<MDBIcon fab icon='instagram' />
</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
{collapseID && overlay}
</div>
</Router>
<MDBView>
<MDBMask className='gradient'>
<video
className='video-intro'
poster='https://mdbootstrap.com/img/Photos/Others/background.webp'
muted
loop
autoPlay
>
<source
src='https://mdbootstrap.com/img/video/animation.mp4'
type='video/mp4'
/>
</video>
</MDBMask>{' '}
<MDBContainer
className='d-flex justify-content-center align-items-center px-md-3 px-sm-0'
style={{ height: '100vh', width: '100%' }}
>
<MDBRow>
<MDBCol md='12' className='mb-4 white-text text-center'>
<h3 className='display-3 font-weight-bold mb-0 pt-md-5'>
Creative Agency{' '}
</h3>
<hr className='hr-light my-4 w-75' />
<h4 className='subtext-header mt-2 mb-4'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
deleniti consequuntur nihil.
</h4>
<MDBBtn outline rounded color='white'>
<MDBIcon icon='home' /> Visit us
</MDBBtn>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBView>
<MDBContainer>
<MDBRow className='pt-5 pb-4'>
<MDBCol md='12' className='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>
</MDBCol>
</MDBRow>
</MDBContainer>
</div>
);
}
}
export default VideoBackgroundPage;
#videobackground .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%);
}
#videobackground .view video {
z-index: -100;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transition: 1s opacity;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
#videobackground .view {
min-height: 100vh;
}
Minimalist Intro MDB Pro component
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import {
MDBNavbar,
MDBNavbarBrand,
MDBNavbarNav,
MDBNavItem,
MDBNavLink,
MDBNavbarToggler,
MDBCollapse,
MDBMask,
MDBRow,
MDBCol,
MDBFormInline,
MDBBtn,
MDBView,
MDBContainer
} from 'mdbreact';
import './MinimalisticIntro.css';
class MinimalisticIntro extends React.Component {
state = {
collapsed: false
};
handleTogglerClick = () => {
const { collapsed } = this.state;
this.setState({
collapsed: !collapsed
});
};
componentDidMount() {
document.querySelector('nav').style.height = '65px';
}
componentWillUnmount() {
document.querySelector('nav').style.height = 'auto';
}
render() {
const { collapsed } = this.state;
const navStyle = { marginTop: '4rem' };
const overlay = (
<div
id='sidenav-overlay'
style={{ backgroundColor: 'transparent' }}
onClick={this.handleTogglerClick}
/>
);
return (
<div id='minimalistintro'>
<Router>
<div>
<MDBNavbar
color='primary-color'
style={navStyle}
dark
expand='md'
fixed='top'
scrolling
transparent
>
<MDBContainer>
<MDBNavbarBrand>
<strong className='white-text'>MDB</strong>
</MDBNavbarBrand>
<MDBNavbarToggler onClick={this.handleTogglerClick} />
<MDBCollapse isOpen={collapsed} navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to='#!'>Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to='#!'>Link</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to='#!'>Profile</MDBNavLink>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBFormInline waves>
<div className='md-form my-0'>
<input
className='form-control mr-sm-2'
type='text'
placeholder='Search'
aria-label='Search'
/>
</div>
</MDBFormInline>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBContainer>
</MDBNavbar>
{collapsed && overlay}
</div>
</Router>
<MDBView src='https://mdbootstrap.com/img/Photos/Others/img%20%2848%29.webp'>
<MDBMask className='rgba-black-light' />
<MDBContainer
className='d-flex justify-content-center align-items-center'
style={{ height: '100%', width: '100%', paddingTop: '17rem' }}
>
<MDBRow>
<MDBCol md='12' className='mb-4 white-text text-center'>
<h1 className='h1-reponsive white-text text-uppercase font-weight-bold mb-0 pt-md-5 pt-5 '>
Minimalist intro
</h1>
<hr className='hr-light my-4' />
<h5 className='text-uppercase mb-4 white-text '>
<strong>Photography & design</strong>
</h5>
<MDBBtn outline color='white'>
portfolio
</MDBBtn>
<MDBBtn outline color='white'>
About me
</MDBBtn>
</MDBCol>
</MDBRow>
</MDBContainer>
</MDBView>
</div>
);
}
}
export default MinimalisticIntro;
#minimalistintro .view {
min-height: 100vh !important;
height: unset !important;
}