create account

PART 3 - BUILDING AUDIO PLAYER USER INTERFACE KIT FOR MUSIC WEBSITES IN SASS (SCSS) by tarikhakan55

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @tarikhakan55 · (edited)
$32.74
PART 3 - BUILDING AUDIO PLAYER USER INTERFACE KIT FOR MUSIC WEBSITES IN SASS (SCSS) 
<br> https://preview.ibb.co/nhhChc/audiplayer3.jpg

**Video** : English Language<br>
**Tutorial** : PART 3 - BUILDING AUDIO PLAYER USER INTERFACE KIT IN SASS (SCSS) <br>
**Githup link**:  [SASS(SCSS)](https://github.com/sass/sass) <br>

>**Sass(Scss) is the most mature, stable, and powerful professional grade CSS extension language in the world. Sass is actively supported and developed by a consortium of several tech companies and hundreds of developers.** [SASS(SCSS) More Information](http://sass-lang.com/)

**What We Can Learn?**

In this video tutorial, we will continue from where we left off on the last video and  we created audio player user interface kit in sass or scss. Firstly we started creating control 3 values. Than we created the play pause level dimensions. As final action we made play pause button effect.  Finally you can also learn, how are these codes implemented on your web sites.  

**We Learn About**

Color Values<br>
Used => #05d4f4, rgba(5,212,244,0.7), #312f3a, rgba(0,0,0,0.3), #2d2f3b<br>
Position<br>
Used =>absolute, relative, inline-block<br>
Font  Values<br>
Used => size, weight, text-shadow <br>
And Old Commands<br>
Used =>display, overflow, z-index, height, border, content, border-right-color<br>


**Requirements**

1-Brackets Program<br>
2-Basic HTML code knowledge<br>
2-Basic SCSS code knowledge<br>


**Difficulty**

 Intermediate Level

**Description**

We will going  to learn SASS(SCSS) in this video. In the video we used; Color Values( #05d4f4, rgba(5,212,244,0.7), #312f3a, rgba(0,0,0,0.3), #2d2f3b), position(absolute, relative, inline-block), font  values(size, weight, text-shadow ) and old commands (display, overflow, z-index, height, border, content, border-right-color).

**Video Tutorial - English Language - 720p**

<iframe width="560" height="315" src="https://www.youtube.com/embed/TJNhavNXxjY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><br>

**Curriculum**

If you want to more learn about SASS you can follow me and you can see its below ! <br>



[Audıo Player User Interface Kit Part 2](https://utopian.io/utopian-io/@tarikhakan55/part-2-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss)

[Audıo Player User Interface Kit Part 1](https://utopian.io/utopian-io/@tarikhakan55/part-1-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss)

[Mockup Background Image Slider Animation](https://utopian.io/utopian-io/@tarikhakan55/building-mockup-background-image-slider-animation-in-sass-scss)

[Socıal Media Icon Circle Animation](https://utopian.io/utopian-io/@tarikhakan55/building-social-media-icon-circle-animation-in-sass-scss)

[Pagination User Interface Design](https://utopian.io/utopian-io/@tarikhakan55/building-pagination-user-interface-design-in-sass-scss)

[Box Products For Shopping Web Pages](https://utopian.io/utopian-io/@tarikhakan55/building-box-products-for-shopping-web-pages-in-sass-scss)

[Simple Flat Prıcıng Table Design](https://utopian.io/utopian-io/@tarikhakan55/building-simple-flat-pricing-table-design-for-all-web-pages-in-sass-scss)

[Profile User Interface Design Part 2](https://utopian.io/utopian-io/@tarikhakan55/part-2-building-profile-user-interface-design-for-all-web-pages-in-sass-scss)

[Profile User Interface Design Part 1](https://utopian.io/utopian-io/@tarikhakan55/part-1-building-profile-user-interface-design-for-all-web-pages-in-sass-scss)

[Parallax Flat Web Page](https://utopian.io/utopian-io/@tarikhakan55/building-parallax-flat-web-page-for-all-web-pages-in-sass-scss)

[3D Logo Animation](https://utopian.io/utopian-io/@tarikhakan55/building-3d-logo-animation-for-all-web-pages-in-sass-scss)



Author : @tarikhakan55 <br>
Steemit Türkiye & Utopian-io
Community


<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@tarikhakan55/part-3-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 75 others
properties (23)
authortarikhakan55
permlinkpart-3-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss
categoryutopian-io
json_metadata{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":929845,"name":"sass","full_name":"sass/sass","html_url":"https://github.com/sass/sass","fork":false,"owner":{"login":"sass"}},"pullRequests":[],"platform":"github","type":"video-tutorials","tags":["utopian-io","utopian-io","tutorial","sass"],"users":["tarikhakan55"],"links":["https://github.com/sass/sass","http://sass-lang.com/","https://utopian.io/utopian-io/@tarikhakan55/part-2-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/part-1-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-mockup-background-image-slider-animation-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-social-media-icon-circle-animation-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-pagination-user-interface-design-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-box-products-for-shopping-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-simple-flat-pricing-table-design-for-all-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/part-2-building-profile-user-interface-design-for-all-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/part-1-building-profile-user-interface-design-for-all-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-parallax-flat-web-page-for-all-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-3d-logo-animation-for-all-web-pages-in-sass-scss"],"moderator":{"account":"manishmike10","time":"2018-02-27T13:47:13.871Z","reviewed":true,"pending":false,"flagged":false},"questions":[],"score":0}
created2018-02-27 06:18:27
last_update2018-02-27 13:47:12
depth0
children7
last_payout2018-03-06 06:18:27
cashout_time1969-12-31 23:59:59
total_payout_value23.064 HBD
curator_payout_value9.672 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,984
author_reputation38,506,275,601,183
root_title"PART 3 - BUILDING AUDIO PLAYER USER INTERFACE KIT FOR MUSIC WEBSITES IN SASS (SCSS) "
beneficiaries
0.
accountutopian.pay
weight2,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,791,068
net_rshares7,117,921,299,495
author_curate_reward""
vote details (139)
@luckypower · 
Thanks for sharing i will done upvote I always see your post. And follow you <3
properties (22)
authorluckypower
permlinkre-tarikhakan55-part-3-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss-20180227t061911461z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-02-27 06:19:15
last_update2018-02-27 06:19:15
depth1
children1
last_payout2018-03-06 06:19:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length79
author_reputation-973,981,471,413
root_title"PART 3 - BUILDING AUDIO PLAYER USER INTERFACE KIT FOR MUSIC WEBSITES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,791,215
net_rshares0
@tarikhakan55 · 
Thanks and done :]
properties (22)
authortarikhakan55
permlinkre-luckypower-re-tarikhakan55-part-3-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss-20180227t064107007z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-02-27 06:41:09
last_update2018-02-27 06:41:09
depth2
children0
last_payout2018-03-06 06:41:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length18
author_reputation38,506,275,601,183
root_title"PART 3 - BUILDING AUDIO PLAYER USER INTERFACE KIT FOR MUSIC WEBSITES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,794,863
net_rshares0
@manishmike10 ·
$1.40
Thank you for the contribution. It has been approved.

You can contact us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://utopian.io/moderators)**
👍  
properties (23)
authormanishmike10
permlinkre-tarikhakan55-part-3-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss-20180227t134718080z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-02-27 13:47:18
last_update2018-02-27 13:47:18
depth1
children2
last_payout2018-03-06 13:47:18
cashout_time1969-12-31 23:59:59
total_payout_value1.054 HBD
curator_payout_value0.349 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length172
author_reputation20,399,732,899,016
root_title"PART 3 - BUILDING AUDIO PLAYER USER INTERFACE KIT FOR MUSIC WEBSITES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,873,093
net_rshares246,873,495,840
author_curate_reward""
vote details (1)
@tarikhakan55 · 
Thank you...
properties (22)
authortarikhakan55
permlinkre-manishmike10-re-tarikhakan55-part-3-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss-20180227t155420226z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-02-27 15:54:24
last_update2018-02-27 15:54:24
depth2
children0
last_payout2018-03-06 15:54:24
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length12
author_reputation38,506,275,601,183
root_title"PART 3 - BUILDING AUDIO PLAYER USER INTERFACE KIT FOR MUSIC WEBSITES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id40,900,215
net_rshares0
@utopian.tip · 
Hey @manishmike10, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
properties (22)
authorutopian.tip
permlinkre-re-tarikhakan55-part-3-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss-20180227t134718080z-20180228t033242
categoryutopian-io
json_metadata""
created2018-02-28 03:32:42
last_update2018-02-28 03:32:42
depth2
children0
last_payout2018-03-07 03:32:42
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length162
author_reputation238,310,597,885
root_title"PART 3 - BUILDING AUDIO PLAYER USER INTERFACE KIT FOR MUSIC WEBSITES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id41,020,093
net_rshares0
@utopian-1up · 
<div class="pull-left">

![1UP-Kayrex_tiny.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515383984/ekyf2thxg7j2t0qro1h3.png)

</div>

<div class="text-justify">


### You've got upvoted by <code>Utopian-1UP</code>!
You can give up to ten [1UP](https://steemit.com/utopian-io/@steem-plus/steemplus-2-4-utopian-1up-is-here)'s to Utopian posts every day after they are accepted by a Utopian moderator and before they are upvoted by the official @utopian-io account. Install the @steem-plus browser extension to use 1UP. By following the 1UP-trail using [SteemAuto](https://steemauto.com/) you support great Utopian authors and earn high curation rewards at the same time. 

<hr>

1UP is neither organized nor endorsed by Utopian.io!

</div>
properties (22)
authorutopian-1up
permlink20180228t045851685z
categoryutopian-io
json_metadata{"app":"1up"}
created2018-02-28 04:58:51
last_update2018-02-28 04:58:51
depth1
children0
last_payout2018-03-07 04:58:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length764
author_reputation2,324,758,056,093
root_title"PART 3 - BUILDING AUDIO PLAYER USER INTERFACE KIT FOR MUSIC WEBSITES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id41,035,028
net_rshares0
@utopian-io · 
### Hey @tarikhakan55 I am @utopian-io. I have just upvoted you!
#### Achievements
- WOW WOW WOW People loved what you did here. GREAT JOB!
- Seems like you contribute quite often. AMAZING!
#### Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. <a href="https://discord.gg/zTrEMqB">Participate on Discord</a>. Lets GROW TOGETHER!
- <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for my Witness With SteemConnect</a>
- <a href="https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1">Proxy vote to Utopian Witness with SteemConnect</a>
- Or vote/proxy on <a href="https://steemit.com/~witnesses">Steemit Witnesses</a>

[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)

**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**
properties (22)
authorutopian-io
permlinkre-tarikhakan55-part-3-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss-20180302t021533656z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-03-02 02:15:33
last_update2018-03-02 02:15:33
depth1
children0
last_payout2018-03-09 02:15:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,067
author_reputation152,955,367,999,756
root_title"PART 3 - BUILDING AUDIO PLAYER USER INTERFACE KIT FOR MUSIC WEBSITES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id41,522,666
net_rshares0
Help/Feedback