Wanna know how to code this with pure CSS and responsiveness? Check out my recent speed code video here: ua-cam.com/video/wAiC310hg3Q/v-deo.html Link to the source code is in the description! Stay tuned for more and thank you for watching ^_^
To make this in CSS, a hint for you is to make multiple background covers: (last layer is fixed so it doesn't move when scroll) { background: url(../css/images/cover-pic-1.png) center, url(../css/images/cover-pic-2.png) center, url(../css/images/cover-pic-3.png) center, url(../css/images/cover-pic-4.jpg) fixed center; background-size: cover; }
Hey yall, I know people are annoyed that this isn't a normal speed tutorial (I myself am included) but I only made it this way cos I didn't have enough time. However, I will be posting new content soon (actual normal speed videos) after I finish my term at school! For now, please accept this gift as my apology for the inconvenience ↙ drive.google.com/drive/folders/1UNzcpyv7JZFgi4NZbDblQMntJfipW4Ip (This includes project files to help you recreate this design) Stay tuned for more content as I assure you they will come very soon :) THANKYOU :D FAQ: Q: What fonts did you use? A: Bebas for the years, Montserrat for everything else Q: What programs did you use? A: Adobe Photoshop to cut the image, Adobe XD for creating the UI design
@@somerandomchannel382 use webflow it's faster than Adobe xd and it's create an actual website not just a mock up btw everybody who knows webflow can probably do this In an hour...
im just starting and tNice tutorials video was perfect.Well explained and easy to follow for a beginner.I never understood soft soft till i watched tNice tutorials.
I just posted a new video coding this website with pure CSS and responsiveness! Media queries were no trouble at all. Check it out here: ua-cam.com/video/wAiC310hg3Q/v-deo.html
Didn't even know this was possible in XD! Also really nice of you to include ressources - made it much easier to follow. Thank you for an awesome tutorial! Really appreciate it :-)
The amazing things about it is, you don't use InVision Studio. Maybe I'm too too late for the gang and dunno Adobe XD now support that kind of automatic animation, but, it is a good job.
i don't think it can be translated right away on XD (if im wrong please correct me) but you can use this as a guide when recreating it using HTML, CSS and JavaScript. Usually when I am making a website, I make one of these (prototype/mockup) to give me a visual guide on what to code and where to place stuff so im not just blindly coding a webpage and deciding where things go and which colour on the spot
Earl Pascual UI/UX designs create a template in a program of their choice like Adobe XD than pass it off to front end developers who make the site come to life with the assets given to them. This then gets passed off to backend developers who work server side.
he is doing it super inefficiently. PS has a magnetic lasso tool that is quicker. Anyway, hope Im not late but the 2020 version has an object selection tool that will do most if not all of the work for you
Hello, dear, you have showed your skills, that's a good thing. But, the next part is, people want to know and learn how to do this, and the basics for this. So it would be a good thing to make a tutorial video on this and other projects you make. Wish you have a great time.
Hey, Is html and css is really required to create these websites or I can use Adobe xd instead. I am really tired of typing those codes for little stupid things.
someone commented that there is a plugin you can install in Adobe XD to generate HTML and CSS for you but i've never tried it so maybe you can find and use that? but unless that's an actual plugin i'm afraid we will have to manually use HTML/CSS/JS to create these if we want them exactly the way we designed them to be :( ive heard of other software that can generate code for you but i have also heard people having bad experiences with them cos the generated code isn't good? but yeah that's all i know for now. personally i just code it myself so i have full control of the outcome
UPDATE: someone commented about this thing called Elementor which seems to be a drag and drop website builder for wordpress. ive only briefly looked at their website but this may interest you: elementor.com/
Looks pretty cool but how is it used? Does it count as a web page? Movie? Interactive w/e? Isn't one very limited in resolutions etc only working with pictures? *What is the end result code type?
Ah I get it so it's not actually parallax scrolling you've set a time trigger to give the effect of parallax? - for the people complaining just slow the video down to 0.25x speed ;)
Wanna know how to code this with pure CSS and responsiveness? Check out my recent speed code video here: ua-cam.com/video/wAiC310hg3Q/v-deo.html
Link to the source code is in the description!
Stay tuned for more and thank you for watching ^_^
Is it possible to generate an angular code from the design create on the adobe xd?
hey where's the source code ?
To make this in CSS, a hint for you is to make multiple background covers: (last layer is fixed so it doesn't move when scroll)
{
background: url(../css/images/cover-pic-1.png) center, url(../css/images/cover-pic-2.png) center, url(../css/images/cover-pic-3.png) center, url(../css/images/cover-pic-4.jpg) fixed center;
background-size: cover;
}
Google for "css parallax scrolling perspective"
@@vladislavsabenin2298 then spidibab spidiboob ctrl+c, ctrl+v
This UA-cam recommendation is just awesome!
thanks lots :)
I was in a dilemma whether to view it or not. I am glad that I didn't chose not to.
same
Hey. There is a very nice feature in photoshop. It is named: "paste in the same place". By ctrl+shift+V.
Why isn't there a "love" button on UA-cam? This deserves it.
thanks so much :)
Hey yall, I know people are annoyed that this isn't a normal speed tutorial (I myself am included) but I only made it this way cos I didn't have enough time. However, I will be posting new content soon (actual normal speed videos) after I finish my term at school! For now, please accept this gift as my apology for the inconvenience ↙
drive.google.com/drive/folders/1UNzcpyv7JZFgi4NZbDblQMntJfipW4Ip
(This includes project files to help you recreate this design)
Stay tuned for more content as I assure you they will come very soon :) THANKYOU :D
FAQ:
Q: What fonts did you use?
A: Bebas for the years, Montserrat for everything else
Q: What programs did you use?
A: Adobe Photoshop to cut the image, Adobe XD for creating the UI design
Do we have to make this design in html manually
@@urbanpallete4838 from what i know you will need to do it manually but there are probably software out there that can do it with a drag and drop?
Kiaan Castillo Really ? If so could you tell me what software you think of ? I make web sites and frameworks is what I normally use or no start css.
@@somerandomchannel382 use webflow it's faster than Adobe xd and it's create an actual website not just a mock up btw everybody who knows webflow can probably do this In an hour...
@@oscarvaldez10 I made a speed code video making this website under 20 minutes! Check it out :)
im just starting and tNice tutorials video was perfect.Well explained and easy to follow for a beginner.I never understood soft soft till i watched tNice tutorials.
Anyone else driven crazy by the white line on the left? was just waiting for you to paint it out!
noooo now i cant unsee it 😭😂 thanks for pointing that out, i hadnt noticed until now!
Good luck with the media queries guys.
I don't really want to think about it...
I just posted a new video coding this website with pure CSS and responsiveness! Media queries were no trouble at all. Check it out here: ua-cam.com/video/wAiC310hg3Q/v-deo.html
@@KiaanCastillo holy
I would just replace it with a static picture because LOL mobile
@@TheGargalon yeah or old computers too.
Didn't even know this was possible in XD! Also really nice of you to include ressources - made it much easier to follow. Thank you for an awesome tutorial! Really appreciate it :-)
this is insanely cool
thanks for the idea
Dhea Putri Permatasari thanks lots! stay tuned for more :)
Flawless
This is the best free software Ive seen. Respect.
If you're a complete beginner to soft production then soft is imo the easiest daw that you can get, I started off with it.. If you have a little bit
This is just pure magic! Id love to see more of these vids / a tutorial
thanks :) i will be uploading more soon (sorry just really busy with school). i will be uploading more design videos and also coding videos !
Awesome!
More videos like this. Best YT Recommendation ever. Keep up the good work
When you make a vid about adobe XD and the video is 4:20 long xD Good job my dude
adobe are the biggest trolls for naming it XD
Recommended by UA-cam and was just awesome
.
Fastest things in the world :
Big boom,
Speed of light,
Me clicking the subscribe button.
That’s actually dope! Watch the job offers come flying in.
Excellent design! Perfect ! It’s very beautiful and it’s changing from other websites. Keep going!!
thanks so much :)
Oh, I goodly want to hear so!
My dude. This is sick. Blown away
TNice tutorials was an amazing tutorial. You are a great teacher
Had this shit existed when I was a designer, I would've been incredibly happy
I could scroll up an down all day just to see that one effect :3
is the best recommendation that youtube gave me
up to now. Your soft is great too!
WHO TF ARE YOU
Everything works, especially free, use until it is too late!
Don't regret coming after seeing the recommendation :D
Thanks youtube recomendation :)
Hi old folks, flash is saying hi - from the grave.
I'm former Action Scrip Programmer, you hurt me for making me remember the past.
You just deserved much more thab "just" over 300k subbers.
Thanks u changed my life
Hey brother please make step by step tutorial to learn xd. It will be very helpful for beginners like us
Thanks! Your video content is the safest and most useful
The amazing things about it is, you don't use InVision Studio. Maybe I'm too too late for the gang and dunno Adobe XD now support that kind of automatic animation, but, it is a good job.
you have about the software. I personally enjoy learning so it was a little bit easier to do it over ti. But you’ll get there brother
amazing video!! it's really great!!
Worked smoothly, tysm
Pls make a tutorial for this kind of effects and animations!
will do soon, please stay tuned :)
What is next Process? Do we must recreate it in html and css? Or it can be translated somehow in straight forward way?
i don't think it can be translated right away on XD (if im wrong please correct me) but you can use this as a guide when recreating it using HTML, CSS and JavaScript. Usually when I am making a website, I make one of these (prototype/mockup) to give me a visual guide on what to code and where to place stuff so im not just blindly coding a webpage and deciding where things go and which colour on the spot
@@KiaanCastillo I think there is a plugin in Adobe XD which allows you to export what you have done to a CSS file. - Dont quote me on that xD
Mr_Padingy thanks for letting me know! ill definitely check that out and maybe use it in a video :)
FRAILEN thanks for confirming ! i will definitely get on that
Awesomeness right there
Mind if I ask a noob question but how is it going to be translated into a working application since this was used in adobe XD.
Earl Pascual UI/UX designs create a template in a program of their choice like Adobe XD than pass it off to front end developers who make the site come to life with the assets given to them.
This then gets passed off to backend developers who work server side.
Earl Pascual When front end developer is done then he hands that to back end developers
”Fun and simple"
*Proceeds to watch 0:23
"ok I already don't know this"
he is doing it super inefficiently.
PS has a magnetic lasso tool that is quicker. Anyway, hope Im not late but the 2020 version has an object selection tool that will do most if not all of the work for you
Nice, I will be try it in HTML. Thx :)
that's so useful for beginners!
GENIUS
This is so freakin awesome. Love you!
Title : Speed Process
Me : Proceed to play it in 2x speed
4 hours in 4 minutes
Noice
Going to try this on figma. Make more bro.
earned my respect bruh! you really are rocking it
thanks so much! :)
Woah! Awesome effect! I would like to have a web project with that! XP
thanks :)
Hello, dear, you have showed your skills, that's a good thing. But, the next part is, people want to know and learn how to do this, and the basics for this. So it would be a good thing to make a tutorial video on this and other projects you make. Wish you have a great time.
Hey, Is html and css is really required to create these websites or I can use Adobe xd instead. I am really tired of typing those codes for little stupid things.
someone commented that there is a plugin you can install in Adobe XD to generate HTML and CSS for you but i've never tried it so maybe you can find and use that? but unless that's an actual plugin i'm afraid we will have to manually use HTML/CSS/JS to create these if we want them exactly the way we designed them to be :( ive heard of other software that can generate code for you but i have also heard people having bad experiences with them cos the generated code isn't good? but yeah that's all i know for now. personally i just code it myself so i have full control of the outcome
UPDATE: someone commented about this thing called Elementor which seems to be a drag and drop website builder for wordpress. ive only briefly looked at their website but this may interest you: elementor.com/
thank you so much dude you're a god
Love this one! finally youtube recommended something DOPE!
So informative, thanks a lot!
web developver is crying in the corner hahaha, but this is awesome
Perfect working 👍
Thank you so much for this!
Looks pretty cool but how is it used? Does it count as a web page? Movie? Interactive w/e? Isn't one very limited in resolutions etc only working with pictures? *What is the end result code type?
YOU'RE A GENIUS
awesome design 👍
This is insanely impressive
thanks, downloaded, all works!
El diseño gráfico es mi pasión xd
Awesome and wonderful
thanks so much :D
Love the design! 👍🏼👍🏼
Awesome!
It's just awesome
awesome!
this was amazing bro, pritty smart btw
i saw this this days on Invision Studio Community
Very coooool!
Dive in!!
Ah I get it so it's not actually parallax scrolling you've set a time trigger to give the effect of parallax? - for the people complaining just slow the video down to 0.25x speed ;)
Nice work! Keep it up.
thank you, so glad you like it :)
Amazing app, i wish i was a web designer xd
Amazing work man I'm speechless 👌😍
Works well!! DANKEEE
I can do it with AE, but with XD it so fantastic man=]
I like UA-cam recommendation if the video is like this
Very nice!
It worked! Tank you sir.
AWESOME
Nice shot!
thanks :)
Now start developing that. T_T
the pain
responsive
@@burrenBLR ie 10 compatible
I am kidding ie 11 compatible is enough
Nightmare
Awesome video !!!! Love this design so nice !!!
Woww.. this is amazing ❤
thanks so much :)
Watch at 0.25x speed and learn how he did it.. 😁
Golden recommendation man
I loved it
good and creative
creating a second track to add into the recording as I play through the first tract?
Awesome
Amazing
هل يتواجد من هذا البرنامج نسخة 2015 ؟؟
すご...
Wow, very very nice))
thanks a bunch :)
Ohhh myyy!!!
thanks! :D
Incredible.
thanks :D