<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="banner">
<div class="container">
<div class="profile-pic">
<div class="avatar"></div>
<a href="#" class="button button-primary mt-20">Apply with me</a>
</div>
<div class="bio">
<h1 class="heading-medium">Lars Loaner</h1>
<h3 class="heading-small">Home Lending Analyst</h3>
<h5 class="heading-small">NMLS ID: 3241525</h5>
<p class="body-small">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
</div>
</div>
</div>
<div class="section-about">
<div class="container">
<div class="tab-group">
<a href="#tab-contact" class="tab tab-active heading-small tab-label">Contact</a>
<a href="#tab-about" class="tab heading-small tab-label">About</a>
</div>
</div>
<div class="container">
<div class="tab-items">
<div class="tab-content" id="tab-contact">
<div class="contact-info">
<div class="lo-address">
<p class="heading-medium">Lars Loaner</p>
<p class="heading-small">1001 North Main Street</p>
<p class="heading-small">Rochester, MI 48307</p>
</div>
<div class="lo-contact">
<p class="body-small">M (248) 567-1234</p>
<p class="body-small">O (248) 312-0987</p>
<p class="body-small">F (248) 543-6789</p>
<a href="#" class="body-small">lars.loaner@mail.com</a>
</div>
</div>
<div class="container">
<h3 class="heading-small text-center">Schedule an appointment</h3>
<p class="body-small text-center">Fill out the information below and I'll reach out to you shortly.</p>
<form action="">
<div class="form-inline">
<div class="quarter">
<label for="" class="input-label">First Name</label>
<input type="text" class="input" />
</div>
<div class="quarter">
<label for="" class="input-label">Last Name</label>
<input type="text" class="input" />
</div>
<div class="quarter">
<label for="" class="input-label">Phone Number</label>
<input type="text" class="input" />
</div>
<div class="quarter">
<label for="" class="input-label">Email Address</label>
<input type="text" class="input" />
</div>
</div>
<div class="form-inline">
<div class="radio-button-group">
<input id="call" type="radio" class="input-radio-buttongroup" name="contact-preference" checked="checked"/>
<label for="call" class="input-radio-buttongroup-label">Call</label>
<input id="text" type="radio" class="input-radio-buttongroup" name="contact-preference"/>
<label for="text" class="input-radio-buttongroup-label">Text</label>
<input id="email" type="radio" class="input-radio-buttongroup" name="contact-preference"/>
<label for="email" class="input-radio-buttongroup-label">Email</label>
</div>
<input type="submit" class="button button-primary"/>
</div>
</div>
</form>
</div>
<div class="tab-content" id="tab-about">about tab</div>
</div>
</div>
</div>
<div class="section-schedule">
<div class="container">
<h3 class="heading-small text-center">Schedule an appointment</h3>
<p class="body-small text-center">Fill out the information below and I'll reach out to you shortly.</p>
<form action="">
<div class="form-inline">
<div class="quarter">
<label for="" class="input-label">First Name</label>
<input type="text" class="input" />
</div>
<div class="quarter">
<label for="" class="input-label">Last Name</label>
<input type="text" class="input" />
</div>
<div class="quarter">
<label for="" class="input-label">Phone Number</label>
<input type="text" class="input" />
</div>
<div class="quarter">
<label for="" class="input-label">Email Address</label>
<input type="text" class="input" />
</div>
</div>
<div class="form-inline">
<div class="radio-button-group">
<input id="call" type="radio" class="input-radio-buttongroup" name="contact-preference" checked="checked"/>
<label for="call" class="input-radio-buttongroup-label">Call</label>
<input id="text" type="radio" class="input-radio-buttongroup" name="contact-preference"/>
<label for="text" class="input-radio-buttongroup-label">Text</label>
<input id="email" type="radio" class="input-radio-buttongroup" name="contact-preference"/>
<label for="email" class="input-radio-buttongroup-label">Email</label>
</div>
<input type="submit" class="button button-primary"/>
</div>
</div>
</form>
</div>
<div class="section-calculate">
<div class="container">
<h3 class="heading-medium text-center">Find the mortgage that's right for you.</h3>
<p class="body-small text-center">Spend a few moments to get a better idea of your bottom line.
Are you looking to purchase a new property or refinance an existing one?</p>
<form action="">
<div class="form-inline">
<div class="radio-button-group">
<input id="purchase" type="radio" class="input-radio-buttongroup" name="contact-preference" checked="checked"/>
<label for="purchase" class="input-radio-buttongroup-label">Purchase</label>
<input id="refi" type="radio" class="input-radio-buttongroup" name="contact-preference"/>
<label for="refi" class="input-radio-buttongroup-label">Refinance</label>
</div>
</div>
<div class="form-inline">
<div class="quarter">
<label for="" class="input-label">Purchase Price</label>
<input type="text" class="input" />
</div>
<div class="quarter">
<label for="" class="input-label">Borrow Amount</label>
<input type="text" class="input" />
</div>
<div class="quarter">
<label for="" class="input-label">Down Payment</label>
<input type="text" class="input" />
</div>
<div class="quarter">
<label for="" class="input-label">Property ZIP</label>
<input type="text" class="input" />
</div>
</div>
<div class="form-inline">
<input type="submit" class="button button-secondary"/>
</div>
</div>
</form>
</div>
<div class="section-bottom">
<div class="container">
<div class="col-left">
<h3 class="heading-small text-center">Today's Rates</h3>
<div class="bottom-block">
<div class="rate-table body-small">Table of the current rates</div>
</div>
</div>
<div class="col-right">
<h3 class="heading-small text-center">Testimonials</h3>
<div class="bottom-block">
<div class="testimonials body-large">Carousel of customer testimonials</div>
</div>
</div>
</div>
</div>
/*========================================
Start of Flagstar responsive css
========================================*/
/* Variables */
html {
font-size: 10px;
}
body {
font-size: inherit;
line-height: 1.5;
}
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
margin: 0;
}
.heading-title {
font-size: 5.4rem;
font-family: 'Myriad-Pro-Regular', 'Myriad-Pro', 'Trebuchet MS', sans-serif;
}
.heading-extralarge {
font-size: 3.6rem;
font-family: 'Myriad-Pro-Regular', 'Myriad-Pro', 'Trebuchet MS', sans-serif;
}
.heading-large {
font-size: 3.0rem;
font-family: 'Myriad-Pro-Regular', 'Myriad-Pro', 'Trebuchet MS', sans-serif;
}
.heading-medium {
font-size: 2.4rem;
font-family: 'Myriad-Pro-Regular', 'Myriad-Pro', 'Trebuchet MS', sans-serif;
}
.heading-medium-light {
font-size: 2.4rem;
font-family: 'Myriad-Pro-Light', 'Myriad-Pro', 'Trebuchet MS', sans-serif;
}
.heading-small {
font-size: 2.0rem;
font-family: 'Myriad-Pro-Regular', 'Myriad-Pro', 'Trebuchet MS', sans-serif;
}
.heading-label {
font-size: 1.6rem;
font-family: 'Myriad-Pro-Semibold', 'Myriad-Pro', 'Trebuchet MS', sans-serif;
}
.body-large {
font-size: 1.6rem;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
.body-small {
font-size: 1.3rem;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-allcaps {
text-transform: uppercase;
}
.text-black {
color: #000000;
}
.text-white {
color: #ffffff;
}
.text-red {
color: #ac1a2f;
}
.text-charcoal {
color: #505050;
}
/* Forms */
.input {
border: 1px solid #bbbbbb;
height: 40px;
width: 100%;
}
.input-label {
font-size: 1.6rem;
margin-bottom: 10px;
}
.button {
border: 2px solid;
border-radius: 500px;
font-family: 'Myriad-Pro-Semibold', 'Myriad-Pro', 'Trebuchet MS', sans-serif;
font-size: 14px;
font-weight: bold;
padding: 8px 20px 8px 20px;
text-decoration: none;
text-transform: uppercase;
}
.button:hover {
text-decoration: none;
}
.button-primary {
background-color: #ac1a2f;
border-color: #ac1a2f;
color: #ffffff;
}
.button-primary:hover {
background-color: #851425;
border-color: #851425;
}
.button-secondary {
background-color: #ffffff;
color: #ac1a2f;
}
.button-secondary:hover {
color: #851425;
}
.button-transparent {
background-color: transparent;
border: transparent;
}
.button-disabled {
opacity: .2 !important;
cursor: default;
}
html,
body {
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-size: 16px;
font-weight: normal;
margin: 0;
}
a {
color: #ac1a2f;
text-decoration: none;
}
.banner {
background: url('https://images.unsplash.com/photo-1417008914239-59b898b49382?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=185476e83f71b5e28e2e8845a312d1e6');
background-size: cover;
padding-top: 25px;
padding-bottom: 75px;
}
.banner .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.container {
width: 80%;
max-width: 900px;
margin: 0 auto;
height: 100%;
-webkit-transition: width .5s ease;
transition: width .5s ease;
}
.profile-pic {
height: 100%;
width: 250px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.avatar {
background-color: #bbbbbb;
height: 160px;
min-width: 160px;
border-radius: 80px;
}
.bio {
margin-left: 40px;
}
.welcome {
font-size: 12px;
max-width: 425px;
margin-top: 5px;
}
.mt-20 {
margin-top: -20px;
}
@media all and (max-width: 768px) {
.container {
width: 90%;
-webkit-transition: width .5s ease;
transition: width .5s ease;
}
#tab-contact {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.map {
width: 100% !important;
margin-right: 0px !important;
}
.contact-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100% !important;
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 20px 0px;
}
}
.section-about {
padding-bottom: 20px;
}
.tab-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 50px;
margin-top: -50px;
background: #ebebeb;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tab-group a {
color: #bbbbbb;
}
.tab {
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
}
.tab .tab-label {
text-decoration: none;
}
a.tab-active {
background: #ffffff;
color: #000000;
margin-top: -5px;
}
.tab-content {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 50px 0px;
}
.contact-info {
padding: 20px;
width: 40%;
height: auto;
line-height: 1.3;
}
.map {
height: 250px;
width: 60%;
background: #ebebeb;
margin-right: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 56px;
}
@media all and (max-width: 500px) {
.banner {
height: auto;
padding-top: 20px;
padding-bottom: 70px;
}
.banner .container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.contact-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bio {
margin-left: 0;
width: 100%;
text-align: center;
margin-top: 20px;
}
#tab-contact {
padding: 20px 0px;
}
}
.section-schedule {
padding: 50px 0px;
}
@media (max-width: 500px) {
.section-schedule {
padding: 20px 0px;
}
}
.form-inline {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 20px 0px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media (max-width: 500px) {
.form-inline {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.quarter {
width: 23%;
}
@media (max-width: 500px) {
.quarter {
width: 100%;
}
}
@media (min-width: 500px) {
.quarter {
width: 46%;
}
}
.input-radio-buttongroup {
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
}
.input-radio-buttongroup-label {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
width: 100px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border: 1px solid #bbbbbb;
color: #bbbbbb;
font-size: 16px;
}
@media (max-width: 350px) {
.input-radio-buttongroup-label {
width: 33.33%;
}
}
.input-radio-buttongroup-label:first-of-type {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.input-radio-buttongroup-label:last-of-type {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.input-radio-buttongroup:checked + label {
background-color: #ac1a2f !important;
color: #ffffff;
border-color: #ac1a2f;
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
}
.input-radio-buttongroup:hover + label {
background-color: #ebebeb;
}
.radio-button-group {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
height: 43px;
}
@media (max-width: 350px) {
.radio-button-group {
width: 100%;
}
}
.section-calculate {
background-color: #ebebeb;
padding: 50px 0px;
}
@media (max-width: 500px) {
.section-calculate {
padding: 20px 0px;
}
}
.section-bottom {
padding: 50px 0px;
}
@media (max-width: 500px) {
.section-bottom {
padding: 20px 0px;
}
}
.section-bottom .container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media (max-width: 500px) {
.section-bottom .container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
.col-left,
.col-right {
width: 50%;
}
@media (max-width: 500px) {
.col-left,
.col-right {
width: 100%;
}
}
.bottom-block {
padding: 20px;
}
.rate-table,
.testimonials {
width: 100%;
height: 250px;
background-color: #ebebeb;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/*notes
* mobile/tablet tweener size - new media query somewhere? Seems like we might benefit a lot in the banner. we could side-by-side the pic and name/title/id with the welcome message below the both of them @ 100%.
*/
//Hides all tab content and shows first tab by default.
$('.tab-content').hide();
$('.tab-content:first-of-type').show();
//Ensures first tab is the default tab
$('.tab').removeClass('tab-active');
$('.tab:first-of-type').addClass('tab-active');
$('.tab').click( function(e){
e.preventDefault();
var $this = $(this);
var target = $this.attr('href');
//Removes any active tab states and sets first tab as default
$('.tab-group .tab-active').removeClass('tab-active');
$this.addClass('tab-active');
//Hides displayed tab content, shows clicked tab content
$('.tab-items .tab-content').css('display', 'none');
$(target).css('display', 'flex');
});
