Commit c51d7d55 authored by rschamp's avatar rschamp Committed by Karishma Chadha

Mission section non-responsive non-localized

parent eb6bbb2c
......@@ -377,11 +377,40 @@ class AnnualReport extends React.Component {
</p>
</div>
<div
className="mission section"
className="mission-section section"
ref={this.setRef(SECTIONS.mission)}
>
{/* <div className="inner">
</div> */}
<div className="inner">
<h2>Our Mission</h2>
<h3>Our mission is to provide all children, from all backgrounds, with opportunities to imagine, create, and collaborate with new technologies — so they can shape the world of tomorrow.</h3>
<p>We are committed to prioritizing equity across all aspects of our work, with a particular focus on initiatives and approaches that support children, families, and educators furthest from educational justice.</p>
<p>We’ve developed Scratch as a free, safe, playful learning environment that engages all children in thinking creatively, reasoning systematically, and working collaboratively — essential skills for everyone in today's society. We work with educators and families to support children in exploring, sharing, and learning.</p>
<p>In developing new technologies, activities, and learning materials, we are guided by what we call the Four P’s of Creative Learning:</p>
</div>
<div className="four-ps-wrapper">
<div className="four-ps">
<div className="one-p four-ps-projects">
<h3>Projects</h3>
<p>Engage children in designing, creating, and expressing themselves creatively</p>
<img src="/images/annual-report/mission/Projects Illustration.svg" />
</div>
<div className="one-p four-ps-peers">
<h3>Peers</h3>
<p>Support children in collaborating, sharing, remixing, and mentoring</p>
<img src="/images/annual-report/mission/Peers Illustration.svg" />
</div>
<div className="one-p four-ps-passion">
<h3>Passion</h3>
<p>Enable children to build on their interests and work on personally meaningful projects</p>
<img src="/images/annual-report/mission/Passion Illustration.svg" />
</div>
<div className="one-p four-ps-play">
<h3>Play</h3>
<p>Encourage children to tinker, experiment, and iterate</p>
<img src="/images/annual-report/mission/Play Illustration.svg" />
</div>
</div>
</div>
</div>
<div
className="milestones-section section"
......
......@@ -233,6 +233,61 @@ p {
}
}
.mission-section {
background-color: $ui-blue-10percent;
display: flex;
flex-direction: column;
align-items: center;
.inner {
padding-top: 124px;
width: 620px;
}
.four-ps-wrapper {
padding: 124px 0;
width: 940px;
}
.four-ps {
height: 940px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
}
.one-p {
width: 300px;
height: 370px;
padding: 20px 80px;
background: center no-repeat;
margin-top: 20px;
margin-right: 20px;
}
.four-ps-projects {
background-image: url("/images/annual-report/mission/Projects Splash.svg");
}
.four-ps-peers {
background-image: url("/images/annual-report/mission/Peers Splash.svg");
}
.four-ps-passion {
background-image: url("/images/annual-report/mission/Passion Splash.svg");
margin-top: 72px;
margin-right: 0;
}
.four-ps-play {
background-image: url("/images/annual-report/mission/Play Splash.svg");
margin-right: 0;
margin-top: 44px;
}
}
.milestones-section {
background-color: $ui-blue-10percent;
......
This diff is collapsed.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="460px" height="410px" viewBox="0 0 460 410" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Passion Splash</title>
<g id="Passion-Splash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.15">
<path d="M255.457593,26.2734659 C373.056554,26.2734659 488.038906,165.174477 453.896557,259.682708 C419.754208,354.19094 355.430046,410 237.831085,410 C120.232124,410 21.0556203,296.475435 1.65174233,174.749684 C-17.7521356,53.0239332 137.858632,26.2734659 255.457593,26.2734659 Z M378.308782,3.28984536 C395.227681,-9.41204003 421.898325,17.46529 438.198925,36.2663444 C454.499526,55.0673988 448.490777,75.2414981 434.041506,75.2414981 C424.138073,75.2414981 413.502013,67.2203987 403.698464,59.6814719 L402.73692,58.9417928 C398.582344,55.7458523 394.588334,52.6881582 390.876085,50.427151 C378.16877,42.6875495 361.389882,15.9917308 378.308782,3.28984536 Z" fill="#4D97FF"></path>
</g>
</svg>
\ No newline at end of file
This diff is collapsed.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="460px" height="410px" viewBox="0 0 460 410" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Peers Splash</title>
<g id="Peers-Splash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.15">
<path d="M348.853354,392.233293 C447.494383,350.563386 460,214.958061 460,117.995981 C460,21.0339018 315.69231,0 206.132285,0 C96.5722609,0 13.57508,88.5402349 0.579390372,178.53401 C-5.08000917,217.724752 31.340862,343.642921 82.6863854,377.552186 C148.182409,420.806628 293.559708,415.591536 348.853354,392.233293 Z" id="Oval" fill="#4D97FF"></path>
</g>
</svg>
\ No newline at end of file
This diff is collapsed.
<?xml version="1.0" encoding="UTF-8"?>
<svg width="460px" height="410px" viewBox="0 0 460 410" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Play Splash</title>
<g id="Play-Splash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.15">
<path d="M198.863512,410 C305.802543,410 430.097482,371.576771 452.093155,253.078861 C474.088827,134.580951 461.611455,68.5700263 263.707106,10.9241789 C65.8027578,-46.7216684 -20.1999474,137.950965 3.97647096,233.750334 C28.1528894,329.549702 91.9244808,410 198.863512,410 Z" id="Oval" fill="#4D97FF"></path>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="300px" height="200px" viewBox="0 0 300 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Projects Illustration</title>
<defs>
<polygon id="path-1" points="0.422426714 0.33675 8.03547694 0.33675 8.03547694 29.547675 0.422426714 29.547675"></polygon>
</defs>
<g id="Projects-Illustration" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
<g transform="translate(31.000000, 13.000000)">
<g id="Group-24">
<path d="M102.1635,66.855375 L102.1635,28.618125 C102.1635,28.618125 116.0685,14.713125 143.87775,14.713125 C171.68625,14.713125 185.59125,28.618125 185.59125,28.618125 L232.95675,28.618125 C234.876,28.618125 236.43225,30.174375 236.43225,32.093625 L236.43225,66.855375 C236.43225,68.775375 234.876,70.331625 232.95675,70.331625 L145.31775,70.331625 C144.396,70.331625 143.511,70.697625 142.85925,71.350125 L137.94375,76.267875 C137.29125,76.920375 136.407,77.286375 135.48525,77.286375 L124.46025,77.286375 C123.5385,77.286375 122.65425,76.920375 122.0025,76.267875 L117.08625,71.350125 C116.4345,70.697625 115.55025,70.331625 114.62775,70.331625 L105.6405,70.331625 C103.71975,70.331625 102.1635,68.775375 102.1635,66.855375" id="Fill-1" fill="#E6B50C"></path>
<path d="M94.136175,67.180575 C101.878425,57.387075 104.429925,58.010325 110.063175,54.060075 C120.531675,46.718325 112.646925,42.775575 108.023925,43.999575 C101.117925,45.827325 97.360425,51.180825 94.427925,51.341325 C88.691175,51.654075 87.036675,41.693325 89.812425,38.193075 C93.080175,34.071825 97.996425,29.946825 100.009425,29.830575 C102.705675,29.675325 104.576925,33.165075 107.708925,37.275075 C110.427675,40.843575 117.718425,39.882825 114.387675,34.239825 C109.774425,26.425575 104.666175,20.688075 101.171175,20.548575 C98.406675,20.438325 95.257425,21.315825 91.274175,24.188325 C86.150175,27.883575 84.168675,30.003075 83.183925,30.136575 C80.972925,30.438075 84.122175,18.490575 88.385175,7.907325 C91.341675,0.565575 83.115675,-2.465925 80.023425,5.562075 C74.211675,20.653575 73.970175,33.599325 72.560925,33.525075 C71.591925,33.474075 70.167675,23.904825 72.069675,10.150575 C72.928425,3.942825 64.279425,2.270325 63.640425,10.966575 C62.792925,22.487325 64.122675,35.574075 62.382675,35.992575 C61.172175,36.284325 59.041425,24.267825 57.827925,19.327575 C55.924425,11.577825 49.046925,14.880075 50.282175,20.245575 C55.109175,41.217825 56.307675,42.371325 55.924425,54.541575 C55.380675,71.808825 82.844175,81.462075 94.136175,67.180575" id="Fill-3" fill="#00B3EC"></path>
<path d="M102.1635,60.229875 L102.1635,21.992625 C102.1635,21.992625 116.0685,8.087625 143.87775,8.087625 C171.68625,8.087625 185.59125,21.992625 185.59125,21.992625 L232.95675,21.992625 C234.876,21.992625 236.43225,23.548875 236.43225,25.468125 L236.43225,60.229875 C236.43225,62.149875 234.876,63.706125 232.95675,63.706125 L145.31775,63.706125 C144.396,63.706125 143.511,64.072125 142.85925,64.724625 L137.94375,69.642375 C137.29125,70.294875 136.407,70.660875 135.48525,70.660875 L124.46025,70.660875 C123.5385,70.660875 122.65425,70.294875 122.0025,69.642375 L117.08625,64.724625 C116.4345,64.072125 115.55025,63.706125 114.62775,63.706125 L105.6405,63.706125 C103.71975,63.706125 102.1635,62.149875 102.1635,60.229875" id="Fill-5" fill="#FFC709"></path>
<path d="M102.1635,33.08925 C102.1635,33.08925 105.1665,41.559 112.53075,41.559 C120.264,41.559 113.19975,32.292 113.19975,32.292 L102.1635,29.52 L102.1635,33.08925 Z" id="Fill-7" fill="#D1A50A"></path>
<path d="M100.0095,29.830725 C102.70575,29.675475 104.577,33.164475 107.709,37.275225 C110.42775,40.843725 117.7185,39.882225 114.38775,34.239975 C109.7745,26.425725 104.66625,20.688225 101.17125,20.548725" id="Fill-9" fill="#00B3EC"></path>
<path d="M55.924275,54.54195 C50.285775,90.9027 14.670525,121.9197 1.031775,129.0567 C2.040525,150.8487 3.886275,174.41295 3.886275,174.41295 C51.992025,148.3197 85.565025,75.80445 94.136025,67.18095" id="Fill-11" fill="#00B3EC"></path>
<path d="M0.000225,129.780675 L8.241975,124.464675 C10.586475,142.990425 28.547475,155.461425 56.543475,116.107425 C72.698475,93.397425 85.338975,58.581675 102.163725,54.095175 L102.163725,58.941675 C102.163725,58.941675 94.847475,65.321925 91.419225,70.661175 C87.990225,76.000425 74.602725,112.383675 50.134725,141.241425 C36.089475,157.806675 3.886725,174.413175 3.886725,174.413175 C2.203725,150.242175 0.000225,129.780675 0.000225,129.780675" id="Fill-13" fill="#0096C6"></path>
<path d="M88.5822,41.559 C88.87395,38.2215 92.06895,32.2725 95.80845,29.961 C99.54645,27.65025 102.32895,26.29875 106.3452,32.0355 C111.3417,39.17325 115.22745,37.11825 115.22745,37.11825 C115.22745,37.11825 115.35195,39.207 112.2597,39.37125 C105.52695,39.72825 103.8372,28.248 99.38595,29.961 C93.2922,32.30775 88.5822,41.559 88.5822,41.559" id="Fill-15" fill="#0096C6"></path>
<path d="M52.306875,15.101025 C54.034875,15.193275 54.985875,16.466025 55.920375,19.526775 C56.718375,22.139775 58.418625,36.009525 62.383125,35.992275 C63.598125,35.987775 62.383125,35.992275 62.383125,35.992275 C62.383125,35.992275 61.644375,36.657525 60.082875,29.520525 C58.520625,22.382775 58.014375,18.228525 56.610375,16.456275 C55.207125,14.683275 53.842875,14.447025 52.306875,15.101025" id="Fill-17" fill="#0096C6"></path>
<path d="M68.1396,4.97085 C70.11135,4.97085 68.41185,13.00485 68.61585,19.18935 C68.81985,25.3731 69.84435,33.1791 72.5616,33.52485 C72.5616,33.52485 70.97085,30.2751 71.15385,21.29835 C71.33535,12.3216 73.4196,8.58735 71.33085,6.3726 C69.70785,4.6521 68.1396,4.97085 68.1396,4.97085" id="Fill-19" fill="#0096C6"></path>
<g id="Group-23" transform="translate(81.000000, 0.413250)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-22"></g>
<path d="M1.444575,1.538175 C3.939075,0.385425 6.735825,2.403675 4.491825,7.673925 C2.248575,12.944175 -1.622925,26.725425 1.740825,29.547675 C1.740825,29.547675 1.382325,25.436175 3.858075,17.357175 C6.655575,8.228925 8.640825,5.624175 7.866825,3.268425 C7.092075,0.912675 4.923075,-0.996825 1.444575,1.538175" id="Fill-21" fill="#0096C6" mask="url(#mask-2)"></path>
</g>
</g>
<text id="PLACEHOLDER" transform="translate(118.500000, 87.500000) rotate(-45.000000) translate(-118.500000, -87.500000) " font-family="HelveticaNeue-Bold, Helvetica Neue" font-size="16" font-weight="bold" letter-spacing="2" fill="#575E75">
<tspan x="47" y="94">PLACEHOLDER</tspan>
</text>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="460px" height="410px" viewBox="0 0 460 410" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Projects Splash</title>
<g id="Projects-Splash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.15">
<path d="M164.472762,0 C276.070425,0 460,76.233353 460,189.766222 C460,303.299091 390.680692,410 279.083029,410 C167.485366,410 60.2134221,342.805556 34.9837958,239.736111 C9.75416954,136.666667 52.8750993,0 164.472762,0 Z M26.3122782,314.677871 C43.913384,314.677871 74,344.561709 74,364.592638 C74,384.623567 58.8561593,393.921569 41.2550535,393.921569 C23.6539477,393.921569 0,380.924144 0,360.893215 C0,340.862286 8.71117243,314.677871 26.3122782,314.677871 Z" fill="#4D97FF"></path>
</g>
</svg>
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment