"layout"
Bootstrap 4.0.0 Snippet by evarevirus

<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'); });

Related: See More


Questions / Comments: