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

[LEVI H]

@Tיו_ תעלה גם את התמונה שנמצאת בgit לתוך האתר שלך, ותשנה בקוד html את נתיב התמונה.
(או שתעלה פה רגע צילום מסך של הכל הקוד שהעלת באתר שלך)

[Tיו_]

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

@Tיו_ תעלה גם את התמונה שנמצאת בgit לתוך האתר שלך, ותשנה בקוד html את נתיב התמונה.
(או שתעלה פה רגע צילום מסך של הכל הקוד שהעלת באתר שלך)

אני לא יכול לשלוח צילומסך כי הקוד נימצא בריבוע קטן אם אני יעשה העתק הדבק זה בסדר?

[LEVI H]

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

[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>

Spoiler

ספויילר

[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>

Spoiler

ספויילר

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

[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יו_

Spoiler

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

[Tיו_]

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

@Tיו_

Spoiler

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

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

Spoiler

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

[צבי דורש ציון]

@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%.
יש לו שקיפות מסויימת, שמאפשרת לראות מה יש מתחתיו.
כתבתי שלדעתי צריך להגביר קצת את רמת האטימות.