Landing page -> seccao dos 'career path' adicionada

This commit is contained in:
Filipe Pinho 2019-03-17 23:58:14 +00:00
parent f4ccb246b2
commit 2bb9a38a11
5 changed files with 455 additions and 44 deletions

View File

@ -0,0 +1,148 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt" xml:lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport">
<meta content="width" name="MobileOptimized">
<meta content="true" name="HandheldFriendly">
<!-- Place favicon.ico in the root directory -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>Career Path - Inteligência Artificial</title>
<meta name="description"
content="Página do Encontro Nacional de Estudantes de Informática 2019, no Instituto Superior de Engenharia de Coimbra (ISEC) a realizar-se entre 12 e 15 de abril de 2019. O ENEI pretende oferecer aos estudantes de todo o país um evento que promove a aprendizagem, a troca de ideias e o convívio, enquanto tenta criar fortes ligações com o mundo empresarial.">
<meta property="og:locale" content="pt_PT" />
<meta property="og:title" content="Career Path - Inteligência Artificial" />
<meta property="og:description"
content="Página do Encontro Nacional de Estudantes de Informática 2019, no Instituto Superior de Engenharia de Coimbra (ISEC) a realizar-se entre 12 e 15 de abril de 2019. O ENEI pretende oferecer aos estudantes de todo o país um evento que promove a aprendizagem, a troca de ideias e o convívio, enquanto tenta criar fortes ligações com o mundo empresarial." />
<meta property="og:site_name" content="Career Path - Inteligência Artificial" />
<meta property="og:url" content="http://www.enei.pt/cp-inteligencia-artificial.html" />
<meta property="og:image" content="http://www.enei.pt/imgs/share-image.jpg" />
<meta property="og:type" content="Website" />
<link rel="canonical" href="http://www.enei.pt/cp-inteligencia-artificial.html" />
<link href="bootstrap-grid.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Bai+Jamjuree:400,600,700" rel="stylesheet">
</head>
<body>
<header id="main-menu">
<nav>
<a href="#" title="Abrir menu" rel="nofollow" id="open-menu-mobile">Menu</a>
<ul>
<li><a href="#enei" title="Enei">Sobre</a></li>
<li class="unavailable">Calendário</li>
<li class="unavailable">Speakers</li>
</ul>
</nav>
</header>
<!-- apresentation section -->
<div id="apresentation">
<svg version="1.1" id="logo-enei" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 225 335" style="enable-background:new 0 0 225 335;" xml:space="preserve">
<path id="linha" d="M220.7,5.4L5.6,63v269.1l215.2-57.6V5.4z" />
<path id="ee" class="letras-logo" d="M61.3,97.8c13.2-3.5,19.8-5.2,33.3-8.8c0,3.8,0,5.9,0,10c-9.4,2.5-14.1,3.8-23.4,6.2c0,5.3,0,8,0,13.6
c8.9-2.4,13.4-3.6,22.5-6c0,4.4,0,6.7,0,11.4c-9.1,2.4-13.6,3.6-22.5,6c0,6,0,9,0,15.2c9.6-2.5,14.5-3.8,24.4-6.5
c0,4.8,0,7.3,0,12.2c-13.9,3.7-20.9,5.6-34.2,9.1V97.8z" />
<path id="n" class="letras-logo"
d="M153.7,129.1c0.5-0.1,0.8-0.2,1.4-0.4c-0.1-24.4-0.1-36.5-0.2-55.8c4.1-1.1,6.1-1.6,10.2-2.7v62.2
c-7.7,2.1-11.6,3.2-19.5,5.3c-2.6-24-4-35.9-6.6-55.4c-0.6,0.2-0.8,0.2-1.4,0.4c0.1,20.1,0.2,32.4,0.4,57.1
c-4.1,1.1-6.1,1.6-10.2,2.7c-0.1-20.7-0.2-41.5-0.4-62.2c7.9-2.1,11.9-3.2,19.8-5.3C149.8,93.6,151.1,105.3,153.7,129.1" />
<path id="e" class="letras-logo" d="M61.3,204.9c12.9-3.4,19.7-5.2,33.3-8.9c0,4.9,0,7.4,0,12.2c-9.6,2.6-14.4,3.8-23.6,6.3
c0,6.1,0,9.1,0,15c8.9-2.4,13.5-3.6,22.7-6.1c0,4.6,0,6.9,0,11.4c-9.2,2.5-13.8,3.7-22.7,6.1c0,5.7,0,8.5,0,13.8
c9.6-2.6,14.6-3.9,24.6-6.6c0,4.1,0,6.1,0,10c-14.2,3.8-21.2,5.7-34.3,9.2V204.9z" />
<path id="i" class="letras-logo" d="M128.7,186.9c14.5-3.9,21.7-5.9,35.5-9.7c0,4.9,0,7.3,0,12.1c-4.9,1.4-7.4,2-12.5,3.4
c0.1,17.1,0.1,25.4,0.2,40.1c5-1.4,7.5-2.1,12.3-3.4c0,4.1,0,6.1,0,10c-13.3,3.7-20.5,5.7-35.1,9.7c0-3.8,0-5.8-0.1-10
c5.2-1.4,7.8-2.1,13-3.6c-0.1-14.7-0.2-23-0.3-40.1c-5.1,1.4-7.7,2.1-12.9,3.5C128.8,194.2,128.8,191.8,128.7,186.9" />
</svg>
</div>
<!-- enei section -->
<section id="enei">
<div class="container">
<div class="row">
<div class="col-lg-7 col-sm-7">
<div class="pre-h1">12 A 15 ABRIL DE 2019</div>
<h1>ENEI</h1>
<hr>
<p>O Encontro Nacional de Estudantes de Informática é um dos maiores eventos na área da tecnologia
em
Portugal
reunindo estudantes de informática de todas as faculdades do país.</p>
<p>Reconhecido pela sua qualidade e variedade de temas e atividades, tem como prioridade o contacto
entre
participantes e empresas, bem como a socialização, o convívio e a troca de experiências e
conhecimentos
entre os presentes.</p>
</div>
</div>
</div>
</section>
<!-- oradores section -->
<section id="speakers" class="grey">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-sm-12 col-sm-offset-0 col-xs-10 col-xs-offset-1">
<h1>Speakers</h1>
<hr>
</div>
</div>
</div>
</section>
<!-- social network section -->
<aside id="social-network">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>Segue-nos</h2>
<ul>
<li><a href="https://www.facebook.com/ENEIConf/" title="Facebook" target="_blank"
class="icon-facebook"></a></li>
<li><a href="https://www.instagram.com/eneiconf/" title="Instagram" target="_blank"
class="icon-instagram"></a></li>
<li><a href="https://www.linkedin.com/company/enei/" title="Linkedin" target="_blank"
class="icon-linkedin"></a></li>
<li><a href="mailto:geral@enei.pt" title="Email" target="_blank" class="icon-email"></a></li>
</ul>
</div>
</div>
</div>
</aside>
<!-- footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<p>© 2019 ENEI . Todos os direitos reservados</p>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-130588243-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-130588243-1');
</script>
</body>
</html>

View File

@ -39,8 +39,9 @@
<a href="#" title="Abrir menu" rel="nofollow" id="open-menu-mobile">Menu</a>
<ul>
<li><a href="#enei" title="Enei">Enei</a></li>
<li class="unavailable">Oradores</li>
<li class="unavailable">Career Path</li>
<li class="unavailable">Programa</li>
<li class="unavailable">Oradores</li>
<li><a href="#precos" title="Preços">Preços</a></li>
<li class="unavailable">App</li>
<!-- <li><a href="#ctf" title="Faq's">CTF</li> -->
@ -50,8 +51,7 @@
</nav>
</header>
<!-- apresentation section -->
<div id="apresentation" class="">
<!-- <img src="imgs/logo-enei.png" alt="Logótipo ENEI" width="221" height="333" class="logo-enei"> -->
<div id="apresentation">
<svg version="1.1" id="logo-enei" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 225 335" style="enable-background:new 0 0 225 335;" xml:space="preserve">
<path id="linha" d="M220.7,5.4L5.6,63v269.1l215.2-57.6V5.4z" />
@ -113,6 +113,80 @@
</div>
</aside>
<!-- career path section -->
<section id="career-path">
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<h1>career Path</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-2 ai">
<a href="#" title="Carrer Path X" class="career-path-links">
<h2>Inteligência Artificial</h2>
<span class="separator"></span>
<span class="powered-by">Powered by:</span>
<img src="imgs/blip-sponsor.png" alt="Blip Image">
</a>
</div>
<div class="col-lg-2 web">
<a href="#" title="Carrer Path X" class="career-path-links">
<h2>Web Development</h2>
<span class="separator"></span>
<span class="powered-by">Powered by:</span>
<img src="imgs/blip-sponsor.png" alt="Blip Image">
</a>
</div>
<div class="col-lg-2 ai">
<a href="#" title="Carrer Path X" class="career-path-links">
<h2>Inteligência Artificial</h2>
<span class="separator"></span>
<span class="powered-by">Powered by:</span>
<img src="imgs/blip-sponsor.png" alt="Blip Image">
</a>
</div>
<div class="col-lg-2 web">
<a href="#" title="Carrer Path X" class="career-path-links">
<h2>Web Development</h2>
<span class="separator"></span>
<span class="powered-by">Powered by:</span>
<img src="imgs/blip-sponsor.png" alt="Blip Image">
</a>
</div>
<div class="col-lg-2 ai">
<a href="#" title="Carrer Path X" class="career-path-links">
<h2>Inteligência Artificial</h2>
<span class="separator"></span>
<span class="powered-by">Powered by:</span>
<img src="imgs/blip-sponsor.png" alt="Blip Image">
</a>
</div>
<div class="col-lg-2 web">
<a href="#" title="Carrer Path X" class="career-path-links">
<h2>Web Development</h2>
<span class="separator"></span>
<span class="powered-by">Powered by:</span>
<img src="imgs/blip-sponsor.png" alt="Blip Image">
</a>
</div>
</div>
</div>
</section>
<!-- programa section -->
<section id="program" class="grey">
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<h1>Programa</h1>
<hr>
</div>
</div>
</div>
</section>
<!-- precos section -->
<section id="precos">
<div class="container">
@ -158,7 +232,7 @@
</div>
</div>
</section>
<!--
<!--
<section id="ctf">
<div class="container ctf-container">
<div class="col-lg-12">
@ -172,7 +246,7 @@
</section> -->
<!-- sponsors section -->
<section id="sponsors">
<section id="sponsors" class="grey">
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
@ -195,7 +269,8 @@
</div>
</div>
<div class="row">
<div class="col-lg-10 col-lg-offset-1 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 vertically-aligned">
<div
class="col-lg-10 col-lg-offset-1 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 vertically-aligned">
<a href="http://www.novabase.pt/pt" title="Novabase" target="_blank" class="sponsor-image"><img
src="imgs/novaBase-sponsor.jpg" alt="Novabase Image"></a>
<a href="https://blip.pt/" title="Blip" target="_blank" class="sponsor-image"><img

View File

@ -140,6 +140,10 @@ body {
overflow-x: hidden;
}
span {
display: block;
}
section,
article,
aside {
@ -389,6 +393,10 @@ hr::after {
background-color: #cc1a17;
}
.grey {
background-color: #eeeeee;
}
#error-message {
font-size: 115px;
line-height: 140px;
@ -619,6 +627,7 @@ hr::after {
background-attachment: fixed;
z-index: 10;
position: relative;
display: none;
}
#apresentation::after {
@ -1128,7 +1137,7 @@ hr::after {
font-family: "Bai Jamjuree", sans-serif;
font-size: 18px;
line-height: 14px;
color: #CC1A17;
color: #cc1a17;
font-weight: 700;
text-transform: uppercase;
border: 1px solid #eeeeee;
@ -1199,7 +1208,6 @@ hr::after {
}
#sponsors {
background-color: #eeeeee;
text-align: center;
}
@ -1374,4 +1382,103 @@ footer p {
#tab-container .tab.visible {
display: block;
}
#career-path {
text-align: center;
}
#career-path hr {
display: table;
margin: 0 auto 60px;
width: 60%;
}
#career-path hr::after {
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
#career-path h2 {
color: #ffffff;
font-size: 18px;
line-height: 22px;
margin-bottom: 10px;
}
#career-path .powered-by {
font-family: "Bai Jamjuree", sans-serif;
font-size: 16px;
line-height: 20px;
color: #ffffff;
margin-bottom: 15px;
}
#career-path .separator {
display: block;
margin: 0 auto;
width: 40%;
height: 1px;
background-color: #ffffff;
margin-bottom: 10px;
}
#career-path .career-path-links {
position: relative;
padding: 20px;
display: inline-block;
}
#career-path .career-path-links::after {
content: "";
width: calc(100% + 8px);
height: calc(100% + 8px);
position: absolute;
top: -5px;
left: -5px;
border: 1px solid red;
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
left: -5px;
left: -5px;
-webkit-transition: border-width 150ms ease-in-out, top 150ms ease-in-out, border-width 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
transition: border-width 150ms ease-in-out, top 150ms ease-in-out, border-width 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out, border-width 150ms ease-in-out, top 150ms ease-in-out, border-width 150ms ease-in-out;
transition: transform 150ms ease-in-out, border-width 150ms ease-in-out, top 150ms ease-in-out, border-width 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
}
#career-path .career-path-links:hover:after {
-webkit-transform: skewX(0);
transform: skewX(0);
border-width: 2px;
top: -6px;
left: -6px;
}
#career-path .career-path-links img {
-webkit-filter: invert(100%);
filter: invert(100%);
max-width: 70%;
margin: 0 auto;
}
#career-path .ai .career-path-links {
background-color: #498400;
}
#career-path .ai .career-path-links::after {
border-color: #498400;
}
#career-path .web .career-path-links {
background-color: #004994;
}
#career-path .web .career-path-links::after {
border-color: #004994;
}
#speakers {
text-align: center;
}
/*# sourceMappingURL=main.css.map */

File diff suppressed because one or more lines are too long

View File

@ -6,6 +6,8 @@ $light-grey: #eeeeee;
$dark-grey: #353535;
$red: #cc1a17;
$dark-blue: #080014;
$ai-color: #498400;
$web-color: #004994;
//dimensions
$mobile: 769px;
@ -222,6 +224,10 @@ body {
overflow-x: hidden;
}
span {
display: block;
}
section,
article,
aside {
@ -360,10 +366,10 @@ select {
margin-left: 25px;
}
.vertically-aligned{
.vertically-aligned {
display: flex;
align-items: center;
justify-content: center;
align-items: center;
justify-content: center;
}
.btn {
@ -412,6 +418,10 @@ hr {
}
}
.grey {
background-color: $light-grey;
}
#error-message {
font-size: 115px;
line-height: 140px;
@ -572,6 +582,7 @@ hr {
background-attachment: fixed;
z-index: 10;
position: relative;
display: none;
&::after {
content: " ";
@ -898,17 +909,14 @@ hr {
}
}
#ctf{
background-image: url("imgs/image.png");
#ctf {
background-image: url("imgs/image.png");
text-align: center;
h1 {
color: white;
margin-top: 80px;
margin-bottom: 50px;
}
.button-ctf {
&:hover {
@ -917,18 +925,13 @@ hr {
color: $grey;
}
}
}
.prectf-h1{
.prectf-h1 {
@include font($mont-font, 20px, 22px, $grey);
font-weight: $semi-bold;
text-transform: uppercase;
margin-bottom:100px;
margin-bottom: 100px;
@include portable {
font-size: 17px;
}
@ -937,21 +940,18 @@ hr {
}
color: #cc1a17;
}
.button-ctf{
font-family: "Bai Jamjuree", sans-serif;
font-size: 18px;
line-height: 14px;
color: #CC1A17;
font-weight: 700;
text-transform: uppercase;
border: 1px solid #eeeeee;
padding: 20px 40px;
margin: 200;
transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
-webkit-transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
.button-ctf {
font-family: "Bai Jamjuree", sans-serif;
font-size: 18px;
line-height: 14px;
color: #cc1a17;
font-weight: 700;
text-transform: uppercase;
border: 1px solid #eeeeee;
padding: 20px 40px;
margin: 200;
transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
-webkit-transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
}
#faqs,
#tickets {
@ -1007,7 +1007,6 @@ hr {
}
#sponsors {
background-color: $light-grey;
text-align: center;
hr {
display: table;
@ -1031,7 +1030,7 @@ hr {
filter: grayscale(0);
transform: scale(1.03);
}
@include mobile{
@include mobile {
max-width: 160px;
margin: 40px 15px 0;
}
@ -1041,10 +1040,10 @@ hr {
font-size: 30px;
line-height: 26px;
margin-top: 75px;
@include portable{
@include portable {
font-size: 27px;
}
@include mobile{
@include mobile {
font-size: 23px;
}
}
@ -1140,3 +1139,85 @@ footer {
}
}
}
#career-path {
text-align: center;
hr {
display: table;
margin: 0 auto 60px;
width: 60%;
&::after {
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
}
h2 {
color: $white;
font-size: 18px;
line-height: 22px;
margin-bottom: 10px;
}
.powered-by {
@include font($mont-font, 16px, 20px, $white);
margin-bottom: 15px;
}
.separator {
display: block;
margin: 0 auto;
@include size(40%, 1px);
background-color: $white;
margin-bottom: 10px;
}
.career-path-links {
position: relative;
padding: 20px;
display: inline-block;
&::after {
content: "";
@include size(calc(100% + 8px), calc(100% + 8px));
@include position(absolute, -5px, null, null, -5px);
border: 1px solid red;
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
left: -5px;
left: -5px;
transition: transform $transition-time ease-in-out, border-width $transition-time ease-in-out,
top $transition-time ease-in-out, border-width $transition-time ease-in-out;
}
&:hover:after {
-webkit-transform: skewX(0);
transform: skewX(0);
border-width: 2px;
top: -6px;
left: -6px;
}
img {
-webkit-filter: invert(100%);
filter: invert(100%);
max-width: 70%;
margin: 0 auto;
}
}
.ai {
.career-path-links {
background-color: $ai-color;
&::after {
border-color: $ai-color;
}
}
}
.web {
.career-path-links {
background-color: $web-color;
&::after {
border-color: $web-color;
}
}
}
}
#speakers{
text-align: center;
}