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

Tיו_

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

@Tיו_ לדעתי לא כתבת לפני תג HTML
כגון script או style

יש מצב לקצת יותר הסבר אני בור בזה
יישר כח

LEVI H

@Tיו_ בשמחה.
איך העתקת את התוכן של הקוד? העתק הדבק? רגיל?
אם כן, יש לך טעות קלה.
תוכן הקוד שהעתקת נתמך בלי תגית HTML רק כשהוא בתוך קובץ שמגדיר מהו, כגון קובץ css.

למעשה:
קח את הקוד שבקובץ css, ואל תדביק אותו ככה, אלא ככה:

<style>

פה תכניס את הקוד של הcss

</style>

ואת הjs תכניס ככה:

<script>

פה תכניס את הקוד של הjs

</script>

Tיו_

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

@Tיו_ בשמחה.
איך העתקת את התוכן של הקוד? העתק הדבק? רגיל?
אם כן, יש לך טעות קלה.
תוכן הקוד שהעתקת נתמך בלי תגית HTML רק כשהוא בתוך קובץ שמגדיר מהו, כגון קובץ css.

למעשה:
קח את הקוד שבקובץ css, ואל תדביק אותו ככה, אלא ככה:
<style>

פה תכניס את הקוד של הcss

</style>
ואת הjs תכניס ככה:
<script>

פה תכניס את הקוד של הjs

</script>

וואואו יישר כח זה עובד רק לא רואים את התמונה של הבאנר אבל לפחות זה עובד
אם היה אפשר אלף לייקים היית מקבל

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>

ספויילר

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;
}