mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-22 23:27:54 -05:00
Quick HOC copy changes from Natalie & Mitch
This commit is contained in:
parent
79a8d771d6
commit
2a881fccb5
2 changed files with 46 additions and 40 deletions
|
@ -12,68 +12,71 @@ 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 className="card-deck">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<p>
|
||||
With Scratch, you can program your own stories, games, and animations —
|
||||
and share them online.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
<ul className="sub-nav">
|
||||
<li className="info">Find out more:</li>
|
||||
<a href="/about"><li className="link">About Scratch</li></a>
|
||||
<a href="/parents"><li className="link">For Parents</li></a>
|
||||
<a href="/educators"><li className="link">For Educators</li></a>
|
||||
</ul>
|
||||
<ul className="sub-nav">
|
||||
<li className="info">Find out more:</li>
|
||||
<a href="/about"><li className="link">About Scratch</li></a>
|
||||
<a href="/parents"><li className="link">For Parents</li></a>
|
||||
<a href="/educators"><li className="link">For Educators</li></a>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="inner">
|
||||
<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>
|
||||
Try another tutorial from the Tips Window.
|
||||
<a href="/projects/editor/?tip_bar=home">See all tips</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</Box>
|
||||
|
|
|
@ -192,7 +192,7 @@ $base-bg: $ui-white;
|
|||
|
||||
.column {
|
||||
margin: 10px;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue