American Codes: Prosta dwukolumnowa KP

Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. (Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.) In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

KOD DO EFEKTU:

<div style="text-align: center; position: relative; margin-bottom: -30px; z-index: 9999999;">
<a class="zakladka" href="LINK DO ZAKŁADKI">zakładeczka</a>
<a class="zakladka" href="LINK DO ZAKŁADKI">zakładeczka</a>
<a class="zakladka" href="LINK DO ZAKŁADKI">zakładeczka</a>
</div>

<div class="zdjecie1">
<img src="LINK DO DUŻEGO ZDJĘCIA" />
</div>
<div class="zdjecie2">
<img src="LINK DO MAŁEGO ZDJĘCIA" />
</div>
<div class="name">
IMIĘ
</div>
<div class="text">
TREŚĆ CYTATU
</div>

<center>
<table style="margin-top: -7px;">
<tbody>
<tr>
<td align="justify" style="padding: 70px 20px 15px 20px; width: 330px; border-right: 1px solid #000;">
TREŚĆ KOLUMNY 1
</td>

<td align="justify" style="padding: 70px 20px 15px 20px; width: 330px; border-left: 1px solid #000;">
TREŚĆ KOLUMNY 2
</td>
</tr>
</tbody></table>
</center>

<div class="text2">
TREŚĆ TEKSTU NA DOLE
</div>

<style>
.zakladka {
display:inline-block;
background:#000;
color:#666!important;
padding:5px;
font-family: 'Cormorant Garamond', sans-serif;
font-size: 13px;
padding: 3px 20px;
text-align:center;
margin-top:1px;
margin-bottom:0px;}

.zakladka a {
color: #666!important;}

.zakladka:hover {
background: #666;
color: #000!important;}

.zakladka a:hover {
color: #000;}

.text2 {
text-align: justify;
border-top: 1px solid #000;
padding-top: 10px;
margin: 5px 20px;
font-size: 11px;}

.text {
font-family: 'Cormorant Garamond', sans-serif;
font-size: 12px;
line-height: 98%;
width: 245px;
position: absolute;
margin-left: 385px;
margin-top: -80px;
text-align: justify;
}

.name {
font-family: 'Cinzel Decorative', cursive;
font-size: 40px;
text-shadow: -2px 0px 0px #000;
position: absolute;
margin-top: -132px;}

.zdjecie2 img {
padding: 0px;
border-radius: 150px;
width: 150px;
border: 3px solid #000;}

.zdjecie2 {
margin-top: -78px;
position: relative;
text-align: center;}

.zdjecie1 img {
padding: 0px;
width: 680px;
opacity: 0.6;
border-top: 3px solid #000;
border-bottom: 1px solid #000;}

.zdjecie1 {
margin-left: -41px;}
</style>

<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative&display=swap" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Cormorant+Garamond&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

▪ Wartości, które możesz edytować zaznaczone są kolorem.
▪ Większe zdjęcie musi mieć szerokość minimum 680px.
▪ Mniejsze zdjęcie musi być kwadratowe (dowolnego rozmiaru).
▪ Szablon karty dostosowany jest do szablonu American Gods.

American Codes

AG

Strony

środa, 25 sierpnia 2021

Prosta dwukolumnowa KP

Brak komentarzy:

Prześlij komentarz