שיתוף | פופאפ לזכרון בית המקדש - לבעלי אתרים

Tיו_

@LEVI-H כתב בשיתוף | פופאפ לזכרון בית המקדש - לבעלי אתרים:

@Tיו_ כן, מעולה.

<style>
 
@import url('https://fonts.googleapis.com/css2?family=Bona+Nova+SC&display=swap');

:root {
    --background-color: #ffffff;
    --overlay-background: rgba(114, 42, 42, 0.5);
    --border-color: #444;
    --text-color: #ffffff;
    --highlight-color: #ffffff;
    --secondary-text-color: #bbb;
    --shadow-color: rgba(255, 255, 255, 0.1);
    --overlay-opacity: 0.5;
    --unit-background-color: rgba(142, 136, 136, 0.5);
}

body {
    background-color: var(--background-color);
    margin: 0;
    font-family: 'Bona Nova SC', Arial, sans-serif;
    color: var(--text-color);
}

#popup-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--overlay-background);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
    max-width: 350px;
    width: auto;
    height: auto;
    box-sizing: border-box;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: translateY(-10px);
}

#popup-container:hover {
    transform: translateY(-15px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
}

#popup-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('בית המקדש.jpg');
    background-size: cover;
    background-position: center;
    mix-blend-mode: overlay;
    opacity: var(--overlay-opacity);
    z-index: 0;
    border-radius: 15px;
    filter: blur(1px);
}

#close-btn {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: transparent;
    border: none;
    color: var(--text-color);
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
}

#temple-counter {
    position: relative;
    z-index: 1;
}

#temple-counter h2 {
    color: var(--highlight-color);
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.time-unit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    flex-direction: row-reverse;
}

.unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;
}

.unit-title {
    font-size: 12px;
    color: var(--secondary-text-color);
    margin-top: 4px;
}

.unit-value-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.unit-value {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 5px;
    border-radius: 6px;
    background-color: var(--unit-background-color);
    font-family: 'Digital-7', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    min-width: 20px;
    width: 20px;
    margin: 0 1px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box;
}

.colon {
    font-size: 16px;
    line-height: 30px;
    font-family: 'Digital-7', Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    margin: 0 2px;
    position: relative;
    top: -8px;
}

.action {
    font-size: 14px;
    color: var(--highlight-color);
    margin-top: 10px;
    text-transform: uppercase;
    font-weight: 700;
}

@media (max-width: 480px) {
    #popup-container {
        width: 90vw;
        padding: 5px;
        right: 5vw;
    }

    .unit-value {
        font-size: 16px;
        height: auto;
    }

    .colon {
        font-size: 14px;
        line-height: 16px;
    }
}
 
</style>
<script>
 
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'style.css';
document.head.appendChild(link);

const popupContainer = document.createElement('div');
popupContainer.id = 'popup-container';

popupContainer.innerHTML = `
    <div id="popup-background"></div>
    <button id="close-btn" onclick="closePopup()" aria-label="סגור">✕</button>
    <div id="temple-counter">
        <h2>זמן שחלף מאז חורבן בית המקדש</h2>
        <div class="time-unit" id="time-units-container"></div>
        <div class="action">"והראנו בבניינו ושמחנו בתיקונו"</div>
    </div>
`;

document.body.appendChild(popupContainer);


const DESTRUCTION_YEAR = 70;

function getTishaBAvDate(year) {
    return new Date(year, 7, 12);
}

function calculateTimeSinceDestruction() {
    const today = new Date();
    const tishaBAvDate = getTishaBAvDate(today.getFullYear());
    const timeSinceDestruction = today - tishaBAvDate;
    const daysSinceDestruction = Math.floor(timeSinceDestruction / (1000 * 60 * 60 * 24)) - 1;
    const yearsSinceDestruction = today.getFullYear() - DESTRUCTION_YEAR;

    const times = {
        days: daysSinceDestruction,
        years: yearsSinceDestruction,
    };

    const timeUnitsContainer = document.getElementById('time-units-container');
    timeUnitsContainer.innerHTML = '';


    const TIME_UNITS = ['days', 'years'];

    TIME_UNITS.forEach((unit, index) => {
        let unitValue = times[unit].toString().padStart(2, '0');

        const unitContainer = document.createElement('div');
        unitContainer.classList.add('unit');

        const valueContainer = document.createElement('div');
        valueContainer.classList.add('unit-value-container');

        unitValue.split('').forEach(number => {
            const numberElement = document.createElement('div');
            numberElement.classList.add('unit-value');
            numberElement.textContent = number;
            valueContainer.appendChild(numberElement);
        });

        unitContainer.appendChild(valueContainer);

        const titleElement = document.createElement('div');
        titleElement.classList.add('unit-title');
        titleElement.textContent = unit === 'years' ? 'שנים' : 'ימים';

        unitContainer.appendChild(titleElement);
        timeUnitsContainer.appendChild(unitContainer);

        if (index < TIME_UNITS.length - 1) {
            const colonElement = document.createElement('div');
            colonElement.classList.add('colon');
            colonElement.textContent = ':';
            timeUnitsContainer.appendChild(colonElement);
        }
    });

    requestAnimationFrame(calculateTimeSinceDestruction);
}

calculateTimeSinceDestruction();

function closePopup() {
    const popupContainer = document.getElementById('popup-container');
    if (popupContainer) {
        popupContainer.style.display = 'none';
    }
}
 
</script>

LEVI H

זה הקוד שלך:
תעלה את התמונה לאתר, תעתיק את כתובת התמונה, ותכניס בקוד במקום המסומן לכך:

<style>

#popup-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('נתיב-התמונה');
    background-size: cover;
    background-position: center;
    mix-blend-mode: overlay;
    opacity: var(--overlay-opacity);
    z-index: 0;
    border-radius: 15px;
    filter: blur(1px);
}

 
@import url('https://fonts.googleapis.com/css2?family=Bona+Nova+SC&display=swap');
 
:root {
    --background-color: #ffffff;
    --overlay-background: rgba(114, 42, 42, 0.5);
    --border-color: #444;
    --text-color: #ffffff;
    --highlight-color: #ffffff;
    --secondary-text-color: #bbb;
    --shadow-color: rgba(255, 255, 255, 0.1);
    --overlay-opacity: 0.5;
    --unit-background-color: rgba(142, 136, 136, 0.5);
}
 
body {
    background-color: var(--background-color);
    margin: 0;
    font-family: 'Bona Nova SC', Arial, sans-serif;
    color: var(--text-color);
}
 
#popup-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--overlay-background);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
    max-width: 350px;
    width: auto;
    height: auto;
    box-sizing: border-box;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: translateY(-10px);
}
 
#popup-container:hover {
    transform: translateY(-15px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
}
 

 
#close-btn {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: transparent;
    border: none;
    color: var(--text-color);
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
}
 
#temple-counter {
    position: relative;
    z-index: 1;
}
 
#temple-counter h2 {
    color: var(--highlight-color);
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 1.2;
}
 
.time-unit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    flex-direction: row-reverse;
}
 
.unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;
}
 
.unit-title {
    font-size: 12px;
    color: var(--secondary-text-color);
    margin-top: 4px;
}
 
.unit-value-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
 
.unit-value {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 5px;
    border-radius: 6px;
    background-color: var(--unit-background-color);
    font-family: 'Digital-7', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    min-width: 20px;
    width: 20px;
    margin: 0 1px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box;
}
 
.colon {
    font-size: 16px;
    line-height: 30px;
    font-family: 'Digital-7', Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    margin: 0 2px;
    position: relative;
    top: -8px;
}
 
.action {
    font-size: 14px;
    color: var(--highlight-color);
    margin-top: 10px;
    text-transform: uppercase;
    font-weight: 700;
}
 
@media (max-width: 480px) {
    #popup-container {
        width: 90vw;
        padding: 5px;
        right: 5vw;
    }
 
    .unit-value {
        font-size: 16px;
        height: auto;
    }
 
    .colon {
        font-size: 14px;
        line-height: 16px;
    }
}
 
</style>
<script>
 
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'style.css';
document.head.appendChild(link);
 
const popupContainer = document.createElement('div');
popupContainer.id = 'popup-container';
 
popupContainer.innerHTML = `
    <div id="popup-background"></div>
    <button id="close-btn" onclick="closePopup()" aria-label="סגור">✕</button>
    <div id="temple-counter">
        <h2>זמן שחלף מאז חורבן בית המקדש</h2>
        <div class="time-unit" id="time-units-container"></div>
        <div class="action">"והראנו בבניינו ושמחנו בתיקונו"</div>
    </div>
`;
 
document.body.appendChild(popupContainer);
 
 
const DESTRUCTION_YEAR = 70;
 
function getTishaBAvDate(year) {
    return new Date(year, 7, 12);
}
 
function calculateTimeSinceDestruction() {
    const today = new Date();
    const tishaBAvDate = getTishaBAvDate(today.getFullYear());
    const timeSinceDestruction = today - tishaBAvDate;
    const daysSinceDestruction = Math.floor(timeSinceDestruction / (1000 * 60 * 60 * 24)) - 1;
    const yearsSinceDestruction = today.getFullYear() - DESTRUCTION_YEAR;
 
    const times = {
        days: daysSinceDestruction,
        years: yearsSinceDestruction,
    };
 
    const timeUnitsContainer = document.getElementById('time-units-container');
    timeUnitsContainer.innerHTML = '';
 
 
    const TIME_UNITS = ['days', 'years'];
 
    TIME_UNITS.forEach((unit, index) => {
        let unitValue = times[unit].toString().padStart(2, '0');
 
        const unitContainer = document.createElement('div');
        unitContainer.classList.add('unit');
 
        const valueContainer = document.createElement('div');
        valueContainer.classList.add('unit-value-container');
 
        unitValue.split('').forEach(number => {
            const numberElement = document.createElement('div');
            numberElement.classList.add('unit-value');
            numberElement.textContent = number;
            valueContainer.appendChild(numberElement);
        });
 
        unitContainer.appendChild(valueContainer);
 
        const titleElement = document.createElement('div');
        titleElement.classList.add('unit-title');
        titleElement.textContent = unit === 'years' ? 'שנים' : 'ימים';
 
        unitContainer.appendChild(titleElement);
        timeUnitsContainer.appendChild(unitContainer);
 
        if (index < TIME_UNITS.length - 1) {
            const colonElement = document.createElement('div');
            colonElement.classList.add('colon');
            colonElement.textContent = ':';
            timeUnitsContainer.appendChild(colonElement);
        }
    });
 
    requestAnimationFrame(calculateTimeSinceDestruction);
}
 
calculateTimeSinceDestruction();
 
function closePopup() {
    const popupContainer = document.getElementById('popup-container');
    if (popupContainer) {
        popupContainer.style.display = 'none';
    }
}
 
</script>

ספויילר

Tיו_

@LEVI-H כתב בשיתוף | פופאפ לזכרון בית המקדש - לבעלי אתרים:

זה הקוד שלך:
תעלה את התמונה לאתר, תעתיק את כתובת התמונה, ותכניס בקוד במקום המסומן לכך:

<style>

#popup-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('נתיב-התמונה');
    background-size: cover;
    background-position: center;
    mix-blend-mode: overlay;
    opacity: var(--overlay-opacity);
    z-index: 0;
    border-radius: 15px;
    filter: blur(1px);
}

 
@import url('https://fonts.googleapis.com/css2?family=Bona+Nova+SC&display=swap');
 
:root {
    --background-color: #ffffff;
    --overlay-background: rgba(114, 42, 42, 0.5);
    --border-color: #444;
    --text-color: #ffffff;
    --highlight-color: #ffffff;
    --secondary-text-color: #bbb;
    --shadow-color: rgba(255, 255, 255, 0.1);
    --overlay-opacity: 0.5;
    --unit-background-color: rgba(142, 136, 136, 0.5);
}
 
body {
    background-color: var(--background-color);
    margin: 0;
    font-family: 'Bona Nova SC', Arial, sans-serif;
    color: var(--text-color);
}
 
#popup-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--overlay-background);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
    max-width: 350px;
    width: auto;
    height: auto;
    box-sizing: border-box;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: translateY(-10px);
}
 
#popup-container:hover {
    transform: translateY(-15px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
}
 

 
#close-btn {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: transparent;
    border: none;
    color: var(--text-color);
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
}
 
#temple-counter {
    position: relative;
    z-index: 1;
}
 
#temple-counter h2 {
    color: var(--highlight-color);
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 1.2;
}
 
.time-unit {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    flex-direction: row-reverse;
}
 
.unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;
}
 
.unit-title {
    font-size: 12px;
    color: var(--secondary-text-color);
    margin-top: 4px;
}
 
.unit-value-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
 
.unit-value {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 5px;
    border-radius: 6px;
    background-color: var(--unit-background-color);
    font-family: 'Digital-7', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    min-width: 20px;
    width: 20px;
    margin: 0 1px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    box-sizing: border-box;
}
 
.colon {
    font-size: 16px;
    line-height: 30px;
    font-family: 'Digital-7', Arial, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    margin: 0 2px;
    position: relative;
    top: -8px;
}
 
.action {
    font-size: 14px;
    color: var(--highlight-color);
    margin-top: 10px;
    text-transform: uppercase;
    font-weight: 700;
}
 
@media (max-width: 480px) {
    #popup-container {
        width: 90vw;
        padding: 5px;
        right: 5vw;
    }
 
    .unit-value {
        font-size: 16px;
        height: auto;
    }
 
    .colon {
        font-size: 14px;
        line-height: 16px;
    }
}
 
</style>
<script>
 
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'style.css';
document.head.appendChild(link);
 
const popupContainer = document.createElement('div');
popupContainer.id = 'popup-container';
 
popupContainer.innerHTML = `
    <div id="popup-background"></div>
    <button id="close-btn" onclick="closePopup()" aria-label="סגור">✕</button>
    <div id="temple-counter">
        <h2>זמן שחלף מאז חורבן בית המקדש</h2>
        <div class="time-unit" id="time-units-container"></div>
        <div class="action">"והראנו בבניינו ושמחנו בתיקונו"</div>
    </div>
`;
 
document.body.appendChild(popupContainer);
 
 
const DESTRUCTION_YEAR = 70;
 
function getTishaBAvDate(year) {
    return new Date(year, 7, 12);
}
 
function calculateTimeSinceDestruction() {
    const today = new Date();
    const tishaBAvDate = getTishaBAvDate(today.getFullYear());
    const timeSinceDestruction = today - tishaBAvDate;
    const daysSinceDestruction = Math.floor(timeSinceDestruction / (1000 * 60 * 60 * 24)) - 1;
    const yearsSinceDestruction = today.getFullYear() - DESTRUCTION_YEAR;
 
    const times = {
        days: daysSinceDestruction,
        years: yearsSinceDestruction,
    };
 
    const timeUnitsContainer = document.getElementById('time-units-container');
    timeUnitsContainer.innerHTML = '';
 
 
    const TIME_UNITS = ['days', 'years'];
 
    TIME_UNITS.forEach((unit, index) => {
        let unitValue = times[unit].toString().padStart(2, '0');
 
        const unitContainer = document.createElement('div');
        unitContainer.classList.add('unit');
 
        const valueContainer = document.createElement('div');
        valueContainer.classList.add('unit-value-container');
 
        unitValue.split('').forEach(number => {
            const numberElement = document.createElement('div');
            numberElement.classList.add('unit-value');
            numberElement.textContent = number;
            valueContainer.appendChild(numberElement);
        });
 
        unitContainer.appendChild(valueContainer);
 
        const titleElement = document.createElement('div');
        titleElement.classList.add('unit-title');
        titleElement.textContent = unit === 'years' ? 'שנים' : 'ימים';
 
        unitContainer.appendChild(titleElement);
        timeUnitsContainer.appendChild(unitContainer);
 
        if (index < TIME_UNITS.length - 1) {
            const colonElement = document.createElement('div');
            colonElement.classList.add('colon');
            colonElement.textContent = ':';
            timeUnitsContainer.appendChild(colonElement);
        }
    });
 
    requestAnimationFrame(calculateTimeSinceDestruction);
}
 
calculateTimeSinceDestruction();
 
function closePopup() {
    const popupContainer = document.getElementById('popup-container');
    if (popupContainer) {
        popupContainer.style.display = 'none';
    }
}
 
</script>

ספויילר

ואיך אני מעלה לאתר את התמונה כלומר איפה אני מניח אותה?

LEVI H

@Tיו_ איפה שאתה רוצה, אתה יכול להוסיף אותה לאתר בכל מקום.
העיקר שהיא תעלה לאתר, ותעתיק את הכתובת שלה.
לחילופים תוכל לנסות להדביק את הקישור ישר מגיטאב:
https://moshelavi.github.io/beit-amikdash/beit amikdash script/בית המקדש.jpg

Tיו_

@LEVI-H כתב בשיתוף | פופאפ לזכרון בית המקדש - לבעלי אתרים:

@Tיו_ איפה שאתה רוצה, אתה יכול להוסיף אותה לאתר בכל מקום.
העיקר שהיא תעלה לאתר, ותעתיק את הכתובת שלה.
לחילופים תוכל לנסות להדביק את הקישור ישר מגיטאב:
https://moshelavi.github.io/beit-amikdash/beit amikdash script/בית המקדש.jpg

עובד יישר כח אלוףףף

LEVI H

@Tיו_ מעולה.

צבי דורש ציון

@Tיו_

מותר לבקש לראות את זה באתר?
אתה כמובן לא חייב... אבל אשמח לקישור

Tיו_

@צבי-דורש-ציון כתב בשיתוף | פופאפ לזכרון בית המקדש - לבעלי אתרים:

@Tיו_

מותר לבקש לראות את זה באתר?
אתה כמובן לא חייב... אבל אשמח לקישור

WWW.החנותשלרכסים.COM
אם זה נוגד את חוקי הפורום אני ימחק

האתר לא עובד עדיין בשורות טובות לרכסים בקרוב

צבי דורש ציון

@Tיו_ ממש מחמם את הלב...

צדיק וטוב לו 0

@צבי-דורש-ציון לדעתי צריך להגביר קצת את האטימות של התמונה בבאנר.
תשים לב למשל באתר ש @Tיו_ הביא, אם אתה גולל וזה יוצא על מקומות עם תמונות אחרות או מלל אחר - זה יוצא קצת לא ברור.

יוניתזון

@צדיק-וטוב-לו-0 כתב בשיתוף | פופאפ לזכרון בית המקדש - לבעלי אתרים:

@צבי-דורש-ציון לדעתי צריך להגביר קצת את האטימות של התמונה בבאנר.
תשים לב למשל באתר ש @Tיו_ הביא, אם אתה גולל וזה יוצא על מקומות עם תמונות אחרות או מלל אחר - זה יוצא קצת לא ברור.

נכון

טופטופיסט

@Tיו_
המספרים הפוכים אם לא שמת לב...

Tיו_

@טופטופיסט כתב בשיתוף | פופאפ לזכרון בית המקדש - לבעלי אתרים:

@Tיו_
המספרים הפוכים אם לא שמת לב...

שמתי לב אבל לא היה לי זמן לשאול איך מסדרים את זה

טופטופיסט

@Tיו_
תנסה להגדיר את unit-value-container
לכך:

.unit-value-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}

Tיו_

@טופטופיסט כתב בשיתוף | פופאפ לזכרון בית המקדש - לבעלי אתרים:

@Tיו_
תנסה להגדיר את unit-value-container
לכך:
.unit-value-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
}

עשיתי תוקן
יישר כח

צבי דורש ציון

@צדיק-וטוב-לו-0 כתב בשיתוף | פופאפ לזכרון בית המקדש - לבעלי אתרים:

@צבי-דורש-ציון לדעתי צריך להגביר קצת את האטימות של התמונה בבאנר.
תשים לב למשל באתר ש @Tיו_ הביא, אם אתה גולל וזה יוצא על מקומות עם תמונות אחרות או מלל אחר - זה יוצא קצת לא ברור.

לא בדיוק הבנתי, אבל עכ"פ צריך לומר הערות על זה ל @טופטופיסט המיוחד שעשה את זה.

מה שאני חשבתי אולי להעיר, שכשסוגרים את זה אבל עוברים למשהו אחר באתר, זה חוזר, נראה לי שאפשר לעשות שזה יהי' רק על העמוד הראשי, כך זה לדוגמא באתר של עריית ירושלים (בשל החטופים) מעניין באמת לבדוק באתרים נוספים איך הם שמו את של החטופים.

צדיק וטוב לו 0

@צבי-דורש-ציון כתב בשיתוף | פופאפ לזכרון בית המקדש - לבעלי אתרים:

לא בדיוק הבנתי, אבל עכ"פ צריך לומר הערות על זה ל @טופטופיסט המיוחד שעשה את זה.

מה יש פה להבין?
הבאנר הוא לא 'אטום' 100%.
יש לו שקיפות מסויימת, שמאפשרת לראות מה יש מתחתיו.
כתבתי שלדעתי צריך להגביר קצת את רמת האטימות.

צבי דורש ציון

@צדיק-וטוב-לו-0 אה, דווקא אני אהבתי את הקטע הזה של השקיפות...

צדיק וטוב לו 0

@צבי-דורש-ציון לא אמרתי לבטל לגמרי.
אלא לשנות קצת את האחוזים.
תגלול באתר ההוא, ותבין.

טופטופיסט

אני חושב שזה עניין של טעם.
בכ"א זה צריך להיות בצורה שלא תפריע לחווית המשתמש.
חשבתי לעשות שזה יהיה ניתן להזזה עם העכבר, אבל גם זה לא נוח.
אדרבה אם יש למישהו רעיון שיציע.