ASMR Programming - Profile Card UI Design - No Talking
HTML-код
- Опубликовано: 9 июл 2024
- In this video, I designed a profile card with Glassmorphism effect. This profile card design is fully responsive. The background image moves animatedly. This profile card design was made using only HTML and CSS. Javascript was not used. You can use this design for your website or profile pages.
🟢 Free Bootstrap Admin Dashboard Template
Download: cakeadmin.com/
💻 Monitor ViewSonic 21 Inch Full HD 1080p (My Second Screen)
amzn.to/3FFdTPJ
🟢 Join this channel to enjoy the privileges
/ @codeminton
Table of contents
00:00 Profile card preview
00:28 I prepare the working files
01:03 HTML structure
05:18 CSS reset action
05:40 Let's add google fonts
06:18 CSS codes
20:09 Here is the result
🚀 Playlists
✅ Only HTML & CSS Coding → bit.ly/3BFQDyU
✅ Login Page UI Desgns → bit.ly/3RvK0Eu
✅ HTML CSS Button Designs → bit.ly/3DftmER
✅ Game Coding → bit.ly/3PgGY4U
Man... I just started watching but I really liked it! please do more of this type of tutorial with no talking! it really helps to focus on coding! Thank you!
ofcource
This is amazing. I'm doing a thing for school and this video really brought inspiration
The video was so helpful!Thanks a lot!
I'm glad you have found your niches , Keep going Man, i believe in you
This is gorgeous!
You're blessed with the gift of Tutorialism!
bro thanks so much, you actually made soft soft easy to understand
I'm following all of your tutorials, thanks so much
it was my pleasure
thanks, it actually let me through so i could download it.
Que vídeo satisfatório! O som das teclas só melhora a experiência😌
I was given soft soft as a gift in 11, and up until recently, I was so overwheld by the complexity of it that I never got past just using
coz you did great work on the video, thank u for your help o7
getting going on my compositions!
best video eveer❤❤
Hey! Thanks for the video I just recently have to make a profile tab on my portfolio. Thanks to this code I am able to .. Thanks, buddy~
I'm glad it worked for you :)
keep uploading videos like this
I like the sound of that keyboard 😀
I'm having trouble getting the background color on the social buttons to appear. I've already installed sass and sass live server so idk what else it could be unless I need something else.
Thanks so much bro.
GOD THIS IS SO SATISFYING
Nice tutorial Michael,
Great video
Thanks so much
how to optimize it for the phone? I have a large part of the rounded (main) block on my phone on the right
TNice tutorials is so fun editing in it I just saw half of your tutorial and couldn't stop PLAYING WITH ITT dont worry I ca bac k after it
Awesome
When I first started I could import samples but now everti I do so it just gives the soft 1. I want to cut, stretch and edit the
Almost fell asleep wNice tutorialle listening to Nice tutorials voice
Tanks very Nice 😉😉
as someone learning to code front-end, I found how effortlessly you wrote code very impressive, I need to find out more about theses VSC shortcuts as I manually type everything hahaha.
Sorry for possibly breaking the 4th wall for you, but more than likely they have the code open on another monitor. The reason for this is that going through the trials would ruin the flow of the video. It would take away a lot for the video if things didnt work out the first time. The viewer would focus more on the errors rather than the content the creator is showing :D ...or he is a super genius and can see the code in his head before he types it out and knows it works 100% :P and the VSC shortcuts will come naturally as you learn the platform. I get the same feeling when i watch someone type in VIM lol. Have a great day! Hopefully i didnt ruin anything for you :)
Nice video 👍
If i just finished my work and save, the format is .softp , is tNice tutorials type of file compatible with other DAW? like ableton or LogicProX for
Your Amazing
Thank you for tNice tutorials very clear and concise tutorial. Look forward to more videos from u
sende türkmüşsün be sevindim kardeşim. inşallah senin gibiler de bu kadar gelişebilir
eu nem mexo com programação, mas assistindo isso, 20 minutos pareceram que foi 2 minutos, que som gostoso kkkk
I think your github will be really intresting, keep it up :)
In css why the bg cant appear in the browser? Do i have mistake?
verry good
Bro i have a question why you put &::before, in 12th line in css code, what's it means or signification. Please reply.
Nice
Thank you, I really needed to hear tNice tutorials!!
Hey man, thanks for your great videos...found you a few days ago and i am impressed. do you have a list of all of the vscode plugins you use?
Thanks :)
Auto-Save on Window Change
ESLint
Fix VSCode Checksums
Live Sass Compiler
Liver server
Material Theme
Vim
i need more pls thank youuuuu
ofcourse
Finally Mins later cos out with the soft
How did you enable that Emmet preview box? What theme do you use on VsCode?
Material Theme
how u jump to other lines wothout using mouse
make my first ever drum loop. I'm not and expert at soft yet but I have learnt a lot at producing and looking back at my journey, I just
Mylosp just a legend really aren’t ya
Jo i love your videos.
What Theme do you use in VS Code and what percent of transparenty do you use?
0.8
Thank you so much, please make more tutorials like tNice tutorials. You explain better than any other guide I've seen on youtube, very clear and
but he didnt explain anything...
Very nice information Sir
hey wheres the code at
&__img img and &__desc does not translate. Do i need to write "img" with italic?
Your content is awesome. Can you design an audio button feature on that page? Would love to see how you'd do that .=)
alguien tiene el codigo?
What's theme you use in vscode?
(1) In "Edison" it would be possible to create and play Loops in Any Order we like. Example. Loops=(2, 6, 8, 1) or (12, 1, 3, 6.10,) and
Yes this is genuine hack and works as promised in my case. Thank you very much.
can i have a link to that keyboard?
It's awesome. I want to watch how u code on react
What are your extensions ? pls tell
Can you please tell me what vscode color scheme you are using in this video?
i'm using material theme.
Best
Great video! What theme are you using for styling font-colors, etc? :)
material
Hey! I am trying to recreate this project in order to improve in html coding however I stumbled across a error in the CSS part.. more specifically at around 6:50 . When I tried to write the same code as yours all the " &::before " block of code has errors in it, and when I hover my mouse on the " & " it says this: " } expectedcss(css-rcurlyexpected) ", do you think you can help me? Thank you (:
P.S. I did verify all the semicolons and other small details and it seems to me that everything is fine, but the block code just doesn't work at all.
Hello. I could not understand where the error is. I need to see your codes. I would be glad if you share the codes with me. (with codepen or jsfiddle).
@@Codeminton It seems I could fix the problem, I changed the " &::before " to " body::before "
@@Codeminton same problem!!
Could you make the texts in your VS code larger in your future videos? I'm watching it on a laptop and sometimes it reaaly put a strain on my eyes, thanks. Fantastic videos btw, keep up the great work!
Thank you for your comment. I will consider your suggestion.
Man, is your background image saved in the project folder or is it a web url? I couldn't replicate that part here!
Also, your work is excellent! I'm learning a lot here!👍🏽
Thank you for your nice comment. I added it to the project folder. This is a Google Search background.
Top
很漂亮的网站
Learned 200 VS Code Shortcuts watching this
What is your background use in VSC? Can u have the extension link ? Thank you very much
He has made VS code transparent. That is a standard Windows 11 wallpapers
@@preetham4948 How can he make VS code transparent ? Are u know ?
He is using material theme and glassit plugin
I still don't know how to attach the style.scss file to the index.html file, I do the same but it doesn't works.
He didnt say/show in the vid but you might have to install "sass" to actually see it. i had the same issue until I installed it.
Que personaje tan talentoso. Ojalá algún día logré aprender tanto como tú. 🤍
Good vidio
Is the sound in the video a keyboard sound or a background effect?
Does the A4Tech FK11 Compact really sound like this?
no its not. Author using some software
@@pintofale thank you bro
@@sukruesen8397 np,s! i found what he using: Mechvibes software, NK Cream - theme. have a good day :)
@@pintofale I just downloaded Mechvibes and now I use it 😂. Thank you. Have a nice day :)
What is the VS code theme?
can u share the bg.png background, thank you
Myanmar dia Light I have the demo version right now would you recomnd buying the full version?
what keyboard do you use? It sounds amazing!
FK11 Compact
@@Codeminton thanks!
Apple-esque nice
program na drop down nu wNice tutorialch lists all the different app softs. For so reason it makes the default "Agressive TE" make sure
The scss file styles are not applying to the HTML file even though I have linked the file. Please help.
You need to give me more information so I can help you (Which editor etc.)
@@Codeminton VSCode.
I followed the steps as shown in the video but the styles are not working.
Hi, thank you very much for your video. I have some questions, it would be great if you support to answer
1. What is the point of adding reset.css
2. How did you set up and use scss in your project
Thank you very much
Hi,
reset.css is used to clear the default properties of browsers. Thus, the codes we write give better results.
I am using vscode plugin to compile Sass (Live Sass Compiler Plugin)
font-size configuration vsc in 18px Please :)
Hi, I love your keyboard sound. is this a customised keyboard?
A4 Tech Keyboard A4TKLA46787
What keyboard and switches are you using?
royal kludge blue switch
which keyboard is that?
Unstoppable today, unstoppable today
Any one have source code of this page
The card has rounded edges that are different from the buttons.
Also your mind catches more stuff when you're interested
how can we share the link?
hey sir,actually what is the size of your photo in added that websiite
300X300
And what is the size of back ground image You added?
How to install the same VSCode theme as yours? I mean the background, it looks awesome)
I am using Material theme and Glassit plugin
yoo, cool vid. do you mind sharing the name of the theme that u are using?
Material theme
Can you share the source code?
하다하다 ASMR 프로그래밍까지 나오네
Man in distress...........Quick question what methods did you use to get where you are pls need help???
How to make vscode to transparent ?
Vscode glassit plugin
What model of keyboard are you using? Please tell me that.
Video super
FK11 Compact Keyboard
@@Codeminton Thanks bro