Implementing a design from Dribbble with HTML & CSS



May 15, 2020

alt text

Happy Friday guys! 🔥

I get asked a lot of times how one can improve his CSS skills. Usually, my main answer is to simply practice it using 'real world scenarios. For this, I advise people to just go to a website like Dribbble, pick a cool website design that they like and implement it !

That's exactly what I decided to do for this tip! I picked a design that I created and posted on Dribbble a while ago and I just implemented it with HTMl & CSS.

<body> <div class="screen"> <h1 class="screen__title">Up for a challenge?</h1> <div class="screen__form"> <h2 class="form__title">Create Account</h2> <div class="form__inputs"> <input type="text" placeholder="Name" /> <input type="email" placeholder="Email" /> <input type="password" placeholder="Password" /> </div> <button class="form__button">Ready</button> </div> <p class="screen__footer">Already have account? <strong>Sign in</strong></p> </div> </body>

Check the HTML and CSS for it, it's all pretty simple. Let me know you have any doubts with it.

body { font-family: 'Raleway'; background-image: url('bg.jpg'); background-size: cover; background-position: bottom center; display: flex; align-items: center; justify-content: center; } .screen { position: relative; width: 325px; height: 700px; border-radius: 25px; background: #fff url(wavy_bg.png); background-repeat: no-repeat; background-position: bottom center; box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); } .screen__title { color:#002771; font-weight: 900; max-width: 80%; margin: 40px; font-size: 35px; line-height: 49px; } .screen__form { width: 85%; margin: 60px auto 0 auto; padding: 25px; background: #fff; border-radius: 8px; box-sizing: border-box; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .form__title { font-size: 16px; font-weight: 800; color: #002771; } .form__inputs { margin-top: 5px; overflow: hidden; } .form__inputs input { width: 100%; padding: 8px 5px; border: none; margin: 12px 0; border-bottom: 1px solid rgba(88, 88, 90, .31); } ::placeholder { color: #8F8F93; font-family: 'Raleway'; font-weight: 600; letter-spacing: .03em; } .form__button { display: block; border: none; background-color: #00266C; color: #fff; border-radius: 8px; font-weight: 600; letter-spacing: .01em; margin: 15px auto 0 auto; padding: 6px 16px; } .screen__footer { color: #fff; position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 10px; } .screen__footer strong { font-weight: 800; }

And please let me know if you liked this type of tip and if you want to see more like it! i really think it's a neat way to learn CSS in a practical way.

Have a great weekend guys, take care! 😁♥️