Navigation
DLN-Start
CODE
×
HTML
<div class='dln-start'> <div class='signet-oe-nr'> <img class='logo-nr' src='img/Kanton-Bern.svg'> <div class='logo-caption-nr'>Polizei- und Militärdirektion</div> </div> <div class='hr-dln-start'></div> <div class='menue-page start active'> <a class='main-menue-sub i12'>Startseite</a> </div> <div class='menue-item i7'> <a class='main-menue-sub i11'>Themen</a> </div> <div class='menue-page i5'> <a class='main-menue-sub i13'>E-Services</a> </div> <div class='menue-item i9'> <a class='main-menue-sub i14'>Über uns</a> </div> <div class='offcanvas-service-nav'> <a class='service-menue i1' href='#' role='listitem'>Kontakt</a> <a class='service-menue i3' href='#' role='listitem'>Startseite Kanton Bern</a> <div class='dln user-account'><span>Max Mustermann</span> <i class="login-dropdown-dln"> <a class="menue-item-dd v1" href="#"><span>Mein Profil</span></a> <a class="menue-item-dd v2" href="#"><span>Mein Postfach (3)</span></a> <a class="menue-item-dd v3" href="#"><span>Abmelden</span></a> </i></div> <div class='language-selector' role='list'><a href="#" role='listitem' class="language active">DE</a> <span>|</span> <a href="#" role='listitem' class="language" href="">FR</a> <span>|</span> <a href="#" role='listitem' class="language" href="">EN</a></div> </div> </div>
CSS
@media screen and (max-width: 1119px) { div.dln-start { width:100%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } } @media screen and (max-width: 767px) { div.dln-start { padding-left: 30px; padding-right: 30px; } } @media screen and (max-width: 1119px) { div.offcanvas-service-nav { display:block; max-width: none; margin-bottom: 36px; } } @media screen and (max-width: 767px) { div.signet-oe-nr { display:none; } } div.language-selector { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--black); margin-left: calc(0.25vw + 8px); display:inline-block; } a.main-menue-sub.i12 { font-family: 'Roboto'; font-style: normal; font-weight: 500; color: var(--red); } img.logo-nr { max-width: 150px; cursor:pointer; } div.logo-caption-nr { font-size: 16px; line-height: 17px; letter-spacing: 0.01rem; word-spacing: 0.025rem; font-family: 'Roboto'; font-style: normal; font-weight: 400; color: var(--black); margin-top: 19px; max-width: 335px; } div.hr-dln-start { border-top: 1px solid #B6B6B6; height: 1px; margin: 29px 0 24px; width:100%; } div.dln.user-account { position:relative; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); display:inline-block; border:none; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); } div.offcanvas-service-nav > a.service-menue.i1 { display: table; margin-bottom: 30px; margin-right: 0px; margin-left: 0px; } div.offcanvas-service-nav > a.service-menue.i3 { display: table; margin-bottom: 30px; margin-right: 0px; margin-left: 0px; } div.offcanvas-service-nav > div.language-selector { display: block; margin-top: 74px; margin-bottom: 0px; margin-right: 0px; margin-left: -7px; } div.dln.user-account:before { background-image: url('../img/logout.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } div.language-selector:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } @media screen and (max-width: 767px) { div.hr-dln-start { display:none; } div.offcanvas-service-nav > div.language-selector { margin-left: -14px; } } div.dln.user-account { display: table; position: relative; margin-bottom: 0; margin-right: -25px; margin-left: -25px; width: calc(100% + 50px); padding: 15px 25px 18px 48px; margin-top: -15px; cursor: pointer; } div.dln.user-account::before { width: 21px; height: 19px; content: " "; position: absolute; left: 24px; background-size: 21px 19px; background-repeat: no-repeat; } div.dln.user-account > span { border-bottom: 2px solid rgba(234,22,31,1); } div.dln.user-account:hover > span, div.dln.user-account:focus > span { border-bottom: 2px solid #000; } div.dln.user-account.open { background-color: #FCF8F3; font-weight: 500; padding-bottom: 5px; } .login-dropdown-dln { background-color: #FCF8F3; display: none; } .login-dropdown-dln.open { background-color: #FCF8F3; display: block; width: 100%; margin: 0; padding-top: 15px; } .login-dropdown-dln.open > a { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); width: 100%; min-width: auto; margin: 0; padding: 15px 0; height: fit-content; } .login-dropdown-dln.open > a::before { width: 9px; height: 15px; right: 16px; top: 16px; } .login-dropdown-dln.open > a:hover::before, .login-dropdown-dln.open > a:focus::before{ right: 8px; } a.service-menue { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); display:inline-block; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.service-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); } a.main-menue-sub { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 18px; line-height: 21px; letter-spacing: 0.01rem; word-spacing: 0.025rem; text-decoration:none; display:inline-block; max-width: calc(100% - 35px); width: auto; margin-top: 5px; white-space: normal; } a.main-menue-sub:after { display: block; content: ''; height: 2px; margin-top: 2px; background-color: #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); transition: all 100ms ease-in-out; }
JS
DLN-Start
×
Polizei- und Militärdirektion
Startseite
Themen
E-Services
Über uns
Kontakt
Startseite Kanton Bern
Max Mustermann
Mein Profil
Mein Postfach (3)
Abmelden
DE
|
FR
|
EN
DLN-Tile
CODE
×
HTML
<div class='dln-tile'> <div class='dln-header i1'> <h4 class='i1'>Themen</h4> </div> <div class='menue-page i1x'> <a class='main-menue-sub i1'>Übersicht</a> </div> <div class='menue-item-active i2'> <a class='main-menue-sub i2'>Migration</a> </div> <div class='menue-item i3'> <a class='main-menue-sub i3'>Staatssekretariat für Migration (SEM)</a> </div> <div class='offcanvas-service-nav'> <a class='service-menue i1' href='#' role='listitem'>Kontakt</a> <a class='service-menue i3' href='#' role='listitem'>Startseite Kanton Bern</a> <div class='dln user-account'><span>Max Mustermann</span> <i class="login-dropdown-dln"> <a class="menue-item-dd v1" href="#"><span>Mein Profil</span></a> <a class="menue-item-dd v2" href="#"><span>Mein Postfach (3)</span></a> <a class="menue-item-dd v3" href="#"><span>Abmelden</span></a> </i></div> <div class='language-selector' role='list'><a href="#" role='listitem' class="language active">DE</a> <span>|</span> <a href="#" role='listitem' class="language" href="">FR</a> <span>|</span> <a href="#" role='listitem' class="language" href="">EN</a></div> </div> </div>
CSS
@media screen and (max-width: 1119px) { div.dln-tile { width:100%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } } @media screen and (max-width: 767px) { div.dln-tile { padding-left: 30px; padding-right: 30px; } } div.menue-item:hover::after, div.menue-item:focus::after, div.menue-item:active::after { -webkit-transform: translate(18px); transform: translate(18px); } div.menue-item:hover > a.main-menue-sub::after, div.menue-item:focus > a.main-menue-sub::after, div.menue-item:active > a.main-menue-sub::after { transform: scaleX(1); } div.menue-page:hover > a.main-menue-sub::after, div.menue-page:focus > a.main-menue-sub::after, div.menue-page:active > a.main-menue-sub::after { transform: scaleX(1); } div.menue-item { padding-top: 11px; padding-bottom: 10px; width:100%; position:relative; margin-bottom: 3px; display: flex; align-items: center; } div.menue-item:after { content: ' '; position: absolute; width: 20px; height: 50px; right: 0; background-image: url(../img/arrow-right_large.svg); background-size: 12px 18px; background-position: center left; background-repeat: no-repeat; transition: all 250ms ease-in-out; transform: translate(0px); -webkit-transform: translate(0px); } a.main-menue-sub { color: rgba(0,0,0,1); font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 18px; line-height: 21px; letter-spacing: 0.01rem; word-spacing: 0.025rem; text-decoration:none !important; display:inline-block; max-width: calc(100% - 60px); width: auto; margin-top: 5px; white-space: normal; } a.main-menue-sub:after { display: block; content: ''; height: 1px; margin-top: 4px; background-color: #000; transform: scaleX(0); transition: all 100ms ease-in-out; } div.menue-item:hover::after, div.menue-item:focus::after, div.menue-item:active::after { -webkit-transform: translate(18px); transform: translate(18px); } div.menue-item:hover > a.main-menue-sub::after, div.menue-item:focus > a.main-menue-sub::after, div.menue-item:active > a.main-menue-sub::after { transform: scaleX(1); } @media screen and (max-width: 1119px) { div.offcanvas-service-nav { display:block; max-width: none; margin-bottom: 36px; } } div.language-selector { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--black); margin-left: calc(0.25vw + 8px); display:inline-block; } a.main-menue-sub.i2 { color: var(--red); font-family: 'Roboto'; font-style: normal; font-weight: 400; } div.dln.user-account { position:relative; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); display:inline-block; border:none; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); } div.offcanvas-service-nav > a.service-menue.i1 { display: table; margin-bottom: 30px; margin-right: 0px; margin-left: 0px; } div.offcanvas-service-nav > a.service-menue.i3 { display: table; margin-bottom: 30px; margin-right: 0px; margin-left: 0px; } div.offcanvas-service-nav > div.language-selector { display: block; margin-top: 74px; margin-bottom: 0px; margin-right: 0px; margin-left: -7px; } div.dln.user-account:before { background-image: url('../img/logout.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } div.language-selector:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } @media screen and (max-width: 1119px) { h4.i1 { font-size: 24px; line-height: 28px; } } @media screen and (max-width: 767px) { div.offcanvas-service-nav > div.language-selector { margin-left: -14px; } } div.dln.user-account { display: table; position: relative; margin-bottom: 0; margin-right: -25px; margin-left: -25px; width: calc(100% + 50px); padding: 15px 25px 18px 48px; margin-top: -15px; cursor: pointer; } div.dln.user-account::before { width: 21px; height: 19px; content: " "; position: absolute; left: 24px; background-size: 21px 19px; background-repeat: no-repeat; } div.dln.user-account > span { border-bottom: 2px solid rgba(234,22,31,1); } div.dln.user-account:hover > span, div.dln.user-account:focus > span { border-bottom: 2px solid #000; } div.dln.user-account.open { background-color: #FCF8F3; font-weight: 500; padding-bottom: 5px; } .login-dropdown-dln { background-color: #FCF8F3; display: none; } .login-dropdown-dln.open { background-color: #FCF8F3; display: block; width: 100%; margin: 0; padding-top: 15px; } .login-dropdown-dln.open > a { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); width: 100%; min-width: auto; margin: 0; padding: 15px 0; height: fit-content; } .login-dropdown-dln.open > a::before { width: 9px; height: 15px; right: 16px; top: 16px; } .login-dropdown-dln.open > a:hover::before, .login-dropdown-dln.open > a:focus::before{ right: 8px; } a.service-menue { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); display:inline-block; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.service-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); } a.main-menue-sub { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 18px; line-height: 21px; letter-spacing: 0.01rem; word-spacing: 0.025rem; text-decoration:none; display:inline-block; max-width: calc(100% - 35px); width: auto; margin-top: 5px; white-space: normal; } a.main-menue-sub:after { display: block; content: ''; height: 2px; margin-top: 2px; background-color: #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); transition: all 100ms ease-in-out; } h4 { margin: 0 0 12px -1px; max-width: 800px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); font-size: 24px; line-height: 28px; margin-left: -1px; } @media screen and (max-width: 1119px) { h4 { margin-left: 0px; } } @media screen and (max-width: 767px) { h4 { font-size: 21px; line-height: 25px; margin-left: 0px; } }
JS
DLN-Tile
×
Themen
Übersicht
Migration
Staatssekretariat für Migration (SEM)
Kontakt
Startseite Kanton Bern
Max Mustermann
Mein Profil
Mein Postfach (3)
Abmelden
DE
|
FR
|
EN
DLN-Tile (Aufruf von Detailseite)
CODE
×
HTML
<div class='dln-tile i4'> <div class='dln-header i4'> <h4 class='i4'>Schweizer Vertretungen im Ausland</h4> <div class='close-icon' tabindex='0'></div> <div class='back-icon'></div> </div> <div class='menue-page i1x'> <a class='main-menue-sub i1'>Übersicht</a> </div> <div class='menue-page active'> <a class='main-menue-sub i9'>Visumsvorschriften</a> </div> <div class='menue-item i6'> <a class='main-menue-sub i8'>Über uns</a> </div> <div class='offcanvas-service-nav'> <a class='service-menue i1' href='#' role='listitem'>Kontakt</a> <a class='service-menue i3' href='#' role='listitem'>Startseite Kanton Bern</a> <div class='dln user-account'><span>Max Mustermann</span> <i class="login-dropdown-dln"> <a class="menue-item-dd v1" href="#"><span>Mein Profil</span></a> <a class="menue-item-dd v2" href="#"><span>Mein Postfach (3)</span></a> <a class="menue-item-dd v3" href="#"><span>Abmelden</span></a> </i></div> <div class='language-selector' role='list'><a href="#" role='listitem' class="language active">DE</a> <span>|</span> <a href="#" role='listitem' class="language" href="">FR</a> <span>|</span> <a href="#" role='listitem' class="language" href="">EN</a></div> </div> </div>
CSS
@media screen and (max-width: 1119px) { div.dln-tile.i4 { width:100%; } } @media screen and (max-width: 1119px) { div.dln-tile { width:100%; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } } @media screen and (max-width: 767px) { div.dln-tile { padding-left: 30px; padding-right: 30px; } } div.menue-item:hover::after, div.menue-item:focus::after, div.menue-item:active::after { -webkit-transform: translate(18px); transform: translate(18px); } div.menue-item:hover > a.main-menue-sub::after, div.menue-item:focus > a.main-menue-sub::after, div.menue-item:active > a.main-menue-sub::after { transform: scaleX(1); } div.menue-page:hover > a.main-menue-sub::after, div.menue-page:focus > a.main-menue-sub::after, div.menue-page:active > a.main-menue-sub::after { transform: scaleX(1); } div.menue-item { padding-top: 11px; padding-bottom: 10px; width:100%; position:relative; margin-bottom: 3px; display: flex; align-items: center; } div.menue-item:after { content: ' '; position: absolute; width: 20px; height: 50px; right: 0; background-image: url(../img/arrow-right_large.svg); background-size: 12px 18px; background-position: center left; background-repeat: no-repeat; transition: all 250ms ease-in-out; transform: translate(0px); -webkit-transform: translate(0px); } a.main-menue-sub { color: rgba(0,0,0,1); font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 18px; line-height: 21px; letter-spacing: 0.01rem; word-spacing: 0.025rem; text-decoration:none !important; display:inline-block; max-width: calc(100% - 60px); width: auto; margin-top: 5px; white-space: normal; } a.main-menue-sub:after { display: block; content: ''; height: 1px; margin-top: 4px; background-color: #000; transform: scaleX(0); transition: all 100ms ease-in-out; } div.menue-item:hover::after, div.menue-item:focus::after, div.menue-item:active::after { -webkit-transform: translate(18px); transform: translate(18px); } div.menue-item:hover > a.main-menue-sub::after, div.menue-item:focus > a.main-menue-sub::after, div.menue-item:active > a.main-menue-sub::after { transform: scaleX(1); } @media screen and (max-width: 1119px) { div.offcanvas-service-nav { display:block; max-width: none; margin-bottom: 36px; } } div.language-selector { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; color: var(--black); margin-left: calc(0.25vw + 8px); display:inline-block; } a.main-menue-sub.i9 { color: var(--red); font-family: 'Roboto'; font-style: normal; font-weight: 500; } div.close-icon { background-image: url('../img/close-icon.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 24px; height: 24px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } div.back-icon { background-image: url('../img/go-back.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; width: 32px; height: 32px; } div.dln.user-account { position:relative; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); display:inline-block; border:none; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); } div.dln-header.i4 > h4.i4 { position: absolute; bottom: 8px; } div.dln-header.i4 > div.close-icon { position: absolute; top: 30px; right: -4px; } div.dln-header.i4 > div.back-icon { display: none; position: absolute; top: 26px; left: -1px; } div.offcanvas-service-nav > a.service-menue.i1 { display: table; margin-bottom: 30px; margin-right: 0px; margin-left: 0px; } div.offcanvas-service-nav > a.service-menue.i3 { display: table; margin-bottom: 30px; margin-right: 0px; margin-left: 0px; } div.offcanvas-service-nav > div.language-selector { display: block; margin-top: 74px; margin-bottom: 0px; margin-right: 0px; margin-left: -7px; } div.close-icon:hover, div.close-icon:focus { -webkit-transform: scale(1.68); -ms-transform: scale(1.68); transform: scale(1.68); } div.back-icon:hover, div.back-icon:focus { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } div.dln.user-account:before { background-image: url('../img/logout.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; } div.language-selector:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } @media screen and (max-width: 1119px) { h4.i4 { font-size: 24px; line-height: 28px; } div.dln-header.i4 > div.back-icon { display: block; } } @media screen and (max-width: 767px) { div.offcanvas-service-nav > div.language-selector { margin-left: -14px; } } div.dln.user-account { display: table; position: relative; margin-bottom: 0; margin-right: -25px; margin-left: -25px; width: calc(100% + 50px); padding: 15px 25px 18px 48px; margin-top: -15px; cursor: pointer; } div.dln.user-account::before { width: 21px; height: 19px; content: " "; position: absolute; left: 24px; background-size: 21px 19px; background-repeat: no-repeat; } div.dln.user-account > span { border-bottom: 2px solid rgba(234,22,31,1); } div.dln.user-account:hover > span, div.dln.user-account:focus > span { border-bottom: 2px solid #000; } div.dln.user-account.open { background-color: #FCF8F3; font-weight: 500; padding-bottom: 5px; } .login-dropdown-dln { background-color: #FCF8F3; display: none; } .login-dropdown-dln.open { background-color: #FCF8F3; display: block; width: 100%; margin: 0; padding-top: 15px; } .login-dropdown-dln.open > a { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); width: 100%; min-width: auto; margin: 0; padding: 15px 0; height: fit-content; } .login-dropdown-dln.open > a::before { width: 9px; height: 15px; right: 16px; top: 16px; } .login-dropdown-dln.open > a:hover::before, .login-dropdown-dln.open > a:focus::before{ right: 8px; } a.service-menue { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 18px; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); display:inline-block; height: 20px; line-height: 1.3; margin: 0 calc(0.25vw + 15px) 0 calc(0.25vw + 15px); } a.service-menue:after { display: block; content: ''; border-bottom: 2px solid #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 100ms ease-in-out; transition: transform 100ms ease-in-out; } a.service-menue { text-decoration: none !important; } a { color: var(--black); } a:hover, a:focus { color: var(--black); } a.main-menue-sub { color: var(--black); font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 18px; line-height: 21px; letter-spacing: 0.01rem; word-spacing: 0.025rem; text-decoration:none; display:inline-block; max-width: calc(100% - 35px); width: auto; margin-top: 5px; white-space: normal; } a.main-menue-sub:after { display: block; content: ''; height: 2px; margin-top: 2px; background-color: #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); transition: all 100ms ease-in-out; } h4 { margin: 0 0 12px -1px; max-width: 800px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); font-size: 24px; line-height: 28px; margin-left: -1px; } @media screen and (max-width: 1119px) { h4 { margin-left: 0px; } } @media screen and (max-width: 767px) { h4 { font-size: 21px; line-height: 25px; margin-left: 0px; } }
JS
DLN-Tile (Aufruf von Detailseite)
×
Schweizer Vertretungen im Ausland
Übersicht
Visumsvorschriften
Über uns
Kontakt
Startseite Kanton Bern
Max Mustermann
Mein Profil
Mein Postfach (3)
Abmelden
DE
|
FR
|
EN
Search-Area
CODE
×
HTML
<div class='search-area'> <div class='search-input-box'> <input value='' class='search' placeholder='Suche auf Website'> <img class='arrow-right' src='img/go-next.svg'> </div> <div class='search-suggests'> <a class='search-suggest a1'><b>Steuer</b>n</a> <a class='search-suggest'><b>Steuer</b>erklärung</a> <a class='search-suggest a2'><b>Steuer</b>n</a> <a class='search-suggest a3'>Online <b>Steuer</b>erklärung</a> <a class='search-suggest a4'><b>Steuer</b> Ratgeber</a> </div> </div>
CSS
@media screen and (max-width: 1119px) { div.search-area { background-color: rgba(247,233,210,1); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; margin-left: 30px; margin-right: 30px; padding-top: 10px; padding-bottom: 11px; padding-left: 11px; padding-right: 11px; margin-top: 0px; margin-bottom: 20px; } } @media screen and (max-width: 767px) { div.search-area { margin-left: 20px; margin-right: 20px; } } @media screen and (max-width: 1119px) { div.search-input-box { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } } @media screen and (max-width: 767px) { div.search-input-box { margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } } input.search { color: var(--black); border:none; font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 24px; line-height: 28px; letter-spacing: 0.01rem; word-spacing: 0.025rem; position:relative; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNjggMzY4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjggMzY4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjk2LjcsMjcyLjRMMjM2LjMsMjEyYzI0LjgtMzQuOCwyMS42LTgzLjMtOS41LTExNC41Yy0zNC44LTM0LjgtOTEuMi0zNC44LTEyNS45LDBzLTM0LjgsOTEuMiwwLDEyNS45DQoJYzMxLjIsMzEuMiw3OS43LDM0LjMsMTE0LjUsOS41bDYwLjQsNjAuNGM1LjgsNS44LDE1LjIsNS44LDIxLDBDMzAyLjUsMjg3LjYsMzAyLjUsMjc4LjIsMjk2LjcsMjcyLjR6IE0xMjEuOCwyMDIuNA0KCWMtMjMuMi0yMy4yLTIzLjItNjAuOCwwLTg0czYwLjgtMjMuMiw4NCwwczIzLjIsNjAuOCwwLDg0UzE0NSwyMjUuNiwxMjEuOCwyMDIuNHoiLz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; background-position: 20px center; background-size: 39px 39px; background-color:transparent; margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 5px; padding-right: 35px; padding-bottom: 5px; padding-left: 70px; width: 100%; max-width: none; height: 65px; } img.arrow-right { -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; width: 32px; height: 24px; } a.search-suggest { font-family: 'Roboto'; font-style: normal; font-weight: 300; font-size: 24px; line-height: 28px; color: var(--black); text-decoration:none; letter-spacing: 0.02rem; word-spacing: 0.05rem; display:block; padding-top: 10px; padding-right: 70px; padding-bottom: 10px; padding-left: 70px; width: 100%; } div.search-input-box > img.arrow-right { display: none; position: absolute; top: calc(50% - 12px); right: 24px; } img.arrow-right:hover, img.arrow-right:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } a.search-suggest:hover, a.search-suggest:focus { background-color: rgba(247,233,210,1); } @media screen and (max-width: 767px) { input.search { font-size: 21px; line-height: 25px; background-position: calc(100% - 7px) center; background-size: 36px 36px; padding-right: 50px; padding-left: 12px; height: 42px; } a.search-suggest { font-size: 21px; line-height: 25px; padding-right: 10px; padding-left: 10px; } div.search-input-box > img.arrow-right { margin-right: -12px; } } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Search-Area
×
Steuer
n
Steuer
erklärung
Steuer
n
Online
Steuer
erklärung
Steuer
Ratgeber