Sexy Registration Form: CSS Tutorial (Day 4 of CSS3 in 30 Days)



Use CSS to style a web form into something visually attractive with a great user experience!

⭐️Files you need ⭐️
💻Sexy Registration Form Code: https://www.dropbox.com/sh/if3eed7uuvlp4qk/AAAJiigOjaIHd7NcbclqDAGMa?dl=0
💻All tutorials in this series need this “_theme-styles” directory (only download once): https://www.dropbox.com/sh/890hx6ke34oovaz/AAByJ-jb-H5pWuIUx7t_GvQqa?dl=0

This video works as a stand-alone tutorial but is also day 4 of CSS3 in 30 Days. For the rest of the series, check out this playlist: https://www.youtube.com/playlist?list=PLWKjhJtqVAbl1AfjiGyYxwpdAPi5v-1OU

CSS3 in 30 Days is developed by Brad Hussey. Check out his website for more great tutorials: https://codecollege.ca/

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

source

This Post Has 23 Comments

  1. Umar Nasir

    What an amazing tutorial. I learned a ton about html layout and how it relates to css function calls

  2. Muhammad Adnan

    How to stop hover to show drop down in media screen and active click function to show dropdown ? Menu

  3. Oplawlz

    Not to nitpick, but isn't outline:none an accessibility faux pas?

  4. Joel

    Thank you for all the work you do Mr Brad, you are an awesome tutor. Someday I'll pay for all these knowledge you and other tutors here, and around give me for free. Cheers! Happy coding

  5. Palicho Ki

    I deleted the {position: relative} in .register-wrapper, then the hovering card effect doesn't work anymore. How position: relative of wrapper affect the register-block::before and register-block::after?

  6. Anurag Bajaj

    background-image:repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.15),
    rgba(0,0,0,0) 25%
    )
    won't this be a better approach for the button linear gradient ?

  7. FuzzyPumpkin

    We have different definitions of "sexy" :P. That said, really enjoying the series. I was kind of at an ends since I'm past beginner level and looking for something more intermediate to advanced and this has filled a niche. I learn at least a couple new tricks and a "why" every video.

  8. Chidy Nwanya

    This is really nice, learnt new things fro this tutorial

  9. although there are some techniques that I don't use or agree with, you have to remember one thing.

    Free lessons cannot be beat, take the good out of it and dispose the bad.

  10. Mobile HacZ

    Just feel like doing some magic.. It's really amazing 😍

  11. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.

    HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?

    I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0

    BIG MONEY POTENTIAL IN RUVOL!

    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at: rodolfovitangcol@gmail.com.

    Thanks and God bless!

    RODOLFO MARTIN VITANGCOL

    The Ruvol Inventor

  12. Arpit Bharadwaj

    By mistake, I gave register-block class a z-index = 5, the cards started to come above the register block even they had z-index = -1…why so?

  13. Easythingz

    Had no idea registration forms could be this sexy! Awesome tutorial

Leave a Reply