<div class="row">
<div class="large-6 columns">
<label>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
- <input type="text" placeholder="http://foundation.zurb.com" pattern="url">
+ <input type="text" placeholder="https://foundation.zurb.com" pattern="url">
</div>
<div class="large-6 columns">
<label>Website Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL or a Domain.
- <input type="text" placeholder="http://zurb.com or zurb.com" pattern="website">
+ <input type="text" placeholder="https://zurb.com or zurb.com" pattern="website">
</label>
</div>
</div>
### Visual
Visually-impaired users may have low vision or be completely blind. For low vision users, proper typographic contrast is important, both size and color. Foreground colors should stand out from background colors. You can use tools to calculate the contrast ratio of your foreground and background colors. The contrast ratio should at least be 1:4.5 for normal text and 3:1 for large text.
-Blind users consume the web by reading it using a [screen reader](http://en.wikipedia.org/wiki/Screen_reader). Screen readers read the content of a web page out loud, or write it out as Braille, using certain queues from the HTML to infer meaning.
+Blind users consume the web by reading it using a [screen reader](httsp://en.wikipedia.org/wiki/Screen_reader). Screen readers read the content of a web page out loud, or write it out as Braille, using certain queues from the HTML to infer meaning.
### Motor
The text color for each badge class is determined by either `$badge-color` or `$badge-color-alt`, whichever settings variable has more contrast.
<div class="primary callout">
- <p>The default settings meet WCAG 2.0 level AA contrast requirements. Be sure to [check the contrast](http://webaim.org/resources/contrastchecker/) when changing color variables. To give all badges the same color text, set `$badge-color` and `$badge-color-alt` to the same value — but know that doing so may decrease accessibility.</p>
+ <p>The default settings meet WCAG 2.0 level AA contrast requirements. Be sure to [check the contrast](https://webaim.org/resources/contrastchecker/) when changing color variables. To give all badges the same color text, set `$badge-color` and `$badge-color-alt` to the same value — but know that doing so may decrease accessibility.</p>
</div>
---
## Icons
-An icon can be used in place of text. We're using the [Foundation icon font](http://zurb.com/playground/foundation-icon-fonts-3) here, but any icon fonts or image-based icons will work fine.
+An icon can be used in place of text. We're using the [Foundation icon font](https://zurb.com/playground/foundation-icon-fonts-3) here, but any icon fonts or image-based icons will work fine.
<p>
<a class="" data-open-video="0:39"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
<a href="{{root}}starter-projects.html?video=lFrpnk0Oo_8" target="_blank">
<div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://i3.ytimg.com/vi/lFrpnk0Oo_8/maxresdefault.jpg" class="" height="" width="" alt="">
+ <img src="https://i3.ytimg.com/vi/lFrpnk0Oo_8/maxresdefault.jpg" class="" height="" width="" alt="">
</div>
<div class="medium-8 columns">
<h5>Foundation Starter Projects - CSS Download</h5>
<a href="{{root}}starter-projects.html?video=3Uj74uJ3GSQ" target="_blank">
<div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://i3.ytimg.com/vi/3Uj74uJ3GSQ/maxresdefault.jpg" class="" height="" width="" alt="">
+ <img src="https://i3.ytimg.com/vi/3Uj74uJ3GSQ/maxresdefault.jpg" class="" height="" width="" alt="">
</div>
<div class="medium-8 columns">
<h5>Foundation Starter Projects - ZURB Stack</h5>
<!-- <div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
<div class="responsive-embed widescreen">
- <img src="http://placehold.it/300x300" class="" height="" width="" alt="">
+ <img src="https://placehold.it/300x300" class="" height="" width="" alt="">
</div>
</div>
<div class="medium-8 columns">
<a target="_blank" href="http://foundation.zurb.com/templates.html">
<div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://foundation.zurb.com/assets/img/sites-templates/foundation6-templates-07.svg">
+ <img src="https://foundation.zurb.com/assets/img/sites-templates/foundation6-templates-07.svg">
</div>
<div class="medium-8 columns">
<h5>Foundation Templates</h5>
<a target="_blank" href="http://zurb.com/article/1469/foundation-building-blocks-over-100-compo">
<div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://i3.ytimg.com/vi/SmhGUT_N-jw/maxresdefault.jpg" class="" height="" width="" alt="" style="height: 142px;">
+ <img src="https://i3.ytimg.com/vi/SmhGUT_N-jw/maxresdefault.jpg" class="" height="" width="" alt="" style="height: 142px;">
</div>
<div class="medium-8 columns">
<h5>Foundation Building Blocks</h5>
<a target="_blank" href="http://zurb.com/blog/foundation-6-4-a-new-grid-javascript-upgrades-and-slick-new-prototyping-mode">
<div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://i3.ytimg.com/vi/vrvt9xMFjIE/maxresdefault.jpg" class="" height="" width="" alt="">
+ <img src="https://i3.ytimg.com/vi/vrvt9xMFjIE/maxresdefault.jpg" class="" height="" width="" alt="">
</div>
<div class="medium-8 columns">
<h5>Foundation 6.4.0 Update: A New Grid, JavaScript Upgrades, and Slick New Prototyping Mode</h5>
<a target="_blank" href="http://zurb.com/article/1469/foundation-building-blocks-over-100-compo">
<div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://i3.ytimg.com/vi/SmhGUT_N-jw/maxresdefault.jpg" class="" height="" width="" alt="">
+ <img src="https://i3.ytimg.com/vi/SmhGUT_N-jw/maxresdefault.jpg" class="" height="" width="" alt="">
</div>
<div class="medium-8 columns">
<h5>Foundation Building Blocks Accelerate Your Development</h5>
<a target="_blank" href="http://foundation.zurb.com/building-blocks/how-to.html">
<div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://i3.ytimg.com/vi/adLpmsU9v2g/maxresdefault.jpg" class="" height="" width="" alt="">
+ <img src="https://i3.ytimg.com/vi/adLpmsU9v2g/maxresdefault.jpg" class="" height="" width="" alt="">
</div>
<div class="medium-8 columns">
<h5>How to Use ZURB Foundation's Building Blocks</h5>
<a target="_blank" href="http://foundation.zurb.com/showcase/case-studies.html">
<div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="http://foundation.zurb.com/assets/img/learn/case-studies/meundies-mockup1.jpg" class="" height="" width="" alt="">
+ <img src="https://foundation.zurb.com/assets/img/learn/case-studies/meundies-mockup1.jpg" class="" height="" width="" alt="">
</div>
<div class="medium-8 columns">
<h5>Foundation Case Studies</h5>
<div class="row">
<div class="medium-6 columns">
<label>URL Pattern, not required, but throws error if it doesn't match the Regular Expression for a valid URL.
- <input type="text" placeholder="http://foundation.zurb.com" pattern="url">
+ <input type="text" placeholder="https://foundation.zurb.com" pattern="url">
</label>
</div>
<div class="medium-6 columns">
```html_example
<div class="media-object">
<div class="media-object-section">
- <img src= "http://placeimg.com/200/200/people">
+ <img src= "https://placeimg.com/200/200/people">
</div>
<div class="media-object-section">
<h4>Dreams feel real while we're in them.</h4>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<figure class="orbit-figure">
- <img class="orbit-image" src="http://placehold.it/1200x600/999?text=Slide-1" alt="Space">
+ <img class="orbit-image" src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<figcaption class="orbit-caption">Space, the final frontier.</figcaption>
</figure>
</li>
<li class="orbit-slide">
<figure class="orbit-figure">
- <img class="orbit-image" src="http://placehold.it/1200x600/888?text=Slide-2" alt="Space">
+ <img class="orbit-image" src="https://placehold.it/1200x600/888?text=Slide-2" alt="Space">
<figcaption class="orbit-caption">Lets Rocket!</figcaption>
</figure>
</li>
<li class="orbit-slide">
<figure class="orbit-figure">
- <img class="orbit-image" src="http://placehold.it/1200x600/777?text=Slide-3" alt="Space">
+ <img class="orbit-image" src="https://placehold.it/1200x600/777?text=Slide-3" alt="Space">
<figcaption class="orbit-caption">Encapsulating</figcaption>
</figure>
</li>
<li class="orbit-slide">
<figure class="orbit-figure">
- <img class="orbit-image" src="http://placehold.it/1200x600/666&text=Slide-4" alt="Space">
+ <img class="orbit-image" src="https://placehold.it/1200x600/666&text=Slide-4" alt="Space">
<figcaption class="orbit-caption">Outta This World</figcaption>
</figure>
</li>
```html
<div class="radius bordered shadow card">
- <img src="http://placehold.it/500x250">
+ <img src="https://placehold.it/500x250">
<div class="card-divider">
Styled Card
</div>
#### Images
```html
-<img src="http://placehold.it/150x150" class="radius">
+<img src="https://placehold.it/150x150" class="radius">
```
<div class="docs-code-live margin-bottom-1">
- <img src="http://placehold.it/150x150" class="radius">
+ <img src="https://placehold.it/150x150" class="radius">
</div>
---
```html
<a href="#" class="text-hide">
- <img src="http://placehold.it/100x30" alt="zurb logo">
+ <img src="https://placehold.it/100x30" alt="zurb logo">
Zurb <!-- Logo Text -->
</a>
```
<div class="full reveal" id="exampleModal8" data-reveal>
<p>OH I'M SO FUUUUL</p>
- <img src="http://placekitten.com/1920/1280" alt="Introspective Cage">
+ <img src="https://placekitten.com/1920/1280" alt="Introspective Cage">
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
<p class="homepage-section-desc hide-me">Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.</p>
</div>
<div class="small-11 medium-8 large-5 column footer-contact-form small-centered" style="position:relative;">
- <form class="request-form" action="http://zurb.com/api/mail/zurbmail" id="requestCourseInformation" method="post">
+ <form class="request-form" action="https://zurb.com/api/mail/zurbmail" id="requestCourseInformation" method="post">
<div class="row">
<div class="small-12 column">
<label for="fieldName">Name</label>
<p class="text-center">Or if you prefer, contact the Foundation Team at <a class="text-link" href="mailto:foundation@zurb.com">training@zurb.com</a> or (408) 341-0600 x635</p>
</div>
</div>
- <input type="hidden" name="_after" value="http://foundation.zurb.com/get-involved/thanks.html">
+ <input type="hidden" name="_after" value="https://foundation.zurb.com/get-involved/thanks.html">
<input type="hidden" name="_replyto" value="%email">
<input type="hidden" name="_subject" value="ZURB | Foundation Training Inquiry">
<input type="hidden" name="_to" value="foundation@zurb.com">