Header
Kirjaudu sisään
Syötä kirjautumistietosi tai kirjaudu Facebook-tunnuksillasi
tai
Ongelmia kirjautumisessa?
Saadaksesi uuden salasanan kirjoita sähköpostiosoitteesi, jolla olet rekisteröitynyt otakantaa.fi-palveluun. Palvelu lähettää sinulle sähköpostiisi linkin, jonka kautta saat uuden salasanan.
Sähköpostiosoite
Rekisteröidy palvelun käyttäjäksi
Syötä sähköpostisi tai rekisteröidy Facebook-tunnuksillasi
Sähköpostiosoite
tai
Oletko jo rekisteröitynyt?
Kirjaudu sisään
otakantaa.fi
This pattern contains:
atoms-mobile-nav-trigger
molecules-loggedin
molecules-login
molecules-search
molecules-dropdown-nav
atoms-logo
molecules-lang-sel
HTML
<!-- Begin .header -->
<header class="header cf" role="banner">
<div class="header-wrapper">
<div class="element-group">
<!-- Use mobile trigger (molecules-responsive-dropdown) here to keep it in place when menus are open. -->
<div class="mobile-trigger"><a href="#"><i class="icon-menu"></i><span class="is-vishidden">Valikko</span></a></div> <!-- Heads up! pasted code ahead -->
<div id="topnavibar" class="topnavi-bar inverse-contrast expandable">
<div class="container">
<div id="closeButtonContainer" class="show-if-js-enabled close fa fa-times-circle selected"></div>
<div class="navigation">
<!-- Paste ends. -->
<div class="site-actions">
<a id="hlLogin" class="pnlLogin"> <span>Kirjaudu sisään</span><i class="icon-login"></i> </a>
<a id="hlRegister" class="pnlRegistration"><span>Rekisteröidy</span><i class="icon-register"></i> </a>
</div>
<!-- Heads up! pasted code ahead -->
<a id="lvOtherServices_HyperLink1_0" class="tab" href="http://www.kansalaisaloite.fi">Kansalaisaloite.fi</a>
<a id="lvOtherServices_HyperLink1_1" class="tab" href="https://www.kuntalaisaloite.fi">Kuntalaisaloite.fi</a>
<a id="lvOtherServices_HyperLink1_2" class="tab active" href="fi-FI">Otakantaa</a>
<a id="lvOtherServices_HyperLink1_3" rel="nofollow" class="other-service" target="_blank" href="fi-FI/Tietopankki">Tietopankki</a>
</div>
<div id="pnlLoginRegistrationContainer" class="expanding" >
<div id="pnlLogin" class="section login" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnLogin')">
<h3>Kirjaudu sisään</h3>
<p>Syötä kirjautumistietosi tai kirjaudu Facebook-tunnuksillasi</p>
<div class="column-main main-login">
<span id="lblUsername" class="lbl-text lbl-input">Käyttäjätunnus</span>
<div class="input-with-icon fa fa-user">
<input name="ctl00$tbUsername" type="text" id="tbUsername" tabindex="1" class="ctl-text username" placeholder="Käyttäjätunnus" onfocus="setInputValue(this, 'focus');" onblur="setInputValue(this, 'blur');">
<span id="rfvLoginUsername" class="login-validation" style="color:Red;display:none;"></span>
</div>
<span id="lblPassword" class="lbl-text lbl-password">Salasana</span>
<div class="input-with-icon fa fa-lock">
<input name="ctl00$tbPassword" type="password" id="tbPassword" tabindex="2" class="ctl-text password" placeholder="Salasana" onfocus="setInputValue(this, 'focus');" onblur="setInputValue(this, 'blur');">
<span id="rfvLoginPassword" class="login-validation" style="color:Red;display:none;"></span>
</div>
<a id="hlPasswordRecover" class="forgotten show-if-js-enabled">Unohtuiko salasanasi?</a>
<span class="remember"><input id="cbRemember" type="checkbox" name="ctl00$cbRemember"><label for="cbRemember">Muista kirjautuminen</label></span>
<span id="upLogin">
<input type="submit" name="ctl00$btnLogin" value="OK" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$btnLogin", "", true, "Login", "", false, false))" id="btnLogin" tabindex="3" title="Syötä käyttäjätunnus sekä salasana niille varattuihin kenttiin ja klikkaa OK-nappia,minkä jälkeen siirryt kirjautuneen käyttäjän etusivunäkymään. " class="ctl-btn">
<div id="loginProgess" class="update-progress" style="visibility:hidden;display:block;" role="status" aria-hidden="true">
<img src="../../images/ajax-loader.gif" id="imgLoginLoader" alt="...">
</div>
<div id="ValidationSummary1" class="errorMessage" display="Dynamic" style="color:Red;display:none;">
</div>
</span>
</div>
<div class="show-if-js-enabled column-alt alt-login">
<span class="or">
tai
</span>
<button onclick="FB.login(); return false;" class="ctl-btn facebook">Kirjaudu Facebook-tunnuksillasi</button>
</div>
<div class="footer">
tai
<a id="hlRegister2" class="pnlRegistration">Rekisteröidy käyttäjäksi</a>
</div>
</div>
<div id="pnlPasswordRecover" class="section forgotten">
<h3>Ongelmia kirjautumisessa?</h3>
<p>Saadaksesi uuden salasanan kirjoita sähköpostiosoitteesi, jolla olet rekisteröitynyt otakantaa.fi-palveluun. Palvelu lähettää sinulle sähköpostiisi linkin, jonka kautta saat uuden salasanan.</p>
<div id="pnlPasswordRecoverEmail" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnPasswordRecoverSend')">
<span id="lblPasswordRecoverEmail" class="lbl-text lbl-input">Sähköpostiosoite</span>
<div class="input-with-icon fa fa-envelope">
<input name="ctl00$tbPasswordRecoverEmail" maxlength="256" id="tbPasswordRecoverEmail" class="ctl-text" onfocus="setInputValue(this, 'focus');" onblur="setInputValue(this, 'blur');" placeholder="Sähköpostiosoite" type="email">
</div>
<span id="rfvPasswordRecoverEmail" class="password-recover-validation" style="color:Red;display:none;"></span>
<span id="revPasswordRecoverEmail" class="password-recover-validation" style="color:Red;display:none;"></span>
<span id="upPasswordRecover" class="recover-btn-container">
<input type="submit" name="ctl00$btnPasswordRecoverSend" value="Jatka" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$btnPasswordRecoverSend", "", true, "PasswordRecoverSend", "", false, false))" id="btnPasswordRecoverSend" title="Klikkaamalla Jatka-nappia palvelu lähettää sinulle sähköpostiisi linkin, jonka kautta saat uuden salasanan." class="ctl-btn">
<div id="passwordRecoverProgress" class="update-progress" style="visibility:hidden;display:block;" role="status" aria-hidden="true">
<img src="../../images/ajax-loader.gif" id="imgPasswordRecoverLoader" alt="...">
</div>
<span id="cvEmailFieldDoesntExistsValidator" class="password-recover-validation" style="color:Red;display:none;"></span>
<span id="cvAccountRegisteredWithFacebook" class="password-recover-validation" style="color:Red;display:none;"></span>
<div id="vsPasswordRecover" class="errorMessage" display="Dynamic" style="color:Red;display:none;">
</div>
</span>
</div>
</div>
<div id="pnlRegistration" class="section register" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnRegistration')">
<h3>Rekisteröidy palvelun käyttäjäksi</h3>
<p>Syötä sähköpostisi tai rekisteröidy Facebook-tunnuksillasi</p>
<div class="column-main main-register">
<span id="lblRegistrationEmail" class="lbl-text lbl-input">Sähköpostiosoite</span>
<div class="input-with-icon fa fa-envelope">
<input name="ctl00$tbRegistrationEmail" id="tbRegistrationEmail" class="ctl-text email" placeholder="Sähköpostiosoite" onfocus="setInputValue(this, 'focus');" onblur="setInputValue(this, 'blur');" type="email">
</div>
<span id="revRegistrationEmail" class="registration-validation" style="color:Red;display:none;"></span>
<span id="rfvRegistrationEmail" class="registration-validation" style="color:Red;display:none;"></span>
<span id="upEmailValidation">
<input type="submit" name="ctl00$btnRegistration" value="Rekisteröidy" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$btnRegistration", "", true, "Registration", "", false, false))" id="btnRegistration" title="Syötä sähköpostiosoitteesi sille varattuun kenttään ja klikkaa Rekisteröidy-painiketta. Palvelu lähettää sähköpostiisi vahvistusviestin, joka sisältää linkin rekisteröitymisen viimeistelemiseksi." class="ctl-btn">
<div id="emailValidationProgress" class="update-progress" style="visibility:hidden;display:block;" role="status" aria-hidden="true">
<img src="../../images/ajax-loader.gif" id="imgRegistrationLoader" alt="...">
</div>
<span id="cvRegistrationEmail" class="registration-validation" style="color:Red;display:none;"></span>
<span id="lblRegistrationEmailError" class="registration-validation" style="color:Red;"></span>
<div id="vsRegistration" class="errorMessage" display="Dynamic" style="color:Red;display:none;">
</div>
</span>
</div>
<div class="show-if-js-enabled column-alt alt-register">
<span class="or">
tai</span>
<button onclick="__doPostBack('ctl00$btnFacebookRegistration','')" id="btnFacebookRegistration" class="ctl-btn facebook">Rekisteröidy Facebook-tunnuksillasi</button>
</div>
<div class="footer">
Oletko jo rekisteröitynyt?
<a id="hlLogin2" class="pnlLogin">Kirjaudu sisään</a>
</div>
</div>
</div>
</div>
</div> </div>
<section class="responsive-modifier-block">
<form action="#" method="post" class="inline-form search-form">
<legend class="is-vishidden">Search</legend>
<div id="pnlQuickSearch" class="form-element" title="Hae palvelun sisältöjä Googlella" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnQuickSearch')">
<label for="tbQuickSearch" class="is-vishidden">Search</label>
<input type="hidden" name="ctl00$ajxWatermarkQuickSearch_ClientState" id="ajxWatermarkQuickSearch_ClientState">
<input name="ctl00$tbQuickSearch" type="text" maxlength="300" id="tbQuickSearch" tabindex="10" class="text-quicksearch search-field ctl-text ellipsis" autocomplete="off">
<input type="submit" name="ctl00$btnQuickSearch" value="" id="btnQuickSearch" tabindex="11" class="button-quicksearch">
<i class="icon-search"></i>
</div>
</form> <div class="element-group nav-container">
<div class="navi-responsive section">
<ul>
<li>
<a href="#">Valinta 1</a>
<a href="#" class="sub-nav-trigger"><i class="icon-menu-arrow"></i><span class="is-vishidden">Alavalikko</span></a>
<ul>
<li><a href="">Alavalinta 1</a></li>
<li><a href="">Alavalinta 2</a></li>
<li><a href="">Alavalinta 3</a></li>
<li><a href="">Alavalinta 4</a></li>
</ul>
</li>
<li>
<a href="#">Valinta 2</a>
<a href="#" class="sub-nav-trigger"><i class="icon-menu-arrow"></i><span class="is-vishidden">Alavalikko</span></a>
<ul>
<li><a href="">Alavalinta 1</a></li>
<li><a href="">Alavalinta 2</a></li>
<li><a href="">Alavalinta 3</a></li>
<li><a href="">Alavalinta 4</a></li>
</ul>
</li>
<li>
<a href="">Valinta</a>
</li>
<li>
<a href="#">Valinta 3</a>
<a href="#" class="sub-nav-trigger"><i class="icon-menu-arrow"></i><span class="is-vishidden">Alavalikko</span></a>
<ul>
<li><a href="">Alavalinta 1</a></li>
<li><a href="">Alavalinta 2</a></li>
<li><a href="">Alavalinta 3</a></li>
<li><a href="">Alavalinta 4</a></li>
</ul>
</li>
<li>
<a href="#">Valinta 4</a>
<a href="#" class="sub-nav-trigger"><i class="icon-menu-arrow"></i><span class="is-vishidden">Alavalikko</span></a>
<ul>
<li><a href="">Alavalinta 1</a></li>
<li><a href="">Alavalinta 2</a></li>
<li><a href="">Alavalinta 3</a></li>
<li><a href="">Alavalinta 4</a></li>
</ul>
</li>
</ul>
</div> </div>
<div class="element-group">
<div class="inner-block align-left">
<a href="#" id="hlLogo" class="header-logo"><img src="../../images/logo.png" class="logo" alt="Logo Alt Text" /><strong>ota</strong>kantaa.fi</a> </div>
<div class="inner-block align-right">
<div class="lang-sel">
<ul class="lang-list">
<li class="selected"> <a href="">Suomeksi</a></li>
<li><a href="">På svenska</a></li>
</ul>
</div> </div>
</div>
</section>
</div>
</header>
<!-- End .header -->
Footer
HTML
<!-- Begin Footer -->
<footer class="footer" role="contentinfo">
<div class="lc">
<footer class="dummy-footer">
<div id="footer-container">
<ul class="footer-nav">
<!-- Major tab pos 1. float left -->
<li class="footer-muutsivustot footer-nav-item">
<div class="helptext">
<p><strong>Muut sivustot</strong></p>
<ul>
<li>
<a href="http://www.lausuntopalvelu.fi">
<span class="om om-lap">Lausuntopalvelu.fi</span>
</a>
</li>
<li>
<a href="http://www.kansalaisaloite.fi">
<span class="om om-kaa">Kansalaisaloite.fi</span>
</a>
</li>
<li>
<a href="http://www.kuntalaisaloite.fi">
<span class="om om-kua">Kuntalaisaloite.fi</span>
</a>
</li>
<li>
<a href="http://www.om.fi" target="_blank">
<span>Oikeusministeriö.fi</span>
</a>
</li>
<li>
<a href="http://www.vm.fi/vm/fi/05_hankkeet/023_sade/index.jsp" target="_blank">
<span>SADe-ohjelma</span>
</a>
</li>
<li>
<a href="http://www.suomi.fi" target="_blank">
<img height="24" src="" width="24">
<span>Suomi.fi</span>
</a>
</li>
<li>
<a href="http://www.eharava.fi" target="_blank">
<img height="24" src="" width="24">
<span>Harava</span>
</a>
</li>
<li>
<a href="http://www.etarkkailija.fi" target="_blank">
<img height="24" src="" width="24">
<span>Tarkkailija</span>
</a>
</li>
</ul>
</div>
</li>
<!-- Major tab. pos 4. float right-->
<li class="footer-tietoa footer-nav-item">
<div class="helptext">
<p><strong>Yhteystietomme</strong></p>
<ul>
<li>
<a href="http://www.facebook.com/otakantaa" class="facebook" target="_blank">
<i class="om-facebook om"></i>
<span>Facebook</span>
</a>
</li>
<li>
<a href="http://www.twitter.com/otakantaa" class="twitter" target="_blank">
<i class="om-twitter om"></i>
<span>Twitter</span>
</a>
</li>
<li>
<a href="http://www.youtube.com/user/OikeusministerioDKY" class="youtube" target="_blank">
<i class="om-youtube om"></i>
<span>Youtube</span>
</a>
</li>
<li>
<a href="mailto:otakantaa.om@om.fi">
<i class="fa fa-envelope fa-2x" style=" vertical-align: middle;"></i>
<span>otakantaa.om@om.fi</span>
</a>
</li>
<li>
<a href="http://blogi.otakantaa.fi">
<i class="fa fa-rss fa-2x" style=" vertical-align: middle;"></i>
<span>blogi.otakantaa.fi</span>
</a>
</li>
<li>
<a href="https://www.otakantaa.fi/fi-FI/Palaute">
<i class="fa fa-question fa-2x" style=" vertical-align: middle;"></i>
<span>Palautelomake</span>
</a>
</li>
<li>
<a href="https://www.otakantaa.fi/fi-FI/Yhteystiedot">
<i class="fa fa-phone fa-2x" style=" vertical-align: middle;"></i>
<span>Yhteystiedot</span>
</a>
</li>
<li>
<a href="https://www.otakantaa.fi/fi-FI/Tietoa_palvelusta">
<i class="fa fa-info fa-2x" style=" vertical-align: middle;"></i>
<span>Tietoa palvelusta</span>
</a>
</li>
<li>
<a href="http://www.otakantaa.fi/apiohje">
<i class="fa fa-code fa-2x" style=" vertical-align: middle;"></i>
<span>API-ohje kehittäjille</span>
</a>
</li>
</ul>
</div>
</li>
<!-- Major tab. pos 2-3. float left-->
<li class="footer-sitemap footer-nav-item">
<div class="column-even">
<ul>
<li class="level-1"><a href="fi-FI/Hankkeet/Kaikki_hankkeet?tila=2">Hankkeet</a>
<ul>
<li class="level-2">
<a href="fi-FI/Hankkeet/Kaikki_hankkeet">Kaikki hankkeet</a>
</li>
<li class="level-2">
<a href="fi-FI/Hankkeet/Kaikki_hankkeet">Osa hankkeet</a>
</li>
<li class="level-2">
<a href="fi-FI/Hankkeet/Kaikki_hankkeet">Osa2 hankkeet</a>
</li>
<li class="level-2">
<a href="fi-FI/Hankkeet/Kaikki_hankkeet">Osa3 hankkeet</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="column-odd">
<ul>
<li class="level-1">
<a href="fi-FI/Luo_hanke">Luo hanke</a>
</li>
</ul>
</div>
<div class="column-even">
<ul>
<li class="level-1">
<a href="fi-FI/Hankkeeni">Hankkeeni</a>
</li>
</ul>
</div>
<div class="column-odd">
<ul>
<li class="level-1"><a href="fi-FI/Tietopankki">Tietopankki</a>
<ul>
<li class="level-2">
<a href="fi-FI/Tietopankki/Demokratia">Demokratia</a>
</li>
<li class="level-2">
<a href="fi-FI/Tietopankki/Demokratia">Demokratian kehittäminen</a>
</li>
<li class="level-2">
<a href="fi-FI/Tietopankki/Demokratia">Päätöksenteko</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="column-even">
<ul>
<li class="level-1"><a href="fi-FI/Ohjeet">Ohjeet</a>
<ul>
<li class="level-2">
<a href="fi-FI/Palaute">Anna palautetta</a>
</li>
<li class="level-2">
<a href="fi-FI/Palaute">Älä anna palautetta</a>
</li>
<li class="level-2">
<a href="fi-FI/Palaute">Anna jotain</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="column-odd">
<ul>
<li class="level-1"><a href="fi-FI/Tiedotteet">Tiedotteet</a></li>
</ul>
</div>
</li>
</ul>
</div>
</footer> </div>
</footer>
<!-- End Footer -->
Header Loggedin
This pattern contains:
atoms-mobile-nav-trigger
molecules-loggedin
molecules-search
molecules-dropdown-nav
atoms-logo
molecules-lang-sel
HTML
<!-- Begin .header -->
<header class="header cf loggedin" role="banner">
<div class="element-group">
<!-- Use mobile trigger (molecules-responsive-dropdown) here to keep it in place when menus are open. -->
<div class="mobile-trigger"><a href="#"><i class="icon-menu"></i><span class="is-vishidden">Valikko</span></a></div> <!-- Heads up! pasted code ahead -->
<div id="topnavibar" class="topnavi-bar inverse-contrast expandable">
<div class="container">
<div id="closeButtonContainer" class="show-if-js-enabled close fa fa-times-circle selected"></div>
<div class="navigation">
<div class="site-actions">
<div id="pnlLoggedIn" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnLogout')">
<div class="user-navigation">
<ul>
<li class="toplevel">
<a id="hlLoggedInUser" href="fi-FI/Kayttaja"><span>Antti</span><i class="icon-user"></i></a>
<i class="icon-arrow"></i>
<!-- <div class="user-menu-trigger"><a href="#"><i class="icon-user"></i><span class="is-vishidden">Käyttäjävalikko</span></a></div> -->
<ul class="is-vishidden">
<li>
<a id="lvUserNavigation_HyperLink2_0" href="fi-FI/Omat_tiedot/Pyyda_tunnuksellesi_virkamiesstatusta">Pyydä tunnuksellesi virkamiesstatusta</a>
</li>
<li>
<a id="lvUserNavigation_HyperLink2_1" href="fi-FI/Omat_tiedot/Pyyda_tunnuksesi_poistamista_kaytosta">Pyydä tunnuksesi poistamista käytöstä</a>
</li>
<li>
<a id="lvUserNavigation_HyperLink2_2" href="fi-FI/Kayttaja/Kirjautunut/Muokkaa">Muokkaa profiilia</a>
</li>
<li>
<a id="lvUserNavigation_HyperLink2_3" href="fi-FI/Kayttaja/Kirjautunut/MuokkaaAvainsanat">Muokkaa asiasanasi</a>
</li>
<li>
<a id="lvUserNavigation_HyperLink2_4" href="fi-FI/Kayttaja/Kirjautunut/MuokkaaSijainnit">Muokkaa kiinnostavat paikkakunnat</a>
</li>
<li>
<a id="lvUserNavigation_HyperLink2_5" href="fi-FI/Kayttaja/Kirjautunut/Vaihdasalasana">Vaihda salasana</a>
</li>
<li>
<a id="lvUserNavigation_HyperLink2_6" href="fi-FI/Kayttaja/Kirjautunut/TilaaUutiskirje">Tilaa uutiskirje</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="logout-btn-wrapper">
<input type="submit" name="ctl00$btnLogout" value="Kirjaudu ulos" id="btnLogout" title="Klikkaamalla nappia voit joko kirjautua palveluun sisään tai kirjautua palvelusta ulos. Kirjauduttaessa sisään napissa lukee OK, kirjauduttaessa ulos napissa lukee Kirjaudu ulos." class="ctl-btn-logout">
<i class="icon-off"></i>
</div>
</div>
</div>
<a id="lvOtherServices_HyperLink1_0" class="tab" href="http://www.kansalaisaloite.fi">Kansalaisaloite.fi</a>
<a id="lvOtherServices_HyperLink1_1" class="tab" href="https://www.kuntalaisaloite.fi">Kuntalaisaloite.fi</a>
<a id="lvOtherServices_HyperLink1_2" class="tab active" href="fi-FI">Otakantaa</a>
<a id="lvOtherServices_HyperLink1_3" rel="nofollow" class="other-service" target="_blank" href="fi-FI/Tietopankki">Tietopankki</a>
</div>
<div id="pnlLoginRegistrationContainer" class="expanding" >
</div>
</div>
</div>
</div>
<section class="responsive-modifier-block">
<form action="#" method="post" class="inline-form search-form">
<legend class="is-vishidden">Search</legend>
<div id="pnlQuickSearch" class="form-element" title="Hae palvelun sisältöjä Googlella" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnQuickSearch')">
<label for="tbQuickSearch" class="is-vishidden">Search</label>
<input type="hidden" name="ctl00$ajxWatermarkQuickSearch_ClientState" id="ajxWatermarkQuickSearch_ClientState">
<input name="ctl00$tbQuickSearch" type="text" maxlength="300" id="tbQuickSearch" tabindex="10" class="text-quicksearch search-field ctl-text ellipsis" autocomplete="off">
<input type="submit" name="ctl00$btnQuickSearch" value="" id="btnQuickSearch" tabindex="11" class="button-quicksearch">
<i class="icon-search"></i>
</div>
</form> <div class="element-group nav-container">
<div class="navi-responsive section">
<ul>
<li>
<a href="#">Valinta 1</a>
<a href="#" class="sub-nav-trigger"><i class="icon-menu-arrow"></i><span class="is-vishidden">Alavalikko</span></a>
<ul>
<li><a href="">Alavalinta 1</a></li>
<li><a href="">Alavalinta 2</a></li>
<li><a href="">Alavalinta 3</a></li>
<li><a href="">Alavalinta 4</a></li>
</ul>
</li>
<li>
<a href="#">Valinta 2</a>
<a href="#" class="sub-nav-trigger"><i class="icon-menu-arrow"></i><span class="is-vishidden">Alavalikko</span></a>
<ul>
<li><a href="">Alavalinta 1</a></li>
<li><a href="">Alavalinta 2</a></li>
<li><a href="">Alavalinta 3</a></li>
<li><a href="">Alavalinta 4</a></li>
</ul>
</li>
<li>
<a href="">Valinta</a>
</li>
<li>
<a href="#">Valinta 3</a>
<a href="#" class="sub-nav-trigger"><i class="icon-menu-arrow"></i><span class="is-vishidden">Alavalikko</span></a>
<ul>
<li><a href="">Alavalinta 1</a></li>
<li><a href="">Alavalinta 2</a></li>
<li><a href="">Alavalinta 3</a></li>
<li><a href="">Alavalinta 4</a></li>
</ul>
</li>
<li>
<a href="#">Valinta 4</a>
<a href="#" class="sub-nav-trigger"><i class="icon-menu-arrow"></i><span class="is-vishidden">Alavalikko</span></a>
<ul>
<li><a href="">Alavalinta 1</a></li>
<li><a href="">Alavalinta 2</a></li>
<li><a href="">Alavalinta 3</a></li>
<li><a href="">Alavalinta 4</a></li>
</ul>
</li>
</ul>
</div> </div>
<div class="element-group">
<div class="inner-block align-left">
<a href="#" id="hlLogo" class="header-logo"><img src="../../images/logo.png" class="logo" alt="Logo Alt Text" /><strong>ota</strong>kantaa.fi</a> </div>
<div class="inner-block align-right">
<div class="lang-sel">
<ul class="lang-list">
<li class="selected"> <a href="">Suomeksi</a></li>
<li><a href="">På svenska</a></li>
</ul>
</div> </div>
</div>
</section>
</header>
<!-- End .header -->
Om Header
HTML
<!-- Begin .global-header -->
<div class="om-header">
<div id="headerNav" class="header-nav">
<ul>
<li>
<a href="http://www.demokratia.fi">Demokratia.fi</a>
<li>
<a class="active" href="https://www.kansalaisaloite.fi/">Kansalaisaloite.fi</a>
<li>
<a href="https://www.kuntalaisaloite.fi/">Kuntalaisaloite.fi</a>
<li>
<a href="http://www.lausuntopalvelu.fi/">Lausuntopalvelu.fi</a>
<li>
<a href="http://www.nuortenideat.fi">Nuortenideat.fi</a>
<li>
<a href="http://www.otakantaa.fi/">Otakantaa.fi</a>
<li>
<a href="http://www.vaalit.fi/">Vaalit.fi</a>
<li>
<a href="http://www.yhdenvertaisuus.fi/">Yhdenvertaisuus.fi</a>
</ul>
</div>
</div>
<!-- End .global-header -->
Om Footer
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lue lisää >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lue lisää >
HTML
<div class="om-footer">
<div class="container">
<div class="block">
<span class="footer-logo om"></span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<a href="#">Lue lisää ></a>
</p>
</div>
<div class="block">
<span class="footer-logo vivi"></span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>
<a href="#">Lue lisää ></a>
</p>
</div>
<div class="footer-links">
<ul>
<li><span class="triangle-right"></span> <a href="#">Linkki 1</a></li>
<li><span class="triangle-right"></span> <a href="#">Linkki 2</a></li>
<li><span class="triangle-right"></span> <a href="#">Linkki 3</a></li>
<li><span class="triangle-right"></span> <a href="#">Linkki 4</a></li>
</ul>
</div>
<br class="clear"/>
</div>
<a href="#header-tools" accesskey="3" class="hidden">Takaisin ylös</a>
</div>