create account

PART 1 - BUILDING SCORE CARD USER INTERFACE FOR SPORT WEBSITES IN SASS (SCSS) by tarikhakan55

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @tarikhakan55 · (edited)
$31.42
PART 1 - BUILDING SCORE CARD USER INTERFACE FOR SPORT WEBSITES IN SASS (SCSS) 
<br> http://i.hizliresim.com/G9GorZ.jpg

**Video** : English Language<br>
**Tutorial** : PART 1 - BUILDING LIVE SCORE CARD USER INTERFACE  FOR SPORT  WEBSITES 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 create live score card user interface design in sass or scss. Firstly we made the rectangular shape of the score card. Than we created added the teams logos and teams name.  As final action we made added progres bar and colored it.  Finally you can also learn, how are these codes implemented on your web sites.  

**We Learn About**
Color Values<br>
Used => crimson, blue, red,  rgba(0,0,0,0.5), #034693 , darkorange <br>
Border  Values<br>
Used =>right, left, radius, box-shadow, solid, 
Font  Values<br>
Used => size, weight, text(shadow, align, transform ), letter-spacing<br>
And Old Commands<br>
Used => overflow, height,float, display, margin-top, background<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(crimson, blue, red,  rgba(0,0,0,0.5), #034693 , darkorange), border  values(right, left, radius, box-shadow, solid),  font  values(size, weight, text(shadow, align, transform ), letter-spacing) and old commands (overflow, height,float, display, margin-top, background).

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/ADAfVH0MJ18" 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 4](https://utopian.io/utopian-io/@tarikhakan55/part-4-final-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss)

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

[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)



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


<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@tarikhakan55/part-1-building-score-card-user-interface-for-sport-websites-in-sass-scss">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 81 others
properties (23)
authortarikhakan55
permlinkpart-1-building-score-card-user-interface-for-sport-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-4-final-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/part-3-building-audio-player-user-interface-kit-for-music-websites-in-sass-scss","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"],"moderator":{"account":"redart","time":"2018-03-01T10:00:34.611Z","reviewed":true,"pending":false,"flagged":false},"questions":[],"score":0}
created2018-02-28 21:17:54
last_update2018-03-01 10:00:33
depth0
children4
last_payout2018-03-07 21:17:54
cashout_time1969-12-31 23:59:59
total_payout_value21.972 HBD
curator_payout_value9.444 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length4,225
author_reputation38,506,275,601,183
root_title"PART 1 - BUILDING SCORE CARD USER INTERFACE FOR SPORT WEBSITES IN SASS (SCSS) "
beneficiaries
0.
accountutopian.pay
weight2,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id41,221,371
net_rshares7,103,305,571,380
author_curate_reward""
vote details (145)
@redart · 
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 (22)
authorredart
permlinkre-tarikhakan55-part-1-building-score-card-user-interface-for-sport-websites-in-sass-scss-20180301t100036810z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-03-01 10:00:48
last_update2018-03-01 10:00:48
depth1
children1
last_payout2018-03-08 10:00:48
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_length172
author_reputation6,723,529,098,076
root_title"PART 1 - BUILDING SCORE CARD USER INTERFACE FOR SPORT WEBSITES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id41,343,102
net_rshares0
@tarikhakan55 · 
Thank you...
properties (22)
authortarikhakan55
permlinkre-redart-re-tarikhakan55-part-1-building-score-card-user-interface-for-sport-websites-in-sass-scss-20180301t160254651z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-03-01 16:03:00
last_update2018-03-01 16:03:00
depth2
children0
last_payout2018-03-08 16:03:00
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 1 - BUILDING SCORE CARD USER INTERFACE FOR SPORT WEBSITES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id41,414,719
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
permlink20180301t200821474z
categoryutopian-io
json_metadata{"app":"1up"}
created2018-03-01 20:08:21
last_update2018-03-01 20:08:21
depth1
children0
last_payout2018-03-08 20:08:21
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 1 - BUILDING SCORE CARD USER INTERFACE FOR SPORT WEBSITES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id41,462,543
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-1-building-score-card-user-interface-for-sport-websites-in-sass-scss-20180302t015434071z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-03-02 01:54:33
last_update2018-03-02 01:54:33
depth1
children0
last_payout2018-03-09 01:54: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 1 - BUILDING SCORE CARD USER INTERFACE FOR SPORT WEBSITES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id41,519,040
net_rshares0
Help/Feedback