Search
Search titles only
By:
Search titles only
By:
Log in
Register
Search
Search titles only
By:
Search titles only
By:
Menu
Install the app
Install
Forums
New posts
All threads
Latest threads
New posts
Trending threads
Trending
Search forums
What's new
New posts
New ads
New profile posts
Latest activity
Free Ads
Latest reviews
Search ads
Members
Current visitors
New profile posts
Search profile posts
Contact us
Latest ads
එක පැකේජ් එකයි මාසෙටම Unlimited Internet. තාමත් DATA CARD දාන්න සල්ලි වියදම් කරනවද? අඩුම මිලට අපෙන්.
sayuru bandara
Updated:
Tuesday at 12:30 PM
Ad icon
ඉන්ටර්නෙට් එකෙන් හරියටම සල්ලි හොයන්න සහ Success වෙන්න කැමතිද? 🚀 (E-Money & Success Stories)
siri sumana
Updated:
Saturday at 11:44 PM
Gemini AI PRO 18 months Offer
Hawaka
Updated:
May 27, 2026
Ad icon
koko account
DasunEranga
Updated:
May 27, 2026
Ad icon
koko account
DasunEranga
Updated:
May 27, 2026
Electronics
Vehicles
Property
Search
Reply to thread
Forums
General
ElaKiri Talk!
JavaScript Player
Get the App
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Message
<blockquote data-quote="Lasanthajn" data-source="post: 24302893" data-attributes="member: 61219"><p>ටිකක් නෙට් එකේ ඇවිදිනකොට හිතුන මට ඕන විදියට Audio Player එකක් හදන්න ඒනෙ කියල.. ඇත්තටම අපිට ඕනෙ දැන ගන්න Photoshop විතරයි. ඉතුරු ටිකි html5, css, JavaScript වලින් කරගන්න පුළුවන්</p><p></p><p><img src="https://i.postimg.cc/tR50vbQD/Capture.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>[HTML]<div class="audio_player" id="ap"></p><p><!-- <audio></audio> --></p><p> <div class="player_body"></p><p> <div class="hamburger-menu"></p><p> <div class="bar"></div></p><p> </div></p><p> </p><p> <div class="nav_menu" id="navMenu"></p><p> <div class="nav_list"></p><p> <div class="nav_item"></p><p> <p>Developed by:</p></p><p> <a href="https://www.linkedin.com/in/vladislav-kubyshkin-b15b18128" target="_blank">Vladislav Kubyshkin</a></p><p> </div></p><p> <div class="nav_item"></p><p> <p>Template designed by:</p></p><p> <a href="https://dribbble.com/rezashintia" target="_blank">Reza Shintia Dewi</a></p><p> </div></p><p> </div></p><p> </div></p><p> </p><p> <div class="player_playlist" id="pl_playlist"></p><p> <ul class="player_playlist_list"></ul></p><p> </div></p><p> </p><p> <div class="player_fade"></div></p><p> <div class="player_content"></p><p> <div class="player_header"></p><p> <div class="container-fluid"></p><p> <div class="row"></p><p> <div class="col-xs-2"></p><p> <div class="playlist_btn"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></div></p><p> </div></p><p> <div class="col-xs-8"></p><p> <div class="header_name text-center" id="nowPlay"></p><p> <span id="npAction">PAUSED...</span></p><p> </div></p><p> </div></p><p> </div></p><p> </div></p><p> </div></p><p> </p><p> <div class="album_wrap"></p><p> <div class="default_cover"><div class="cover"></div></div></p><p> </div></p><p> </p><p> <div class="song_playing text-center"></p><p> <div class="title_block"><span id="title" title="">Hi Dribbble!</span></div></p><p> <div class="artist_block"><span id="artist" title="">Reza Shintia Dewi</span></div></p><p> </div></p><p> </p><p> <div class="timeline_wrap"></p><p><!-- <div class="timeline"></p><p> <div class="line_played"></div></p><p> <div class="full_line"></div></p><p> </div> --></p><p> <div class='timeline'></p><p> <div class='full_line'></div></p><p> <div class="line_preload"></div></p><p> <div class='line_played'></p><p> <span class='timeline_pointer'></span></p><p> </div></p><p> </div></p><p></p><p> <div class="time_of_song"></p><p> <div class="container-fluid"></p><p> <div class="row"></p><p> <div class="col-xs-2"></p><p> <span class="time_played">0:00</span></p><p> </div></p><p> <div class="col-xs-2 col-xs-offset-8"></p><p> <span class="full_time">0:00</span></p><p> </div></p><p> </div></p><p> </div></p><p> </div></p><p> </div></p><p> </p><p> <div class="player_btns"></p><p> <div class="container-fluid"></p><p> <div class="row"></p><p> <div class="col-xs-2"></p><p> <div class="random_btn text-center btn_shadow" id="random"><span class="glyphicon glyphicon-random" aria-hidden="true"></span></div></p><p> </div></p><p> </p><p> <div class="col-xs-2"></p><p> <div class="prev_btn text-center btn_shadow" id="btnPrev" data-action='prev'><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></div></p><p> </div></p><p> </p><p> <div class="col-xs-3"></p><p> <div class="play_btn text-center" id="play" data-action='play'></p><p> <span class="glyphicon glyphicon-play" id="play_circle" aria-hidden="true"></span></p><p> </div></p><p> </div></p><p> </p><p> <div class="col-xs-2"></p><p> <div class="next_btn text-center btn_shadow" id="btnNext" data-action='next'><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></div></p><p> </div></p><p> </p><p> <div class="col-xs-2"></p><p> <div class="repeat_btn text-center btn_shadow" id="repeat"><span class="glyphicon glyphicon-retweet" aria-hidden="true"></span></div></p><p> </div></p><p> </div></p><p> </div></p><p> </div></p><p> </div></p><p> </p><p> <div class="waves"></p><p> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 275 223.7" style="enable-background:new 0 0 275 223.7;" xml:space="preserve"></p><p> <style type="text/css"></p><p> .st0{fill:url(#SVGID_1_);}</p><p> .st1{fill:url(#SVGID_2_);}</p><p> .st2{fill:url(#SVGID_3_);}</p><p> </style></p><p> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="137.5" y1="-19.8534" x2="137.5" y2="92.9036"></p><p> <stop offset="0.104" style="stop-color:#FF8FCF;stop-opacity:0"/></p><p> <stop offset="1" style="stop-color:#FF8FCF;stop-opacity:0.7"/></p><p> </linearGradient></p><p> <path class="st0" d="M258.3,68c-21.8-6.7-21.5-47.8-31-48.3c-15.4-0.9-26.7,107.3-47.7,108c-16.6,0.6-26.8-67-46.7-66.3</p><p> c-14.7,0.5-20,37.9-31.3,37.3c-18.2-0.9-24-98.7-36-98.7C54.7,0,49.5,82,36,82.3C25.4,82.6,18,32.1,8.3,33C3.2,33.5,0.7,47.8,0,51.7</p><p> v172h275v-158C270.3,67.9,265,70,258.3,68z"/></p><p> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="137.5" y1="26.8924" x2="137.5" y2="179.8649"></p><p> <stop offset="0" style="stop-color:#33D4FA;stop-opacity:0"/></p><p> <stop offset="1" style="stop-color:#33D4FA;stop-opacity:0.7"/></p><p> </linearGradient></p><p> <path class="st1" d="M261.8,94.7c-19.3,3.2-28.2-24.1-48.5-24.3c-22.5-0.2-29.2,33.3-47.3,32.2c-24.6-1.5-32.5-64.7-52-64.2</p><p> C98.1,38.8,92.6,81,77.3,80.8c-16.6-0.2-25.5-50.3-36-49C29.8,33.3,29.8,95.4,17,96.5c-4.7,0.4-7-7.8-17-9.8v137h275V87.4</p><p> C271.7,90.5,267.5,93.7,261.8,94.7z"/></p><p> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="137.5" y1="6.0051" x2="137.5" y2="144.9296"></p><p> <stop offset="3.960396e-02" style="stop-color:#33D4FA;stop-opacity:0"/></p><p> <stop offset="1" style="stop-color:#00B2FA"/></p><p> </linearGradient></p><p> <path class="st2" d="M275,223.7V87.8c-6.2,4.4-15.4,9.1-26,8.9c-29.2-0.7-36.9-39.1-61.2-38.7c-22.1,0.4-29.1,32.4-46,30.3</p><p> c-22.8-2.8-26.7-63.5-42.2-63.7c-16.5-0.1-25.2,68.9-42,68.5c-13.7-0.3-22.4-46.7-32.5-45c-4.3,0.8-8.1,10.3-10.7,16.8</p><p> C12.3,70.5,11.7,74.4,8,79c-2.7,3.4-5.8,5.4-8,6.7v138H275z"/></p><p> </svg></p><p> </div></p><p> </div></p><p></div></p><p></p><p><div id="preloader"></p><p> <div id="status"></p><p> <div class="spinner"></p><p> <div class="rect1"></div></p><p> <div class="rect2"></div></p><p> <div class="rect3"></div></p><p> <div class="rect4"></div></p><p> <div class="rect5"></div></p><p> </div></p><p> </div></p><p></div>[/HTML]</p></blockquote><p></p>
[QUOTE="Lasanthajn, post: 24302893, member: 61219"] ටිකක් නෙට් එකේ ඇවිදිනකොට හිතුන මට ඕන විදියට Audio Player එකක් හදන්න ඒනෙ කියල.. ඇත්තටම අපිට ඕනෙ දැන ගන්න Photoshop විතරයි. ඉතුරු ටිකි html5, css, JavaScript වලින් කරගන්න පුළුවන් [IMG]https://i.postimg.cc/tR50vbQD/Capture.jpg[/IMG] [HTML]<div class="audio_player" id="ap"> <!-- <audio></audio> --> <div class="player_body"> <div class="hamburger-menu"> <div class="bar"></div> </div> <div class="nav_menu" id="navMenu"> <div class="nav_list"> <div class="nav_item"> <p>Developed by:</p> <a href="https://www.linkedin.com/in/vladislav-kubyshkin-b15b18128" target="_blank">Vladislav Kubyshkin</a> </div> <div class="nav_item"> <p>Template designed by:</p> <a href="https://dribbble.com/rezashintia" target="_blank">Reza Shintia Dewi</a> </div> </div> </div> <div class="player_playlist" id="pl_playlist"> <ul class="player_playlist_list"></ul> </div> <div class="player_fade"></div> <div class="player_content"> <div class="player_header"> <div class="container-fluid"> <div class="row"> <div class="col-xs-2"> <div class="playlist_btn"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></div> </div> <div class="col-xs-8"> <div class="header_name text-center" id="nowPlay"> <span id="npAction">PAUSED...</span> </div> </div> </div> </div> </div> <div class="album_wrap"> <div class="default_cover"><div class="cover"></div></div> </div> <div class="song_playing text-center"> <div class="title_block"><span id="title" title="">Hi Dribbble!</span></div> <div class="artist_block"><span id="artist" title="">Reza Shintia Dewi</span></div> </div> <div class="timeline_wrap"> <!-- <div class="timeline"> <div class="line_played"></div> <div class="full_line"></div> </div> --> <div class='timeline'> <div class='full_line'></div> <div class="line_preload"></div> <div class='line_played'> <span class='timeline_pointer'></span> </div> </div> <div class="time_of_song"> <div class="container-fluid"> <div class="row"> <div class="col-xs-2"> <span class="time_played">0:00</span> </div> <div class="col-xs-2 col-xs-offset-8"> <span class="full_time">0:00</span> </div> </div> </div> </div> </div> <div class="player_btns"> <div class="container-fluid"> <div class="row"> <div class="col-xs-2"> <div class="random_btn text-center btn_shadow" id="random"><span class="glyphicon glyphicon-random" aria-hidden="true"></span></div> </div> <div class="col-xs-2"> <div class="prev_btn text-center btn_shadow" id="btnPrev" data-action='prev'><span class="glyphicon glyphicon-backward" aria-hidden="true"></span></div> </div> <div class="col-xs-3"> <div class="play_btn text-center" id="play" data-action='play'> <span class="glyphicon glyphicon-play" id="play_circle" aria-hidden="true"></span> </div> </div> <div class="col-xs-2"> <div class="next_btn text-center btn_shadow" id="btnNext" data-action='next'><span class="glyphicon glyphicon-forward" aria-hidden="true"></span></div> </div> <div class="col-xs-2"> <div class="repeat_btn text-center btn_shadow" id="repeat"><span class="glyphicon glyphicon-retweet" aria-hidden="true"></span></div> </div> </div> </div> </div> </div> <div class="waves"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 275 223.7" style="enable-background:new 0 0 275 223.7;" xml:space="preserve"> <style type="text/css"> .st0{fill:url(#SVGID_1_);} .st1{fill:url(#SVGID_2_);} .st2{fill:url(#SVGID_3_);} </style> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="137.5" y1="-19.8534" x2="137.5" y2="92.9036"> <stop offset="0.104" style="stop-color:#FF8FCF;stop-opacity:0"/> <stop offset="1" style="stop-color:#FF8FCF;stop-opacity:0.7"/> </linearGradient> <path class="st0" d="M258.3,68c-21.8-6.7-21.5-47.8-31-48.3c-15.4-0.9-26.7,107.3-47.7,108c-16.6,0.6-26.8-67-46.7-66.3 c-14.7,0.5-20,37.9-31.3,37.3c-18.2-0.9-24-98.7-36-98.7C54.7,0,49.5,82,36,82.3C25.4,82.6,18,32.1,8.3,33C3.2,33.5,0.7,47.8,0,51.7 v172h275v-158C270.3,67.9,265,70,258.3,68z"/> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="137.5" y1="26.8924" x2="137.5" y2="179.8649"> <stop offset="0" style="stop-color:#33D4FA;stop-opacity:0"/> <stop offset="1" style="stop-color:#33D4FA;stop-opacity:0.7"/> </linearGradient> <path class="st1" d="M261.8,94.7c-19.3,3.2-28.2-24.1-48.5-24.3c-22.5-0.2-29.2,33.3-47.3,32.2c-24.6-1.5-32.5-64.7-52-64.2 C98.1,38.8,92.6,81,77.3,80.8c-16.6-0.2-25.5-50.3-36-49C29.8,33.3,29.8,95.4,17,96.5c-4.7,0.4-7-7.8-17-9.8v137h275V87.4 C271.7,90.5,267.5,93.7,261.8,94.7z"/> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="137.5" y1="6.0051" x2="137.5" y2="144.9296"> <stop offset="3.960396e-02" style="stop-color:#33D4FA;stop-opacity:0"/> <stop offset="1" style="stop-color:#00B2FA"/> </linearGradient> <path class="st2" d="M275,223.7V87.8c-6.2,4.4-15.4,9.1-26,8.9c-29.2-0.7-36.9-39.1-61.2-38.7c-22.1,0.4-29.1,32.4-46,30.3 c-22.8-2.8-26.7-63.5-42.2-63.7c-16.5-0.1-25.2,68.9-42,68.5c-13.7-0.3-22.4-46.7-32.5-45c-4.3,0.8-8.1,10.3-10.7,16.8 C12.3,70.5,11.7,74.4,8,79c-2.7,3.4-5.8,5.4-8,6.7v138H275z"/> </svg> </div> </div> </div> <div id="preloader"> <div id="status"> <div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> </div> </div>[/HTML] [/QUOTE]
Insert quotes…
Verification
Asuwa dahayen wadi kalama keeyada?
Post reply
Top
Bottom