AG

American Codes

czwartek, 26 sierpnia 2021

Przełączane dodatki

Nagłówek 1
Nagłówek 2
Nagłówek 3
Nagłówek 4
Nagłówek 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
KOD DO EFEKTU:
<div style="margin-left: 6px; margin-top: -5px; z-index: 999999999; position: relative;">
<span onclick="javascript:patonglet1()"><div class="choose" style="margin-top: -27px; margin-left: -35.5px;">Nagłówek 1</div></span>
<span onclick="javascript:patonglet2()"><div class="choose" style="margin-top: -27px; margin-left: 130px;">Nagłówek 2</div></span>
<span onclick="javascript:patonglet3()"><div class="choose" style="margin-top: -27px; margin-left: 295px;">Nagłówek 3</div></span>
<span onclick="javascript:patonglet4()"><div class="choose" style="margin-top: -27px; margin-left: 460px;">Nagłówek 4</div></span></div>

<div id="onglet1" style="display: block; text-align: justify;">
<div class="obraz">
<img src="LINK DO ZDJĘCIA1" /></div> <div class="tytuł">
Nagłówek 1
</div>

<div style="text-align: justify; margin-top: 20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div>

<div id="onglet2" style="display: none; text-align: justify;">
<div class="obraz">
<img src="LINK DO ZDJĘCIA 2" />
</div>
<div class="tytuł">
Nagłówek 2
</div>

<div style="text-align: justify; margin-top: 20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>

<div id="onglet3" style="display: none; text-align: justify;">
<div class="obraz">
<img src="LINK DO ZDJĘCIA 3" />
</div>
<div class="tytuł">
Nagłówek 3
</div>

<div style="text-align: justify; margin-top: 20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>


<div id="onglet4" style="display: none; text-align: justify;">
<div class="obraz">
<img src="LINK DO ZDJĘCIA 4" />
</div>
<div class="tytuł">
Nagłówek 4
</div>

<div style="text-align: justify; margin-top: 20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>





<style>
  
  .tytuł {
font-family: 'Cinzel', sans-serif; 
    font-size: 40px; 
    position: absolute; 
    margin-top: -40px; 
    margin-left: 0px; 
    text-shadow: -2px 0px 5px #000;}
  
  
  .obraz img {
  padding: 0px; 
    padding: 0px; 
    width: 680px; 
    opacity: 0.8;
    border-top: 1px solid #6d541c;
    -webkit-mask-image: radial-gradient(ellipse 150% 100% at 50% 0%, #000 0%, #0000 100%);
   }
  
  .obraz {
  text-align: center; 
    margin-left: -41px; 
    margin-top: 10px;
    position: relative;}
  
  .choose {
background: #232323; 
position: absolute; 
width: 144px; 
color: #F2C791; 
font-family: 'Cinzel', sans-serif; 
text-align: center; 
letter-spacing: 2px; 
font-size: 12px;
 transition:all 1s;
 -moz-transition:all 1s;
 -webkit-transition:all 1s;
nbsp;-o-transition:all 1s;
padding:8px;}

.choose:hover {
background: #59252E;
color: #F2C791;
 transition:all 1s;
 -moz-transition:all 1s;
 -webkit-transition:all 1s;
 -o-transition:all 1s;}
</style>


<script type="text/javascript"> 
function patonglet1() { 
document.getElementById('onglet1').style.display='block'; 
document.getElementById('onglet2').style.display='none'; 
document.getElementById('onglet3').style.display='none';
document.getElementById('onglet4').style.display='none'; 
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='none';
} 
function patonglet2() { 
document.getElementById('onglet1').style.display='none'; 
document.getElementById('onglet2').style.display='block'; 
document.getElementById('onglet3').style.display='none'; 
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='none';
} 
function patonglet3() { 
document.getElementById('onglet1').style.display='none'; 
document.getElementById('onglet2').style.display='none'; 
document.getElementById('onglet3').style.display='block'; 
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='none';
} 
function patonglet4() { 
document.getElementById('onglet1').style.display='none'; 
document.getElementById('onglet2').style.display='none'; 
document.getElementById('onglet3').style.display='none'; 
document.getElementById('onglet4').style.display='block';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='none';
}

function patonglet5() { 
document.getElementById('onglet1').style.display='none'; 
document.getElementById('onglet2').style.display='none'; 
document.getElementById('onglet3').style.display='none';
document.getElementById('onglet4').style.display='none'; 
document.getElementById('onglet5').style.display='block';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='none';
} 
function patonglet6() { 
document.getElementById('onglet1').style.display='none'; 
document.getElementById('onglet2').style.display='none'; 
document.getElementById('onglet3').style.display='none'; 
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='block';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='none';
} 
function patonglet7() { 
document.getElementById('onglet1').style.display='none'; 
document.getElementById('onglet2').style.display='none'; 
document.getElementById('onglet3').style.display='none'; 
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='block';
document.getElementById('onglet8').style.display='none';
} 
function patonglet8() { 
document.getElementById('onglet1').style.display='none'; 
document.getElementById('onglet2').style.display='none'; 
document.getElementById('onglet3').style.display='none'; 
document.getElementById('onglet4').style.display='none';
document.getElementById('onglet5').style.display='none';
document.getElementById('onglet6').style.display='none';
document.getElementById('onglet7').style.display='none';
document.getElementById('onglet8').style.display='block';
}

</script>


<link href='http://fonts.googleapis.com/css?family=Cinzel&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
▪ Wartości, które możesz edytować zaznaczone są kolorem.
▪ Zdjęcia powinny mieć szerokość minimum 680px.
Autor: o

Brak komentarzy:

Prześlij komentarz

Subskrybuj: Komentarze do posta (Atom)
Szablon wykonany przez Skipper. Obsługiwane przez usługę Blogger.