#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    10
    Rep Power
    0

    Foundation 6 Resize issues plus more


    The site: gastromob.com
    Hello, I am very new to foundation 6 and professional web development as well. I've been working on a few projects for my boss.
    The site is a one page site that is to be simple, clean and easy to use on a phone. the problems I'm having are as follows:

    1. 1. Upon resize the logo overlaps the testimonial and headline. right now I have it disappearing under 640px but Id like the logo to show up on mobile
    2. 2. The headline I want to show up once then disappear and then have the testimonial go into rotation. right now i have 2 separate JavaScript functions and i think I could do better.
    3. 3 The icons in the footer do not line up properly when resizing to mobile.
    4. 4. When each picture is opened I want an individual caption to show up in the white underneath the picture. Is there a way to replace the "captions span" with each pictures alt?


    Any help would be appreciated.
    Thanks in advance!
    Also, this is really my first "real site", I'm sure it sucks, but my employer likes it so far, if you could give me some pointers or suggestions on how I could make this better please do so.

    html:
    Code:
    <!doctype html>
    <html class="no-js" lang="en">
      <head>
        <titleClient | Testpage</title>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" href="css/foundation-icons.css">
      </head>
      <body>
        <div class="off-canvas-wrapper">
          <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>      
          </div>
          <!--.off-canvas -->
          <div class="off-canvas-content" data-off-canvas-content>
            <section class="promo-video">
              <div id="overlay"></div>
              <div class="separator-image city-image"></div>
              <div class="headliner">
                <div class="column row">
                  <h2 class="text-center" id="box">The lake at its Finest</h2>
                </div>
                <div class="column row">
                  <h4 class="text-center ">
                    <div id="rotate">
                      <div>The best client entertainment I have ever done.  So much more memorable than a ball game or dinner and drinks.  <br /><b>Todd H.  sales executive</b></div>
                      <div> We took a few of our top clients out on several different occasions and they cant stop thanking us for doing it.  Itís a once in a lifetime opportunity for so many people.  <br /><b>Brad L.  Banking executive</b></div>
                      <div>My friends and I planned a girls nite out on a Thursday nite.  We went up the river and stopped at several different places for drinks and dinner.  We will definitely be reserving a nite on the client again!!  <br /><b>Tracey S.</b> </div>
                      <div>We reserved the client for the Air Show and it was absolutely epic. The client had us positioned in a prime viewing location and was very accommodating. <br /> <b>Rob F.  Business Executive</b></div>
                    </div>
                  </h4>
                </div>
              </div>
              <div class="header-content">
                <div class="row">
                  <div class="medium-4 columns">
                    <img src="assets/images/client_logo_1.png">  
                  </div>
                  <div class="medium-4 columns">
                  </div>
                </div>
              </div>
              <!-- header content -->        
            </section>
            <!--About us gallery -->
            <section class="about-us-gallery ">
              <div class="medium-6 columns empty"></div>
              <div class="medium-6 columns empty bluebg"></div>
              <div class="content-about-us">
                <div class="row ">
                  <div class="medium-6 columns ">
                    <h2 class="white">Client info</h2>
                    <p> There are so many reasons to charter The client 
                      and create lifelong memories for friends, family and clients.
                    </p>
                    <ul>
                      <li>Client entertainment</li>
                      <li>Employee morale</li>
                      <li>See fireworks from the water with your family</li>
                      <li>Romantic couples sunset cruise up the river and stop for dinner</li>
                      <li>Girls nite out</li>
                      <li>Cruise up to Port Washington and grab dinner in town</li>
                    </ul>
                  </div>
                  <!-- MODALS -->
                  <div class="reveal" id="galleryModal" data-close-on-click="true" data-reveal data-animation-in="scale-in-up" data-animation-out="scale-out-down">
                    <img src="" id="imageContainer">     
                    <button class="close-button" data-close aria-label="Close reveal" type="button">
                    <span aria-hidden="true">&times;</span>
                    </button>    
                     <span id="captions">individual caption here</span>              
                  </div>
                  <!-- End of MODAL -->                
                  <div id="gallery" class="medium-6 columns bluebg">
                    <h2 class="white">gallery 1</h2>
                    <div class="row small-up-3 medium-up-3 large-up-3">
                      <div class="column">
                        <a data-open="galleryModal">                      
                          <img class="thumbnail" 
                          src="assets/images/people/thumbnail/image01.jpg">
                          <!--would like captions for each pic to show up along side the image -->
                         
                        </a>
                      </div>
                      <div class="column">
                        <a data-open="galleryModal">
                        <img class="thumbnail" src="assets/images/people/thumbnail/image02.jpg" alt="hello sir">
                        </a>
                      </div>
                      <div class="column">
                        <a data-open="galleryModal">
                        <img class="thumbnail" src="assets/images/people/thumbnail/image03.jpg">
                        </a>
                      </div>
                      <div class="column">
                        <a data-open="galleryModal">
                        <img class="thumbnail" src="assets/images/people/thumbnail/image04.jpg">
                        </a>
                      </div>
                      <div class="column">
                        <a data-open="galleryModal">
                        <img class="thumbnail" src="assets/images/people/thumbnail/image05.jpg">
                        </a>
                      </div>
                      <div class="column">
                        <a data-open="galleryModal">
                        <img class="thumbnail" src="assets/images/people/thumbnail/image06.jpg">
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <!--Separator image -->
            <div class="separator-image skyline-image"></div>
            <!--About us gallery -->
            <section class="about-us-gallery ">
              <div class="medium-6 columns empty"></div>
              <div class="medium-6 columns empty bluebg"></div>
              <div class="content-about-us">
                <div class="row ">
                  <div class="medium-6 columns ">
                    <h2 class="white">About Us</h2>
                    <p> See the city from the water in this excellent condition 30í cabin cruiser.  
                      There are no better views of the city than from the river and the harbor.  
                      Enjoy a professionally guided tour wherever you would like to go.
                    </p>
                    <ul>
                      <li>Seats 6-8 people comfortably depending on weather</li>
                      <li>Bathroom on board</li>
                      <li>Downstairs area for changing, napping, resting, etc.</li>
                      <li>Seating area for hanging out and enjoying the scenery and your friends</li>
                      <li>Outstanding bow area for seating/standing (weather permitting)</li>
                    </ul>
                  </div>
                  <div id="gallery" class="medium-6 columns bluebg">
                    <h2 class="white">Gallery 2</h2>
                    <div class="row small-up-3 medium-up-3 large-up-3">
                      <div class="column">
                        <a data-open="galleryModal">
                        <img class="thumbnail" src="assets/images/gallery/thumbnail/image01.jpg">
                        </a>
                      </div>
                      <div class="column">
                        <a data-open="galleryModal">
                        <img class="thumbnail" src="assets/images/gallery/thumbnail/image02.jpg">
                        </a>
                      </div>
                      <div class="column">
                        <a data-open="galleryModal">
                        <img class="thumbnail" src="assets/images/gallery/thumbnail/image03.jpg">
                        </a>
                      </div>
                      <div class="column">
                        <a data-open="galleryModal">
                        <img class="thumbnail" src="assets/images/gallery/thumbnail/image04.jpg">
                        </a>
                      </div>
                      <div class="column">
                        <a data-open="galleryModal">
                        <img class="thumbnail" src="assets/images/gallery/thumbnail/image05.jpg">
                        </a>
                      </div>
                      <div class="column">
                        <a data-open="galleryModal">
                        <img class="thumbnail" src="assets/images/gallery/thumbnail/image06.jpg">
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <!--Separator image -->
            <div class="separator-image marina-image"></div>
            <!--booking section -->
            <section class="booking row">
              <div class="large-8 large-centered columns text-center">
                <h2>Book Now</h2>
                <p>Pricing varies from $1000-$3000/nite depending on distance travelled 
                  and time of year/holidays.  Feel free to call Client at <b>555.555.5555</b> 
                  for information, pricing and availability.
                </p>
                <a data-open="modalBook" class="button">Book Now</a>
              </div>
            </section>
            <div class="reveal" id="modalBook" data-reveal data-animation-in="scale-in-up" data-animation-out="scale-out-down">
              <h2 class="text-center">Booking Form</h2>
              <form data-abide novalidate>
                <div class="alert callout" style="display:none;" data-abide-error>
                  <p><i class="fi-alert"></i> There're some problems in your form! </p>
                </div>
                <div class="row columns">
                  <label>Name:
                  <input type="text" placeholder="Your Name" required>
                  <span class="form-error">
                  <i class="fi-alert"></i> The name field is mandatory!!
                  </span>
                  </label>
                </div>
                <div class="row columns">
                  <label>Email:
                  <input type="text" placeholder="Your Email" required pattern="email">
                  <span class="form-error">
                  <i class="fi-alert"></i> The email field is mandatory!!
                  </span>
                  </label>
                </div>
                <div class="row columns">
                  <label>Phone Number:
                  <input type="text" placeholder="Your Phone Number" required pattern="number">
                  <span class="form-error">
                  <i class="fi-alert"></i> The phone number field is mandatory!!
                  </span>
                  </label>
                </div>
                <div class="row columns">
                  <label>Message:
                  <textarea placeholder="Your Message"></textarea>
                  </label>
                </div>
                <div class="row columns">
                  <input type="submit" class="button" value="Submit">          
                  <button class="button sauccess" type="reset" value="Reset">Reset</button>
                </div>
                <button class="close-button" data-close aria-label="Close reveal" type="button">
                <span aria-hidden="true">&times;</span>
                </button>
              </form>
            </div>
            <footer>
              <div class="row">
                <div class="about-us small-8 columns">
                  <ul class="menu social align-right">
                    <li>
                      <a href="http://www.twitter.com">
                      <i class="fi-social-twitter"></i>
                      </a>
                    </li>
                    <li>
                      <a href="http://www.facebook.com">
                      <i class="fi-social-facebook"></i>
                      </a>
                    </li>
                    <li><a href="tel:15555555555 ;=""><i class="fi-telephone"></i></a></li>
                    <li><a href="mailto:info@email.com"><i class="fi-mail"></i></a></li>
                  </ul>
                </div>
              </div>
              <p class="text-center copyright"> All Rights Reserved AJG 2016.</p>
            </footer>
          </div>
          <!-- .off-canvas-content -->
        </div>
        <!-- .off-canvas-wrapper-inner -->
        </div><!-- .off-canvas-wrapper -->     
        <script src="bower_components/jquery/dist/jquery.js"></script>
        <script src="bower_components/what-input/what-input.js"></script>
        <script src="bower_components/foundation-sites/dist/foundation.js"></script>
        <script src="js/app.js"></script>
      </body>
    </html>
    css:
    Code:
    video {
        @include breakpoint(xlarge) {
            width: 100%;
        }
        .is-reveal-open .off-canvas-wrapper {
            overflow-x: visible;
        }
        display: block;
    }
    h2 {
        color: $primary-color;
        font-size: rem-calc(42);
        margin: rem-calc(20 0);
    }
    p,
    ul {
        color: #000;
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-size: 16px;
        font-weight: 550;
    }
    /** Off canvas **/
    
    div.off-canvas {
        height: 100%;
        a, h3 {
            color: $white;
        }
        .is-drilldown-submenu {
            background-color: darken($primary-color, 20);
        }
    }
    .boxy {
        background: -moz-linear-gradient(top, rgba(41, 102, 158, 0.7) 0%, rgba(42, 59, 90, 0.7) 100%);
        /* FF3.6-15 */
        
        background: -webkit-linear-gradient(top, rgba(41, 102, 158, 0.7) 0%, rgba(42, 59, 90, 0.7) 100%);
        /* Chrome10-25,Safari5.1-6 */
        
        background: linear-gradient(to bottom, rgba(41, 102, 158, 0.7) 0%, rgba(42, 59, 90, 0.7) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b329669e', endColorstr='#7db9e8', GradientType=0);
        /* IE6-9 */
    }
    .promo-video,
    .promo {
        position: relative;
        #overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#29669e+10,2a3b5a+100,7db9e8+100&0.7+0,1+100 */
            
            background: -moz-linear-gradient(top, rgba(41, 102, 158, 0.7) 0%, rgba(42, 59, 90, 0.7) 100%);
            /* FF3.6-15 */
            
            background: -webkit-linear-gradient(top, rgba(41, 102, 158, 0.7) 0%, rgba(42, 59, 90, 0.7) 100%);
            /* Chrome10-25,Safari5.1-6 */
            
            background: linear-gradient(to bottom, rgba(41, 102, 158, 0.7) 0%, rgba(42, 59, 90, 0.7) 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b329669e', endColorstr='#7db9e8', GradientType=0);
            /* IE6-9 */
        }
        .header-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
        .headliner {
            left: 0;
            top: 50%;
            position: absolute;
            width: 100%;
            transform: translateY(-50%);
            h2 {
                border-top: 2px solid white;
                border-bottom: 2px solid white;
                color: white;
                text-transform: uppercase;
            }
            h4 {
                color: white;
            }
        }
    }
    .menu-icon,
    .menu-icon:hover {
        width: rem-calc(60);
        height: rem-calc(36);
        margin-top: rem-calc(25);
        &::after {
            background-color: $white;
            height: rem-calc(8);
            box-shadow: 0 28px 0 $white, 0 14px 0 $white;
        }
    }
    .boat {
        padding: rem-calc(10 0);
        div.boat-image {
            position: relative;
            .boat-title {
                position: absolute;
                bottom: 0;
                left: 0;
                padding-left: rem-calc(20);
                h3 {
                    color: $white;
                }
            }
        }
        div.boat-content {
            background-color: $white;
            padding: rem-calc(20);
        }
    }
    .button {
        @include button-style($secondary-color, darken($secondary-color, 10), $white);
        text-transform: uppercase;
        font-weight: bold;
        font-size: rem-calc(16);
        margin: rem-calc(20 0);
    }
    /*** Separator images**/
    
    .separator-image {
        height: 200px;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: scroll;
        @include breakpoint(medium) {
            height: 350px;
            background-size: cover;
        }
        @include breakpoint(large) {
            height: 350px;
            background-size: cover;
        }
        @include breakpoint(xlarge) {
            height: 430px;
            background-size: cover;
        }
    }
    .marina-image {
        background-image: url(../assets/images/separators/small/marina_small.jpg);
        @include breakpoint(medium) {
            background-image: url(../assets/images/separators/medium/marina_med.jpg);
        }
        @include breakpoint(large) {
            background-image: url(../assets/images/separators/large/marina.jpg);
        }
    }
    .city-image {
        background-image: url(../assets/images/separators/small/mil_small_shade.jpg);
        @include breakpoint(medium) {
            background-image: url(../assets/images/separators/medium/mil_med_shade.jpg);
        }
        @include breakpoint(large) {
            background-image: url(../assets/images/separators/large/mil_shade.jpg);
        }
    }
    .skyline-image {
        background-image: url(../assets/images/separators/small/skyline_small.jpg);
        @include breakpoint(medium) {
            background-image: url(../assets/images/separators/medium/skyline_med.jpg);
        }
        @include breakpoint(large) {
            background-image: url(../assets/images/separators/large/skyline.jpg);
        }
    }
    /***about-us section  **/
    
    .about-us-gallery {
        background-color: $primary-color;
        div.boat-image {
            position: relative;
        }
        @include breakpoint(medium) {
            height: rem-calc(560);
            position: relative;
        }
        @include breakpoint(medium) {
            height: rem-calc(420);
        }
        .empty {
            @include breakpoint(medium) {
                height: rem-calc(560);
            }
            @include breakpoint(medium) {
                height: rem-calc(420);
            }
        }
        div.content-about-us {
            @include breakpoint(medium) {
                position: absolute;
                top: rem-calc(20);
                left: 0;
                width: 100%;
            }
            @include breakpoint(xlarge) {
                position: absolute;
                top: rem-calc(20);
                left: 0;
                width: 100%;
            }
        }
    }
    .bluebg {
        // background-color: $primary-color;
        background: -moz-linear-gradient(top, rgba(41, 102, 158, 0.7) 0%, rgba(42, 59, 90, 0.7) 100%);
        /* FF3.6-15 */
        
        background: -webkit-linear-gradient(top, rgba(41, 102, 158, 0.7) 0%, rgba(42, 59, 90, 0.7) 100%);
        /* Chrome10-25,Safari5.1-6 */
        
        background: linear-gradient(to bottom, rgba(41, 102, 158, 0.7) 0%, rgba(42, 59, 90, 0.7) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b329669e', endColorstr='#7db9e8', GradientType=0);
        /* IE6-9 */
    }
    h2.white {
        color: $white;
    }
    section.booking {
        padding: rem-calc(50);
    }
    footer {
        background-color: $primary-color;
        padding-top: rem-calc(30);
        color: $white;
        .menu {
            a {
                color: $white;
            }
        }
        .contact-information {
            li {
                position: relative;
                height: 100px;
                padding-left: 60px;
                padding-top: 35px;
                &:first-child {
                    padding-top: 22px;
                }
                i {
                    font-size: rem-calc(60);
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
        }
        .social {
            i {
                font-size: rem-calc(60);
            }
        }
        p.copyright {
            padding: rem-calc(20 0);
            background-color: darken($primary-color, 8);
        }
    }
    @media screen and (max-width: 640px) {
        .boxy {
            display: none;
        }
    }
    /**slider **/
    js:
    Code:
    function getHeight() {
      var height = $('section.promo, section.promo-video').height();
      $('#overlay').css({
        'height': height + 'px'
      })
    }
    
    
    $(function() {
      getHeight();
    //image viewer
      $('#gallery a').on('click', function() {
        var image = $(this).find('img').attr('src');
        var imageSelected = image.split('thumbnail');
        var fullPath = imageSelected[0] + 'fullsize' + imageSelected[1];
        $('#galleryModal #imageContainer').attr('src', fullPath);
      });
      
    //headline fader
      $('#box').fadeIn('fast').delay(5000).fadeOut('slow');
    
    });
    
    //testimonial rotator
    (function($) {
      $.fn.extend({
        rotaterator: function(options) {
    
          var defaults = {
            fadeSpeed: 500,
            pauseSpeed: 100,
            child: null
          };
    
          var options = $.extend(defaults, options);
    
          return this.each(function() {
            var o = options;
            var obj = $(this);
            var items = $(obj.children(), obj);
            items.each(function() {
              $(this).hide();
            })
            if (!o.child) {
              var next = $(obj).children(':first');
            } else {
              var next = o.child;
            }
            $(next).fadeIn(o.fadeSpeed, function() {
              $(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {
                var next = $(this).next();
                if (next.length == 0) {
                  next = $(obj).children(':first');
                }
                $(obj).rotaterator({
                  child: next,
                  fadeSpeed: o.fadeSpeed,
                  pauseSpeed: o.pauseSpeed
                });
              })
            });
          });
        }
      });
    })(jQuery);
    
    $(document).ready(function() {
      $('#rotate').rotaterator({
        fadeSpeed: 1500,
        pauseSpeed: 1500
      });
    });
    
    
    $(document).foundation();
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    10
    Rep Power
    0

    First professional project from scratch! Im having problems with a few things. Resize


    So I've post about this in other forums and haven't gotten too much feedback. This is my first site that someone is paying me for. Its not much. I've put a version without his copy at: gastromob.com
    I am having some issues. I've been looking for answers, trying different things but so far I haven't solved any of my problems.
    • First off the logo doesn't resize correctly with the page. The testimonial doesn't seem to position correctly.
    • The picture gallery How can I add individual captions for each pic that show up in the bottom of the white border?
    • Finally, the icons on the bottom should stay centered always, but on resize the last button in the row jumps down a row. How can I make that resize properly?


    I really could use some feedback and some suggestions. So far my boss likes it, but there are a few kinks that need to be fixed. Also any suggestions on how I can make this better or how I can get better at doing this would be appreciated. I've never used foundation before so this was a first as well.
  4. #3
  5. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,354
    Rep Power
    24
    Aight. We'd be more than happy to help put, but we are going to need to see some coding in relation to the items mentioned.
    1.) First off the logo doesn't resize correctly with the page.
    How should it look, and when should it adjust?
    2.) The testimonial doesn't seem to position correctly.
    I'm viewing what I feel to be a valid option. What do you desire?
    3.) The picture gallery How can I add individual captions for each pic that show up in the bottom of the white border?
    Once we see the code displaying that image, we can easily help with this.
    4.) The icons on the bottom should stay centered always, but on resize the last button in the row jumps down a row. How can I make that resize properly?
    Easily, however, we'll need to see some coding here as well, and what do you mean by "resize properly"?

    Comments on this post

    • markroberts agrees
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    919
    Rep Power
    278
    @Triple_Nothing: this appears to be a continuation from THIS thread. Which I believe, should be merged together.

    @AdamGonge: your logo can be controlled using different sized images along with using ZF6's interchange feature.

    I am confused as to why you are using off-canvas, but, aren't incorporating the Menu that is supposed to go with off-canvas.

    Comments on this post

    • markroberts agrees : Thanks!
  8. #5
  9. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,354
    Rep Power
    24
    Indeed, and thank you very much, DonR.

    The topics have been merged, and now it appears we have some code to take a peek at... ^_^

    AdamGonge, if you would prefer this to have all landed in the CSS category instead of HTML, just let me know and it can be moved.

    Comments on this post

    • markroberts agrees : Thanks!
    Last edited by Triple_Nothing; June 23rd, 2016 at 09:35 AM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2014
    Posts
    10
    Rep Power
    0
    Ok so I've done some work and fixed a few things, but the header section is still messed up. If you go to my site gastromob.com you'll see the problem.
    The logo and title are not centered, the headline and button are. I want the logo and title to be centered on a large screen and then on mobile I want the logo and headline to disappear leaving the title and button centered
    On my phone Nexus 6 the logo and headline are gone(yay) but the title is off center to the left. Im just looking for a nice clean header.
  12. #7
  13. No Profile Picture
    Super Moderator
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,354
    Rep Power
    24
    Other than the tiny differences in text formatting, is this pretty much what you're aiming for?
    Example: Foundation 6 Resize issues plus more
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.

IMN logo majestic logo threadwatch logo seochat tools logo