scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 17:16:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #55 from thisandagain/bugfix/hoc-copy

Browse source 
Quick HOC copy changes from Natalie & Mitch
This commit is contained in:
Andrew Sliwinski 2015-10-13 17:23:04 -04:00
commit 9d73c7ab70
2 changed files with 46 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/views/hoc/hoc.jsx
View file

@ -12,31 +12,35 @@ var Hoc = React.createClass({
return (
<div>
<div className="top-banner">
<h1>Create Projects to Share!</h1>
<p>With Scratch, you can program your own stories, games, and animations — and share them online.</p>
<h1>Get Creative with Coding</h1>
<div className="card-deck">
<div className="card">
<div className="card-info">
<img src="/images/hide-seek-tutorial.png" />
<a href="#"><Button>Create a Hide & Seek Game</Button></a>
</div>
</div>
<div className="card">
<div className="card-info">
<img src="/images/dance-tutorial.png" />
<a href="/projects/editor/?tip_bar=dance"><Button>Compose a Dance Sequence</Button></a>
</div>
</div>
<div className="card">
<div className="card-info">
<img src="/images/name-tutorial.png" />
<a href="/projects/editor/?tip_bar=name"><Button>Animate Your Name</Button></a>
</div>
</div>
<div className="card">
<div className="card-info">
<img src="/images/hide-seek-tutorial.png" />
<a href="#"><Button>Hide-and-Seek Game</Button></a>
</div>
</div>
<div className="card">
<div className="card-info">
<img src="/images/dance-tutorial.png" />
<a href="/projects/editor/?tip_bar=dance"><Button>Dance, Dance, Dance</Button></a>
</div>
</div>
</div>
<p>
With Scratch, you can program your own stories, games, and animations —
and share them online.
</p>
<ul className="sub-nav">
<li className="info">Find out more:</li>
@ -50,30 +54,29 @@ var Hoc = React.createClass({
<Box>
<section className="one-up">
<div className="column">
<h3>Related Resources</h3>
<p>Below are some resources to help explore Scratch by yourself or to assist groups in
workshops and classrooms <a href="/help">Find out more</a></p>
<h3>Activity Cards and Guides</h3>
<p>Print the Scratch cards for tips and ideas for each of the activities!</p>
</div>
<div className="resource">
<img src="/svgs/tips-card.svg" />
<div className="resource-info">
<a href="#">Hide & Seek Tip Cards</a>
<div className="file-size">13mbs</div>
<a href="#">Animate Your Name</a>
<div className="file-size">13 mb</div>
</div>
</div>
<div className="resource">
<img src="/svgs/tips-card.svg" />
<div className="resource-info">
<a href="#">Dance Tip Cards</a>
<div className="file-size">5mbs</div>
<a href="#">Hide-and-Seek</a>
<div className="file-size">5 mb</div>
</div>
</div>
<div className="resource">
<img src="/svgs/tips-card.svg" />
<div className="resource-info">
<a href="#">Name Tip Cards</a>
<div className="file-size">11mbs</div>
<a href="#">Dance, Dance, Dance</a>
<div className="file-size">11 mb</div>
</div>
</div>
</section>
@ -82,7 +85,7 @@ var Hoc = React.createClass({
<div className="column">
<h3>Tips Window</h3>
<p>New to Scratch or haven’t heard of the Tips Window? Check out interactive tutorials,
handy block information, and other helpful hints all in the new
handy block information, and other helpful hints in the new
2015 <a href="/projects/editor/?tip_bar=home">Tips Window</a></p>
</div>
<div className="column">
@ -93,8 +96,11 @@ var Hoc = React.createClass({
<section className="one-up">
<div className="column">
<h3>Still Want More?</h3>
<p><strong>Awesome!</strong> Here are some addtional tutorials
from the Tips Window. <a href="/projects/editor/?tip_bar=home">See all tips</a></p>
<p>
<strong>Go for it!</strong>&nbsp;
Try another tutorial from the Tips Window.&nbsp;
<a href="/projects/editor/?tip_bar=home">See all tips</a>
</p>
</div>
</section>
</Box>

2
src/views/hoc/hoc.scss
View file

@ -192,7 +192,7 @@ $base-bg: $ui-white;
.column {
margin: 10px;
max-width: 600px;
width: 100%;
}
}