<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Cloneable 🇹🇬</title>
    <description>The latest articles on Forem by Cloneable 🇹🇬 (@cloneableteam).</description>
    <link>https://forem.com/cloneableteam</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F691885%2Fe35d68af-0c05-4344-99b3-04797a3aded9.jpeg</url>
      <title>Forem: Cloneable 🇹🇬</title>
      <link>https://forem.com/cloneableteam</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/cloneableteam"/>
    <language>en</language>
    <item>
      <title>Orange Dot Patterned Position Opposition</title>
      <dc:creator>Cloneable 🇹🇬</dc:creator>
      <pubDate>Wed, 08 Sep 2021 04:39:17 +0000</pubDate>
      <link>https://forem.com/cloneableteam/orange-dot-patterned-position-opposition-596d</link>
      <guid>https://forem.com/cloneableteam/orange-dot-patterned-position-opposition-596d</guid>
      <description>&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/cloneableteam/embed/BaZpWBL?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h3&gt;
  
  
  Only free to use
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nt"&gt;body&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;crimson&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;background-image&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;radial-gradient&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;circle&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="no"&gt;darkorange&lt;/span&gt; &lt;span class="m"&gt;46%&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;transparent&lt;/span&gt; &lt;span class="m"&gt;10%&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; 
  &lt;span class="n"&gt;radial-gradient&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;circle&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="no"&gt;orange&lt;/span&gt; 
  &lt;span class="m"&gt;46%&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;transparent&lt;/span&gt; &lt;span class="m"&gt;10%&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nl"&gt;background-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;50px&lt;/span&gt; &lt;span class="m"&gt;100px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;background-position&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="m"&gt;40px&lt;/span&gt; &lt;span class="m"&gt;60px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>css</category>
      <category>basecs</category>
    </item>
    <item>
      <title>Photomosh</title>
      <dc:creator>Cloneable 🇹🇬</dc:creator>
      <pubDate>Tue, 07 Sep 2021 19:53:32 +0000</pubDate>
      <link>https://forem.com/cloneableteam/photomosh-3pi2</link>
      <guid>https://forem.com/cloneableteam/photomosh-3pi2</guid>
      <description>&lt;h1&gt;
  
  
  What is Photomosh?
&lt;/h1&gt;

&lt;p&gt;Photomosh &lt;b&gt;let’s you glitch images, videos, and webCam using WebGL effects&lt;/b&gt;. Save as a output as image, GIF or video.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dataLayer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dataLayer&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;gtag&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="nx"&gt;dataLayer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arguments&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;gtag&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;js&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;

&lt;span class="nx"&gt;gtag&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="nx"&gt;UA&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;249692&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;24&lt;/span&gt;&lt;span class="err"&gt;’&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Is PhotoMosh free?
&lt;/h1&gt;

&lt;p&gt;PhotoMosh-Pro is a one-time purchase with &lt;b&gt;no recurring fees.&lt;/b&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  What Output Formats do?
&lt;/h1&gt;

&lt;p&gt;Output saves with same size &amp;amp; duration as input with the following limits: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;JPG - 2048 x 2048 px max size.&lt;/li&gt;
&lt;li&gt;GIF - 640 x 640 px max size. 4 seconds max duration. 20 FPS.&lt;/li&gt;
&lt;li&gt;WEB- 1280 X 1280 px max size. 4 seconds max duration. 10 MBPS Data Rate.

&lt;ul&gt;
&lt;li&gt;WEBM output required with only Chrome or      Firefox.&lt;/li&gt;
&lt;li&gt;WEBM videos may be viewed in the browser or Using &lt;a href="https://www.videolan.org/vlc/index.html"&gt;VLC&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Convert WEBM to MP4 using &lt;a href="https://handbrake.fr"&gt;Handbrake&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  What Requirements?
&lt;/h1&gt;

&lt;ul&gt;
&lt;li&gt;PhotoMosh requires a recent device with good WebGL capabilities.&lt;/li&gt;
&lt;li&gt;Render quality is only limited by our devices and an GPU speed. Processed large images or videos may make your computer unresponsive or even crash the browser.&lt;/li&gt;
&lt;li&gt;
&lt;a href="//www.google.com/chrome/fast-and-secure/"&gt;Chrome&lt;/a&gt; recommended.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>html</category>
      <category>css</category>
      <category>javascript</category>
      <category>devops</category>
    </item>
    <item>
      <title>earthbound-generator</title>
      <dc:creator>Cloneable 🇹🇬</dc:creator>
      <pubDate>Tue, 07 Sep 2021 16:55:50 +0000</pubDate>
      <link>https://forem.com/cloneableteam/earthbound-generator-4okc</link>
      <guid>https://forem.com/cloneableteam/earthbound-generator-4okc</guid>
      <description>&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/LydianLights/embed/BaNLgmJ?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;br&gt;
By @LydianLights&lt;/p&gt;

</description>
      <category>codepen</category>
      <category>javascript</category>
      <category>database</category>
    </item>
    <item>
      <title>Video Box Hover</title>
      <dc:creator>Cloneable 🇹🇬</dc:creator>
      <pubDate>Tue, 07 Sep 2021 16:02:15 +0000</pubDate>
      <link>https://forem.com/cloneableteam/video-box-hover-3dmd</link>
      <guid>https://forem.com/cloneableteam/video-box-hover-3dmd</guid>
      <description>&lt;h2&gt;Video Sources&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://youtu.be/8gToIyAlYgg"&gt;Ami and Yumi cries&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://youtu.be/2eXCKFMzg2w"&gt;How To Make a Big Mac&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://youtu.be/QcBkDYlVbF0"&gt;QToons! Intro in Radioup V23.15&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/cloneableteam/embed/BaZQYNO?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Today we’re gonna be showing How to Code a Video Box with any hover on it.&lt;/p&gt;

&lt;p&gt;So here is the example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;“vvh-kit”&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;“https://img.youtube.com/vi/QcBkDYlVbF0/maxresdefault.jpg”&lt;/span&gt; &lt;span class="na"&gt;width=&lt;/span&gt;&lt;span class="s"&gt;“224”&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;span&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;“title”&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;style=&lt;/span&gt;&lt;span class="s"&gt;“font-family:&lt;/span&gt; &lt;span class="err"&gt;‘&lt;/span&gt;&lt;span class="na"&gt;Gotham&lt;/span&gt; &lt;span class="na"&gt;Bold&lt;/span&gt;&lt;span class="err"&gt;’;&lt;/span&gt; &lt;span class="na"&gt;margin-top:&lt;/span&gt; &lt;span class="err"&gt;3&lt;/span&gt;&lt;span class="na"&gt;px&lt;/span&gt;&lt;span class="err"&gt;;”&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;(REMAKE) QToons! Intro in Radioup V23.15&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&amp;lt;/span&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;font&lt;/span&gt; &lt;span class="na"&gt;size=&lt;/span&gt;&lt;span class="s"&gt;“1.6”&lt;/span&gt; &lt;span class="na"&gt;color=&lt;/span&gt;&lt;span class="s"&gt;“gray”&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt; 117 views • 4 months ago&lt;span class="nt"&gt;&amp;lt;/font&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;br&amp;gt;&amp;lt;font&lt;/span&gt; &lt;span class="na"&gt;size=&lt;/span&gt;&lt;span class="s"&gt;“1.6”&lt;/span&gt; &lt;span class="na"&gt;color=&lt;/span&gt;&lt;span class="s"&gt;“gray”&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;i&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;“material-icons&lt;/span&gt; &lt;span class="na"&gt;calendar&lt;/span&gt;&lt;span class="err"&gt;”&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;calendar_today&lt;span class="nt"&gt;&amp;lt;/i&amp;gt;&lt;/span&gt; May 01, 2021&lt;span class="nt"&gt;&amp;lt;/font&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Setup VVH-Kit
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight scss"&gt;&lt;code&gt;&lt;span class="nc"&gt;.vvh-kit&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="nl"&gt;background&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;white&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;inline-block&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nl"&gt;text-align&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;left&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nl"&gt;box-shadow&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;4&lt;/span&gt;&lt;span class="mi"&gt;.2px&lt;/span&gt; &lt;span class="m"&gt;4&lt;/span&gt;&lt;span class="mi"&gt;.2px&lt;/span&gt; &lt;span class="m"&gt;7px&lt;/span&gt; &lt;span class="no"&gt;darkslategray&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nl"&gt;padding&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;9px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nl"&gt;border-radius&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;6px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="na"&gt;max-inline-size&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;225px&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nl"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;brightness&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;100%&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
   &lt;span class="nl"&gt;transition&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;filter&lt;/span&gt; &lt;span class="m"&gt;0&lt;/span&gt;&lt;span class="mi"&gt;.07s&lt;/span&gt; &lt;span class="n"&gt;ease-in&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="nc"&gt;.vvh-kit&lt;/span&gt;&lt;span class="nd"&gt;:hover&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="nl"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nf"&gt;brightness&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;80%&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>html</category>
      <category>css</category>
      <category>devops</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Telefe Logo Recreation</title>
      <dc:creator>Cloneable 🇹🇬</dc:creator>
      <pubDate>Mon, 06 Sep 2021 01:07:00 +0000</pubDate>
      <link>https://forem.com/cloneableteam/telefe-logo-recreation-5071</link>
      <guid>https://forem.com/cloneableteam/telefe-logo-recreation-5071</guid>
      <description>&lt;h3&gt;Go to &lt;a href="https://telefe.com"&gt;Telefe&lt;/a&gt; for more details.&lt;/h3&gt;




&lt;h2&gt;🔵🟢🔴 Telefe&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Telefe&lt;/strong&gt; is a television station located in &lt;a href="http://fumacrom.com/23H5k"&gt;Buenos Aires&lt;/a&gt;, Argentina. The station is owned and operated by &lt;strong&gt;ViacomCBS&lt;/strong&gt; Through Televisión Federal S.A. Telefe is also one of Argentina’s six nation television network.&lt;/p&gt;




&lt;p&gt;Our Founder is Héctor Grandiñettí.&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/cloneableteam/embed/abwmxve?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>codepen</category>
    </item>
    <item>
      <title>Font Weights</title>
      <dc:creator>Cloneable 🇹🇬</dc:creator>
      <pubDate>Mon, 23 Aug 2021 13:33:49 +0000</pubDate>
      <link>https://forem.com/cloneableteam/font-weights-40oh</link>
      <guid>https://forem.com/cloneableteam/font-weights-40oh</guid>
      <description>&lt;p&gt;Our font weights can be worked with a CSS Code.&lt;/p&gt;

&lt;p&gt;&lt;iframe height="600" src="https://codepen.io/cloneableteam/embed/XWgWbyN?height=600&amp;amp;default-tab=result&amp;amp;embed-version=2"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>codepen</category>
    </item>
  </channel>
</rss>
