scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-22 23:27:54 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Quick HOC copy changes from Natalie & Mitch

Browse source
This commit is contained in:
Andrew Sliwinski 2015-10-13 17:20:05 -04:00
parent 79a8d771d6
commit 2a881fccb5
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 ( return (
<div> <div>
<div className="top-banner"> <div className="top-banner">
<h1>Create Projects to Share!</h1> <h1>Get Creative with Coding</h1>
<p>With Scratch, you can program your own stories, games, and animations — and share them online.</p>
<div className="card-deck"> <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">
<div className="card-info"> <div className="card-info">
<img src="/images/name-tutorial.png" /> <img src="/images/name-tutorial.png" />
<a href="/projects/editor/?tip_bar=name"><Button>Animate Your Name</Button></a> <a href="/projects/editor/?tip_bar=name"><Button>Animate Your Name</Button></a>
</div> </div>
</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>
<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"> <ul className="sub-nav">
<li className="info">Find out more:</li> <li className="info">Find out more:</li>
@ -50,30 +54,29 @@ var Hoc = React.createClass({
<Box> <Box>
<section className="one-up"> <section className="one-up">
<div className="column"> <div className="column">
<h3>Related Resources</h3> <h3>Activity Cards and Guides</h3>
<p>Below are some resources to help explore Scratch by yourself or to assist groups in <p>Print the Scratch cards for tips and ideas for each of the activities!</p>
workshops and classrooms <a href="/help">Find out more</a></p>
</div> </div>
<div className="resource"> <div className="resource">
<img src="/svgs/tips-card.svg" /> <img src="/svgs/tips-card.svg" />
<div className="resource-info"> <div className="resource-info">
<a href="#">Hide & Seek Tip Cards</a> <a href="#">Animate Your Name</a>
<div className="file-size">13mbs</div> <div className="file-size">13 mb</div>
</div> </div>
</div> </div>
<div className="resource"> <div className="resource">
<img src="/svgs/tips-card.svg" /> <img src="/svgs/tips-card.svg" />
<div className="resource-info"> <div className="resource-info">
<a href="#">Dance Tip Cards</a> <a href="#">Hide-and-Seek</a>
<div className="file-size">5mbs</div> <div className="file-size">5 mb</div>
</div> </div>
</div> </div>
<div className="resource"> <div className="resource">
<img src="/svgs/tips-card.svg" /> <img src="/svgs/tips-card.svg" />
<div className="resource-info"> <div className="resource-info">
<a href="#">Name Tip Cards</a> <a href="#">Dance, Dance, Dance</a>
<div className="file-size">11mbs</div> <div className="file-size">11 mb</div>
</div> </div>
</div> </div>
</section> </section>
@ -82,7 +85,7 @@ var Hoc = React.createClass({
<div className="column"> <div className="column">
<h3>Tips Window</h3> <h3>Tips Window</h3>
<p>New to Scratch or haven’t heard of the Tips Window? Check out interactive tutorials, <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> 2015 <a href="/projects/editor/?tip_bar=home">Tips Window</a></p>
</div> </div>
<div className="column"> <div className="column">
@ -93,8 +96,11 @@ var Hoc = React.createClass({
<section className="one-up"> <section className="one-up">
<div className="column"> <div className="column">
<h3>Still Want More?</h3> <h3>Still Want More?</h3>
<p><strong>Awesome!</strong> Here are some addtional tutorials <p>
from the Tips Window. <a href="/projects/editor/?tip_bar=home">See all tips</a></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> </div>
</section> </section>
</Box> </Box>

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

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