Formatada a página de Download (ainda preciso incluir os arquivos dos sites das versões anteriores)

css/style.css

@@ -44,4 +44,19 @@ h1 {
 }
 .col-md-3.item hr {
     background: white;
+}
+.btn.btn-primary .octicon {
+	font-size: 1.5em;
+	margin-right: 0.5em;
+}
+.download-ivprog {
+    font-size: 1.3em;
+}
+.div-button {
+	text-align: center;
+	padding-top: 2.5em;
+}
+.div-button .span-version {
+	display: block;
+	font-size: 98%;
 }

download.html

@@ -67,38 +67,57 @@
       <div class="container" style="margin-top:50px;" >
 
       <!-- Portfolio Item Heading -->
-      <h1 class="my-4">iVProg - Visual Programming
-        <small>LInE-IME-USP</small>
-      </h1>
+      <h1 class="my-4">Download</h1>
 
       <!-- Portfolio Item Row -->
       <div class="row">
 
         <div class="col-md-8">
           <figure>
-          <img class="img-fluid" width="500px" height="250px" src="img/ivprogalfa.jpeg" alt="Imagem da interface do iVProg-nova versão">
-            <figcaption align="center"> iVProg versão Alfa </figcaption>
-</figure>
+          <img class="img-fluid" src="./img/img_ivprogh_download_page.png" alt="Imagem da interface do usuário do iVProgH em sua versão mais atual.">
+            <figcaption align="center">iVProgH versão atual</figcaption>
+          </figure>
         </div>
 
         <div class="col-md-4">
-          <h3 class="my-3">Sobre o iVProg</h3>
-          <p>O iVProgH é sistema educacional livre, implementado em HTML5 (usa fortemente JavaScript), está destinado ao ensino e aprendizagem de algoritmos e programação. Sua versão Web,dispõe de um esquema para avaliação automática de exercícios. O iVProg foi desenhado a partir de um modelo visual para programação, podendo ser utilizado desde o segundo ciclo do Ensino Fundamental.</p>
-          <a href="#"> Ir para o manual </a>
+          <h4 class="my-4">Baixar o iVProgH</h4>
+          
+          <li>Totalmente gratuito e código livre</li>
+          <li>Inclui avaliador automático</li>
+          <li>Possui recursos para vetores e funções</li>
+          <li>Disponibiliza uma série de funções já desenvolvidas</li>
+          <li>Só precisa de um navegador para funcionar!</li>
+          
+          <div class="div-button">
+            <a class="btn btn-primary download-ivprog" href="#" role="button" title=""> <span class="octicon octicon-desktop-download"></span> Download</a>
+            <span class="span-version">Versão 2018/12/18</span>
+          </div>
         </div>
-
       </div>
-      <!-- /.row -->
 
-      <!-- Related Projects Row -->
-      <h3 class="my-4" style="margin-top: 5px">Versões do iVProg</h3>
+      <h3 class="my-4" style="margin-top: 5px">Versões anteriores do iVProg</h3>
 
       <div class="row">
+        <div class="col-md-12">
+          <p>Ao longo do tempo, o iVProg passou por melhorias e modificações, permitindo total compatibilidade com os navegadores atuais. Inicialmente foi desenvolvido em Java no formato de applet (Versão I - Java e Versão II - Java), precisou ser reescrito após o bloqueio da execução de applets pelos principais navegadores do mercado, resultando na Versão I - HTML.</p>
+          
+          <p>A Versão I - HTML continua funcionando nos navegadores e integradas a ambientes virtuais. Contudo, novos recursos foram implementados, como vetores, matriz e funções (Versão II - HTML, que é a mais recente).</p>
+
+          <p>Abaixo, você encontra as versões anteriores, que podem ser baixadas e utilizadas livremente.</p>
+        </div>
+        <div class="col-md-2"></div>
+
+        <div class="col-md-3 col-sm-6 mb-4">
+          <a href="versao-java.html">
+            <img class="img-fluid" src="img/ivjava.png" alt="">
+              <p class="legenda-versoes">Versão Java I</p>
+          </a>
+        </div>
 
         <div class="col-md-3 col-sm-6 mb-4">
           <a href="versao-java.html">
             <img class="img-fluid" src="img/ivjava.png" alt="">
-              <p class="legenda-versoes">Versão Java</p>
+              <p class="legenda-versoes">Versão Java II</p>
           </a>
          
         </div>
@@ -110,36 +129,11 @@
           </a>
         </div>
 
-        <div class="col-md-3 col-sm-6 mb-4">
-          <a href="versao-alfa.html">
-            <img class="img-fluid" src="img/ivprog-novo.jpg" alt="">
-            <p class="legenda-versoes">Versão Alfa</p>
-          </a>
-        </div>
         </div>
 
       </div>
-      <!-- /.row -->
-
-<h3 class="my-4" style="margin-top: 5px">Publicações</h3>
-<div class="row">
-
-  <ul>
-    <li>KAMIYA, Reginaldo Rideaki; BRANDÃO, Leônidas O. iVProg-um sistema para introdução à Programação através de um modelo Visual na Internet. Anais do XX Simpósio Brasileiro de Informática na Educaç a. Florianópolis, SC, 2009.</li>
-    <li>DE OLIVEIRA BRANDÃO, Leônidas; BRANDÃO, Anarosa Alves Franco; DA SILVA RIBEIRO, Romenig. iVProg–uma ferramenta de programaçao visual para o ensino de algoritmos. In: Anais dos Workshops do Congresso Brasileiro de Informática na Educação. 2012.</li>
- <li>RIBEIRO, Romenig Silva et al. iVProg e iTarefa: aprimorando o ensino de algoritmos e programação para iniciantes. In: Anais dos Workshops do Congresso Brasileiro de Informática na Educação. 2012.</li>
-  <li>DA SILVA RIBEIRO, Romenig; BRANDÃO, Leônidas de O.; BRANDÃO, Anarosa AF. Uma visão do cenário Nacional do Ensino de Algoritmos e Programação: uma proposta baseada no Paradigma de Programção Visual. In: Brazilian Symposium on Computers in Education (Simpósio Brasileiro de Informática na Educação-SBIE). 2012.</li>
-   <li>KAMIYA, Reginaldo Rideaki. iVProg: um sistema visual para ensino-aprendizagem de programação via web. 2009. Tese de Doutorado. Dissertação de Mestrado, Instituto de Matemática e Estatística-USP. Citado na pág. 12, 69.</li>
-    <li>RODRIGUES, Patrícia Alves; DE OLIVEIRA BRANDÃO, Leônidas. iTarefa: componente Moodle para incorporar Módulos de Aprendizagem Interativa em cursos WEB. In: Anais dos Workshops do Congresso Brasileiro de Informática na Educação. 2012.</li>
-
-     </ul>
-
-</div>
-
-
 
     </div>
-    <!-- /.container -->
 
       </div>
 
@@ -152,5 +146,7 @@
 
     <script src="js/jquery.min.js"></script>
     <script src="js/bootstrap.bundle.min.js"></script>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
   </body>
 </html>