create account

BUILDING PARALLAX FLAT WEB PAGE FOR ALL WEB PAGES IN SASS (SCSS) by tarikhakan55

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @tarikhakan55 · (edited)
$40.82
BUILDING PARALLAX FLAT WEB PAGE FOR ALL WEB PAGES IN SASS (SCSS) 
<br> http://i.hizliresim.com/EPDzX9.jpg

**Video** : English Language<br>
**Tutorial** : BUILDING PARALLAX FLAT WEB PAGE  FOR ALL WEB PAGES  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 created parallax flat web pages  for all web pages in sass or scss. We created three section with background images on the same page. Then we colored text boxes and areas . We added different size settings.  Finally you can also learn, how are these codes implemented on your web sites.  

**We Learn About**

Class Names<br>
Used => parimg1, partext, border trans, section sectiondark, sectionlight<br>
Background<br>
Used =>  position, image, size, repeat, attachment <br>
Color<br>
Used => darkslateblue, ivory, graybr>
Font<br>
Used => family, size, weight, height , align<br>
And Old Commands<br>
Used =>  min-height, position,  padding, top, padding, line-height<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; Class Names(parimg1, partext, border trans, section sectiondark, sectionlight), background(position, image, size, repeat, attachment) , color( darkslateblue, ivory, graybr), font( family, size, weight, height , align) and old commands(min-height, position,  padding, top, padding, line-height).

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/PObQX9IDoUU" 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>
[Background Sphygmus  Animation](https://utopian.io/utopian-io/@tarikhakan55/building-background-sphygmus-animation-for-all-web-pages-in-sass-scss)

[Previous And Next  Button Animation](https://utopian.io/utopian-io/@tarikhakan55/building-previous-and-next-button-animation-for-all-web-pages-in-sass-scss)

[3D Cubic Image  Animation](https://utopian.io/utopian-io/@tarikhakan55/building-3d-cubic-image-animation-for-fashion-pages-in-sass-scss)

[Fire And Glacier Text Animation](https://utopian.io/utopian-io/@tarikhakan55/building-fire-and-glacier-text-animation-in-sass-scss)

[Flexbox Web Page Part 2](https://utopian.io/utopian-io/@tarikhakan55/building-flexbox-web-page-for-blog-sites-in-sass-scss-part-2)

[Flexbox Web Page Part 1](https://utopian.io/utopian-io/@tarikhakan55/building-flexbox-web-page-for-blog-sites-in-sass-scss-part-1)

[Book Hover  Animation](https://utopian.io/utopian-io/@tarikhakan55/building-book-hover-animation-bookshop-web-sites-in-sass-scss)

[Responsive Flip Animation For Social Media Buttons](https://utopian.io/utopian-io/@tarikhakan55/building-flip-animation-for-social-media-buttons-in-sass-scss)

[Responsive Image Grid With Animation](https://utopian.io/utopian-io/@tarikhakan55/building-responsive-image-grid-with-animation-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/building-parallax-flat-web-page-for-all-web-pages-in-sass-scss">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 60 others
properties (23)
authortarikhakan55
permlinkbuilding-parallax-flat-web-page-for-all-web-pages-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","tutorial","sass"],"users":["tarikhakan55"],"links":["https://github.com/sass/sass","http://sass-lang.com/","https://utopian.io/utopian-io/@tarikhakan55/building-background-sphygmus-animation-for-all-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-previous-and-next-button-animation-for-all-web-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-3d-cubic-image-animation-for-fashion-pages-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-fire-and-glacier-text-animation-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-flexbox-web-page-for-blog-sites-in-sass-scss-part-2","https://utopian.io/utopian-io/@tarikhakan55/building-flexbox-web-page-for-blog-sites-in-sass-scss-part-1","https://utopian.io/utopian-io/@tarikhakan55/building-book-hover-animation-bookshop-web-sites-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-flip-animation-for-social-media-buttons-in-sass-scss","https://utopian.io/utopian-io/@tarikhakan55/building-responsive-image-grid-with-animation-in-sass-scss"],"moderator":{"account":"forkonti","time":"2018-02-20T21:18:24.000Z","reviewed":true,"pending":false,"flagged":false},"questions":[],"score":0}
created2018-02-20 19:54:15
last_update2018-02-20 21:18:27
depth0
children4
last_payout2018-02-27 19:54:15
cashout_time1969-12-31 23:59:59
total_payout_value28.974 HBD
curator_payout_value11.843 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,630
author_reputation38,506,275,601,183
root_title"BUILDING PARALLAX FLAT WEB PAGE FOR ALL WEB PAGES IN SASS (SCSS) "
beneficiaries
0.
accountutopian.pay
weight2,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id39,152,460
net_rshares9,109,506,239,925
author_curate_reward""
vote details (124)
@forkonti · 
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)
authorforkonti
permlinkre-tarikhakan55-building-parallax-flat-web-page-for-all-web-pages-in-sass-scss-20180220t211846091z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-02-20 21:18:48
last_update2018-02-20 21:18:48
depth1
children1
last_payout2018-02-27 21:18: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_reputation10,537,156,901,294
root_title"BUILDING PARALLAX FLAT WEB PAGE FOR ALL WEB PAGES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id39,169,490
net_rshares0
@tarikhakan55 · 
Thank you...
properties (22)
authortarikhakan55
permlinkre-forkonti-2018221t8331286z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"esteem/1.5.1","format":"markdown+html","community":"esteem"}
created2018-02-21 07:03:33
last_update2018-02-21 07:03:33
depth2
children0
last_payout2018-02-28 07:03: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_length12
author_reputation38,506,275,601,183
root_title"BUILDING PARALLAX FLAT WEB PAGE FOR ALL WEB PAGES IN SASS (SCSS) "
beneficiaries
0.
accountesteemapp
weight1,000
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id39,274,490
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
permlink20180220t212848417z
categoryutopian-io
json_metadata{"app":"1up"}
created2018-02-20 21:28:48
last_update2018-02-20 21:28:48
depth1
children0
last_payout2018-02-27 21:28: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_length764
author_reputation2,324,758,056,093
root_title"BUILDING PARALLAX FLAT WEB PAGE FOR ALL WEB PAGES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id39,171,356
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-building-parallax-flat-web-page-for-all-web-pages-in-sass-scss-20180221t203831145z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-02-21 20:38:30
last_update2018-02-21 20:38:30
depth1
children0
last_payout2018-02-28 20:38:30
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"BUILDING PARALLAX FLAT WEB PAGE FOR ALL WEB PAGES IN SASS (SCSS) "
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id39,431,737
net_rshares0
Help/Feedback