Schools subsection of Initiatives, not fully responsive yet

This commit is contained in:
Karishma Chadha 2020-10-20 10:56:52 -04:00
parent 0770941845
commit 84151dd298
18 changed files with 610 additions and 2 deletions

View file

@ -1437,6 +1437,255 @@ class AnnualReport extends React.Component {
</p>
</div>
</div>
<div className="initiatives-subsection-content">
<div className="inner schools">
<div className="subsection-tag">
<FormattedMessage id="annualReport.schoolsSpotlight" />
</div>
<div className="initiatives-subsection-intro schools">
<h2>
<FormattedMessage id="annualReport.cpsProjectTitle" />
</h2>
<p>
<FormattedMessage id="annualReport.cpsProjectIntroP1" />
</p>
<p>
<FormattedMessage id="annualReport.cpsProjectIntroP2" />
</p>
</div>
</div>
<div className="video-container">
<div className="video-background cps">
<MediaQuery minWidth={frameless.tabletPortrait}>
<VideoPreview
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
}
thumbnail="/images/annual-report/initiatives/schools/CPS Story/CPS Video Thumbnail.png"
thumbnailWidth="580"
videoHeight="320"
videoId="joal01i8b1"
videoWidth="568"
/>
</MediaQuery>
<MediaQuery maxWidth={frameless.tabletPortrait - 1}>
<VideoPreview
buttonMessage={
this.props.intl.formatMessage({id: 'annualReport.watchVideo'})
}
thumbnail="/images/annual-report/initiatives/schools/CPS Story/CPS Video Thumbnail.png"
thumbnailWidth="400"
videoHeight="216"
videoId="joal01i8b1"
videoWidth="380"
/>
</MediaQuery>
</div>
</div>
<div className="inner family-nights">
<h4>
<FormattedMessage id="annualReport.familyCreativeNightsHeader" />
</h4>
<p>
<FormattedMessage id="annualReport.familyCreativeNightsDescription" />
</p>
</div>
<div className="inner four-pictures-container">
<div className="pencils-img">
<img src="/images/annual-report/initiatives/schools/CPS Story/Pencils.svg" />
</div>
<div className="four-pictures">
<img src="/images/annual-report/initiatives/schools/CPS Story/Family Night 1.png" />
<img src="/images/annual-report/initiatives/schools/CPS Story/Family Night 2.png" />
<img src="/images/annual-report/initiatives/schools/CPS Story/Family Night 3.png" />
<img src="/images/annual-report/initiatives/schools/CPS Story/Family Night 4.png" />
</div>
<div className="pizza-img">
<img src="/images/annual-report/initiatives/schools/CPS Story/Pizza.svg" />
</div>
<div className="photo-credit">
<p>
<FormattedMessage id="annualReport.familyNightsPhotoCredit" />
</p>
</div>
</div>
<div className="inner schools">
<h4>
<FormattedMessage id="annualReport.teacherPDHeader" />
</h4>
<p>
<FormattedMessage id="annualReport.teacherPDDescription" />
</p>
<div className="teacher-quote">
<div className="quote-person">
<Avatar
alt=""
src="/images/annual-report/initiatives/schools/CPS Story/School Quote Avatar.png"
/>
<div>
<FormattedMessage
id="annualReport.teacherPDQuoteAttribution"
values={{
teacherName: 'Mahmoud Aliamer'
}}
/>
</div>
</div>
<Comment
comment={this.props.intl.formatMessage(
{id: 'annualReport.teacherPDQuote'}
)}
/>
</div>
<div className="extending-reach">
<h4>
<FormattedMessage id="annualReport.extendingReachHeader" />
</h4>
<p>
<FormattedMessage id="annualReport.extendingReachDescription" />
</p>
</div>
<h4>
<FormattedMessage id="annualReport.inTheNewsHeader" />
</h4>
<div className="news-links">
<div className="icon-and-link">
<img src="/images/annual-report/initiatives/schools/CPS Story/News Icon.svg" />
<a href="#">
<FormattedMessage id="annualReport.chicagoSunTimesArticle" />
</a>
</div>
<div className="icon-and-link">
<img src="/images/annual-report/initiatives/schools/CPS Story/News Icon.svg" />
<a href="#">
<FormattedMessage id="annualReport.rollingStonesArticle" />
</a>
</div>
</div>
</div>
<div className="inner schools-conferences">
<div className="schools-conferences-header">
<div className="subsection-tag">
<FormattedMessage id="annualReport.schoolsSpotlight" />
</div>
<h2>
<FormattedMessage id="annualReport.conferencesTitle" />
</h2>
</div>
<div className="schools-conferences-intro">
<p>
<FormattedMessage id="annualReport.conferencesIntro" />
</p>
<div className="conferences-hero-and-caption">
<img src="/images/annual-report/initiatives/schools/Conferences Story/Scratch Conferences Hero.png" />
<FormattedMessage
id="annualReport.conferencesHeroImageCaption"
values={{
photoCredit: 'Carmelo Presicce'
}}
/>
</div>
</div>
<div className="schools-conferences-content">
<div className="schools-conferences-region">
<div className="conference-image-and-caption left">
<img src="/images/annual-report/initiatives/schools/Conferences Story/Latin America Conference.png" />
<FormattedMessage
id="annualReport.conferencesLatinAmericaImageCaption"
values={{
photoCredit: 'Scratch al Sur'
}}
/>
</div>
<div className="conference-title-and-description">
<h4>
<FormattedMessage id="annualReport.conferencesLatinAmericaTitle" />
</h4>
<p>
<FormattedMessage
id="annualReport.conferencesLatinAmericaDescription"
values={{
scratchAlSurLink: (
<a href="#">
Scratch al Sur
</a>
),
spanishVersionLink: (
<a href="#">
<FormattedMessage id="annualReport.conferencesSpanishVersionLinkText" />
</a>
),
creativeComputingCurriculumLink: (
<a href="#">
Creative Computing Curriculum
</a>
)
}}
/>
</p>
</div>
</div>
<div className="schools-conferences-region">
<div className="conference-title-and-description left">
<h4>
<FormattedMessage id="annualReport.conferencesEuropeTitle" />
</h4>
<p>
<FormattedMessage
id="annualReport.conferencesEuropeDescription"
values={{
scratchConferenceEuropeLink: (
<a href="#">
Scratch Conference Europe
{/* <FormattedMessage id="annualReport.conferencesScratchConferenceEuropeLinkText" /> */}
</a>
)
}}
/>
</p>
</div>
<div className="conference-image-and-caption">
<img src="/images/annual-report/initiatives/schools/Conferences Story/Europe Conference.png" />
<FormattedMessage
id="annualReport.conferencesEuropeImageCaption"
values={{
photoCredit: 'Raspberry Pi'
}}
/>
</div>
</div>
<div className="schools-conferences-region">
<div className="conference-image-and-caption left">
<img src="/images/annual-report/initiatives/schools/Conferences Story/Africa Conference.png" />
<FormattedMessage
id="annualReport.conferencesAfricaImageCaption"
values={{
photoCredit: 'Carmelo Presicce'
}}
/>
</div>
<div className="conference-title-and-description">
<h4>
<FormattedMessage id="annualReport.conferencesAfricaTitle" />
</h4>
<p>
<FormattedMessage
id="annualReport.conferencesAfricaDescription"
values={{
scratchAfricaConferenceLink: (
<a href="#">
Scratch Africa Conference
{/* <FormattedMessage id="annualReport.conferencesScratchAfricaConferenceLinkText" /> */}
</a>
)
}}
/>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div

View file

@ -853,6 +853,252 @@ p {
padding-top: 0;
padding-bottom: 132px;
}
&.schools {
max-width: 620px;
align-items: flex-start;
text-align: left;
padding-bottom: 0px;
.subsection-tag {
background-color: $ui-purple;
}
}
&.family-nights {
max-width: 620px;
align-items: flex-start;
padding-top: 0px;
padding-bottom: 0px;
text-align: left;
}
&.four-pictures-container {
max-width: 1080px;
margin-top: 10px;
margin-bottom: 0px;
padding-bottom: 0px;
position: relative;
.four-pictures {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding-top: 10px;
padding-bottom: 10px;
img {
width: 380px;
margin: 10px;
@media #{$intermediate} {
width: 300px;
}
@media #{$medium} {
width: 220px;
}
@media #{$small} {
width: 300px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
}
}
.pencils-img {
position: absolute;
width: 145px;
padding: 0px;
left: 60px;
top: 60px;
@media #{$medium-and-smaller} {
width: 80px;
}
}
.pizza-img {
position: absolute;
right: 80px;
bottom: 40px;
@media #{$medium-and-smaller} {
width: 80px;
}
}
.photo-credit {
padding-bottom: 0px;
padding-top: 0px;
p {
font-size: 0.875rem;
line-height: 1.125rem;
font-weight: bold;
}
}
}
&.schools-conferences {
align-items: flex-start;
text-align: left;
.subsection-tag {
background-color: $ui-purple;
margin-bottom: 24px;
}
.schools-conferences-header {
max-width: 620px;
margin-bottom: 20px;
}
.schools-conferences-intro {
display: flex;
flex-direction: row;
align-items: flex-start;
p {
width: 380px;
margin-top: 0px;
margin-right: 20px;
}
@media #{$medium-and-smaller} {
flex-direction: column;
}
.conferences-hero-and-caption {
display: flex;
flex-direction: column;
align-items: center;
width: 540px;
margin-bottom: 24px;
@media #{$medium-and-smaller} {
width: 460px;
}
@media #{$small} {
width: 80%;
overflow: hidden;
margin: 0px;
padding: 0px;
}
img {
margin-bottom: 22px;
@media #{$small} {
align-items: flex-start;
}
}
span {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
}
.schools-conferences-content {
align-self: center;
max-width: 780px;
.schools-conferences-region {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
margin-bottom: 20px;
@media #{$medium-and-smaller} {
flex-direction: column;
}
.conference-image-and-caption {
display: flex;
flex-direction: column;
align-items: center;
img {
width: 300px;
}
}
.conference-title-and-description {
display: flex;
flex-direction: column;
width: 460px;
}
.left {
margin-right: 20px;
}
}
}
}
}
.teacher-quote {
width: 620px;
text-align: left;
@media #{$small} {
width: 100%;
padding: 0px;
}
.comment-text {
background-color: $ui-purple;
opacity: 75%;
white-space: pre-line;
margin-top: 8px;
p {
color: $ui-white;
line-height: 40px;
font-size: 1.25rem;
}
}
.comment-text, .comment-text::before, .comment-text::after {
border-color: $ui-purple;
}
.comment-text {
padding: 1.75rem;
}
}
.extending-reach {
margin: 40px 0px;
}
.news-links {
display: flex;
justify-content: flex-start;
margin: 20px 0px;
.icon-and-link {
display: flex;
align-items: center;
margin-right: $cols1;
img {
margin-right: 5px;
}
}
}
}
@ -864,6 +1110,11 @@ p {
p {
max-width: 620px;
}
&.schools {
text-align: left;
max-width: 620px;
}
}
.quote-person {
@ -1467,6 +1718,10 @@ p {
background-color: $ui-aqua;
}
}
&.cps {
background-image: url("/images/annual-report/initiatives/schools/CPS Story/CPS Video Splash.svg");
}
}
}

View file

@ -124,7 +124,7 @@
"annualReport.communityTitle": "Community",
"annualReport.communityIntro": "The Scratch programming language has always been intertwined with the Scratch online community, providing opportunities for children to collaborate, share, and provide feedback to one another.",
"annualReport.communitySpotlight": "Community - Spotlight Story",
"annualReport.communitySpotlight": "Community Spotlight Story",
"annualReport.communityTeam": "Scratch Community Team",
"annualReport.communityTeamIntro1": "When asked why they use Scratch, most Scratchers talk about the importance of the online community for motivating their ongoing participation, providing a space where they can express their creativity, make friends, receive feedback, get new ideas, and learn new skills. Many Scratchers express their appreciation for the Scratch community as a safe and welcoming space to connect, share, and learn from one another.",
"annualReport.communityTeamIntro2": "With 40,000 new projects and 400,000 new comments in the Scratch online community each day, how can we ensure that the community remains safe and friendly, while also supporting and encouraging creative expression? Our Community Team, including full-time staff and a network of moderators, leads this essential work . Two key dimensions of the Community Team's work include moderation and community engagement.",
@ -163,8 +163,38 @@
"annualReport.communityChangeInfo": "We are committed to working with them, and with the educators and families who support them, to ensure that they develop the skills, the motivation, and the confidence theyll need to lead fulfilling lives and bring about meaningful change in society.",
"annualReport.watchVideo": "Watch Video",
"annualReport.schoolsTitle": "Schools",
"annualReport.schoolsTitle": "Schools",
"annualReport.schoolsIntro": "We provide programs and resources to support teachers and students in schools around the world, designed to achieve equity in creative computing experiences, based on projects, passion, peers, and play.",
"annualReport.schoolsSpotlight": "Schools — Spotlight Story",
"annualReport.cpsProjectTitle": "Creative Computing in Chicago Public Schools",
"annualReport.cpsProjectIntroP1": "In 2019, with funding from Google.org, the Scratch Team partnered with SocialWorks, CS4ALL Chicago and Chicago Public Schools to support seven elementary schools in the South Side of Chicago as they launched an initiative to incorporate creative coding into their curriculum.",
"annualReport.cpsProjectIntroP2": "As a part of this initiative, hundreds of students imagined and drew themselves as the superhero of their own video games. They brought those ideas to life in a collaborative Scratch project called SuperMe. Local Chicago hero and Grammy Award winning musician Chance the Rapper was so inspired by the students work that he named it the official video game for his hit song “I Love You So Much” and shared it with the world.",
"annualReport.familyCreativeNightsHeader": "Family Creative Coding Nights",
"annualReport.familyCreativeNightsDescription": "A key to the success of this initiative was to connect students, families, teachers, and other community members through Family Creative Coding Nights. These events brought together hundreds of family members of all ages—from young children to grandparents—in activities that mixed coding with art, dance, and music. These events strengthened connections between home and school, recognizing the important role of families in inspiring and supporting children's learning.",
"annualReport.familyNightsPhotoCredit": "Photos by Jordan Macy, SocialWorks",
"annualReport.teacherPDHeader": "Investing in Professional Development for Teachers",
"annualReport.teacherPDDescription": "Teachers across the participating elementary schools came together for professional development workshops, gaining first-hand experience in creating their own Scratch projects and finding meaningful ways to use Scratch to support student learning across the curriculum.",
"annualReport.teacherPDQuoteAttribution": "{teacherName}, CPS Teacher",
"annualReport.teacherPDQuote": "What surprised me most was the intrinsic collaboration that came with using Scratch in my classroom. Often, students themselves would discover something in the Scratch platform, show me, and then spread it among themselves.",
"annualReport.extendingReachHeader": "Extending the Reach",
"annualReport.extendingReachDescription": "To expand the reach of this partnership, CS4ALL Chicago built on the Family Creative Coding Night model and has made it available to all Chicago Public Schools. Google CS First produced Code Your Hero guides for students and teachers, available free online in English and Spanish.",
"annualReport.inTheNewsHeader": "In the News",
"annualReport.chicagoSunTimesArticle": "Chicago Sun Times Article",
"annualReport.rollingStonesArticle": "Rolling Stones Article",
"annualReport.conferencesTitle": "Scratch Conferences around the World",
"annualReport.conferencesIntro": "In 2008, the Scratch Team hosted the first Scratch conference at MIT, bringing together educators, researchers, and developers to share ideas and experiences for using Scratch to support creative learning. Since then, the Scratch Team has organized and hosted a Scratch conference at MIT every two years. In addition, members of the global Scratch community have organized and hosted more than a dozen conferences—stretching across oceans, continents, cultures, and languages.",
"annualReport.conferencesHeroImageCaption": "Scratch Africa Conference, photo by {photoCredit}, LLK",
"annualReport.conferencesLatinAmericaTitle": "Latin America",
"annualReport.conferencesLatinAmericaDescription": "In May 2019, educators from across Chile and other areas of Latin America came together for the second {scratchAlSurLink} conference in Santiago, Chile. Following the conference, Scratch al Sur released a {spanishVersionLink} of the {creativeComputingCurriculumLink} guide, developed by the Creative Computing group at the Harvard Graduate School of Education.",
"annualReport.conferencesSpanishVersionLinkText": "Spanish version",
"annualReport.conferencesLatinAmericaImageCaption": "Photo provided by {photoCredit}",
"annualReport.conferencesEuropeTitle": "Europe",
"annualReport.conferencesEuropeDescription": "In August 2019, the Raspberry Pi Foundation organized the fourth {scratchConferenceEuropeLink}, held in Cambridge, UK. The conference brought together formal and informal educators from more than 25 countries for hands-on workshops, presentations, and demonstrations by students, educators, researchers, and community-based organizations.",
"annualReport.conferencesEuropeImageCaption": "Photo provided by {photoCredit}",
"annualReport.conferencesAfricaTitle": "Africa",
"annualReport.conferencesAfricaDescription": "In October 2019, the first {scratchAfricaConferenceLink} was held in Nairobi, Kenya, drawing more than 250 educators and students from across Africa to share lessons, empower young people, and celebrate accomplishments in creative coding. At the conference, the Scratch Team launched a Swahili version of Scratch, available for use both online and offline.",
"annualReport.conferencesAfricaImageCaption": "Photo by {photoCredit}, LLK",
"annualReport.financialsTitle": "Financials - 2019",
"annualReport.financialsRevenue": "Revenues",

View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1020px" height="500px" viewBox="0 0 1020 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>CPS Video Splash</title>
<g id="CPS-Video-Splash" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
<path d="M189.677106,48.736809 C409.27062,-39.241082 721.790908,11.5395658 857.893065,48.736809 C1066.07982,105.635051 1051.20364,233.393881 937.08313,210.818772 C905.604851,204.591797 882.181308,244.273438 909.681303,272.776252 C949.726815,314.282072 984.355163,342.884792 976.691905,392.780366 C954.578838,536.758827 401.144054,520.645823 189.677106,433.095425 C-37.5164562,339.033979 -59.0503945,135.133524 114.233615,172.943359 C143.924915,179.421875 154.598037,141.642021 140.724482,121.722656 C126.242474,100.929688 139.619628,68.7918246 189.677106,48.736809 Z M945.486357,243.740234 C975.445342,216.269531 1009.4512,267.462891 984.578154,289 C959.705107,310.537109 915.527373,271.210938 945.486357,243.740234 Z M53.4476056,22.9108019 C83.40659,-4.55990118 117.412449,46.6334582 92.5394025,68.1705676 C81.8826781,77.3980273 53.0455462,94.9215554 42.6504196,87.5234375 C28.7830748,77.6541732 36.3243885,38.6118287 53.4476056,22.9108019 Z" id="splash" fill="#9966FF" transform="translate(509.572280, 250.000000) scale(1, -1) rotate(-180.000000) translate(-509.572280, -250.000000) "></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 558 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 629 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 709 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 687 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 667 KiB

View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>News Icon</title>
<g id="News-Icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M2,19 C0.8954305,19 1.3527075e-16,18.1045695 0,17 L0,1.70710678 C3.57012085e-17,1.54534632 0.131132761,1.41421356 0.292893219,1.41421356 C0.37057333,1.41421356 0.445071866,1.44507187 0.5,1.5 C0.776142375,1.77614237 1.22385763,1.77614237 1.5,1.5 C1.77614237,1.22385763 2.22385763,1.22385763 2.5,1.5 C2.77614237,1.77614237 3.22385763,1.77614237 3.5,1.5 C3.77614237,1.22385763 4.22385763,1.22385763 4.5,1.5 C4.77614237,1.77614237 5.22385763,1.77614237 5.5,1.5 C5.77614237,1.22385763 6.22385763,1.22385763 6.5,1.5 C6.77614237,1.77614237 7.22385763,1.77614237 7.5,1.5 C7.77614237,1.22385763 8.22385763,1.22385763 8.5,1.5 C8.77614237,1.77614237 9.22385763,1.77614237 9.5,1.5 C9.77614237,1.22385763 10.2238576,1.22385763 10.5,1.5 C10.7761424,1.77614237 11.2238576,1.77614237 11.5,1.5 C11.7761424,1.22385763 12.2238576,1.22385763 12.5,1.5 C12.7761424,1.77614237 13.2238576,1.77614237 13.5,1.5 C13.7761424,1.22385763 14.2238576,1.22385763 14.5,1.5 C14.7761424,1.77614237 15.2238576,1.77614237 15.5,1.5 C15.6143819,1.38561808 15.7998316,1.38561808 15.9142136,1.5 C15.9691417,1.55492813 16,1.62942667 16,1.70710678 L16,6 L19,6 C19.5522847,6 20,6.44771525 20,7 L20,17 C20,18.1045695 19.1045695,19 18,19 L2,19 Z" id="Combined-Shape" fill="#FFFFFF"></path>
<path d="M16,6 L19,6 C19.5522847,6 20,6.44771525 20,7 L20,17 C20,18.1045695 19.1045695,19 18,19 C16.8954305,19 16,18.1045695 16,17 L16,6 L16,6 Z" id="Rectangle-Copy" fill="#4D97FF" opacity="0.5"></path>
<path d="M0.5,1.5 C0.776142375,1.77614237 1.22385763,1.77614237 1.5,1.5 C1.77614237,1.22385763 2.22385763,1.22385763 2.5,1.5 C2.77614237,1.77614237 3.22385763,1.77614237 3.5,1.5 C3.77614237,1.22385763 4.22385763,1.22385763 4.5,1.5 C4.77614237,1.77614237 5.22385763,1.77614237 5.5,1.5 C5.77614237,1.22385763 6.22385763,1.22385763 6.5,1.5 C6.77614237,1.77614237 7.22385763,1.77614237 7.5,1.5 C7.77614237,1.22385763 8.22385763,1.22385763 8.5,1.5 C8.77614237,1.77614237 9.22385763,1.77614237 9.5,1.5 C9.77614237,1.22385763 10.2238576,1.22385763 10.5,1.5 C10.7761424,1.77614237 11.2238576,1.77614237 11.5,1.5 C11.7761424,1.22385763 12.2238576,1.22385763 12.5,1.5 C12.7761424,1.77614237 13.2238576,1.77614237 13.5,1.5 C13.7761424,1.22385763 14.2238576,1.22385763 14.5,1.5 C14.7761424,1.77614237 15.2238576,1.77614237 15.5,1.5 C15.6143819,1.38561808 15.7998316,1.38561808 15.9142136,1.5 C15.9691417,1.55492813 16,1.62942667 16,1.70710678 L16,17 L16,17 C16,18.1045695 16.8954305,19 18,19 L18,19 L18,19 L2,19 C0.8954305,19 1.3527075e-16,18.1045695 0,17 L0,1.70710678 C3.57012085e-17,1.54534632 0.131132761,1.41421356 0.292893219,1.41421356 C0.37057333,1.41421356 0.445071866,1.44507187 0.5,1.5 Z" id="Rectangle" fill-opacity="0.25" fill="#4D97FF"></path>
<path d="M16,6 L17,6 L17,17 L17,18 C17,18.5522847 17.4477153,19 18,19 L18,19 L18,19 C16.8954305,19 16,18.1045695 16,17 L16,6 L16,6 Z" id="Rectangle" fill="#4D97FF" opacity="0.5"></path>
<rect id="Rectangle" fill="#4D97FF" x="2" y="4" width="12" height="6" rx="1"></rect>
<rect id="Rectangle-Copy-5" fill="#4D97FF" x="2" y="11" width="6" height="6" rx="1"></rect>
<rect id="Rectangle-Copy-2" fill="#4D97FF" x="9" y="11.5" width="5" height="1" rx="0.5"></rect>
<rect id="Rectangle-Copy-3" fill="#4D97FF" x="9" y="13.5" width="5" height="1" rx="0.5"></rect>
<rect id="Rectangle-Copy-4" fill="#4D97FF" x="9" y="15.5" width="5" height="1" rx="0.5"></rect>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

View file

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="140px" height="140px" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Pencils</title>
<g id="Pencils" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Illustration" transform="translate(2.000000, 4.000000)">
<g id="Group-21" transform="translate(48.000000, 39.000000) rotate(-16.000000) translate(-48.000000, -39.000000) translate(7.000000, 11.000000)">
<rect id="Rectangle" fill="#FF661A" x="0" y="0" width="81.6" height="55.2" rx="3.2"></rect>
<rect id="Rectangle" fill="#FFFFFF" x="2.4" y="18.4" width="76.8" height="34.4" rx="1.6"></rect>
<polyline id="Path-34-Copy" stroke="#575E75" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" points="15.1908203 40.7694413 21.5393912 29.3773203 24.7558074 41.3359654 29.6363865 29.3773203 32.1484299 39.6024872 36.3483347 28.0931211 38.4891013 39.6024872 41.616648 29.3773203 46.2418097 41.3359654 49.2653462 32.3876037 52.7510039 43.3750363 55.6514398 32.3876037 58.7526548 41.3359654 63.2474746 32.3876037 66.3908203 39.6024872"></polyline>
<text id="Hello" font-family="Helvetica-Bold, Helvetica" font-size="11.2" font-weight="bold" fill="#FFFFFF">
<tspan x="26.7089844" y="13.4">Hello</tspan>
</text>
</g>
<g id="Pencil" transform="translate(68.000000, 58.500000) rotate(35.000000) translate(-68.000000, -58.500000) translate(59.000000, -1.000000)">
<rect id="Rectangle-Copy-2" fill="#9B9EA8" x="3" y="0" width="12" height="18" rx="6"></rect>
<rect id="Rectangle-Copy" fill="#575E75" x="3" y="6" width="12" height="22" rx="6"></rect>
<path d="M8.5,17 L9.5,17 C12.5375661,17 15,19.4624339 15,22.5 L15,102 L15,102 L3,102 L3,22.5 C3,19.4624339 5.46243388,17 8.5,17 Z" id="Rectangle" fill="#4D97FF"></path>
<path d="M9,96 C12.3444763,96 15.0557101,98.7112338 15.0557101,102.05571 C15.0557101,102.837805 14.904212,103.612494 14.6095873,104.336972 L9.92633022,115.853028 C9.71827763,116.364626 9.13488553,116.610698 8.62328747,116.402646 C8.37346318,116.301049 8.17526632,116.102852 8.07366978,115.853028 L3.39041274,104.336972 C2.13050661,101.238882 3.62064865,97.706029 6.71873814,96.4461228 C7.44321588,96.1514981 8.21790554,96 9,96 Z" id="Rectangle-Copy-3" fill="#F6DDC3"></path>
<path d="M9,108 C10.5112275,108 11.7363195,109.225092 11.7363195,110.736319 C11.7363195,111.089715 11.6678639,111.439764 11.5347354,111.767125 L9.92633022,115.722168 C9.71827763,116.233767 9.13488553,116.479839 8.62328747,116.271786 C8.37346318,116.17019 8.17526632,115.971993 8.07366978,115.722168 L6.46526461,111.767125 C5.89596627,110.36723 6.56929848,108.770882 7.96919418,108.201584 C8.29655505,108.068456 8.64660457,108 9,108 Z" id="Rectangle-Copy-3" fill="#3D73CC"></path>
</g>
<g id="Pencil-Copy" transform="translate(95.000000, 82.500000) rotate(-137.000000) translate(-95.000000, -82.500000) translate(86.000000, 23.000000)">
<rect id="Rectangle-Copy-2" fill="#9B9EA8" x="3" y="0" width="12" height="18" rx="6"></rect>
<rect id="Rectangle-Copy" fill="#575E75" x="3" y="6" width="12" height="22" rx="6"></rect>
<path d="M8.5,17 L9.5,17 C12.5375661,17 15,19.4624339 15,22.5 L15,102 L15,102 L3,102 L3,22.5 C3,19.4624339 5.46243388,17 8.5,17 Z" id="Rectangle" fill="#0EBD8C"></path>
<path d="M9,96 C12.3444763,96 15.0557101,98.7112338 15.0557101,102.05571 C15.0557101,102.837805 14.904212,103.612494 14.6095873,104.336972 L9.92633022,115.853028 C9.71827763,116.364626 9.13488553,116.610698 8.62328747,116.402646 C8.37346318,116.301049 8.17526632,116.102852 8.07366978,115.853028 L3.39041274,104.336972 C2.13050661,101.238882 3.62064865,97.706029 6.71873814,96.4461228 C7.44321588,96.1514981 8.21790554,96 9,96 Z" id="Rectangle-Copy-3" fill="#F6DDC3"></path>
<path d="M9,108 C10.5112275,108 11.7363195,109.225092 11.7363195,110.736319 C11.7363195,111.089715 11.6678639,111.439764 11.5347354,111.767125 L9.92633022,115.722168 C9.71827763,116.233767 9.13488553,116.479839 8.62328747,116.271786 C8.37346318,116.17019 8.17526632,115.971993 8.07366978,115.722168 L6.46526461,111.767125 C5.89596627,110.36723 6.56929848,108.770882 7.96919418,108.201584 C8.29655505,108.068456 8.64660457,108 9,108 Z" id="Rectangle-Copy-3" fill="#0A8E69"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="140px" height="140px" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Pizza</title>
<g id="Pizza" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(13.000000, 8.000000)">
<path d="M11.5811637,19.1832613 C22.0477729,-1.06274655 47.7270121,-4.01021156 72.4511911,4.42114374 C97.17537,12.852499 129.392331,38.7654681 105.749962,51.6996751 C83.0368491,60.7859349 52.6829903,83.4722222 14.6883854,119.758537 L14.6883927,119.758545 C13.490189,120.902876 11.5911894,120.859203 10.4468586,119.660999 C9.98679139,119.179273 9.70013616,118.558128 9.63208424,117.895489 C4.20912059,65.0906648 4.85881374,32.186589 11.5811637,19.1832613 Z" id="Path-34" fill="#F6DDC3"></path>
<path d="M9.44094556,21.403993 C21.7247463,0.247990958 47.6554696,8.50366521 71.7723293,16.6486267 C84.0012253,20.7786788 93.9141738,28.1555664 101.77263,38.5765842 C102.485461,39.521862 103.221,40.8748677 103.84943,40.8748677 C104.477859,40.8748677 105.241352,37.752337 108.370989,36.5458326 C111.500625,35.3393281 112.801201,36.6889581 112.91816,38.2087468 C113.645829,47.6642412 109.403473,48.0274807 104.865504,51.8529868 C71.8324517,65.0836243 41.2619529,87.6996785 13.1540073,119.701149 L13.1540147,119.701156 C12.060617,120.946012 10.1650881,121.068792 8.92023248,119.975395 C8.46450689,119.575116 8.14081909,119.046098 7.99186321,118.458117 C-3.1268715,74.5686192 -2.64384405,42.2172444 9.44094556,21.403993 Z" id="Path-34" fill="#ECC293"></path>
<path d="M5.76872448,29.5253694 C19.021402,3.80003047 46.7363142,11.8088075 70.1038257,19.7206866 C85.6821667,24.9952727 96.9808915,34.397583 104,47.9276176 C71.7952284,60.6294468 41.6304647,84.3922726 13.5057088,119.216095 L13.5057148,119.2161 C12.4646979,120.505078 10.5758639,120.70609 9.28688606,119.665073 C8.76982508,119.247479 8.40607499,118.670004 8.25273813,118.023301 C-1.84897968,75.4190062 -2.67698423,45.9196956 5.76872448,29.5253694 Z" id="Path-34" fill="#FFBF00"></path>
<path d="M21.2856759,24.0187065 C16.6767761,23.6908073 10,27.6629896 10,36.77489 C10,45.8867903 22.4380162,43.841651 27.3147445,38.0067435 C32.1914727,32.171836 25.3341484,24.3067341 21.2856759,24.0187065 Z" id="Path-35" fill="#FF8000"></path>
<path d="M29.5918467,58.2284536 C19.9383884,60.4006109 17.5776303,68.1847116 19.7424118,74.66237 C21.9071933,81.1400284 32.6379308,81.9139291 37.6940379,75.9264369 C42.750145,69.9389447 39.245305,56.0562963 29.5918467,58.2284536 Z" id="Path-35-Copy-2" fill="#FF8000"></path>
<path d="M1,80.2267405 C1.53355831,83.8098178 1.86085938,90.2269074 4.39539817,101 C6.24776409,100.352271 8.57015977,99.1234764 9.89642417,97.5625168 C14.9104174,91.6612495 10.5730517,78.0858641 1,80.2267405 Z" id="Path-35-Copy-3" fill="#FF8000"></path>
<path d="M60.9485996,27.441105 C52.4478334,30.567613 44.5322093,37.6763698 47.7220101,46.6186037 C50.9118109,55.5608377 67.106795,54.6820896 73.9102833,46.6186037 C80.7137715,38.5551179 69.4493659,24.314597 60.9485996,27.441105 Z" id="Path-35-Copy" fill="#FF8000"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Video Icon Purple</title>
<g id="Video-Icon-Purple" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M17.3333333,3.64285714 L19.7108476,3.92943253 C21.4651024,4.14088288 22.8727915,5.47829355 23.1737287,7.21943052 L23.3333333,8.14285714 C23.7745072,10.6953629 23.7745072,13.3046371 23.3333333,15.8571429 L23.1737287,16.7805695 C22.8727915,18.5217065 21.4651024,19.8591171 19.7108476,20.0705675 L17.3333333,20.3571429 C13.7905993,20.7841688 10.2094007,20.7841688 6.66666667,20.3571429 L4.28915237,20.0705675 C2.53489756,19.8591171 1.12720852,18.5217065 0.826271269,16.7805695 L0.666666667,15.8571429 C0.225492827,13.3046371 0.225492827,10.6953629 0.666666667,8.14285714 L0.826271269,7.21943052 C1.12720852,5.47829355 2.53489756,4.14088288 4.28915237,3.92943253 L6.66666667,3.64285714 C10.2094007,3.21583117 13.7905993,3.21583117 17.3333333,3.64285714 Z M10.885255,8.6 C10.1201998,8.6 9.5,9.21745879 9.5,9.9791328 L9.5,9.9791328 L9.5,14.0206859 C9.5,14.280354 9.57363424,14.5347467 9.71243054,14.7545943 C10.1195563,15.3994647 10.9746883,15.5936534 11.6224213,15.188327 L11.6224213,15.188327 L14.8517293,13.1675505 C15.0278111,13.0573652 15.176713,12.9091214 15.2873874,12.7338178 C15.6945131,12.0889474 15.4994623,11.2375947 14.8517293,10.8322683 L14.8517293,10.8322683 L11.6224213,8.8114917 C11.4015978,8.67330881 11.1460758,8.6 10.885255,8.6 Z" id="Combined-Shape" fill="#9966FF"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 491 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 349 KiB