Menu icon Foundation

Designer

My Posts










My Comments

Zurb Rules commented on john lukacs's post about 18 hours

Here's a couple of videos that might help you out.
 
https://www.youtube.com/watch?v=JlarIkhBj54
 
I"ve used the one below a time or two, and it worked for me. 
http://foundation.zurb.com/forum/posts/53299#comment_38653

Zurb Rules commented on Zurb Rules's post 8 days

Thanks for the kind words Rafi, and the Codepen.

Zurb Rules commented on Zurb Rules's post about 2 months

Thanks for the kind words words Rafi. I actually got a few ideas for the site from building blocks, and I'm making a Indiana Jones right now. I wish I lived over in Cali, so I could intern at Foundation, but I'm stuck in Michigan, yuck.

Zurb Rules commented on Zurb Rules's post 2 months

Val that is amazing, I keep forgetting that we can use the small-12, medium-10, large-6...and setting the height to auto on the video. Sometimes, it's the simplest answer that is the best. Great job on solving this puzzle.

Zurb Rules commented on Zurb Rules's post about 2 years

Sweet! Thank you so much again Rafi, you're awesome!!!

Zurb Rules commented on Zurb Rules's post about 2 years

Thank you Rafi for the feedback.

Zurb Rules commented on Zurb Rules's post about 2 years

Hey Cole!!!! Thanks for the help. I'm new to Foundation, and your help is really appreciated. I just signed up for a course taught by James Stone. I get emails every couple of days, and yesterday I got a new email. The course talks about the column padding, and suggested just what you did. Here's a link to the codepen James "forked" for me. http://codepen.io/jamesstoneco/pen/QbjXMP Again thank you so much for your help Cole, I really do appreciate it.

Zurb Rules commented on Zurb Rules's post about 2 years

I spent some time searching on google and adding some attributes, and padding in my css, and fixed the site.

I added the equalizer attribute to the parent element and data-equalizer-watch to the children, and that extended the columns.

I also set the padding to the .column class to zero, and that made the columns match on the left and right, I than added padding the p selector in css, and that added some breathing room to the text inside the column.

Updated codepen: http://codepen.io/mike316/pen/eNpJNR

Zurb Rules commented on Zurb Rules's post about 2 years

MY HTML BELOW:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
    <div class="row">
      <div class="medium-12 column">
        <header>
          <h1 class="text-center">James Stone Homework Assignment</h1>
          <nav>
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>
        </header>
      </div>
    </div>
    <div class="row">
      <div class="medium-8 column backgrd-1">
        <h3>My Home Work</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis leo ut semper blandit. Integer nibh leo, pharetra eget nulla a, aliquet pretium ante. Maecenas sed quam ac mauris faucibus bibendum. Aliquam erat volutpat. In non magna commodo, ultricies orci sit amet, aliquam diam. Aliquam vitae lorem orci. Fusce lobortis ligula erat, vitae accumsan ante molestie at. </p>
      </div>
      <div class="medium-4 column backgrd-2">
        <h4>Various Ideas</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam velit a felis elementum cursus. Proin in vehicula massa. Nulla facilisi. Etiam auctor tincidunt arcu, vitae mollis nibh. Nunc fermentum enim maximus, consequat mauris at, gravida velit. Quisque et nulla sit amet nunc suscipit maximus. Nulla facilisi. Duis enim ex, laoreet vitae tempor et, feugiat pharetra nisi. Nam posuere quam nec pulvinar condimentum. Sed elementum sollicitudin diam</p>
      </div>
    </div>
    <div class="row">
      <div class="medium-12 column">
        <footer>
          <p class="text-center">James Homework &copy; 2014</p>
        </footer>
      </div>
    </div>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

My CSS BELOW

/* Styling the header section */

header {
  background: #66A3FF;
}

/*Styling the h1 */

h1 {
  color: white;
  margin-top: 0;
  padding-bottom: .75em;
}

/* Styling the navigation */

nav {
  background: #B2D1FF;
}

nav > ul {
  list-style-type: none;
  margin-bottom: 0;
  text-align: center;
}

nav li {
  display: inline;
  font-size: 1.3em;
  padding: 1em;
}

nav a {
  display: inline-block;
  padding: .20em;
}

/*Styling the navigation pseudo classes */

nav a:link {
  color: black;
}

nav a:visited {
  color: purple;
}

nav a:hover {
  color: white;
  font-weight: bold;
}

/*Styline the two different background classes */

.backgrd-1 {
  background-color: #85ADFF;
}

.backgrd-2 {
  background: #94B8FF;
}

/* Styling the footer section */

footer {
  background: #66A3FF;
}

footer p {
  font-size: 1.9em;
  font-weight: bold;
}





















Zurb Rules commented on Zurb Rules's post about 2 years

Sorry for the late reply Rafi, I've been busy this weekend. Thank your for helping with my problem. You're explanation really helped me out, and I fixed my nav.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on john lukacs's post about 18 hours

Here's a couple of videos that might help you out.
 
https://www.youtube.com/watch?v=JlarIkhBj54
 
I"ve used the one below a time or two, and it worked for me. 
http://foundation.zurb.com/forum/posts/53299#comment_38653

You commented on Zurb Rules's post 8 days

Thanks for the kind words Rafi, and the Codepen.

You commented on Zurb Rules's post about 2 months

Thanks for the kind words words Rafi. I actually got a few ideas for the site from building blocks, and I'm making a Indiana Jones right now. I wish I lived over in Cali, so I could intern at Foundation, but I'm stuck in Michigan, yuck.

You commented on Zurb Rules's post 2 months

Val that is amazing, I keep forgetting that we can use the small-12, medium-10, large-6...and setting the height to auto on the video. Sometimes, it's the simplest answer that is the best. Great job on solving this puzzle.

You commented on Zurb Rules's post about 2 years

Sweet! Thank you so much again Rafi, you're awesome!!!

You commented on Zurb Rules's post about 2 years

Thank you Rafi for the feedback.

You commented on Zurb Rules's post about 2 years

Hey Cole!!!! Thanks for the help. I'm new to Foundation, and your help is really appreciated. I just signed up for a course taught by James Stone. I get emails every couple of days, and yesterday I got a new email. The course talks about the column padding, and suggested just what you did. Here's a link to the codepen James "forked" for me. http://codepen.io/jamesstoneco/pen/QbjXMP Again thank you so much for your help Cole, I really do appreciate it.

You commented on Zurb Rules's post about 2 years

I spent some time searching on google and adding some attributes, and padding in my css, and fixed the site.

I added the equalizer attribute to the parent element and data-equalizer-watch to the children, and that extended the columns.

I also set the padding to the .column class to zero, and that made the columns match on the left and right, I than added padding the p selector in css, and that added some breathing room to the text inside the column.

Updated codepen: http://codepen.io/mike316/pen/eNpJNR

You commented on Zurb Rules's post about 2 years

MY HTML BELOW:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
    <div class="row">
      <div class="medium-12 column">
        <header>
          <h1 class="text-center">James Stone Homework Assignment</h1>
          <nav>
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>
        </header>
      </div>
    </div>
    <div class="row">
      <div class="medium-8 column backgrd-1">
        <h3>My Home Work</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis leo ut semper blandit. Integer nibh leo, pharetra eget nulla a, aliquet pretium ante. Maecenas sed quam ac mauris faucibus bibendum. Aliquam erat volutpat. In non magna commodo, ultricies orci sit amet, aliquam diam. Aliquam vitae lorem orci. Fusce lobortis ligula erat, vitae accumsan ante molestie at. </p>
      </div>
      <div class="medium-4 column backgrd-2">
        <h4>Various Ideas</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam velit a felis elementum cursus. Proin in vehicula massa. Nulla facilisi. Etiam auctor tincidunt arcu, vitae mollis nibh. Nunc fermentum enim maximus, consequat mauris at, gravida velit. Quisque et nulla sit amet nunc suscipit maximus. Nulla facilisi. Duis enim ex, laoreet vitae tempor et, feugiat pharetra nisi. Nam posuere quam nec pulvinar condimentum. Sed elementum sollicitudin diam</p>
      </div>
    </div>
    <div class="row">
      <div class="medium-12 column">
        <footer>
          <p class="text-center">James Homework &copy; 2014</p>
        </footer>
      </div>
    </div>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

My CSS BELOW

/* Styling the header section */

header {
  background: #66A3FF;
}

/*Styling the h1 */

h1 {
  color: white;
  margin-top: 0;
  padding-bottom: .75em;
}

/* Styling the navigation */

nav {
  background: #B2D1FF;
}

nav > ul {
  list-style-type: none;
  margin-bottom: 0;
  text-align: center;
}

nav li {
  display: inline;
  font-size: 1.3em;
  padding: 1em;
}

nav a {
  display: inline-block;
  padding: .20em;
}

/*Styling the navigation pseudo classes */

nav a:link {
  color: black;
}

nav a:visited {
  color: purple;
}

nav a:hover {
  color: white;
  font-weight: bold;
}

/*Styline the two different background classes */

.backgrd-1 {
  background-color: #85ADFF;
}

.backgrd-2 {
  background: #94B8FF;
}

/* Styling the footer section */

footer {
  background: #66A3FF;
}

footer p {
  font-size: 1.9em;
  font-weight: bold;
}





















You commented on Zurb Rules's post about 2 years

Sorry for the late reply Rafi, I've been busy this weekend. Thank your for helping with my problem. You're explanation really helped me out, and I fixed my nav.

Posts Followed


Following

  • No Content

Followers

  • No Content