Alumni ECA

What is a alumni eca How do you make a alumni eca? This script and codes were developed by Matheus on 31 October 2021, Sunday.

How do I make an alumni eca?
  1. Alumni ECA Previews
  2. Alumni ECA HTML Codes
  3. Alumni ECA CSS Codes
  4. Alumni ECA JS Codes
Alumni ECA Previews

Alumni ECA HTML Codes

<!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>

Alumni ECA CSS Codes

#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;
}

Alumni ECA JS Codes

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");
  }
  
  
  
}]);
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.