
<div class='lights_container'>
<main>
<div class='items'>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-0'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
אשכולות
</text>
<g clip-path='url(#clip-0)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/לכידה.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-1'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
למדם
</text>
<g clip-path='url(#clip-1)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/לכידה-1.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-2'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
קופודיל
</text>
<g clip-path='url(#clip-2)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/לכידה-2.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-3'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
פסיפס
</text>
<g clip-path='url(#clip-3)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/לכידה-5.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-4'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
PICK A DROSHO
</text>
<g clip-path='url(#clip-4)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/לכידה-4.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-5'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
חילוקא
</text>
<g clip-path='url(#clip-5)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/לכידה-6.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-6'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
Heart of Marriage
</text>
<g clip-path='url(#clip-6)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/לכידה-7.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-7'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
אסתר מילר
</text>
<g clip-path='url(#clip-7)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/לכידה-8.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-8'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
פנורמה
</text>
<g clip-path='url(#clip-8)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/לכידה-9.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-9'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
אתגר וחוויה
</text>
<g clip-path='url(#clip-9)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/לכידה-10.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-10'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
אמון הציבור
</text>
<g clip-path='url(#clip-10)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/לכידה-11.png'></image>
</g>
</svg>
</div>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-11'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
לוח חם
</text>
<g clip-path='url(#clip-11)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/לכידה-12.png'></image>
</g>
</svg>
</div>
</div>
</main>
</div>
<script>
var items = []
, point = document.querySelector('svg').createSVGPoint();
function getCoordinates(e, svg) {
point.x = e.clientX;
point.y = e.clientY;
return point.matrixTransform(svg.getScreenCTM().inverse());
}
function Item(config) {
Object.keys(config).forEach(function (item) {
this[item] = config[item];
}, this);
this.el.addEventListener('mousemove', this.mouseMoveHandler.bind(this));
this.el.addEventListener('touchmove', this.touchMoveHandler.bind(this));
}
Item.prototype = {
update: function update(c) {
this.clip.setAttribute('cx', c.x);
this.clip.setAttribute('cy', c.y);
},
mouseMoveHandler: function mouseMoveHandler(e) {
this.update(getCoordinates(e, this.svg));
},
touchMoveHandler: function touchMoveHandler(e) {
e.preventDefault();
var touch = e.targetTouches[0];
if (touch) return this.update(getCoordinates(touch, this.svg));
}
};
[].slice.call(document.querySelectorAll('.item'), 0).forEach(function (item, index) {
items.push(new Item({
el: item,
svg: item.querySelector('svg'),
clip: document.querySelector('#clip-'+index+' circle'),
}));
});
</script>
<style>
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
circle {
transform-origin: 50% 50%;
transform: scale(0);
transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.svg-text {
fill: white;
text-anchor: middle;
font-size: 25px;
}
image {
transform: scale(1.1);
transform-origin: 50% 50%;
transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.items {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.item {
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
width: 200px;
height: 150px;
margin: 5px;
cursor: pointer;
background-color: #3b3e46;
border-radius: 2px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.02), inset 0 0px 0px 1px rgba(0, 0, 0, 0.07);
transform: translateZ(0);
}
.item:hover circle,
.item:hover image {
transform: scale(1);
}
</style>
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-0'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'>
אשכולות
</text>
<g clip-path='url(#clip-0)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='https://appupgo.co.il/wp-content/uploads/2022/12/לכידה.png'></image>
</g>
</svg>
</div>
docs.google.com
מעכשיו, תהיו הראשונים לקבל את כל העדכונים, החדשות, ההפתעות בלעדיות, והתכנים הכי חמים שלנו בפרוג!
חלה שגיאה בשליחה. נסו שוב!
לוח לימודים
מסלולי לימוד שאפשר להצטרף
אליהם ממש עכשיו:
תהילים פרק כה
אלְדָוִד אֵלֶיךָ יי נַפְשִׁי אֶשָּׂא:באֱלֹהַי בְּךָ בָטַחְתִּי אַל אֵבוֹשָׁה אַל יַעַלְצוּ אֹיְבַי לִי:גגַּם כָּל קוֶֹיךָ לֹא יֵבֹשׁוּ יֵבֹשׁוּ הַבּוֹגְדִים רֵיקָם:דדְּרָכֶיךָ יי הוֹדִיעֵנִי אֹרְחוֹתֶיךָ לַמְּדֵנִי:ההַדְרִיכֵנִי בַאֲמִתֶּךָ וְלַמְּדֵנִי כִּי אַתָּה אֱלֹהֵי יִשְׁעִי אוֹתְךָ קִוִּיתִי כָּל הַיּוֹם:וזְכֹר רַחֲמֶיךָ יי וַחֲסָדֶיךָ כִּי מֵעוֹלָם הֵמָּה:זחַטֹּאות נְעוּרַי וּפְשָׁעַי אַל תִּזְכֹּר כְּחַסְדְּךָ זְכָר לִי אַתָּה לְמַעַן טוּבְךָ יי:חטוֹב וְיָשָׁר יי עַל כֵּן יוֹרֶה חַטָּאִים בַּדָּרֶךְ:טיַדְרֵךְ עֲנָוִים בַּמִּשְׁפָּט וִילַמֵּד עֲנָוִים דַּרְכּוֹ:יכָּל אָרְחוֹת יי חֶסֶד וֶאֱמֶת לְנֹצְרֵי בְרִיתוֹ וְעֵדֹתָיו:יאלְמַעַן שִׁמְךָ יי וְסָלַחְתָּ לַעֲוֹנִי כִּי רַב הוּא:יבמִי זֶה הָאִישׁ יְרֵא יי יוֹרֶנּוּ בְּדֶרֶךְ יִבְחָר:יגנַפְשׁוֹ בְּטוֹב תָּלִין וְזַרְעוֹ יִירַשׁ אָרֶץ:ידסוֹד יי לִירֵאָיו וּבְרִיתוֹ לְהוֹדִיעָם:טועֵינַי תָּמִיד אֶל יי כִּי הוּא יוֹצִיא מֵרֶשֶׁת רַגְלָי:טזפְּנֵה אֵלַי וְחָנֵּנִי כִּי יָחִיד וְעָנִי אָנִי:יזצָרוֹת לְבָבִי הִרְחִיבוּ מִמְּצוּקוֹתַי הוֹצִיאֵנִי:יחרְאֵה עָנְיִי וַעֲמָלִי וְשָׂא לְכָל חַטֹּאותָי:יטרְאֵה אוֹיְבַי כִּי רָבּוּ וְשִׂנְאַת חָמָס שְׂנֵאוּנִי:כשָׁמְרָה נַפְשִׁי וְהַצִּילֵנִי אַל אֵבוֹשׁ כִּי חָסִיתִי בָךְ:כאתֹּם וָיֹשֶׁר יִצְּרוּנִי כִּי קִוִּיתִיךָ:כבפְּדֵה אֱלֹהִים אֶת יִשְׂרָאֵל מִכֹּל צָרוֹתָיו:
הנושאים החמים

Reactions: שטוב1 //