Added images to img file and adding images on page

src/Pages/UserTerms.js

@@ -20,6 +20,9 @@ import ExpansionPanels from '../Components/ExpansionPanels'
 import Grid from '@material-ui/core/Grid';
 import Banner1 from "../img/termos/banner.jpg";
 import Modal from '../Components/Modal'
+import Busca from "../img/termos/Busca.png"
+
+import styled from 'styled-components'
 
 
 const bannerStyle={
@@ -52,6 +55,27 @@ const secao2={
 }
 
 
+const AColorido = styled.a`
+
+    color: #00BCD4;
+    text-decoration:none;
+
+`
+const ImagemSeçao2 = styled.div`
+
+@media (min-width:1450px) {
+  background-image: url(${Busca});
+  background-position: right;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+  height: 100%;
+  align-items: center;
+  padding-block: 30px;
+
+
+`
+
 
 
 
@@ -67,22 +91,22 @@ class UserTerms extends Component {
             <Modal/>
           </div>
 
-          <div style= {secao2}>
+          <ImagemSeçao2>
             <Grid container spacing={3}>
               <Grid item xs={12} md={1}></Grid>
               <Grid item xs={12} md={10}>
                 <div>
                   <h3 style= {{textAlign: "center",fontWeight: "100",fontFamily:"'Roboto', sans-serif",fontSize:"30px"}}><strong style={{fontWeight:"700"}}>Plataforma Integrada de Recursos Educacionais Digitais,</strong><br/>uma iniciativa do Ministério da Educação!</h3>
 
-                  <p style={{textAlign:"justify"}}>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <a style={{color:"#00BCD4",textDecoration:"none"}} href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</a> (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.
+                  <p style={{textAlign:"justify"}}>A <strong>Plataforma Integrada de RED do MEC</strong> é parte do processo de implementação do Compromisso 6 do <AColorido href="http://www.governoaberto.cgu.gov.br/noticias/2017/3o-plano-de-acao-nacional-na-parceria-para-governo-aberto" target="_blank">3º Plano de Ação da Parceria Governo Aberto</AColorido> (OGP-Brasil), que tem por objetivo “incorporar na política educacional o potencial da cultura digital, de modo a fomentar a autonomia para uso, reuso e adaptação de recursos educacionais digitais, valorizando a pluralidade e a diversidade da educação brasileira”.
                   </p>
-                  <p style={{textAlign:"justify"}}>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domínio público ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.” <a style={{color:"#00BCD4",textDecoration:"none"}}  href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</a>.
+                  <p style={{textAlign:"justify"}}>Seguindo o compromisso, a <strong>Plataforma Integrada de RED do MEC</strong> visa fortalecer a distribuição de recursos educacionais digitais para o ensino básico brasileiro. Há preferência pela disponibilização de Recursos Educacionais Abertos (REA), ou seja, recursos que “se situem no domínio público ou que tenham sido divulgados sob licença aberta que permita acesso, uso, adaptação e redistribuição gratuita por terceiros, mediante nenhuma restrição ou poucas restrições.” <AColorido  href="http://www.unesco.org/new/fileadmin/MULTIMEDIA/HQ/CI/CI/pdf/Events/Portuguese_Paris_OER_Declaration.pdf" target="_blank">(Declaração REA de Paris, 2012)</AColorido>.
                   </p>
                 </div>
               </Grid>
               <Grid item xs={12} md={1}></Grid>
             </Grid>
-          </div>
+          </ImagemSeçao2>
 
           <div style = {{background: "#ff7f00"}} >
             <h1 style = {center}>Para melhor compreensão, podemos dividir os recursos em dois tipos:</h1>
@@ -106,7 +130,7 @@ class UserTerms extends Component {
           <Grid item xs={12} md={10}>
           <div>
             <p>
-              O <a style={{color:"#00BCD4",textDecoration:"none"}} href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" target="_blank">Plano Nacional de Educação</a> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação básica. A <a style={{color:"#00BCD4",textDecoration:"none"}} href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" traget="_blank">Resolução CNE/CES nº 1</a>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as
+              O <AColorido href="http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2014/lei/l13005.htm" target="_blank">Plano Nacional de Educação</AColorido> (2014-2024) enfatiza nas metas 5 e 7 a importância dos recursos educacionais abertos para fomentar a qualidade da educação básica. A <AColorido href="http://portal.mec.gov.br/index.php?option=com_docman&view=download&alias=35541-res-cne-ces-001-14032016-pdf&category_slug=marco-2016-pdf&Itemid=30192" traget="_blank">Resolução CNE/CES nº 1</AColorido>, de 11 de março de 2016, também destaca a importância dos recursos educacionais abertos para as instituições de educação superior e para as
               atividades de educação a distância.
             </p>
 
@@ -128,13 +152,13 @@ class UserTerms extends Component {
           <Grid item xs={12} md={1}></Grid>
           </Grid>
           <Grid container spacing={3}>
-          <Grid item xs={12} md={2}></Grid>
-          <Grid item xs={12} md={8}>
+          <Grid item xs={12} md={1}></Grid>
+          <Grid item xs={12} md={10}>
           <div style={{verticalAlign: "middle"}}>
             <ExpansionPanels/>
           </div>
           </Grid>
-          <Grid item xs={12} md={2}></Grid>
+          <Grid item xs={12} md={1}></Grid>
           </Grid>
         </div>
       );

src/img/termos/AbertoG.svg

+<svg width="226" height="233" viewBox="0 0 226 233" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M143.133 172.229V191.729C143.133 193.767 144.881 195.419 146.9 195.419C148.98 195.419 150.667 193.707 150.667 191.729V172.229C155.056 170.682 158.2 166.506 158.2 161.597C158.2 155.37 153.141 150.323 146.9 150.323C140.659 150.323 135.6 155.37 135.6 161.597C135.6 166.506 138.744 170.682 143.133 172.229ZM90.4 56.3703C90.4 37.691 75.1844 22.5484 56.5 22.5484C37.7775 22.5484 22.6 37.7075 22.6 56.3703V67.6452V86.4292C22.6 92.6096 17.5408 97.7097 11.3 97.7097C5.01567 97.7097 0 92.6592 0 86.4292V67.6452V56.3652C0 25.2294 25.2959 0 56.5 0C87.6406 0 113 25.2356 113 56.3652V112.742H203.334C215.863 112.742 226 122.869 226 135.362V210.38C226 222.954 215.852 233 203.334 233H90.4662C77.9368 233 67.8 222.873 67.8 210.38V135.362C67.8 122.81 77.9122 112.777 90.4 112.742V56.3703Z" fill="white" fill-opacity="0.1"/>
+</svg>

src/img/termos/Arrow_double.svg

+<svg width="74" height="84" viewBox="0 0 74 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.13646 74.69C5.85887 75.1674 6.02089 75.7795 6.49834 76.0571L14.2789 80.5807C14.7564 80.8583 15.3684 80.6962 15.646 80.2188C15.9236 79.7413 15.7616 79.1293 15.2841 78.8517L8.36809 74.8307L12.3891 67.9146C12.6667 67.4372 12.5046 66.8251 12.0272 66.5475C11.5497 66.2699 10.9376 66.4319 10.66 66.9094L6.13646 74.69ZM69.348 40.4352C54.9449 52.8517 39.2878 61.3041 27.2207 66.6534C21.1897 69.3269 16.062 71.2225 12.4455 72.4487C10.6374 73.0617 9.2076 73.5072 8.23206 73.7989C7.74431 73.9448 7.37018 74.0521 7.11916 74.1227C6.99365 74.158 6.89893 74.1841 6.83619 74.2013C6.80481 74.2098 6.78144 74.2161 6.7662 74.2202C6.75859 74.2223 6.753 74.2238 6.74947 74.2247C6.74771 74.2252 6.74646 74.2255 6.74572 74.2257C6.74536 74.2258 6.74519 74.2258 6.74501 74.2259C6.74498 74.2259 6.74507 74.2259 7.00096 75.1926C7.25686 76.1593 7.25721 76.1592 7.25769 76.1591C7.25803 76.159 7.25864 76.1588 7.25931 76.1586C7.26064 76.1583 7.2625 76.1578 7.26487 76.1571C7.2696 76.1559 7.2764 76.1541 7.28523 76.1517C7.3029 76.1469 7.32873 76.14 7.36257 76.1307C7.43026 76.1123 7.53 76.0848 7.6606 76.0481C7.92179 75.9746 8.30644 75.8642 8.80502 75.7151C9.80214 75.417 11.2551 74.9641 13.0877 74.3427C16.7525 73.1002 21.9373 71.1832 28.0312 68.4818C40.2142 63.0811 56.057 54.5335 70.6539 41.95L69.348 40.4352Z" fill="white"/>
+<path d="M2.37639 9.41044C1.94427 9.75438 1.87278 10.3835 2.21671 10.8156L7.82143 17.8574C8.16536 18.2896 8.79448 18.361 9.2266 18.0171C9.65872 17.6732 9.73021 17.0441 9.38627 16.6119L4.40431 10.3525L10.6637 5.37058C11.0958 5.02665 11.1673 4.39753 10.8234 3.96541C10.4794 3.53329 9.85033 3.4618 9.41821 3.80573L2.37639 9.41044ZM69.6718 34.4529C58.4905 24.2881 41.7993 17.9882 28.0123 14.2281C21.1005 12.3431 14.8816 11.0868 10.3901 10.3016C8.14382 9.90885 6.32822 9.63373 5.07241 9.45658C4.44448 9.368 3.9564 9.3039 3.62432 9.26183C3.45828 9.2408 3.33122 9.22527 3.24518 9.21494C3.20215 9.20978 3.16938 9.20592 3.1471 9.20332C3.13597 9.20202 3.12746 9.20103 3.12161 9.20036C3.11868 9.20002 3.11642 9.19976 3.11482 9.19958C3.11402 9.19949 3.11333 9.19941 3.11293 9.19936C3.11241 9.1993 3.11205 9.19926 2.99914 10.1929C2.88623 11.1865 2.8862 11.1865 2.88635 11.1865C2.88662 11.1865 2.88693 11.1866 2.88747 11.1866C2.88856 11.1867 2.89031 11.1869 2.89272 11.1872C2.89755 11.1878 2.90502 11.1886 2.91512 11.1898C2.93531 11.1922 2.96599 11.1958 3.00689 11.2007C3.08868 11.2105 3.21138 11.2255 3.37298 11.246C3.69617 11.2869 4.17489 11.3498 4.79305 11.437C6.02943 11.6114 7.82321 11.8831 10.0457 12.2717C14.4916 13.0489 20.6478 14.2927 27.486 16.1576C41.199 19.8975 57.5077 26.0976 68.3264 35.9328L69.6718 34.4529Z" fill="white"/>
+</svg>

src/img/termos/Arrow_down.svg

+<svg width="82" height="56" viewBox="0 0 82 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.09395 47.5336C4.83636 48.0221 5.02358 48.627 5.51211 48.8846L13.4733 53.0822C13.9618 53.3398 14.5667 53.1526 14.8242 52.664C15.0818 52.1755 14.8946 51.5706 14.4061 51.313L7.3295 47.5818L11.0607 40.5052C11.3183 40.0167 11.1311 39.4119 10.6425 39.1543C10.154 38.8967 9.54915 39.0839 9.29156 39.5724L5.09395 47.5336ZM72.1729 0.407605C59.7897 17.2486 43.1744 28.9133 29.6213 36.3738C22.8496 40.1014 16.8552 42.7724 12.5568 44.5104C10.4079 45.3792 8.68389 46.0145 7.49969 46.4318C6.90762 46.6405 6.45058 46.7946 6.14295 46.8961C5.98914 46.9468 5.87269 46.9844 5.7954 47.0091C5.75676 47.0215 5.72791 47.0306 5.70907 47.0365C5.69965 47.0395 5.69274 47.0416 5.68835 47.043C5.68616 47.0437 5.6846 47.0442 5.68368 47.0444C5.68322 47.0446 5.683 47.0447 5.68277 47.0447C5.68272 47.0447 5.68283 47.0447 5.97852 48C6.27421 48.9553 6.27464 48.9551 6.27522 48.955C6.27563 48.9548 6.27638 48.9546 6.2772 48.9544C6.27884 48.9538 6.28111 48.9531 6.28401 48.9522C6.28983 48.9504 6.29818 48.9478 6.30905 48.9444C6.33077 48.9376 6.36254 48.9275 6.40412 48.9142C6.4873 48.8876 6.60974 48.8481 6.76966 48.7953C7.08947 48.6898 7.55919 48.5314 8.16438 48.3181C9.37471 47.8917 11.1272 47.2457 13.3065 46.3645C17.6644 44.6025 23.7324 41.8984 30.5857 38.1259C44.2826 30.5863 61.1674 18.7511 73.7842 1.59239L72.1729 0.407605Z" fill="white" fill-opacity="0.5"/>
+</svg>

src/img/termos/Email.svg

+<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M90.4533 42.3498C90.4533 39.0223 87.7391 36.2998 84.4217 36.2998H36.1684C32.851 36.2998 30.1367 39.0223 30.1367 42.3498V78.6498C30.1367 81.9773 32.851 84.6998 36.1684 84.6998H84.4217C87.7391 84.6998 90.4533 81.9773 90.4533 78.6498V42.3498ZM84.4217 42.3498L60.295 57.4748L36.1684 42.3498H84.4217ZM84.4217 78.6498H36.1684V48.3998L60.295 63.5248L84.4217 48.3998V78.6498Z" fill="white"/>
+<path d="M119.526 60.5C119.526 93.3646 92.9896 120 60.2632 120C27.5367 120 1 93.3646 1 60.5C1 27.6354 27.5367 1 60.2632 1C92.9896 1 119.526 27.6354 119.526 60.5Z" stroke="white" stroke-width="2"/>
+</svg>

src/img/termos/Eye.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6C15.79 6 19.17 8.13 20.82 11.5C19.17 14.87 15.79 17 12 17C8.21 17 4.83 14.87 3.18 11.5C4.83 8.13 8.21 6 12 6ZM12 4C7 4 2.73 7.11 1 11.5C2.73 15.89 7 19 12 19C17 19 21.27 15.89 23 11.5C21.27 7.11 17 4 12 4Z" fill="white"/>
+<path d="M12 9C13.38 9 14.5 10.12 14.5 11.5C14.5 12.88 13.38 14 12 14C10.62 14 9.5 12.88 9.5 11.5C9.5 10.12 10.62 9 12 9ZM12 7C9.52 7 7.5 9.02 7.5 11.5C7.5 13.98 9.52 16 12 16C14.48 16 16.5 13.98 16.5 11.5C16.5 9.02 14.48 7 12 7Z" fill="white"/>
+</svg>

src/img/termos/FechadoG.svg

+<svg width="152" height="235" viewBox="0 0 152 235" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.381 173.708V193.375C72.381 195.43 74.0597 197.097 76 197.097C77.9987 197.097 79.619 195.369 79.619 193.375V173.708C83.8359 172.147 86.8571 167.935 86.8571 162.984C86.8571 156.704 81.9962 151.613 76 151.613C70.0038 151.613 65.1429 156.704 65.1429 162.984C65.1429 167.935 68.1641 172.147 72.381 173.708ZM130.286 64.4355V56.849C130.286 25.4522 105.92 0 76 0C46.0188 0 21.7143 25.446 21.7143 56.849V113.71C9.71594 113.745 0 123.865 0 136.523V212.186C0 224.786 9.73951 235 21.7779 235H130.222C142.25 235 152 224.867 152 212.186V136.523C152 123.946 142.295 113.746 130.286 113.71H119.298H43.6275C43.496 112.466 43.4286 111.203 43.4286 109.923V56.8508C43.4286 37.9806 58.0113 22.7419 76 22.7419C93.9521 22.7419 108.571 38.013 108.571 56.8508V64.4355V84.3268C108.571 92.1812 113.391 98.5484 119.429 98.5484C125.425 98.5484 130.286 92.1186 130.286 84.3268V64.4355Z" fill="white" fill-opacity="0.1"/>
+</svg>

src/img/termos/Like.svg

+<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.2493 61.2111H52.4994C54.9202 61.2111 56.991 59.7537 57.866 57.655L66.6744 37.1057C66.9369 36.4353 67.0827 35.7357 67.0827 34.9779V29.1483C67.0827 25.942 64.4577 23.3187 61.2494 23.3187H42.8452L45.616 9.99801L45.7035 9.06527C45.7035 7.8702 45.2077 6.76258 44.4202 5.97558L41.3285 2.91504L22.1077 22.1236C21.0577 23.1729 20.416 24.6303 20.416 26.2335V55.3815C20.416 58.5878 23.041 61.2111 26.2493 61.2111ZM26.2493 26.2335L38.9077 13.5832L34.9993 29.1483H61.2494V34.9779L52.4994 55.3815H26.2493V26.2335Z" fill="white"/>
+<path d="M14.5827 26.2334H2.91602V61.211H14.5827V26.2334Z" fill="white"/>
+</svg>

src/img/termos/Line.svg

+<svg width="373" height="1" viewBox="0 0 373 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line y1="0.5" x2="373" y2="0.5" stroke="white"/>
+</svg>