PART 1 - BUILDING PROFILE USER INTERFACE DESIGN FOR ALL WEB PAGES IN SASS (SCSS) by tarikhakan55

View this thread on: hive.blog | peakd.com | ecency.com

utopian-io · @tarikhakan55 · Feb 21 '18 (edited)

$38.45

PART 1 - BUILDING PROFILE USER INTERFACE DESIGN FOR ALL WEB PAGES IN SASS (SCSS)

<br> http://i.hizliresim.com/LbD8Ea.jpg

**Video** : English Language<br>
**Tutorial** : PART 1 - BUILDING PROFILE USER INTERFACE DESIGN 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 responsİve mobİle contact form all web pages in sass or scss. Fisrtly we started creating user interface card .So we created a rectangular box for background image. Then we created a button for on / off. As final action, we made the on / off effect . Finally you can also learn, how are these codes implemented on your web sites.  

**We Learn About**

Style Values<br>
Used => Font(size, weight, famliy),  text(decoration, transform, align)<br>
Color<br>
Used => burlywood, #607d8b, red, white, #aaa, darkred, #ccc, red, aliceblue<br>
Transform<br>
Used => perspective, scale, uppercase, translate<br>
And Old Commands<br>
Used =>  border, box-shaow, width,display, transition, margin, box-sizing <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; Style Values(Font(size, weight, famliy),  text(decoration, transform, align)), color(burlywood, #607d8b, red, white, #aaa, darkred, #ccc, red, aliceblue), transform(perspective, scale, uppercase, translate) and old commands  (border, box-shaow, width,display, transition, margin, box-sizing).

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/vHb6ZZxixWc" 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>

[Responsive Mobile Contact Form](https://utopian.io/utopian-io/@tarikhakan55/building-responsive-mobile-contact-form-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)

[3D Mockup Presentation](https://utopian.io/utopian-io/@tarikhakan55/building-3d-mockup-presentation-for-all-book-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)

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-profile-user-interface-design-for-all-web-pages-in-sass-scss">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>

👍 utopian-io, adol, flauwy, monomyth, fknmayhem, tarikhakan55, ravindraojha, espoem, sniffbiff, utopian-1up, stoodkev, e-babil, mahdiyari, ronimm, amosbastian, helo, jamesbarraclough, yandot, mufasatoldyou, thatmemeguy, gotgame, damla, omeratagun, exploreand, lemony-cricket, shreetbn, moorkedi, neneandy, cgbartow, jesdn16, howtosteem, acrywhif, idlebright, makrotheblack, isabella394, evilest-fiend, kslo, simonluisi, navx, jrmiller87, zinonweke, ansonoxy, opulence, bitopia, tugbabeauty, zoneboy, dethclad, irfandogan, berkaytekinsen, isacastillor, erhanoz, roj, not-a-bird, rhotimee, nathalie13, sweeverdev, neokuduk, marianarojas, abelcachay, dyancuex, jdc, bargolis, barut, smafey, and 68 others

properties (23)

author

tarikhakan55

permlink

part-1-building-profile-user-interface-design-for-all-web-pages-in-sass-scss

category

utopian-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/building-responsive-mobile-contact-form-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","https://utopian.io/utopian-io/@tarikhakan55/building-3d-mockup-presentation-for-all-book-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"],"moderator":{"account":"forkonti","time":"2018-02-21T21:06:07.977Z","reviewed":true,"pending":false,"flagged":false},"questions":[],"score":0}

created

2018-02-21 15:37:39

last_update

2018-02-21 21:06:09

depth

children

last_payout

2018-02-28 15:37:39

cashout_time

1969-12-31 23:59:59

total_payout_value

26.853 HBD

curator_payout_value

11.598 HBD

pending_payout_value

0.000 HBD

promoted

0.000 HBD

body_length

3,648

author_reputation

38,506,275,601,183

root_title

"PART 1 - BUILDING PROFILE USER INTERFACE DESIGN FOR ALL WEB PAGES IN SASS (SCSS) "

beneficiaries

0.

`account`	utopian.pay
`weight`	2,500

max_accepted_payout

1,000,000.000 HBD

percent_hbd

10,000

post_id

39,374,624

net_rshares

8,456,746,546,034

author_curate_reward

vote details (132)

voter	rshares	pct
adol	527,135,131,319	50%
thatmemeguy	6,685,417,101	50%
dyancuex	819,657,449	50%
damla	6,090,622,998	20%
toninux	631,892,658	50%
jdc	788,557,247	20%
bargolis	738,783,609	5%
helo	8,902,162,761	100%
flauwy	175,716,872,456	30%
monomyth	38,663,388,970	30%
herman2141	141,869,347	50%
mahdiyari	13,202,194,207	20%
ronimm	12,802,215,293	100%
mufasatoldyou	7,468,996,162	100%
makrotheblack	2,781,252,809	50%
simonluisi	2,027,980,188	100%
thinkkniht	500,079,142	75%
ravindraojha	22,952,802,026	15%
mahmuddin	451,861,357	100%
tradeownsystems	439,369,695	100%
jesdn16	3,061,952,549	100%
odibezeking	420,625,650	100%
yandot	7,899,762,753	30%
stoodkev	13,898,264,204	10%
luisrod	115,947,061	15%
ansonoxy	1,847,354,667	100%
jamesbarraclough	8,452,332,066	100%
smafey	675,970,226	50%
espoem	22,766,607,415	40%
sniffbiff	19,779,794,967	47%
gotgame	6,304,847,185	100%
zoneboy	1,544,508,711	50%
idlebright	2,829,222,703	50%
fknmayhem	29,366,493,118	15%
tarikhakan55	25,625,347,512	100%
utopian-io	7,354,627,748,833	4.63%
shreetbn	4,889,953,148	25%
kona9918	218,057,944	50%
moorkedi	4,305,597,907	100%
parag	221,794,450	50%
zouxx	53,960,049	0.05%
kimaben	434,657,405	50%
kslo	2,351,677,142	50%
mrmaracucho	564,379,266	100%
nathalie13	1,107,859,310	100%
not-a-bird	1,253,418,065	15%
adhew	61,532,000	10%
bitopia	1,718,377,733	100%
berkaytekinsen	1,407,669,061	100%
maane	265,844,789	50%
evilest-fiend	2,379,065,917	100%
omeratagun	5,434,947,433	5%
dharnarh	304,583,400	100%
navx	2,025,477,274	70%
ilovekrys	289,584,706	50%
family.app	127,678,307	100%
cgbartow	3,167,116,320	50%
irfandogan	1,427,551,100	10%
erhanoz	1,294,191,475	10%
maphics	98,863,051	100%
dethclad	1,525,804,857	50%
sebastiengllmt	306,775,823	50%
utopian-1up	17,949,495,831	100%
ewq	236,027,423	3%
barut	687,853,180	50%
zlatkamrs	423,285,407	70%
amosbastian	9,229,250,517	50%
acrywhif	2,990,361,123	80%
tugbabeauty	1,556,116,813	100%
layanmarissa	224,655,042	50%
proffgodswill	61,609,892	10%
sweeverdev	1,052,002,634	50%
isacastillor	1,333,843,096	95%
jerybanfield	96,625,461	50%
abelcachay	987,050,333	100%
marianarojas	987,066,593	100%
rhotimee	1,216,791,252	50%
jrmiller87	1,978,232,051	100%
patatesyiyen	71,931,229	12.5%
deejee	116,634,914	20%
rsteem	61,824,189	25%
e-babil	13,744,827,759	99%
onin91	168,664,119	50%
neneandy	3,521,343,447	50%
isabella394	2,450,321,641	100%
zinonweke	1,915,868,771	75%
sportscontest	69,290,990	50%
neokuduk	1,011,773,143	100%
literaturk	518,111,180	100%
lemony-cricket	4,934,250,311	20%
yeswanth	613,320,311	100%
exploreand	5,005,649,227	25%
petvalbra	613,606,833	100%
steemassistant	432,555,397	100%
busraadikti	592,992,500	100%
sudefteri	627,452,110	100%
olayhemy	323,095,402	50%
photohunter1	90,020,568	100%
photohunter2	102,540,086	100%
photohunter3	99,604,162	100%
photohunter4	84,986,416	100%
photohunter5	82,487,898	100%
howtosteem	3,050,362,255	100%
sylinda	220,944,361	50%
kingsman2	156,401,380	50%
shivamraichura	304,979,475	50%
fmbs25	292,420,499	50%
livsky	298,280,970	50%
badmusazeez	116,702,531	50%
roj	1,266,135,892	100%
kid1412	253,022,810	50%
elasevimli	488,584,496	50%
paav	460,332,608	75%
amirdesaingrafis	248,329,039	50%
fai.zul	252,213,415	50%
nightdragon	164,914,031	50%
mirna98	218,616,569	50%
flinter	159,435,020	50%
opulence	1,790,749,339	50%
phasma	122,704,606	20%
azharmaulana	222,033,094	50%
donjyde	236,455,651	50%
crispycoinboys	405,007,503	75%
umich	500,357,077	12%
gwapoaller	307,416,712	50%
bluestorm	462,810,469	75%
genoner	221,839,539	50%
dexter24	221,206,399	50%
pepememes	61,873,474	50%
feronio	230,680,209	50%
zay-arasi	231,369,830	50%
flugbot	122,643,184	100%

@forkonti · Feb 21 '18

$1.23

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

👍 utopian.tip

`author`	forkonti
`permlink`	re-tarikhakan55-part-1-building-profile-user-interface-design-for-all-web-pages-in-sass-scss-20180221t210615343z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
`created`	2018-02-21 21:06:15
`last_update`	2018-02-21 21:06:15
`depth`	1
`children`	2
`last_payout`	2018-02-28 21:06:15
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.926 HBD
`curator_payout_value`	0.305 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	172
`author_reputation`	10,537,156,901,294
`root_title`	"PART 1 - BUILDING PROFILE USER INTERFACE DESIGN FOR ALL WEB PAGES IN SASS (SCSS) "
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	39,436,820
`net_rshares`	222,186,146,256
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
utopian.tip	0 B		222,186,146,256	20.75%

@tarikhakan55 · Feb 21 '18

Thank you...

properties (22)

`author`	tarikhakan55
`permlink`	re-forkonti-re-tarikhakan55-part-1-building-profile-user-interface-design-for-all-web-pages-in-sass-scss-20180221t233004929z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"app":"steemit/0.1"}
`created`	2018-02-21 23:30:09
`last_update`	2018-02-21 23:30:09
`depth`	2
`children`	0
`last_payout`	2018-02-28 23:30:09
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	12
`author_reputation`	38,506,275,601,183
`root_title`	"PART 1 - BUILDING PROFILE USER INTERFACE DESIGN FOR ALL WEB PAGES IN SASS (SCSS) "
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	39,461,471
`net_rshares`	0

@utopian.tip · Feb 21 '18

Hey @forkonti, 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)

`author`	utopian.tip
`permlink`	re-re-tarikhakan55-part-1-building-profile-user-interface-design-for-all-web-pages-in-sass-scss-20180221t210615343z-20180221t231552
`category`	utopian-io
`json_metadata`	""
`created`	2018-02-21 23:15:54
`last_update`	2018-02-21 23:15:54
`depth`	2
`children`	0
`last_payout`	2018-02-28 23:15:54
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	158
`author_reputation`	238,310,597,885
`root_title`	"PART 1 - BUILDING PROFILE USER INTERFACE DESIGN FOR ALL WEB PAGES IN SASS (SCSS) "
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	39,459,283
`net_rshares`	0

@utopian-1up · Feb 21 '18

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

`author`	utopian-1up
`permlink`	20180221t222854714z
`category`	utopian-io
`json_metadata`	{"app":"1up"}
`created`	2018-02-21 22:28:54
`last_update`	2018-02-21 22:28:54
`depth`	1
`children`	0
`last_payout`	2018-02-28 22:28:54
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	764
`author_reputation`	2,324,758,056,093
`root_title`	"PART 1 - BUILDING PROFILE USER INTERFACE DESIGN FOR ALL WEB PAGES IN SASS (SCSS) "
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	39,451,646
`net_rshares`	0

@utopian-io · Feb 23 '18

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