Alumni ECA

In this example below you will see how to do a Alumni ECA with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by MatheusLima92, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright MatheusLima92 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/MatheusLima92/alumni-eca-aBbRjY */
#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/MatheusLima92/alumni-eca-aBbRjY */
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");
  }
  
  
  
}]);

Comments