<ul class="accordion welcome-accordion" data-accordion data-allow-all-closed="true">
<li class="accordion-item welcome-accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Intro Videos</a>
+ <a href="#" class="accordion-title">Getting Started</a>
<div class="accordion-content" data-tab-content>
+
<div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
<div class="responsive-embed widescreen">
- <iframe width="560" height="315" src="https://www.youtube.com/embed/P2rbx0sGPJo" frameborder="0" allowfullscreen></iframe>
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/lFrpnk0Oo_8" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="medium-8 columns">
- <h5>Zero to Website | Part 1: Before You Build - The Basics of the Web </h5>
- <a target="_blank" href="https://youtu.be/P2rbx0sGPJo" class="accordion-content-item-cta">Watch Video</a>
+ <h5>Foundation Starter Projects - CSS Download</h5>
+ <p>This video will take you through downloading and getting started with the Foundation CSS project.</p>
+ <a target="_blank" href="https://youtu.be/lFrpnk0Oo_8?list=PLJVWPVPk_D_0-LDRu8k29w-7ktRk_dJ5n" class="accordion-content-item-cta">Watch Video</a>
</div>
</div>
<div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
<div class="responsive-embed widescreen">
- <iframe width="560" height="315" src="https://www.youtube.com/embed/3nCXVJXe_gg" frameborder="0" allowfullscreen></iframe>
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/3Uj74uJ3GSQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="medium-8 columns">
- <h5>Zero to Website | Part 2: Digging Into Foundation's Starter Package</h5>
- <a target="_blank" href="https://youtu.be/3nCXVJXe_gg" class="accordion-content-item-cta">Watch Video</a>
+ <h5>Foundation Starter Projects - ZURB Stack</h5>
+ <p>This video will take you through downloading and getting started with the Foundation ZURB stack.</p>
+ <a target="_blank" href="https://youtu.be/3Uj74uJ3GSQ" class="accordion-content-item-cta">Watch Video</a>
</div>
</div>
- <div class="row accordion-content-item">
+ <div class="row accordion-content-item accordion-course-callout">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <div class="responsive-embed widescreen">
- <iframe width="560" height="315" src="https://www.youtube.com/embed/yGDTqm713AI" frameborder="0" allowfullscreen></iframe>
- </div>
+ <a target="_blank" href="http://zurb.com/university/foundation-intro" class="accordion-content-item-cta">
+ <img src="{{root}}assets/img/foundation-intro-class.jpg">
+ </a>
</div>
- <div class="medium-8 columns accordion-content-item-text">
- <h5>Zero to Website | Part 3: Intro to the Foundation Grid</h5>
- <a target="_blank" href="https://youtu.be/yGDTqm713AI" class="accordion-content-item-cta">Watch Video</a>
+ <div class="medium-8 columns">
+ <h5>Live Webinar: Introduction to Foundation 6</h5>
+ <p>Achieve maximum thrust by learning how to use Foundation 6 to power your projects. The Foundation team will get you up to speed on everything you need to know to get the most out of Foundation 6.</p>
+ <a target="_blank" href="http://zurb.com/university/foundation-intro" class="accordion-content-item-cta">Learn More</a>
</div>
</div>
</li>
<li class="accordion-item welcome-accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Beginner Lessons</a>
- <div class="accordion-content" data-tab-content>
-
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="{{root}}assets/img/intro-grid.png">
- </div>
- <div class="medium-8 columns">
- <h5>Zero to Website Guide Part 4: Scaffolding Your Portfolio with Foundation’s Grid</h5>
- <a target="_blank" href="http://zurb.com/university/lessons/zero-to-website-guide-part-4-scaffolding-your-portfolio-with-foundation-s-grid" class="accordion-content-item-cta">View Lesson</a>
+ <div class="accordion-content" data-tab-content>
+ <div class="row accordion-content-item">
+ <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="responsive-embed widescreen">
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/3nCXVJXe_gg" frameborder="0" allowfullscreen></iframe>
</div>
</div>
-
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="https://s3.amazonaws.com/university-prod/uploads/attachments/249/original/Sample-blog-post.png?1423700108">
- </div>
- <div class="medium-8 columns">
- <h5>Build a Solid Layout with Foundation</h5>
- <a target="_blank" href="http://zurb.com/university/lessons/build-a-solid-layout-with-foundation" class="accordion-content-item-cta">View Lesson</a>
+ <div class="medium-8 columns">
+ <h5>Digging Into Foundation's Starter Package</h5>
+ <p>Frameworks are a great resource to start with when building your site because they include a boilerplate, a CSS reset, a grid and pre-built UI components. Covers the Foundation file structure, how to add pages, and how to overwrite our premade CSS.</p>
+ <a target="_blank" href="https://youtu.be/3nCXVJXe_gg" class="accordion-content-item-cta">Watch Video</a>
+ </div>
+ </div>
+ <div class="row accordion-content-item">
+ <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="responsive-embed widescreen">
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/yGDTqm713AI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
+ <div class="medium-8 columns">
+ <h5>Intro to the Foundation Grid</h5>
+ <p>Dive into the Foundation grid system. You’ll learn to wield the magical powers of the Foundation grid to make your content fit nicely on any device. Foundation’s grid is based on tried-and-true CSS — specifically, floats and clears or display: flex in the Flexbox version.
+</p>
+ <a target="_blank" href="https://youtu.be/yGDTqm713AI" class="accordion-content-item-cta">View Lesson</a>
+ </div>
+ </div>
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="https://s3.amazonaws.com/university-prod/uploads/attachments/495/original/143-pic-ex1.png?1480448383">
- </div>
- <div class="medium-8 columns">
- <h5>Have It Your Way with Foundation's Modular Responsive Navigation</h5>
- <a target="_blank" href="http://zurb.com/university/lessons/have-it-your-way-with-foundation-s-modular-responsive-navigation" class="accordion-content-item-cta">View Lesson</a>
+ <div class="row accordion-content-item">
+ <div class="medium-4 columns accordion-content-item-thumbnail">
+ <div class="responsive-embed widescreen">
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/mLiX230QVRM" frameborder="0" allowfullscreen></iframe>
</div>
</div>
-
+ <div class="medium-8 columns">
+ <h5>Have It Your Way with Foundation's Modular Responsive Navigation</h5>
+ <p>Learn how Foundation’s Responsive Navigation plugin lets you write a menu once and display it any number of different ways depending on media query.</p>
+ <a target="_blank" href="https://www.youtube.com/watch?v=mLiX230QVRM" class="accordion-content-item-cta">View Lesson</a>
+ </div>
</div>
+ </div>
</li>
<li class="accordion-item welcome-accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">HTML Templates</a>
+ <a href="#" class="accordion-title">Templates and Code Snippets</a>
<div class="accordion-content " data-tab-content>
<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">
+ <a target="_blank" href="http://foundation.zurb.com/templates.html">
+ <img src="http://foundation.zurb.com/assets/img/sites-templates/foundation6-templates-07.svg">
+ </a>
</div>
<div class="medium-8 columns">
- <h5>Portfolio Template</h5>
- <p>Show off your work and highlight what you do with this grid style thumbnail layout.</p>
+ <h5>Foundation Templates</h5>
+ <p>Get eight responsive templates to kick off your projects. Each of these responsive HTML templates were built with the same techniques and principles we teach in our Introduction to Foundation 6 Course to build your business upon.</p>
<a target="_blank" href="http://foundation.zurb.com/templates.html">View Templates</a>
</div>
</div>
<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-06.svg">
+ <div class="responsive-embed widescreen">
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/SmhGUT_N-jw" frameborder="0" allowfullscreen></iframe>
+ </div>
</div>
<div class="medium-8 columns">
- <h5>Blog Single Column Template</h5>
- <p>This sleek, minimal approach can help your blog stand out by putting content front and center.</p>
- <a target="_blank" href="http://foundation.zurb.com/templates.html">View Templates</a>
+ <h5>Foundation Building Blocks</h5>
+ <p>Building Blocks are coded UI components you can drop into any standard Foundation project. From navigation components to media and everything in between, Building Blocks will help you rapidly accelerate your development time. Browse our library of over 100 Building Blocks created by the team at ZURB and the Foundation community.</p>
+ <a target="_blank" href="http://zurb.com/article/1469/foundation-building-blocks-over-100-compo" class="accordion-content-item-cta">Learn More</a>
</div>
</div>
<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-03.svg">
+ <a target="_blank" href="http://foundation.zurb.com/building-blocks/kits.html" class="accordion-content-item-cta">
+ <img src="https://foundation.zurb.com/building-blocks/assets/img/kits/dashboard/dashboard-kit.jpg">
+ </a>
</div>
<div class="medium-8 columns">
- <h5>Agency Template</h5>
- <p>Bring your work to the forefront with this sleek template that's perfect for agencies or freelancers.</p>
- <a target="_blank" href="http://foundation.zurb.com/templates.html" class="accordion-content-item-cta">View Templates</a>
+ <h5>Foundation Kits</h5>
+ <p>Foundation Kits are curated bundles of Building Blocks designed for building specific types of websites and apps. Download 7 powerful Kits to jumpstart your responsive ecommerce site, mobile app, marketing site, portfolio page, admin dashboard and more.</p>
+ <a target="_blank" href="http://foundation.zurb.com/building-blocks/kits.html" class="accordion-content-item-cta">View Kits</a>
</div>
</div>
</li>
<li class="accordion-item welcome-accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Coming from Another Framework</a>
+ <a href="#" class="accordion-title">Why Foundation</a>
<div class="accordion-content" data-tab-content>
- <div class="row column accordion-content-item">
- <h5>Why Foundation</h5>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam dolor excepturi consequuntur explicabo, ex velit ea officia debitis dolorem, dignissimos expedita impedit, hic natus iure quas inventore similique quis laudantium.</p>
- <a target="_blank" href="#" class="accordion-content-item-cta">Learn More</a>
- </div>
-
<div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
<div class="responsive-embed widescreen">
</div>
</div>
<div class="medium-8 columns">
- <h5>Intro to the Foundation Grid</h5>
- <a target="_blank" href="https://youtu.be/P2rbx0sGPJo" class="accordion-content-item-cta">Watch Video</a>
+ <h5>The World’s Most Advanced Front-end Framework</h5>
+ <p>Coming from another framework? It’s the perfect time to make the switch and learn Foundation. Not only have we revamped all of our documentation and put together a brand new, cutting edge set of Building Blocks to learn from, but we’ve prepared a great resource to help you bring your team on board. Download our free e-book to get your guide to convincing your team that Foundation is better, easy to learn, and more flexible than their current framework.
+ </p>
+ <a target="_blank" href="#" class="accordion-content-item-cta">Learn More</a>
</div>
</div>
</div>
</div>
<div class="medium-8 columns">
- <h5>Ways to get started with Foundation</h5>
- <a target="_blank" href="#" class="accordion-content-item-cta">Watch Video</a>
- </div>
- </div>
-
- </div>
- </li>
-
- <li class="accordion-item welcome-accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Getting Started</a>
- <div class="accordion-content" data-tab-content>
-
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="{{root}}assets/img/docs-kitchensink.png">
- </div>
- <div class="medium-8 columns">
- <h5>Kitchen Sink</h5>
- <p>Every component in Foundation all on one page, mingling with each other.</p>
- <a target="_blank" href="{{root}}kitchen-sink.html" class="accordion-content-item-cta">View Kitchen Sink </a>
+ <h5>Build Your Career on a Solid Foundation</h5>
+ <p>Web technologies are rapidly changing, but time and resources are finite. It can be difficult to determine where to invest your energy to get a return on your investment. Learning Foundation places you at the cutting edge of the website development. Over Foundation’s 5 year history, it has consistently led the pack, changing the way the web is designed and built. Download our free e-book to learn more about the professional opportunities with the world’s most advanced front-end framework, and get started building YOUR career on a solid Foundation.
+ </p>
+ <a target="_blank" href="#" class="accordion-content-item-cta">Learn More</a>
</div>
</div>
<div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="{{root}}assets/img/intro-css.png">
+ <div class="responsive-embed widescreen">
+ <img src="http://placehold.it/300x300" class="" height="" width="" alt="">
+ </div>
</div>
<div class="medium-8 columns">
- <h5>Foundation Starter Projects - CSS Download</h5>
- <p>This video will take you through downloading and getting started with the Foundation CSS project.</p>
- <a target="_blank" href="https://youtu.be/lFrpnk0Oo_8?list=PLJVWPVPk_D_0-LDRu8k29w-7ktRk_dJ5n" class="accordion-content-item-cta">Watch Video</a>
+ <h5>Leverage the Power of Design for Your Business</h5>
+ <p>With a robust ecosystem of community integrations, and the new Foundation Building Blocks, Foundation can help bridge the gap between your development team and your designers. Check out our free e-book on how you can use Foundation to leverage the power of design in your business.
+ </p>
+ <a target="_blank" href="#" class="accordion-content-item-cta">Learn More</a>
</div>
</div>
- <div class="row accordion-content-item">
- <div class="medium-4 columns accordion-content-item-thumbnail">
- <img src="{{root}}assets/img/foundation-intro-class.jpg">
- </div>
- <div class="medium-8 columns">
- <h5>Introduction to Foundation 6</h5>
- <p>Achieve maximum thrust by learning how to use Foundation 6 to power your projects. The Foundation team will get you up to speed on everything you need to know to get the most out of Foundation 6.</p>
- <a target="_blank" href="http://zurb.com/university/foundation-intro" class="accordion-content-item-cta">Learn More</a>
- </div>
- </div>
</div>
</li>
+
</ul>
---
<li class="accordion-item welcome-accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Building Blocks</a>
<div class="accordion-content" data-tab-content>
-
<div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
<div class="responsive-embed widescreen">
- <iframe width="560" height="315" src="https://www.youtube.com/embed/SmhGUT_N-jw" frameborder="0" allowfullscreen></iframe>
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/adLpmsU9v2g" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="medium-8 columns">
- <h5>Foundation Building Blocks: Over 100 Components to Jump Start Your Projects</h5>
- <p>Foundation, the world’s most advanced front-end framework, has transformed the way the web is built with Foundation Building Blocks. This new, open-source library of coded UI components cuts development time in half by giving designers a massive head start to complete projects faster and easier than ever.</p>
- <a target="_blank" href="http://zurb.com/article/1469/foundation-building-blocks-over-100-compo" class="accordion-content-item-cta">Learn More</a>
+ <h5>How to Use the New ZURB Foundation Building Blocks</h5>
+ <p>The Foundation team has cut your development time in half again with Foundation Building Blocks. There are Hundreds of Coded UI Components for Your Foundation Projects. In this tutorial we'll show you how to find the right building block and the way to install it that works best for you.</p>
+ <a target="_blank" href="https://youtu.be/adLpmsU9v2g" class="accordion-content-item-cta">Learn More</a>
</div>
</div>
-
<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/300x200" class="" height="" width="" alt="">
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/DeTHUSa3NcQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="medium-8 columns">
- <h5>How Building Blocks Will Save You Time and Money</h5>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est illo similique, molestiae, magni aperiam facere odio quis dignissimos cupiditate, at itaque reiciendis obcaecati ducimus impedit! Id pariatur voluptatum illum temporibus.</p>
- <a target="_blank" href="link to a post" class="accordion-content-item-cta">Learn More</a>
+ <h5>How to Create a Foundation Building Block</h5>
+ <p>So you want to build a Building Block? Well fear not! You can get in on the action too and get your work featured! We’ve put together a simple guide to submitting a Building Block. Once it’s submitted, we’ll promote your awesomeness to the greater Foundation community because you rock!
+</p>
+ <a target="_blank" href="https://youtu.be/DeTHUSa3NcQ" class="accordion-content-item-cta">Learn More</a>
</div>
</div>
-
- <div class="row">
+ <div class="row accordion-content-item">
<div class="medium-4 columns accordion-content-item-thumbnail">
<div class="responsive-embed widescreen">
- <iframe width="560" height="315" src="https://www.youtube.com/embed/adLpmsU9v2g" frameborder="0" allowfullscreen></iframe>
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/PKr0ItjFeX0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="medium-8 columns">
- <h5>How to Use the New ZURB Foundation Building Blocks</h5>
- <p>The Foundation team has cut your development time in half again with Foundation Building Blocks. There are Hundreds of Coded UI Components for Your Foundation Projects. In this tutorial we'll show you how to find the right building block and the way to install it that works best for you.</p>
- <a target="_blank" href="https://youtu.be/adLpmsU9v2g" class="accordion-content-item-cta">Learn More</a>
+ <h5>How to Submit a ZURB Foundation Building Block</h5>
+ <p>The Building Blocks site is open source just like Foundation, meaning anyone can contribute to it. It’s built on the same Node based build system the ZURB Stack is built on. Submissions are made through GitHub, with pull requests. In this video, you'll learn how to submit your building block!
+</p>
+ <a target="_blank" href="https://youtu.be/PKr0ItjFeX0" class="accordion-content-item-cta">Learn More</a>
</div>
</div>
</div>
<li class="accordion-item welcome-accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Foundation Showcase</a>
<div class="accordion-content" data-tab-content>
-
- <div class="row accordion-content-item">
- <div class="medium-5 columns accordion-content-item-thumbnail">
- <div class="responsive-embed widescreen">
- <img src="http://placehold.it/300x200" class="" height="" width="" alt="">
- </div>
- </div>
- <div class="medium-7 columns">
- <h5>How Foundation Will Save You Time and Money</h5>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est illo similique, molestiae, magni aperiam facere odio quis dignissimos cupiditate, at itaque reiciendis obcaecati ducimus impedit! Id pariatur voluptatum illum temporibus.</p>
- <a target="_blank" href="link to a post" class="accordion-content-item-cta">Watch Video</a>
- </div>
- </div>
-
<div class="row accordion-content-item">
<div class="medium-5 columns accordion-content-item-thumbnail">
<img src="{{root}}assets/img/foundation-turns-5.png" class="" height="" width="" alt="">
</div>
</div>
</li>
-</ul>
\ No newline at end of file
+</ul>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
