Alumni ECA

Tutorials of (Alumni eca) by Matheus

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Alumni ECA</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet">

<div ng-app="AlumniApp" ng-controller="AlumniController">

  <div id="mainContainer">
    <div id="topContainer"></div>
    <img id="alumni_logo" src="https://s15.postimg.org/qjjxzlarf/alumni_eca.png" width= 400 height=200>
    <img id="unicamp_logo" src="https://s13.postimg.org/qq3xndo4n/unicamp_logo.png" width=160 height=140>

    <ul>
      <li class="abas" id="quemSomos" ng-click="QuemSomos()"><a href="#home">Quem somos</a></li>
      <li class="abas" id="noticias" ng-click="Noticias()"><a href="#news">Notícias</a></li>
      <li class="abas" id="fotos" ng-click="Fotos()"><a href="#contact">Fotos</a></li>
      <li class="abas" id="eventos" ng-click="Eventos()"><a href="#about">Eventos</a></li>
      <li class="abas" id="bancoDeOportunidades" ng-click="Oportunidades()"><a href="#about">Oportunidades</a></li>
      <li class="abas" id="cadastreSe" ng-click="CadastreSe()"><a href="#about">Cadastre-se</a></li>
      <li class="abas" id="doacoes" ng-click="Doacoes()"><a href="#about">Doações</a></li>
    </ul>

  </div>
  
  <div id="QuemSomosContainer">
    <h1> Quem Somos</h1>
    <p class="QuemSomosText" id="QuemSomosTextID">A Alumni ECA teve seu início em 2015 pela iniciativa de um grupo de ex-alunos que buscavam reaproximar faculdade, alunos e ex-alunos a fim de gerar oportunidades, trocar experiências e contribuir para a melhoria constante do curso de Engenharia de Controle e Automação da Unicamp!</p>
    <p class="QuemSomosText">Buscamos, através da rede de ex-alunos:</p>
    
    
    <ol style="list-style-type:disc" id="QuemSomosList">
      <li>Colaborar com o ensino por meio do compartilhamento de conhecimentos nas diferentes carreiras</li>
      <br>
      <li>Gerar oportunidades profissionais para alunos e ex-alunos</li>
      <br>
      <li>Participar de eventos de integração realizados pelas atividades extra-curriculares</li>
      <br>
      <li>Destinar fundos e doações ao curso e aos alunos por meio de bolsas, prezando pela transparência em relação aos recursos cedidos</li>
      <br>
    </ol>
    
  </div>
</div>

<div id="rodape">
    <div id="endereco">
      <p> 
        <b>Faculdade de Engenharia Mecânica da Unicamp</b><br>
      
        R. Mendeleyev, 200 <br> Cidade Universitária "Zeferino Vaz"<br>Campinas - SP - Brasil <br> CEP 13083-860
      </p>
    </div>
    <div id="icones">
      
      <a target="_blank" href="https://www.facebook.com/groups/955707394525649/"><img id="fbLogo" src="http://icon-icons.com/icons2/642/PNG/512/facebook_icon-icons.com_59205.png"></a>
      
      <a target="_blank" href="https://www.linkedin.com/groups/8447847"><img id="linkedInLogo" src="https://lh3.googleusercontent.com/00APBMVQh3yraN704gKCeM63KzeQ-zHUi5wK6E9TjRQ26McyqYBt-zy__4i8GXDAfeys=w300"></a>
      
    </div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#topContainer{
  height: 100px;
  background: -webkit-linear-gradient(#112599,white);
  background: -o-linear-gradient(#112599,white);
  background: -moz-linear-gradient(#112599,white); 
  background: linear-gradient(#112599,white);
}



#alumni_logo{
  position: relative;
  left: 150px;
  bottom:
}

#unicamp_logo{
  position: relative;
  left: 570px;
  bottom: 25px;
}


ul {
  position: relative;
  list-style-type: none;
  top: 0px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: none; 
  background: #5c5cd6; 
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #112599;
}

li a.active {
  color: white;
  background-color: #112599;
}

.abas{
  position: relative;
  left: 150px;
  width: 150px;
  font-weight: bold;
  font-family: 'Libre Franklin', sans-serif;
}

#QuemSomosContainer{
  position: relative;
  width: 800px;
  left: 150px;
  top: 30px;
}

.QuemSomosText{
  font-size: 20px;
  text-align: justify;
  font-family: 'Libre Franklin', sans-serif;
}

#QuemSomosList{
  width: 450px;
  
}

h1{
  color: #112599;
  font-size: 40px;
  font-family: 'Libre Franklin', sans-serif;
}

#bottom-container{
  position: relative;
  top: 100px;
  height: 100px;
  background: -webkit-linear-gradient(white,#112599);
  background: -o-linear-gradient(white,#112599);
  background: -moz-linear-gradient(white,#112599); 
  background: linear-gradient(white,#112599);
}

#rodape{
  position: relative;
  top: 200px;
  height: 150px;
  background: #112599;
}

#endereco{
  height: 150px;
  width: 400px;
  /*border: 2px solid orange;*/
  margin: left;
  text-align: left;
  color: white;
  position: absolute;
  top: 20px;
  left: 40px;
}

p{
  font-family: 'Libre Franklin', sans-serif;
  font-size:14px;
  left: 50px;
}

#icones{
  position: relative;
  left: 900px;
  bottom:155px;
  margin: right;
  height: 150px;
  width: 400px;
  /*border: 2px solid orange;*/
}

#fbLogo{
  width:100px;
  height: 100px;
  position: absolute;
  top: 180px;
  left: 80px;
}

#linkedInLogo{
  width:100px;
  height: 100px;
  position: absolute;
  top: 180px;
  left: 230px;
}
/* Downloaded from https://www.codeseek.co/ */
var myApp = angular.module('AlumniApp', []);

myApp.controller('AlumniController', ['$scope', function($scope) {
  document.getElementById("quemSomos").style.background = "#112599";
  
  function mudaSecao(destino){
    var abasID = ["quemSomos","noticias","fotos","eventos","bancoDeOportunidades","cadastreSe","doacoes"];
    var i;
    for (i=0; i<abasID.length; i++){
      if(abasID[i]!=destino)
        document.getElementById(abasID[i]).style.background = "#5c5cd6";
      else
        document.getElementById(abasID[i]).style.background = "#112599";
    }
  }
  
  $scope.QuemSomos = function(){
    document.getElementById("QuemSomosContainer").style.display = "block";
    mudaSecao("quemSomos");
  }
  
  $scope.Noticias = function(){
    document.getElementById("QuemSomosContainer").style.display = "none";
    //document.getElementById("noticias").style.background = "#112599";
    mudaSecao("noticias");
  }
  
  $scope.Fotos = function(){
    document.getElementById("QuemSomosContainer").style.display = "none";
    mudaSecao("fotos");
  }
  
  $scope.Eventos = function(){
    document.getElementById("QuemSomosContainer").style.display = "none";
    mudaSecao("eventos");
  }
  
  $scope.Oportunidades = function(){
    document.getElementById("QuemSomosContainer").style.display = "none";
    mudaSecao("bancoDeOportunidades");
  }
  
  $scope.CadastreSe = function(){
    document.getElementById("QuemSomosContainer").style.display = "none";
    mudaSecao("cadastreSe");
  }
  
  $scope.Doacoes = function(){
    document.getElementById("QuemSomosContainer").style.display = "none";
    mudaSecao("doacoes");
  }
  
  
  
}]);

This awesome code ( Alumni ECA ) is write by Matheus, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Matheus