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

Merge pull request #16 from carljbowman/hoc-landing-updates

Browse source 
Update HOC Landing Page
This commit is contained in:
carljbowman 2015-10-02 12:39:07 -04:00
commit 090ffad317
8 changed files with 125 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,21 +16,21 @@ var View = React.createClass({
<div className="card-deck">
<div className="card">
<div className="card-info">
<img src="https://www.dropbox.com/s/v8dvhd4i6soutit/temp-card-img.png?dl=1"></img>
<img src="/images/hide-seek-tutorial.png" />
<Button>Create a Hide & Seek Game</Button>
</div>
</div>
<div className="card">
<div className="card-info">
<img src="https://www.dropbox.com/s/v8dvhd4i6soutit/temp-card-img.png?dl=1"></img>
<img src="/images/dance-tutorial.png" />
<Button>Compose a Dance Sequence</Button>
</div>
</div>
<div className="card">
<div className="card-info">
<img src="https://www.dropbox.com/s/v8dvhd4i6soutit/temp-card-img.png?dl=1"></img>
<img src="/images/name-tutorial.png" />
<Button>Animate Your Name</Button>
</div>
</div>
@ -52,6 +52,28 @@ var View = React.createClass({
<p>Below are some resources to help explore Scratch by yourself or to assist groups in
workshops and classrooms <a href="">Find out more</a></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>
</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>
</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>
</div>
</div>
</section>
<section className="two-up">
@ -62,7 +84,7 @@ var View = React.createClass({
Window</a></p>
</div>
<div className="column">
<img src="https://www.dropbox.com/s/l1n1ba7aof3qqx4/tips-test-animation.gif?dl=1"></img>
<img src="/images/tips-test-animation.gif" />
</div>
</section>

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

@ -19,7 +19,7 @@ $base-bg: $ui-white;
.box {
margin-bottom: 100px;
}
}
}
.top-banner {
margin-top: 10px;
@ -30,7 +30,6 @@ $base-bg: $ui-white;
padding: 10px 0;
width: 100%;
h1,
p {
@ -152,6 +151,42 @@ $base-bg: $ui-white;
font-weight: 300;
}
.resource {
display: flex;
margin: 10px;
border-radius: 5px;
padding: 10px 15px;
width: 30%;
min-width: 200px;
max-width: 230px;
text-align: left;
justify-content: center;
align-items: center;
img {
margin-right: 10px;
}
a {
font-size: .8em;
font-weight: 500;
}
.file-size {
margin-top: 5px;
width: inherit;
text-transform: uppercase;
letter-spacing: 1px;
color: $ui-orange;
font-size: .7em;
font-weight: 700;
}
}
&.one-up {
text-align: center;
@ -162,7 +197,7 @@ $base-bg: $ui-white;
}
&.two-up {
.column {
margin: 10px;

BIN
static/images/dance-tutorial.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 244 KiB

BIN
static/images/hide-seek-tutorial.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 130 KiB

BIN
static/images/name-tutorial.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 151 KiB

BIN
static/images/tips-test-animation.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 64 KiB

14
static/svgs/notifications.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<g>
<g>
<path style="fill:#FFFFFF;" d="M17,4h-5.1l-1.2-1.9c-0.2-0.2-0.4-0.4-0.7-0.4H4.8c-0.3,0-0.5,0.1-0.7,0.3l-1.5,2
C1.2,4.3,0.1,5.5,0.1,6.9v8.5c0,1.6,1.3,2.8,2.9,2.8h14c1.6,0,2.8-1.3,2.8-2.8V6.9C19.9,5.3,18.6,4,17,4z M1.9,6.9
c0-0.6,0.5-1.2,1.2-1.2c0.3,0,0.5-0.1,0.7-0.3l1.5-1.9h4.4l1.2,1.8c0.2,0.2,0.4,0.4,0.7,0.4H17c0.6,0,1.1,0.5,1.1,1.2V7
c-0.3-0.1-0.7-0.2-1.1-0.2H3C2.6,6.8,2.2,6.9,1.9,7V6.9z M18.1,15.3c0,0.6-0.5,1.1-1.1,1.1H3c-0.6,0-1.2-0.5-1.2-1.1V9.7
C1.9,9,2.4,8.5,3,8.5h14c0.6,0,1.1,0.5,1.1,1.2V15.3z"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 909 B

47
static/svgs/tips-card.svg Normal file
View file

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="50px" height="54px" viewBox="0 0 50 54" enable-background="new 0 0 50 54" xml:space="preserve">
<g>
<g opacity="0.4">
<path fill="#BCBEC0" stroke="#BCBEC0" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M28.3,6.3H12.5l0.8-2.6C13.7,2.6,14.8,2,16,2.4L28.3,6.3z"/>
</g>
<g opacity="0.4">
<path fill="#BCBEC0" stroke="#BCBEC0" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M48.4,15l-5,15.7v16.4c0,1.2-1,2.1-2.1,2.1h-3.8l-0.8,2.6c-0.4,1.1-1.6,1.7-2.7,1.4l-12.4-3.9h-13c-1.2,0-2.1-1-2.1-2.1v-2.7
l-3.6-1.1c-1.1-0.4-1.7-1.6-1.4-2.7l5-15.7V8.4c0-1.2,1-2.1,2.1-2.1h19.7l15.1,4.8l3.6,1.2C48.2,12.7,48.8,13.8,48.4,15z"/>
<path fill="#BCBEC0" stroke="#BCBEC0" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M43.4,8.4v2.7L28.3,6.3h13C42.5,6.3,43.4,7.3,43.4,8.4z"/>
</g>
<g>
<path fill="#B6ECFF" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M34,51.6L2.9,41.7c-1.1-0.4-1.7-1.5-1.4-2.7L13.3,2.2c0.4-1.1,1.5-1.7,2.7-1.4l31.1,9.9c1.1,0.4,1.7,1.5,1.4,2.7L36.7,50.2
C36.4,51.4,35.2,52,34,51.6z"/>
</g>
<g>
<path fill="#FFFFFF" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M41.3,47.7H8.7c-1.2,0-2.1-1-2.1-2.1V6.9c0-1.2,1-2.1,2.1-2.1h32.6c1.2,0,2.1,1,2.1,2.1v38.6C43.4,46.7,42.5,47.7,41.3,47.7z"/>
</g>
<path fill="#FFFFFF" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M35.4,41.2H14.6c-1.7,0-3-1.3-3-3V16.4h26.8v21.8C38.4,39.8,37,41.2,35.4,41.2z"/>
<path fill="#2398C1" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M38.4,16.4H11.6v-2.2c0-1.5,1.2-2.8,2.8-2.8h21.2c1.5,0,2.8,1.2,2.8,2.8V16.4z"/>
<g>
<polygon fill="#FFFFFF" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
29.1,30.4 25,34.5 20.9,30.4 22.7,30.4 22.7,26.5 27.3,26.5 27.3,30.4 "/>
<line fill="#FFFFFF" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="23.2" y1="23.9" x2="26.8" y2="23.9"/>
<line fill="#FFFFFF" stroke="#2398C1" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="24" y1="21.6" x2="26" y2="21.6"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB