Переглянути джерело

Elaboradas 6 caixas de informação do iVProgH na página inicial

Igor 6 роки тому
батько
коміт
b37d4a0860
3 змінених файлів з 76 додано та 0 видалено
  1. 1 0
      css/octicons.min.css
  2. 26 0
      css/style.css
  3. 49 0
      index.html

Різницю між файлами не показано, бо вона завелика
+ 1 - 0
css/octicons.min.css


+ 26 - 0
css/style.css

@@ -18,4 +18,30 @@ footer.container {
 }
 h1 {
 	margin-bottom: 0;
+}
+.col-md-3.item {
+	padding: 1em;
+    background: #007bff;
+    color: white;
+    margin: 1em;
+    border-radius: .5em;
+    text-align: center;
+    border: 1px groove;
+    cursor: pointer;
+} 
+.col-md-3.item .octicon {
+	font-size: 3em;
+}
+.col-md-3.item h4 {
+	font-size: 1.4em;
+	margin-top: 0.6em;
+}
+.row.thumbs-ivprog {
+	margin-top: 1em;
+}
+.col-md-3.item:hover {
+    background-color: #03396c;
+}
+.col-md-3.item hr {
+    background: white;
 }

+ 49 - 0
index.html

@@ -90,6 +90,52 @@
         </div>
       </div>
 
+      <div class="container">
+        <div class="row thumbs-ivprog">
+          <div class="col-md-1"></div>
+          <div class="col-md-3 item">
+            <span class="octicon octicon-light-bulb"></span>
+            <h4>Menos linguagem <br> Mais algoritmo</h4>
+            <hr>
+            <p>No iVProgH, o estudante dedica-se ao aprendizado de algoritmo, não se prendendo a uma linguagem ou IDE.</p>
+          </div>
+          <div class="col-md-3 item">
+            <span class="octicon octicon-clock"></span>
+            <h4>Fácil de implementar</h4>
+            <hr>
+            <p>Com um ambiente interativo, para construir algoritmos basta criar e arrastar os componentes para elaborar um programa.</p>
+          </div>
+          <div class="col-md-3 item">
+            <span class="octicon octicon-checklist"></span>
+            <h4>Avaliador Automático</h4>
+            <hr>
+            <p>Assim que o estudante finaliza o algoritmo, já consegue receber um feedback instantâneo, informando se sua solução resolve ou não o problema proposto.</p>
+          </div>
+        </div>
+
+        <div class="row thumbs-ivprog">
+          <div class="col-md-1"></div>
+          <div class="col-md-3 item">
+            <span class="octicon octicon-mortar-board"></span>
+            <h4>Área de criação de atividades</h4>
+            <hr>
+            <p>O professor conta com uma área, dentro do próprio iVProgH, onde pode preparar as atividades. Estas podem ser reaproveitadas em outros cursos também!</p>
+          </div>
+          <div class="col-md-3 item">
+            <span class="octicon octicon-globe"></span>
+            <h4>Baseado na Web</h4>
+            <hr>
+            <p>O iVProgH foi desenvolvido para ser executado em navegadores, utilizando as tecnologias HTML5, CSS3 e JavaScript. Isso permite sua incorporação a qualquer página/site da Web.</p>
+          </div>
+          <div class="col-md-3 item">
+            <span class="octicon octicon-plug"></span>
+            <h4>Fácil integração com o Moodle</h4>
+            <hr>
+            <p>O iVProgH tem uma integração completa com o Moodle: controle de usuários, registros de atividades, notas nos exercícios, comunicação entre professor/aluno, etc.</p>
+          </div>
+        </div>
+      </div>
+
     </main>
     <footer class="container text-center">
       <a href="http://www.ime.usp.br/line">iVProgH</a> | 
@@ -99,5 +145,8 @@
 
     <script src="js/jquery-min.js"></script>
     <script src="js/bootstrap.min.js"></script>
+
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
   </body>
 </html>