Skip to content
Snippets Groups Projects
Commit ccbe7a11 authored by Mateus Rambo Strey's avatar Mateus Rambo Strey
Browse files

change welcome and header

parent 01733f94
No related branches found
No related tags found
No related merge requests found
var nav_content = function () {
var nav_list = [],
toggled = null,
nav_content = '.navigation-content',
nav_prefix = '.navigation-content-',
nav_dropdown = '.nav-dropdown';
nav_close = '.navigation-content-close';
$(document).ready(function () {
var closeContent = function() {
toggled = null;
$(nav_content).slideUp();
}
$(nav_content).hide();
$(nav_close).click(function() { closeContent(); });
$(nav_dropdown).each(function() {
var content = $(this).data('content');
nav_list.push(content);
$(nav_prefix + content).hide();
});
$(nav_dropdown).click(function(){
var element = this,
content = $(element).data('content');
if (toggled == content) closeContent();
else {
toggled = content;
var length = nav_list.length;
for (var i = 0; i < length; ++i) {
var content = nav_list[i];
($(element).data('content') == content) ? $(nav_prefix + content).show() : $(nav_prefix + content).hide();
}
$(nav_content).slideDown();
}
});
});
}
$(document).ready(function () {
nav_content();
});
......@@ -20,6 +20,7 @@
$header-blue: #1676bc;
$link-grey: #343D3E;
$nav-grey: #e7e7e7;
//// HTML/BODY
html,
......@@ -189,7 +190,7 @@ header {
// navbar
.navigation {
background: #F1F1F1;
background: $nav-grey;
.nav {
height: 50px;
......@@ -226,6 +227,24 @@ header {
}
}
.navigation-content {
display:none;
background-color: #f2f2f2;
width: 100%;
height: 100%;
padding-bottom: 20px;
.inner-column {
padding: 15px;
padding-top: 5px;
}
.nav-tabs {
border: 0px;
text-align: center;
}
}
// contrast
.search-bar-contraste{
background-color: black;
......@@ -328,7 +347,7 @@ table.tipo1 p{ font-size: 15px; font-weight: bold; }
#subject-highlight{
background-color: black !important;
}
.field{
input{
color: black !important;
......
......@@ -30,23 +30,7 @@
}
}
.divider{
height: 5px;
}
.general-highlights {
padding-left: 0px;
padding-right: 0px;
padding-bottom: 20px;
}
.padding-left-0{
padding-left: 0 !important;
}
.padding-right-0{
padding-right: 0 !important;
}
//// carousel
$carousel_size: 400px;
.carousel {
......@@ -106,46 +90,32 @@ $carousel_size: 400px;
}
//// CONTACT
.font_roboto_light{
font-family: 'Roboto', sans-serif;
}
#mec_portais{
background-color: #2E3192;
width: 100px;
height: 50px;
}
#mec_portais2{
background-color: #2E3192;
width: 100px;
height: 50px;
margin-left: 5px;
}
.rede_social{
width: 30px;
height: 30px;
border-radius: 5px;
}
#rede_social1{
background-color: #2E3192;
}
#rede_social2{
background-color: #C01A2C;
margin-left: 5px;
}
#rede_social3{
background-color: #00ADEF;
margin-left: 5px;
}
#rede_social4{
background-color: #6A5E50;
margin-left: 5px;
.about-contact {
.contact-row {
margin-bottom: 10px;
h4 {
font-weight: 400;
margin-bottom: 5px;
}
}
.contact-item {
background-color: #2E3192;
width: 30px;
height: 30px;
border-radius: 5px;
margin-right: 5px;
}
}
//// FAQ
#faq_div{
margin-left: 175px;
}
#faq_question{
color: orange;
font-weight: bold;
.faq-row {
.question {
font-weight: 400;
}
.answer {
padding-left: 25px;
text-align: justify;
text-justify: inter-word;
}
}
......@@ -80,77 +80,30 @@
<ul class="nav navbar-nav">
<li class="nav-button nav-button-first"><h3><%= link_to 'Assuntos' %></h3></li>
<li role="separator" class="divider"></li>
<li class="dropdown nav-button">
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">Níveis de
Ensino&nbsp;<span class="caret"/></a>
<ul class="dropdown-menu">
<li>
<div class="row" style="width: 400px;">
<ul class="list-unstyled col-md-6 col-md-offset-1">
<li><b>Ensino Fundamental</b></li>
<li role="separator" class="divider"></li>
<li><a href="">1º Ano</a></li>
<li><a href="">2º Ano</a></li>
<li><a href="">3º Ano</a></li>
<li><a href="">4º Ano</a></li>
<li><a href="">5º Ano</a></li>
<li><a href="">6º Ano</a></li>
<li><a href="">7º Ano</a></li>
<li><a href="">8º Ano</a></li>
<li><a href="">9º Ano</a></li>
</ul>
<ul class="list-unstyled col-md-5">
<li><b>Ensino Médio</b></li>
<li role="separator" class="divider"></li>
<li><a href="">1º Ano</a></li>
<li><a href="">2º Ano</a></li>
<li><a href="">3º Ano</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li class="dropdown nav-button"><h3><a class="nav-dropdown" data-content="educational-level" href="javascript:void(0);">Níveis de Ensino&nbsp;<span class="caret"/></a></h3></li>
<li role="separator" class="divider"></li>
<li class="nav-button"><h3><%= link_to 'FAQ', faq_path %></h3></li>
<li class="dropdown nav-button"><h3><a class="nav-dropdown" data-content="links" href="javascript:void(0);">Links úteis&nbsp;<span class="caret"/></a></h3></li>
<li role="separator" class="divider"></li>
<li class="nav-button"><h3><%= link_to 'Contato', contact_path %></h3></li>
<li class="nav-button"><h3><a class="nav-dropdown" data-content="about" href="javascript:void(0);">Sobre&nbsp;<span class="caret"/></a></h3></li>
<li role="separator" class="divider"></li>
<li class="dropdown nav-button">
<a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);">Links
úteis&nbsp;<span class="caret"/></a>
<ul class="dropdown-menu">
<li>
<div class="row" style="width: 400px;">
<ul class="list-unstyled col-md-6 col-md-offset-1">
<li><b>Portais nacionais e internacionais</b></li>
<li role="separator" class="divider"></li>
<li><a href="">Portais Educacionais</a></li>
<li><a href="">Museus</a></li>
<li><a href="">Bibliotecas</a></li>
<li><a href="">Revistas</a></li>
<li><a href="">Projetos Inovadores</a></li>
<li><a href="">Jornais</a></li>
<li><a href="">Projeto de escolas</a></li>
<li><a href="">Um computador por aluno</a></li>
<li><a href="">Geoprocessamento</a></li>
<li><a href="">Prêmio Professores do Brasil</a></li>
<li><a href="">Capacitação ProInfo Integrado</a></li>
</ul>
<ul class="list-unstyled col-md-5">
<li><b>Visite também</b></li>
<li role="separator" class="divider"></li>
<li><a href="">Domínio Público</a></li>
<li><a href="">E-ProInfo</a></li>
<li><a href="">Objetos Educacionais</a></li>
<li><a href="">Plataforma Freire</a></li>
<li><a href="">TV Escola</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="navigation-content">
<div class="container">
<div class="row">
<a class="navigation-content-close pull-right" aria-label="Close" href="javascript:void(0);"><h3><span aria-hidden="true">&times;</span></h3></a>
</div>
<div class="navigation-content-educational-level">
<%= render 'welcome/educational_level' %>
</div>
<div class="navigation-content-links">
<%= render 'welcome/links' %>
</div>
<div class="navigation-content-about">
<%= render 'welcome/about' %>
</div>
</div>
</div>
</header>
<div id='faq_div'>
<ul class="col-md-12" style="list-style-type:none">
<li><b>Sobre este portal</b></li>
<li>
<br>
</li>
<li>
<ul style="list-style-type:none">
<div>
<!-- Nav tabs -->
<div class="nav nav-tabs" role="tablist">
<div class="col-md-4" role="presentation" class="active">
<h4><a href="#about" aria-controls="about" role="tab" data-toggle="tab">Sobre este portal</a></h4>
</div>
<div class="col-md-4" role="presentation">
<h4><a href="#faq" aria-controls="faq" role="tab" data-toggle="tab">Perguntas Frequentes</a></h4>
</div>
<div class="col-md-4" role="presentation">
<h4><a href="#contact" aria-controls="contact" role="tab" data-toggle="tab">Contato</a></h4>
</div>
</div>
<!-- Tab panes -->
<br/>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="about">
<ul class="col-md-12" style="list-style-type:none">
<li>
Este portal de conteúdos educacionais provê serviços relacionados com o
armazenamento e distribuição de conteúdos educacionais, com propriedades
......@@ -33,51 +44,8 @@
responsável pela execução de políticas educacionais do Ministério da Educação (MEC).
</li>
</ul>
</li>
<li><br></li>
<li><b>FAQ</b></li>
<li>
<br>
</li>
<li>
<ul style="list-style-type:none">
<li id='faq_question'>In hac habitasse platea dictumst?</li>
<li>
<ul style="list-style-type:none">
<li>
Phasellus condimentum consectetur purus, at pellentesque purus hendrerit a. Prae-
sent at arcu mauris. In at dolor eu erat mollis sollicitudin.
</li>
</ul>
</li>
<li id='faq_question'>In hac habitasse platea dictumst?</li>
<li>
<ul style="list-style-type:none">
<li>
Phasellus condimentum consectetur purus, at pellentesque purus hendrerit a. Prae-
sent at arcu mauris. In at dolor eu erat mollis sollicitudin.
</li>
</ul>
</li>
<li id='faq_question'>In hac habitasse platea dictumst?</li>
<li>
<ul style="list-style-type:none">
<li>
Phasellus condimentum consectetur purus, at pellentesque purus hendrerit a. Prae-
sent at arcu mauris. In at dolor eu erat mollis sollicitudin.
</li>
</ul>
</li>
<li id='faq_question'>In hac habitasse platea dictumst?</li>
<li>
<ul style="list-style-type:none">
<li>
Phasellus condimentum consectetur purus, at pellentesque purus hendrerit a. Prae-
sent at arcu mauris. In at dolor eu erat mollis sollicitudin.
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="faq"><%= render 'welcome/faq' %></div>
<div role="tabpanel" class="tab-pane" id="contact"><%= render 'welcome/contact' %></div>
</div>
</div>
<div class="col-md-12 about-contact">
<div class="contact-row row">
<div class="col-md-6">
<h4>Email: contato@c3sl.ufpr.br</h4>
</div>
<div class="col-md-6">
<h4>Telefone: (41)3361-3567</h4>
</div>
</div>
<div class="contact-row">
<h4>Redes Sociais</h4>
<div class="row">
<div class='col-md-1 col-sm-offset-1 contact-item'></div>
<div class='col-md-1 contact-item'></div>
<div class='col-md-1 contact-item'></div>
<div class='col-md-1 contact-item'></div>
</div>
</div>
<div class="contact-row">
<h4>Outros sites do ministério da educação</h4>
<div class="row">
<div class='contact-item col-md-1 col-sm-offset-1'></div>
<div class='contact-item col-md-1'></div>
<div class='contact-item col-md-1'></div>
<div class='contact-item col-md-1'></div>
</div>
</div>
<div class="contact-row">
<h4>Portal desenvolvido por</h4>
<div class="row">
<div class='contact-item col-md-1 col-sm-offset-1'></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h4><b>Ensino Fundamental</b></h4>
<div class="row inner-column">
<ul class="list-unstyled col-md-6">
<li><a href="">1º Ano</a></li>
<li><a href="">2º Ano</a></li>
<li><a href="">3º Ano</a></li>
<li><a href="">4º Ano</a></li>
<li><a href="">5º Ano</a></li>
</ul>
<ul class="list-unstyled col-md-6">
<li><a href="">6º Ano</a></li>
<li><a href="">7º Ano</a></li>
<li><a href="">8º Ano</a></li>
<li><a href="">9º Ano</a></li>
</ul>
</div>
</div>
<div class="list-unstyled col-md-6">
<h4><b>Ensino Médio</b></h4>
<div class="row inner-column">
<ul class="list-unstyled col-md-12">
<li><a href="">1º Ano</a></li>
<li><a href="">2º Ano</a></li>
<li><a href="">3º Ano</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="faq-row">
<h4 class="question">In hac habitasse platea dictumst?</h4>
<p class="answer">Phasellus condimentum consectetur purus, at pellentesque purus hendrerit a. Prae-
sent at arcu mauris. In at dolor eu erat mollis sollicitudin. Phasellus condimentum consectetur purus, at pellentesque purus hendrerit a. Prae-
sent at arcu mauris. In at dolor eu erat mollis sollicitudin. Phasellus condimentum consectetur purus, at pellentesque purus hendrerit a. Prae-
sent at arcu mauris. In at dolor eu erat mollis sollicitudin. Phasellus condimentum consectetur purus, at pellentesque purus hendrerit a. Prae-
sent at arcu mauris. In at dolor eu erat mollis sollicitudin. Phasellus condimentum consectetur purus, at pellentesque purus hendrerit a. Prae-
sent at arcu mauris. In at dolor eu erat mollis sollicitudin.</p>
</div>
<div class="faq-row">
<h4 class="question">In hac habitasse platea dictumst?</h4>
<p class="answer">Phasellus condimentum consectetur purus, at pellentesque purus hendrerit a. Prae-
sent at arcu mauris. In at dolor eu erat mollis sollicitudin.</p>
</div>
<div class="faq-row">
<h4 class="question">In hac habitasse platea dictumst?</h4>
<p class="answer">Phasellus condimentum consectetur purus, at pellentesque purus hendrerit a. Prae-
sent at arcu mauris. In at dolor eu erat mollis sollicitudin.</p>
</div>
<div class="faq-row">
<h4 class="question">In hac habitasse platea dictumst?</h4>
<p class="answer">Phasellus condimentum consectetur purus, at pellentesque purus hendrerit a. Prae-
sent at arcu mauris. In at dolor eu erat mollis sollicitudin.</p>
</div>
<div class="faq-row">
<h4 class="question">In hac habitasse platea dictumst?</h4>
<p class="answer">Phasellus condimentum consectetur purus, at pellentesque purus hendrerit a. Prae-
sent at arcu mauris. In at dolor eu erat mollis sollicitudin.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<h4><b>Portais nacionais e internacionais</b></h4>
<div class="row inner-column">
<ul class="list-unstyled col-md-6">
<li><a href="">Portais Educacionais</a></li>
<li><a href="">Museus</a></li>
<li><a href="">Bibliotecas</a></li>
<li><a href="">Revistas</a></li>
<li><a href="">Projetos Inovadores</a></li>
<li><a href="">Jornais</a></li>
</ul>
<ul class="list-unstyled col-md-6">
<li><a href="">Projeto de escolas</a></li>
<li><a href="">Um computador por aluno</a></li>
<li><a href="">Geoprocessamento</a></li>
<li><a href="">Prêmio Professores do Brasil</a></li>
<li><a href="">Capacitação ProInfo Integrado</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<h4><b>Visite também</b></h4>
<div class="row inner-column">
<ul class="list-unstyled col-md-12">
<li><a href="">Domínio Público</a></li>
<li><a href="">E-ProInfo</a></li>
<li><a href="">Objetos Educacionais</a></li>
<li><a href="">Plataforma Freire</a></li>
<li><a href="">TV Escola</a></li>
</ul>
</div>
</div>
</div>
<link href='https://fonts.googleapis.com/css?family=Roboto:300&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<br>
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-5">
<p class="font_roboto_light">
Email: contato@c3sl.ufpr.br
</p>
<p class="font_roboto_light">
Redes Sociais
</p>
<div class="row">
<div id='rede_social1' class='col-md-1 col-sm-offset-1 rede_social'></div>
<div id='rede_social2' class='col-md-1 rede_social'></div>
<div id='rede_social3' class='col-md-1 rede_social'></div>
<div id='rede_social4' class='col-md-1 rede_social'></div>
</div>
<br>
<p class="font_roboto_light">
Outros sites do ministério da educação
</p>
<div class="row">
<div id='mec_portais' class='col-md-1 col-sm-offset-1'></div>
<div id='mec_portais2' class='col-md-1'></div>
<div id='mec_portais2' class='col-md-1'></div>
<div id='mec_portais2' class='col-md-1'></div>
</div>
<br>
<p class="font_roboto_light">
Portal desenvolvido por
</p>
<div class="row">
<div id='mec_portais' class='col-md-1 col-sm-offset-1'></div>
</div>
</div>
<div class="col-md-3">
<p class="font_roboto_light">
Telefone: (41)3361-3567
</p>
</div>
</div>
</div>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment