https://sergeys-stupendous-site-8ca0b2.webflow.io/senac

1<!DOCTYPE html><!-- This site was created in Webflow. http://www.webflow.com--><!-- Last Published: Sun Feb 14 2016 08:57:13 GMT+0000 (UTC) --><html data-wf-site="56c0128fbf6d3281049c3191" data-wf-page="56c01290bf6d3281049c31a7" data-wf-status='1'><head><meta charset="utf-8"><title>Senac/MG</title><meta name="description" content="Senac is a Brazilian professional education institution that has in Minas Gerais, a regional division. By the RC Comunicação development team, where the project was conceived, we created a style guide to be used in all Senac/MG digital projects, causing that all designs had the same standard interface according to the already existing visual identity."><meta property="og:title" content="Senac/MG"><meta property="og:description" content="Senac is a Brazilian professional education institution that has in Minas Gerais, a regional division. By the RC Comunicação development team, where the project was conceived, we created a style guide to be used in all Senac/MG digital projects, causing that all designs had the same standard interface according to the already existing visual identity."><meta property="og:image" content="https://daks2k3a4ib2z.cloudfront.net/55c8a44499aea21811c29da0/55edb61d0c287afd6b9963ed_douglas-pinho.jpg"><meta name="twitter:card" content="summary"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="generator" content="Webflow"><link rel="stylesheet" type="text/css" href="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/css/sergeys-stupendous-site-8ca0b2.webflow.36e85f3ba.css">

1<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>

1<script>WebFont.load({
2  google: {
3    families: ["Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic","Fira Sans:300,300italic,regular,italic,500,500italic,700,700italic","Source Sans Pro:200,200italic,300,300italic,regular,italic,600,600italic,700,700italic,900,900italic","Raleway:100,200,300,regular,500,600,700,800,900"]
4  }
5});</script>

5<script type="text/javascript" src="https://daks2k3a4ib2z.cloudfront.net/0globals/modernizr-2.7.1.js"></script>

5<link rel="shortcut icon" type="image/x-icon" href="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c3298_favicon-dp.png"><link rel="apple-touch-icon" href="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c32b2_webclip.png">

5<script type="text/javascript">var _gaq = _gaq || [];
6_gaq.push(['_setAccount', 'UA-67274673-1'], ['_trackPageview']);
7
8(function() {
9  var ga = document.createElement('script');
10  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
11  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
12})();
13</script>

13<!-- Hotjar Tracking Code for douglaspinho.webflow -->

14<script>

14
15    (function(h,o,t,j,a,r){
16        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
17        h._hjSettings={hjid:

1772197

17,hjsv:5};
18        a=o.getElementsByTagName('head')[0];
19        r=o.createElement('script');r.async=1;
20        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
21        a.appendChild(r);
22    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');

23</script>

23

24<script>
25				$(function() {
26					$.scrollify({
27						section : ".content-section",
28					});
29				});
30</script>

30</head><body><div class="w-section modal-section"><div class="w-form contact-form"><form id="email-form" name="email-form" data-name="Email Form" class="w-clearfix"><h2 class="hire-title">Hire me</h2><input id="Nome" type="text" placeholder="Tell me your name" name="Nome" data-name="Nome" autofocus="autofocus" required="required" class="w-input form-field name-input"><input id="email" type="email" placeholder="I need your email" name="email" data-name="Email" required="required" class="w-input form-field mainl-input"><input id="Telefone" type="text" placeholder="Maybe your phone too" name="Telefone" data-name="Telefone" class="w-input form-field phone-input"><textarea id="Mensagem" placeholder="Now describe here your job proposal for me." name="Mensagem" required="required" data-name="Mensagem" class="w-input form-field text-input"></textarea><input type="submit" value="Submit" data-wait="Please wait..." class="w-button call-to-action submit form"><a href="#" data-ix="close-modal-contact" class="w-button call-to-action cancel">Nevermind</a></form><div class="w-form-done alert-block"><div class="avatar-block"></div><p class="succes-text">Your submission has been received!<br>As soon as possible I will contact you back. You can <a class="bio-link small" data-ix="close-modal-contact" href="#">close this alert</a> now or call me by the number below. Thank you!</p><a href="tel:+5531986174166" class="bio-link phone">+55 31 98617-4166</a></div><div class="w-form-fail"><p>Oops! Something went wrong while submitting the form</p></div></div></div><header id="top" data-ix="job-nav-bar" class="w-section header-section jobs"><div data-collapse="tiny" data-animation="default" data-duration="400" data-ix="nav-display" class="w-nav main-nav"><div data-ix="nav-behave" class="logo"><a href="/" class="w-inline-block logo-link"></a></div><div data-ix="nav-behave-2" class="main-nav-block"><nav role="navigation" class="w-nav-menu w-clearfix main-nav-wrapper"><a href="/index.html#hello" class="w-nav-link main-nav-button left-side"><span class="main-nav-text">Hello</span></a><a href="/index.html#work" class="w-nav-link main-nav-button left-side"><span class="main-nav-text">Projects</span></a><a href="/index.html#contact" class="w-nav-link main-nav-button contact right-side"><span class="main-nav-text">Contact</span></a><a href="/index.html#about" class="w-nav-link main-nav-button right-side"><span class="main-nav-text">About</span></a><a href="#top" class="w-nav-link w-hidden-main w-hidden-medium w-hidden-small main-nav-button left-side"><span class="main-nav-text">Top</span></a></nav></div><div class="w-nav-button burger-button"></div></div><section class="job-header-container"><div data-ix="job-title-behavior" class="job-title-wrapper"><h1>Senac/MG</h1><p class="project-description"><a class="bio-link job-description" target="_blank" href="http://www.senac.br/">Senac</a>&nbsp;is a Brazilian professional education institution that has in Minas Gerais, a regional division. By the <a class="bio-link job-description" target="_blank" href="http://rccom.com.br">RC Comunicação</a>&nbsp;development team, where the project was conceived, we created a style guide to be used in all Senac/MG digital projects, causing that all designs had the same standard interface according to the already existing visual identity.</p><ul class="w-list-unstyled center-align"><li class="about-skills-list-item"><div class="w-clearfix marker-block"><span class="marker-text work">Interface Design</span></div></li><li class="about-skills-list-item"><div class="w-clearfix marker-block"><span class="marker-text work">Responsive Design</span></div></li><li class="about-skills-list-item"><div class="w-clearfix marker-block"><span class="marker-text work">Front-end Development</span></div></li></ul></div><div class="page-loader"><a href="#job-start" class="w-inline-block page-scroll"></a></div></section></header><section id="job-start" data-ix="load-display" class="work-row-wrapper highlight job-5"></section><section id="work-content" data-ix="load-display" class="w-section work-content-section"><div data-ix="job-img-behave-1" class="work-row-wrapper"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c31d0_senac-responsive.jpg" class="job-img"></div><div data-ix="job-img-behave-1" class="work-row-wrapper"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c3284_senac-logos.png" class="job-img"></div><div class="w-row work-row-wrapper"><div class="w-col w-col-6 job-column-wrapper left"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c32ce_senac-color-1.png" data-ix="job-img-behave-1" class="job-img"></div><div class="w-col w-col-6 job-column-wrapper right"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c32cd_senac-color-2.png" data-ix="job-img-behave-2"></div></div><div class="w-row work-row-wrapper"><div class="w-col w-col-6 job-column-wrapper left"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c31bf_senac-alert.png" data-ix="job-img-behave-1" class="job-img"></div><div class="w-col w-col-6 job-column-wrapper right"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c31be_senac-buttons.png" data-ix="job-img-behave-2"></div></div><div data-ix="job-img-behave-1" class="work-row-wrapper"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c32c7_sen

30ac-timeline.png" class="job-img"></div><div class="w-row work-row-wrapper"><div class="w-col w-col-4 job-column-wrapper left"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c31c2_senac-subtitle.png" data-ix="job-img-behave-3" class="job-img"></div><div class="w-col w-col-4 job-column-wrapper"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c31c1_senac-loader.png" data-ix="job-img-behave-2" class="job-img"></div><div class="w-col w-col-4 job-column-wrapper right"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c31c4_senac-dates.png" data-ix="job-img-behave-1" class="job-img"></div></div><div class="w-row work-row-wrapper"><div class="w-col w-col-6 job-column-wrapper left"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c32ca_senac-form-1.png" data-ix="job-img-behave-1" class="job-img"></div><div class="w-col w-col-6 job-column-wrapper right"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c31b8_senac-form-2.png" data-ix="job-img-behave-2"></div></div><div class="w-row work-row-wrapper"><div class="w-col w-col-4 job-column-wrapper left"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c32c9_senac-form-3.png" data-ix="job-img-behave-3" class="job-img"></div><div class="w-col w-col-4 job-column-wrapper"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c31b9_senac-form-4.png" data-ix="job-img-behave-2" class="job-img"></div><div class="w-col w-col-4 job-column-wrapper right"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c32c8_senac-form-5.png" data-ix="job-img-behave-1" class="job-img"></div></div><div data-ix="job-img-behave-1" class="work-row-wrapper"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c31d5_senac-list.png" class="job-img"></div><div data-ix="job-img-behave-1" class="work-row-wrapper"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c32c6_senac-slider.png" class="job-img"></div><div data-ix="job-img-behave-1" class="work-row-wrapper"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c31d6_senac-table.png" class="job-img"></div><div data-ix="job-img-behave-1" class="work-row-wrapper"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c32a5_senac-nav.png" class="job-img"></div><div data-ix="job-img-behave-1" class="work-row-wrapper"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c31d7_senac-modal.png" class="job-img"></div><div class="w-row work-row-wrapper"><div class="w-col w-col-6 job-column-wrapper left"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c31ba_senac-pagination.png" data-ix="job-img-behave-1" class="job-img"></div><div class="w-col w-col-6 job-column-wrapper right"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c32ae_senac-breadcrumbs.png" data-ix="job-img-behave-2"></div></div><div data-ix="job-img-behave-1" class="work-row-wrapper"><img src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/56c01290bf6d3281049c31c6_senac-icons.png" class="job-img"></div></section><div data-ix="job-img-behave-1" class="work-row-wrapper btn-project"><a href="http://senac-style-guide.olh.am/" target="_blank" class="call-to-action live-project">View live project</a></div><section data-ix="load-display" class="work-row-wrapper end job-5"></section><section data-ix="load-display" class="w-section job-footer-section"><div data-ix="content-display-delay" class="w-row job-nav-row"><div class="w-col w-col-4 job-nav-column"><a href="/index.html#work" class="call-to-action list">Back to list</a></div><div class="w-col w-col-4 no-padding-column"><a data-ix="modal-contact" class="call-to-action job-call-to-action">Hire me</a></div><div class="w-col w-col-4 job-nav-column"><a href="/lider-app" class="call-to-action next-job">Next project</a></div></div><div class="job-share-block"><h3 class="job-share-title">Share</h3><ul class="w-list-unstyled big-margin-box"><li data-ix="tag-displaay-info-first-tab" class="about-skills-list-item"><a href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://douglaspinho.webflow.io/senac/&amp;title=Senac/MG&amp;summary=Project by Douglas Pinho &amp;source=douglaspinho.webflow.io/home" target="_blank" class="w-clearfix w-inline-block marker-block"><div class="social-icon linkedin"></div><p class="marker-text social">Linkedin</p></a></li><li data-ix="tag-displaay-info-first-tab" class="about-skills-list-item"><a href="https://www.facebook.com/sharer/sharer.php?u=http://douglaspinho.webflow.io/senac/" target="_blank" class="w-clearfix w-inline-block marker-block"><div class="social-icon facebook"></div><p class="marker-text social">Facebook</p></a></li><li data-ix="tag-displaay-info-first-tab" class="about-skills-list-item"><a href="http://twitter.com/intent/tweet?status=Líder App http://douglaspinho.webflow.io/senac by @DouglasPinho" target="_blank" class="w-clearfix w-inline-block marker-block"><div class="social-icon twitter"></div><p class="marker-text social">Twitter</p></a></li></ul></div></section>

31<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

31

32<script type="text/javascript" src="https://daks2k3a4ib2z.cloudfront.net/56c0128fbf6d3281049c3191/js/webflow.788e42c14.js"></script>

32
33<!--[if lte IE 9]>

33<script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>

33<![endif]-->

33<script>
34  $(document).ready(function() {
35    $('#hire-btn').on('click', function(e) {
36      _gaq.push(['_trackEvent', '/Hire Btn']);
37    });
38  });
39</script>

39
40
41<style>
42
43.w-slider-dot {
44    width: 14px;
45    height: 14px;
46    margin-right: 2px;
47    margin-left: 2px;
48    border: 1px solid white;
49    background-color: transparent;
50    -webkit-transition: all 300ms ease;
51    transition: all 300ms ease;
52}
53.w-slider-dot:hover {
54    background-color: white;
55}
56.w-slider-dot.w-active {
57    -webkit-transform: rotate(90deg);
58    -ms-transform: rotate(90deg);
59    transform: rotate(90deg);
60    -webkit-transition: all 500ms ease;
61    transition: all 500ms ease;
62}
63
64.marker-block:hover .marker-text{
65     border-left-width: 1px;
66     border-left-color: white;
67     background-color: transparent;
68}
69</style>
70
71
72
73<!-- Please call pinit.js only once per page -->

74<script type="text/javascript" async defer  data-pin-color="red" data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

74
75</body></html>