mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
Merge pull request #921 from mewtaylor/issue/gh-903-hoc
Implement GH-903: Update hoc page with new tutorials
This commit is contained in:
Matthew Taylor
GitHub
commit
42b6e59443
23 changed files with 339 additions and 411 deletions
|
|
@ -69,12 +69,6 @@
|
||||||
"general.studios": "Studios",
|
"general.studios": "Studios",
|
||||||
"general.support": "Support",
|
"general.support": "Support",
|
||||||
"general.tipsWindow": "Tips Window",
|
"general.tipsWindow": "Tips Window",
|
||||||
"general.tipsAnimateYourNameTitle": "Animate Your Name",
|
|
||||||
"general.tipsBearstack": "Bearstack Story",
|
|
||||||
"general.tipsDanceTitle": "Dance, Dance, Dance",
|
|
||||||
"general.tipsGetStarted": "Getting Started",
|
|
||||||
"general.tipsHideAndSeekTitle": "Hide-and-Seek Game",
|
|
||||||
"general.tipsPongGame": "Create a Pong Game",
|
|
||||||
"general.termsOfUse": "Terms of Use",
|
"general.termsOfUse": "Terms of Use",
|
||||||
"general.username": "Username",
|
"general.username": "Username",
|
||||||
"general.validationEmail": "Please enter a valid email address",
|
"general.validationEmail": "Please enter a valid email address",
|
||||||
|
|
|
||||||
|
|
@ -30,55 +30,49 @@ var Hoc = React.createClass({
|
||||||
<div className="hoc">
|
<div className="hoc">
|
||||||
<TitleBanner className={this.state.bgClass}>
|
<TitleBanner className={this.state.bgClass}>
|
||||||
<h1>
|
<h1>
|
||||||
<FormattedMessage
|
<FormattedMessage id='hoc.title' />
|
||||||
id='hoc.title'
|
|
||||||
defaultMessage={'Get Creative with Coding'} />
|
|
||||||
</h1>
|
</h1>
|
||||||
<p>
|
<p>
|
||||||
<FormattedMessage
|
<FormattedMessage id='hoc.subTitle' />
|
||||||
id='hoc.subTitle'
|
|
||||||
defaultMessage={
|
|
||||||
'With Scratch, you can program your own stories, games, and animations — ' +
|
|
||||||
'and share them online.'
|
|
||||||
} />
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<section>
|
<section className="hoc-section mod-title-banner">
|
||||||
<FlexRow>
|
<FlexRow>
|
||||||
<div className="card">
|
<div className="flex-row-card">
|
||||||
<a href="/projects/editor/?tip_bar=name">
|
<a href="/projects/editor/?tip_bar=name">
|
||||||
<div className="card-info" onMouseEnter={this.onCardEnter.bind(this, 'name-bg')}>
|
<div className="flex-row-card-info"
|
||||||
<img src="/images/hoc2015/name-tutorial.jpg" alt="" />
|
onMouseEnter={this.onCardEnter.bind(this, 'mod-name-bg')}>
|
||||||
<Button>
|
<img className="flex-row-card-info-img"
|
||||||
<FormattedMessage
|
src="/images/hoc/name-tutorial.jpg"
|
||||||
id='general.tipsAnimateYourNameTitle'
|
alt="" />
|
||||||
defaultMessage={'Animate Your Name'} />
|
<Button className="flex-row-card-info-button">
|
||||||
|
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="card" onMouseEnter={this.onCardEnter.bind(this, 'wbb-bg')}>
|
<div className="flex-row-card" onMouseEnter={this.onCardEnter.bind(this, 'mod-wbb-bg')}>
|
||||||
<a href="/hide/">
|
<a href="/projects/editor/?tip_bar=fly">
|
||||||
<div className="card-info">
|
<div className="flex-row-card-info">
|
||||||
<img src="/images/hoc2015/hide-seek-tutorial.jpg" alt="" />
|
<img className="flex-row-card-info-img"
|
||||||
<Button>
|
src="/images/hoc/make-it-fly-tutorial.png"
|
||||||
<FormattedMessage
|
alt="" />
|
||||||
id='general.tipsHideAndSeekTitle'
|
<Button className="flex-row-card-info-button">
|
||||||
defaultMessage={'Hide-and-Seek Game'} />
|
<FormattedMessage id='hoc.tipsMakeItFlyTitle' />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="card" onMouseEnter={this.onCardEnter.bind(this, 'dance-bg')}>
|
<div className="flex-row-card" onMouseEnter={this.onCardEnter.bind(this, 'mod-dance-bg')}>
|
||||||
<a href="/projects/editor/?tip_bar=dance">
|
<a href="/projects/editor/?tip_bar=music">
|
||||||
<div className="card-info">
|
<div className="flex-row-card-info">
|
||||||
<img src="/images/hoc2015/dance-tutorial.jpg" alt="" />
|
<img className="flex-row-card-info-img"
|
||||||
<Button>
|
src="/images/hoc/make-music-tutorial.png"
|
||||||
<FormattedMessage
|
alt="" />
|
||||||
id='general.tipsDanceTitle'
|
<Button className="flex-row-card-info-button">
|
||||||
defaultMessage={'Dance, Dance, Dance'} />
|
<FormattedMessage id='hoc.tipsMakeMusicTitle' />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -88,29 +82,21 @@ var Hoc = React.createClass({
|
||||||
|
|
||||||
<SubNavigation>
|
<SubNavigation>
|
||||||
<li className="description">
|
<li className="description">
|
||||||
<FormattedMessage
|
<FormattedMessage id='hoc.findOutMore' />:
|
||||||
id='hoc.findOutMore'
|
|
||||||
defaultMessage={'Find out more'} />:
|
|
||||||
</li>
|
</li>
|
||||||
<a href="/about/">
|
<a href="/about/">
|
||||||
<li>
|
<li>
|
||||||
<FormattedMessage
|
<FormattedMessage id='general.about' />
|
||||||
id='footer.about'
|
|
||||||
defaultMessage={'About Scratch'} />
|
|
||||||
</li>
|
</li>
|
||||||
</a>
|
</a>
|
||||||
<a href="/parents/">
|
<a href="/parents/">
|
||||||
<li>
|
<li>
|
||||||
<FormattedMessage
|
<FormattedMessage id='general.forParents' />
|
||||||
id='general.forParents'
|
|
||||||
defaultMessage={'For Parents'} />
|
|
||||||
</li>
|
</li>
|
||||||
</a>
|
</a>
|
||||||
<a href="/educators/">
|
<a href="/educators/">
|
||||||
<li>
|
<li>
|
||||||
<FormattedMessage
|
<FormattedMessage id='general.forEducators'/>
|
||||||
id='general.forEducators'
|
|
||||||
defaultMessage={'For Educators'} />
|
|
||||||
</li>
|
</li>
|
||||||
</a>
|
</a>
|
||||||
</SubNavigation>
|
</SubNavigation>
|
||||||
|
|
@ -120,163 +106,124 @@ var Hoc = React.createClass({
|
||||||
|
|
||||||
<div className="inner">
|
<div className="inner">
|
||||||
<Box title={''}>
|
<Box title={''}>
|
||||||
<section id="teacher" className="one-up">
|
<section id="teacher" className="hoc-section">
|
||||||
<div className="column">
|
<div className="hoc-section-column">
|
||||||
<h3>
|
<h3>
|
||||||
<FormattedMessage
|
<FormattedMessage id='hoc.activityCardsHeader' />
|
||||||
id='hoc.activityCardsHeader'
|
|
||||||
defaultMessage={'Activity Cards and Guides'} />
|
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p className="section-paragraph">
|
||||||
<FormattedHTMLMessage
|
<FormattedHTMLMessage id='hoc.activityCardsInfo1' />
|
||||||
id='hoc.activityCardsInfo1'
|
|
||||||
defaultMessage={
|
|
||||||
'Want tips and ideas for these Hour of Code™ activities? ' +
|
|
||||||
'Use the activity cards to get ideas for creating with ' +
|
|
||||||
'Scratch. Facilitator guides can help you plan ' +
|
|
||||||
'a group activity.'
|
|
||||||
} />
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="resource">
|
<div className="hoc-section-resource">
|
||||||
<img src="/svgs/tips-card.svg" alt="" />
|
<img className="hoc-section-resource-img"
|
||||||
<div className="resource-info">
|
src="/svgs/tips-card.svg"
|
||||||
<h5>
|
alt="" />
|
||||||
<FormattedMessage
|
<div className="hoc-section-resource-info">
|
||||||
id='general.tipsAnimateYourNameTitle'
|
<h5 className="hoc-section-resource-info-header">
|
||||||
defaultMessage={'Animate Your Name'} />
|
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
|
||||||
</h5>
|
</h5>
|
||||||
<a href="/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf">
|
<a className="hoc-section-resource-anchor"
|
||||||
<FormattedMessage
|
href="/scratchr2/static/pdfs/help/AnimateYourNameCards.pdf">
|
||||||
id='hoc.activityCards'
|
<FormattedMessage id='hoc.activityCards' />
|
||||||
defaultMessage={'Activity Cards'} />
|
|
||||||
</a>
|
</a>
|
||||||
<a href="/scratchr2/static/pdfs/help/AnimateYourNameGuide.pdf">
|
<a className="hoc-section-resource-anchor"
|
||||||
<FormattedMessage
|
href="/scratchr2/static/pdfs/help/AnimateYourNameGuide.pdf">
|
||||||
id='hoc.facilitatorGuide'
|
<FormattedMessage id='hoc.facilitatorGuide' />
|
||||||
defaultMessage={'Facilitator Guide'} />
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="hoc-section-resource">
|
||||||
<div className="resource">
|
<img className="hoc-section-resource-img"
|
||||||
<img src="/svgs/tips-card.svg" alt="" />
|
src="/svgs/tips-card.svg"
|
||||||
<div className="resource-info">
|
alt="" />
|
||||||
<h5>
|
<div className="hoc-section-resource-info">
|
||||||
<FormattedMessage
|
<h5 className="hoc-section-resource-info-header">
|
||||||
id='general.tipsHideAndSeekTitle'
|
<FormattedMessage id='hoc.tipsMakeItFlyTitle' />
|
||||||
defaultMessage={'Hide-and-Seek Game'} />
|
|
||||||
</h5>
|
</h5>
|
||||||
<a href="/scratchr2/static/pdfs/help/Hide-and-Seek-Cards.pdf">
|
<a className="hoc-section-resource-anchor"
|
||||||
<FormattedMessage
|
href="/scratchr2/static/pdfs/help/FlyCards.pdf">
|
||||||
id='hoc.activityCards'
|
<FormattedMessage id='hoc.activityCards' />
|
||||||
defaultMessage={'Activity Cards'} />
|
|
||||||
</a>
|
|
||||||
<a href="/scratchr2/static/pdfs/help/Hide-and-Seek-Guide.pdf">
|
|
||||||
<FormattedMessage
|
|
||||||
id='hoc.facilitatorGuide'
|
|
||||||
defaultMessage={'Facilitator Guide'} />
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="hoc-section-resource">
|
||||||
<div className="resource">
|
<img className="hoc-section-resource-img"
|
||||||
<img src="/svgs/tips-card.svg" alt="" />
|
src="/svgs/tips-card.svg"
|
||||||
<div className="resource-info">
|
alt="" />
|
||||||
<h5>
|
<div className="hoc-section-resource-info">
|
||||||
<FormattedMessage
|
<h5 className="hoc-section-resource-info-header">
|
||||||
id='general.tipsDanceTitle'
|
<FormattedMessage id='hoc.tipsMakeMusicTitle' />
|
||||||
defaultMessage={'Dance, Dance, Dance'} />
|
|
||||||
</h5>
|
</h5>
|
||||||
<a href="/scratchr2/static/pdfs/help/DanceCards.pdf">
|
<a className="hoc-section-resource-anchor"
|
||||||
<FormattedMessage
|
href="/scratchr2/static/pdfs/help/MusicCards.pdf">
|
||||||
id='hoc.activityCards'
|
<FormattedMessage id='hoc.activityCards' />
|
||||||
defaultMessage={'Activity Cards'} />
|
|
||||||
</a>
|
|
||||||
<a href="/scratchr2/static/pdfs/help/DanceGuide.pdf">
|
|
||||||
<FormattedMessage
|
|
||||||
id='hoc.facilitatorGuide'
|
|
||||||
defaultMessage={'Facilitator Guide'} />
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="two-up">
|
<section className="hoc-section">
|
||||||
<div className="column">
|
<div className="hoc-section-column mod-split">
|
||||||
<h3>
|
<h3>
|
||||||
<FormattedMessage
|
<FormattedMessage id='hoc.helpScratch' />
|
||||||
id='hoc.helpScratch'
|
|
||||||
defaultMessage={'Help with Scratch'} />
|
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p className="hoc-section-paragraph">
|
||||||
<FormattedHTMLMessage
|
<FormattedHTMLMessage id='hoc.helpScratchDescription' />
|
||||||
id='hoc.helpScratchDescription'
|
|
||||||
defaultMessage={
|
|
||||||
'You can find tutorials and helpful hints in the ' +
|
|
||||||
'<a href="/projects/editor/?tip_bar=home">Tips Window</a>. ' +
|
|
||||||
'For more resources, see <a href="/help/">Scratch Help</a>'
|
|
||||||
} />
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="column">
|
<div className="hoc-section-column mod-split">
|
||||||
<img src="/images/hoc2015/tips-test-animation.gif" alt="Tips Window Animation" />
|
<img className="hoc-section-column-img"
|
||||||
|
src="/images/hoc/tips-test-animation.gif"
|
||||||
|
alt="Tips Window Animation" />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="one-up">
|
<section className="hoc-section">
|
||||||
<div className="column">
|
<div className="hoc-section-column">
|
||||||
<h3>
|
<h3>
|
||||||
<FormattedMessage
|
<FormattedMessage id='hoc.moreActivities' />
|
||||||
id='hoc.moreActivities'
|
|
||||||
defaultMessage={'Want More Activities?'} />
|
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p className="hoc-section-paragraph">
|
||||||
<FormattedHTMLMessage
|
<FormattedHTMLMessage id='hoc.moreDescription' />
|
||||||
id='hoc.moreDescription'
|
|
||||||
defaultMessage={
|
|
||||||
'Check out these other tutorials. Or remix one of our ' +
|
|
||||||
'<a href="/starter_projects/">Starter Projects</a>'
|
|
||||||
} />
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FlexRow>
|
<FlexRow>
|
||||||
<div className="card">
|
<div className="flex-row-card">
|
||||||
<a href="/projects/editor/?tip_bar=getStarted">
|
<a href="/projects/editor/?tip_bar=getStarted">
|
||||||
<div className="card-info">
|
<div className="flex-row-card-info">
|
||||||
<img src="/images/hoc2015/getting-started-tutorial.jpg" alt="" />
|
<img className="flex-row-card-info-img"
|
||||||
|
src="/images/hoc/getting-started-tutorial.jpg" alt="" />
|
||||||
<Button>
|
<Button>
|
||||||
<FormattedMessage
|
<FormattedMessage id='hoc.tipsGetStarted' />
|
||||||
id='general.tipsGetStarted'
|
|
||||||
defaultMessage={'Getting Started'} />
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="card">
|
<div className="flex-row-card">
|
||||||
<a href="/bearstack/">
|
<a href="/hide/">
|
||||||
<div className="card-info">
|
<div className="flex-row-card-info">
|
||||||
<img src="/images/hoc2015/bearstack-tutorial.jpg" alt="" />
|
<img className="flex-row-card-info-img"
|
||||||
|
src="/images/hoc/hide-seek-tutorial.jpg"
|
||||||
|
alt="" />
|
||||||
<Button>
|
<Button>
|
||||||
<FormattedMessage
|
<FormattedMessage id='hoc.tipsHideAndSeekTitle' />
|
||||||
id='general.tipsBearstack'
|
|
||||||
defaultMessage={'Bearstack Story'} />
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="card">
|
<div className="flex-row-card">
|
||||||
<a href="/hoops">
|
<a href="//projects/editor/?tip_bar=dance">
|
||||||
<div className="card-info">
|
<div className="flex-row-card-info">
|
||||||
<img src="/images/hoc2015/bball-tutorial.jpg" alt="" />
|
<img className="flex-row-card-info-img"
|
||||||
|
src="/images/hoc/dance-tutorial.jpg"
|
||||||
|
alt="" />
|
||||||
<Button>
|
<Button>
|
||||||
<FormattedMessage
|
<FormattedMessage id='hoc.tipsDanceTitle' />
|
||||||
id='general.tipsBBallHoops'
|
|
||||||
defaultMessage={'B-Ball Hoops'} />
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -284,47 +231,39 @@ var Hoc = React.createClass({
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="one-up">
|
<section className="hoc-section">
|
||||||
<div className="column">
|
<div className="hoc-section-column">
|
||||||
<h3>
|
<h3>
|
||||||
<FormattedMessage
|
<FormattedMessage id='hoc.addToStudios' />
|
||||||
id='hoc.addToStudios'
|
|
||||||
defaultMessage={'Add Your Projects to Studios'} />
|
|
||||||
</h3>
|
</h3>
|
||||||
<p>
|
<p className="hoc-section-paragraph">
|
||||||
<FormattedHTMLMessage
|
<FormattedHTMLMessage id='hoc.addToStudiosDescription' />
|
||||||
id='hoc.addToStudiosDescription'
|
|
||||||
defaultMessage={
|
|
||||||
'These studios include projects created by young people ' +
|
|
||||||
'around the world. Take a look at the studios to get inspired - ' +
|
|
||||||
'or submit your own projects to the studios!'
|
|
||||||
} />
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FlexRow>
|
<FlexRow>
|
||||||
<div className="studio">
|
<div className="hoc-section-studio">
|
||||||
<img src="/svgs/studio.svg" alt="" />
|
<img className="hoc-section-studio-img"
|
||||||
<div className="studio-info">
|
src="/svgs/studio.svg"
|
||||||
|
alt="" />
|
||||||
|
<div className="hoc-section-studio-info">
|
||||||
<a href="/studios/432299/">
|
<a href="/studios/432299/">
|
||||||
<h5>
|
<h5 className="hoc-section-studio-info-header">
|
||||||
<FormattedMessage
|
<FormattedMessage id='hoc.tipsAnimateYourNameTitle' />
|
||||||
id='general.tipsAnimateYourNameTitle'
|
|
||||||
defaultMessage={'Animate Your Name'} />
|
|
||||||
</h5>
|
</h5>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div className="studio">
|
<div className="hoc-section-studio">
|
||||||
<img src="/svgs/studio.svg" alt="" />
|
<img className="hoc-section-studio-img"
|
||||||
<div className="studio-info">
|
src="/svgs/studio.svg"
|
||||||
|
alt="" />
|
||||||
|
<div className="hoc-section-studio-info">
|
||||||
<a href="/studios/1672166/">
|
<a href="/studios/1672166/">
|
||||||
<h5>
|
<h5 className="hoc-section-studio-info-header">
|
||||||
<FormattedMessage
|
<FormattedMessage id='hoc.studioWeBareBears' />
|
||||||
id='hoc.studioWeBareBears'
|
|
||||||
defaultMessage={'We Bare Bears Studio'} />
|
|
||||||
</h5>
|
</h5>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -332,27 +271,27 @@ var Hoc = React.createClass({
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
|
|
||||||
<FlexRow>
|
<FlexRow>
|
||||||
<div className="studio">
|
<div className="hoc-section-studio">
|
||||||
<img src="/svgs/studio.svg" alt="" />
|
<img className="hoc-section-studio-img"
|
||||||
<div className="studio-info">
|
src="/svgs/studio.svg"
|
||||||
<a href="/studios/1065372/">
|
alt="" />
|
||||||
<h5>
|
<div className="hoc-section-studio-info">
|
||||||
<FormattedMessage
|
<a href="/studios/1999784/">
|
||||||
id='general.tipsDanceTitle'
|
<h5 className="hoc-section-studio-info-header">
|
||||||
defaultMessage={'Dance, Dance, Dance'} />
|
<FormattedMessage id='hoc.tipsMakeMusicTitle' />
|
||||||
</h5>
|
</h5>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="studio">
|
<div className="hoc-section-studio">
|
||||||
<img src="/svgs/studio.svg" alt="" />
|
<img className="hoc-section-studio-img"
|
||||||
<div className="studio-info">
|
src="/svgs/studio.svg"
|
||||||
|
alt="" />
|
||||||
|
<div className="hoc-section-studio-info">
|
||||||
<a href="/studios/1672164/">
|
<a href="/studios/1672164/">
|
||||||
<h5>
|
<h5 className="hoc-section-studio-info-header">
|
||||||
<FormattedMessage
|
<FormattedMessage id='hoc.studioAlice' />
|
||||||
id='hoc.studioAlice'
|
|
||||||
defaultMessage={'Alice in Wonderland Studio'} />
|
|
||||||
</h5>
|
</h5>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -361,43 +300,48 @@ var Hoc = React.createClass({
|
||||||
</section>
|
</section>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<section className="one-up">
|
<section className="hoc-section">
|
||||||
<h3>
|
<h3>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
id='general.collaborators'
|
id='general.collaborators'
|
||||||
defaultMessage={'Collaborators'} />
|
defaultMessage={'Collaborators'} />
|
||||||
</h3>
|
</h3>
|
||||||
<div className="logos">
|
<div className="hoc-section-logos">
|
||||||
<a href="http://scratched.gse.harvard.edu/">
|
<a href="http://scratched.gse.harvard.edu/">
|
||||||
<img src="/images/hoc2015/scratchEd-logo.png" alt="ScratchEd" />
|
<img className="hoc-section-logos-img"
|
||||||
|
src="/images/hoc/scratchEd-logo.png"
|
||||||
|
alt="ScratchEd" />
|
||||||
</a>
|
</a>
|
||||||
<a href="https://code.org/">
|
<a href="https://code.org/">
|
||||||
<img src="/images/hoc2015/code-org-logo.png" alt="code.org" />
|
<img className="hoc-section-logos-img"
|
||||||
|
src="/images/hoc/code-org-logo.png"
|
||||||
|
alt="code.org" />
|
||||||
</a>
|
</a>
|
||||||
<a href="http://www.cartoonnetwork.com/">
|
<a href="http://www.cartoonnetwork.com/">
|
||||||
<img src="/images/hoc2015/cn-logo.png" alt="Cartoon Network" />
|
<img className="hoc-section-logos-img"
|
||||||
|
src="/images/hoc/cn-logo.png"
|
||||||
|
alt="Cartoon Network" />
|
||||||
</a>
|
</a>
|
||||||
<a href="http://www.madewithcode.com/">
|
<a href="http://www.madewithcode.com/">
|
||||||
<img src="/images/hoc2015/made-with-code-logo.png" alt="Made with Code" />
|
<img className="hoc-section-logos-img"
|
||||||
|
src="/images/hoc/made-with-code-logo.png"
|
||||||
|
alt="Made with Code" />
|
||||||
</a>
|
</a>
|
||||||
<a href="http://www.paalive.org/">
|
<a href="http://www.paalive.org/">
|
||||||
<img src="/images/hoc2015/paa-logo.png" alt="Progressive Arts Alliance" />
|
<img className="hoc-section-logos-img"
|
||||||
|
src="/images/hoc/paa-logo.png"
|
||||||
|
alt="Progressive Arts Alliance" />
|
||||||
</a>
|
</a>
|
||||||
<a href="http://www.catrobat.org/">
|
<a href="http://www.catrobat.org/">
|
||||||
<img src="/images/hoc2015/pocketcode-logo.png" alt="Pocket Code" />
|
<img className="hoc-section-logos-img"
|
||||||
|
src="/images/hoc/pocketcode-logo.png"
|
||||||
|
alt="Pocket Code" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="trademark">
|
<div className="hoc-section-trademark">
|
||||||
<p className="legal">
|
<p className="hoc-section-paragraph legal">
|
||||||
<FormattedHTMLMessage
|
<FormattedHTMLMessage id='hoc.officialNotice' />
|
||||||
id='hoc.officialNotice'
|
|
||||||
defaultMessage={
|
|
||||||
'The "Hour of Code™" is a nationwide initiative by ' +
|
|
||||||
'<a href="http://csedweek.org">Computer Science Education Week</a> ' +
|
|
||||||
'and <a href="http://code.org">Code.org</a> to introduce millions of ' +
|
|
||||||
'students to one hour of computer science and computer programming.'
|
|
||||||
} />
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -7,38 +7,62 @@ $base-bg: $ui-white;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hoc {
|
.hoc-section {
|
||||||
.title-banner {
|
display: flex;
|
||||||
&.wbb-bg {
|
margin: 0 auto;
|
||||||
background-image: url("/images/hoc2015/hide-bg.jpg");
|
border-bottom: 1px solid $ui-border;
|
||||||
}
|
padding: 50px 0;
|
||||||
|
width: 95%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
&.dance-bg {
|
justify-content: center;
|
||||||
background-image: url("/images/hoc2015/dance-bg.jpg");
|
flex-wrap: wrap;
|
||||||
}
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
&.name-bg {
|
.hoc-section:last-child {
|
||||||
background-image: url("/images/hoc2015/name-bg.jpg");
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
.hoc-section.mod-title-banner {
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
max-width: $desktop;
|
max-width: $desktop;
|
||||||
|
}
|
||||||
|
|
||||||
.card-deck {
|
.hoc-section-column {
|
||||||
padding: 0 20px;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
//6 columns
|
.hoc-section-column.mod-split {
|
||||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
min-width: 200px;
|
||||||
max-width: $mobile;
|
max-width: 40%;
|
||||||
}
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.flex-row {
|
.hoc-section-column-img {
|
||||||
.card {
|
border-radius: 5px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hoc-section-paragraph {
|
||||||
|
margin: 10px auto 20px;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-banner.mod-wbb-bg {
|
||||||
|
background-image: url("/images/hoc2015/hide-bg.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-banner.mod-dance-bg {
|
||||||
|
background-image: url("/images/hoc2015/dance-bg.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-banner.mod-name-bg {
|
||||||
|
background-image: url("/images/hoc2015/name-bg.jpg");
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-row-card {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
border-radius: 7px;
|
border-radius: 7px;
|
||||||
background-color: $active-gray;
|
background-color: $active-gray;
|
||||||
|
|
@ -47,184 +71,143 @@ $base-bg: $ui-white;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
max-width: 230px;
|
max-width: 230px;
|
||||||
|
}
|
||||||
|
|
||||||
.card-info {
|
.flex-row-card-info {
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: $base-bg;
|
background-color: $base-bg;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-row-card-info-img,
|
||||||
button,
|
.button.flex-row-card-info-button {
|
||||||
img {
|
|
||||||
width: calc(100% - 20px);
|
width: calc(100% - 20px);
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
.flex-row-card-info-img {
|
||||||
margin: 10px 10px 5px 10px;
|
margin: 10px 10px 5px 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
.button.flex-row-card-info-button {
|
||||||
margin: 0 10px 10px 10px;
|
margin: 0 10px 10px 10px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
//8 columns
|
.hoc-section-resource,
|
||||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
.hoc-section-studio {
|
||||||
margin: 2px;
|
|
||||||
min-width: 175px;
|
|
||||||
|
|
||||||
button {
|
|
||||||
font-size: .7em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
display: flex;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-bottom: 1px solid $ui-border;
|
|
||||||
padding: 50px 0;
|
|
||||||
width: 95%;
|
|
||||||
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 10px auto 20px;
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.one-up {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.column {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.two-up {
|
|
||||||
.column {
|
|
||||||
min-width: 200px;
|
|
||||||
max-width: 40%;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-radius: 5px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource,
|
|
||||||
.studio {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
}
|
||||||
|
|
||||||
img {
|
.hoc-section-resource-img,
|
||||||
|
.hoc-section-studio-img {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.hoc-section-resource {
|
||||||
h5 {
|
|
||||||
margin: 8px 0;
|
|
||||||
color: $ui-blue;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: darken($ui-blue, 15);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//8 columns
|
|
||||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
|
||||||
display: block;
|
|
||||||
width: 30%;
|
|
||||||
min-width: 180px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.resource {
|
|
||||||
width: 33%;
|
width: 33%;
|
||||||
|
min-height: 4rem;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
.hoc-section-resource-anchor {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 5px 0;
|
margin: 5px 0;
|
||||||
font-size: .8em;
|
font-size: .8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource-info {
|
.hoc-section-resource-info-header {
|
||||||
h5 {
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio {
|
.hoc-section-studio {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
h5 {
|
.hoc-section-studio-img {
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: $mobile - 1) {
|
.hoc-section-studio-info-header {
|
||||||
display: inline-block;
|
margin: 8px 0;
|
||||||
}
|
width: 200px;
|
||||||
|
color: $ui-blue;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
.hoc-section-studio-info-header:hover {
|
||||||
display: inline-block;
|
color: darken($ui-blue, 15);
|
||||||
}
|
}
|
||||||
|
|
||||||
//8 columns
|
.hoc-section-logos {
|
||||||
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
|
||||||
h5 {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logos {
|
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
.hoc-section-logos-img {
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
max-width: 150px;
|
max-width: 150px;
|
||||||
max-height: 55px;
|
max-height: 55px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.trademark {
|
.hoc-section-trademark {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: $mobile - 1) {
|
||||||
|
.hoc-section-studio {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//6 columns
|
||||||
|
@media only screen and (min-width: $mobile) and (max-width: $tablet - 1) {
|
||||||
|
.hoc-section.mod-title-banner {
|
||||||
|
max-width: $mobile;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hoc-section-studio {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//8 columns
|
||||||
|
@media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
|
||||||
|
.flex-row-card {
|
||||||
|
margin: 2px;
|
||||||
|
min-width: 175px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.flex-row-card-info-button {
|
||||||
|
font-size: .7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hoc-section-resource,
|
||||||
|
.hoc-section-studio {
|
||||||
|
display: block;
|
||||||
|
width: 30%;
|
||||||
|
min-width: 180px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hoc-section-resource-img,
|
||||||
|
.hoc-section-studio-img {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hoc-section-studio-img {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hoc-section-studio-info-header {
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,5 +15,12 @@
|
||||||
"hoc.studioWeBareBears": "We Bare Bears Studio",
|
"hoc.studioWeBareBears": "We Bare Bears Studio",
|
||||||
"hoc.subTitle": "With Scratch, you can program your own stories, games, and animations — and share them online.",
|
"hoc.subTitle": "With Scratch, you can program your own stories, games, and animations — and share them online.",
|
||||||
"hoc.tipsDescription": "Need help getting started? Looking for ideas? You can find tutorials and helpful hints in the <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>",
|
"hoc.tipsDescription": "Need help getting started? Looking for ideas? You can find tutorials and helpful hints in the <a href=\"/projects/editor/?tip_bar=home\">Tips Window</a>",
|
||||||
"hoc.title": "Get Creative with Coding"
|
"hoc.title": "Get Creative with Coding",
|
||||||
|
"hoc.tipsAnimateYourNameTitle": "Animate Your Name",
|
||||||
|
"hoc.tipsDanceTitle": "Dance, Dance, Dance",
|
||||||
|
"hoc.tipsGetStarted": "Getting Started",
|
||||||
|
"hoc.tipsHideAndSeekTitle": "Hide-and-Seek Game",
|
||||||
|
"hoc.tipsMakeMusicTitle": "Make Music",
|
||||||
|
"hoc.tipsMakeItFlyTitle": "Make it Fly",
|
||||||
|
"hoc.tipsPongGame": "Create a Pong Game"
|
||||||
}
|
}
|
||||||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 193 KiB After Width: | Height: | Size: 193 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
BIN
static/images/hoc/make-it-fly-tutorial.png
Normal file
BIN
static/images/hoc/make-it-fly-tutorial.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
static/images/hoc/make-music-tutorial.png
Normal file
BIN
static/images/hoc/make-music-tutorial.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Loading…
Reference in a new issue