Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,160,443 members, 7,843,352 topics. Date: Tuesday, 28 May 2024 at 11:44 PM

CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. - Programming (2) - Nairaland

Nairaland Forum / Science/Technology / Programming / CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. (2427 Views)

Laravel Nairaland Corner -- Post Any Laravel Code Issues, Get Solution For FREE / How To Hack Bank Account In Nigeria In 30 Minutes / How Can I Replicate This In Bootstrap? (2) (3) (4)

(1) (2) (3) (Reply) (Go Down)

Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Devdevdev(f): 5:23pm On Jan 21, 2023
funnix:


Mext time,just double click on your chrome browser and click on inspect .on the console by your right and side you will see styles.
Click on the color or background color to get a color picker,drag it on to the image color on your chrome browser. It will give you the color code

I wasn't given a link to the website. All i was given was screenshots.

1 Like

Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by majesticguy: 5:29pm On Jan 21, 2023
Devdevdev:


I just finished this. I had issues finding a burger image that matched the one in your photo, in the end I just settled for this one and as a result i had to redesign the page to match the background color of my burger so it wouldnt look out of place. Honestly i just added my own taste to the project.

It's good. So it's safe to say this is your own design, crafted or inspired by the original.

It would really be nice to see you make it responsive. And also, the original has an animation on that burger. It tilts infinitely from left to right. Although if you can't make that happen, it's ok. All in, great job.

1 Like

Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by TheStrongest: 5:33pm On Jan 21, 2023
GREATIGB0MAN:


Hmm nawao.
Is this reply not too harsh for that guy's comment.

If another person replied you this way you'd pick offense immediately.

He just said the colours didn't match. grin
I don't think it was too harsh..

I thought the idea was to give her challenges to see how she does with the layout, I believe layout is the most important thing in CSS(my personal believe).

Even if he had to point out her wrong choice of colours et al, at least he should have first acknowledged that she did really well with the design and give her credit for that first..

No be say he just went on to complain about the color straight without even acknowledging her efforts here.

2 Likes

Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by majesticguy: 5:33pm On Jan 21, 2023
Although I didn't give a screenshot of the mobile responsiveness, try to use your imagination and come up with something cool.
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Deicide: 5:47pm On Jan 21, 2023
That Pomodoro Is not correct. The red border radius didn't go over completely. I think that is the difficult part in the design.

1 Like

Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by majesticguy: 5:54pm On Jan 21, 2023
Here's more.

Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by majesticguy: 6:02pm On Jan 21, 2023
Deicide:
That Pomodoro Is not correct. The red border radius didn't go over completely. I think that is the difficult part in the design.

That design looks simple, but trust me, it's quite complex. The attention to details in the original UI is something else. Anybody who can perfectly replicate it a 100% is really really good.
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Deicide: 6:10pm On Jan 21, 2023
majesticguy:


That design looks simple, but trust me, it's quite complex. The attention to details in the original UI is something else. Anybody who can perfectly replicate it a 100% is really really good.
I know it's hard I have actually seen it before and I just Ran grin
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by truthCoder: 6:14pm On Jan 21, 2023
Devdevdev:


Lol, you couldn't even give any positive response, only complaint. I did that in under an hour, without any prior design info provided. Yet it is better than the nonsense you and your diib team spent weeks making. Look how ugly the UI in the website in the link below looks, like it was made in 1997. People like you have no right to talk rubbish. Biko puor nuzo.

You want to teach Machine Learning, Data Science, Robotics and Artificial Intelligence, when you cant teach ordinary html and css. Rubbish!

https://www.nairaland.com/6258720/take-look-portfolio-website-designed

Small quarrel, you went to bring ‘machine gun’
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by truthCoder: 6:14pm On Jan 21, 2023
Devdevdev:


I just finished this. I had issues finding a burger image that matched the one in your photo, and in the end I just settled for this one. As a result, I had to redesign the page to match the background color of my burger so it wouldnt look out of place. Honestly, I just added my own taste to the project.

You did well overall. Kudos
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Devdevdev(f): 6:15pm On Jan 21, 2023
majesticguy:
Here's more.

This is more of Photoshop than CSS. There isn't any background on the shirt. Even if I was to use a high z-index and do all the positioning tricks, I can't replicate this without some form of photo editing.

4 Likes

Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Devdevdev(f): 6:15pm On Jan 21, 2023
truthCoder:


You did well overall. Kudos

Thanks.
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by majesticguy: 8:28pm On Jan 21, 2023
Devdevdev:


This is more of Photoshop than CSS. There isn't any background on the shirt. Even if I was to use a high z-index and do all the positioning tricks, I can't replicate this without some form of photo editing.

No it's purely CSS... I got it from a CSS product page.

The image is a png image, they're images without background. And yes with positioning, you can actually pull it off, just that you might not get the shadows correctly.

I did something similar in my upcoming project (would be posting it soon), although without the shadows.

1 Like

Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Devdevdev(f): 8:57pm On Jan 21, 2023
majesticguy:


No it's purely CSS... I got it from a CSS product page.

The image is a png image, they're images without background. And yes with positioning, you can actually pull it off, just that you might not get the shadows correctly.

I did something similar in my upcoming project (would be posting it soon), although without the shadows.

I think I'll pass. I'm currently focused on Redux tool kit right now. I just used css to relax cos I was beginning to experience burn out from all the react shit I've been digging through throughout this week.

I went through your portfolio. You have good design skills. Are your skills just HTML CSS and vanilla JavaScript, or do you also know a front end framework like react? If yes, how far have you gone in learning react or whatever frontend framework you are focused on?
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by majesticguy: 9:10pm On Jan 21, 2023
Devdevdev:


I think I'll pass. I'm currently focused on Redux tool kit right now. I just used css to relax cos I was beginning to experience burn out from all the react shit I've been digging through throughout this week.

I went through your portfolio. You have good design skills. Are your skills just HTML CSS and vanilla JavaScript, or do you also know a front end framework like react? If yes, how far have you gone in learning react or whatever frontend framework you are focused on?

For the moment, it's just Html, CSS and vanilla JavaScript. I want to attain a certain level of proficiency with the aforementioned, before i dive into react.

To me, I strongly believe it's best to master the intricacies before moving on to the frameworks.

1 Like

Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by LikeAking: 9:13pm On Jan 21, 2023
majesticguy:


It's good. So it's safe to say this is your own design, crafted or inspired by the original.

It would really be nice to see you make it responsive. And also, the original has an animation on that burger. It tilts infinitely from left to right. Although if you can't make that happen, it's ok. All in, great job.


👏
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Deicide: 9:31pm On Jan 21, 2023
Devdevdev:


I think I'll pass. I'm currently focused on Redux tool kit right now. I just used css to relax cos I was beginning to experience burn out from all the react shit I've been digging through throughout this week.
Why are you learning redux though? Base react has useContext

1 Like

Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by JsScript: 9:34pm On Jan 21, 2023
Devdevdev:


Just finished this.
U trt...
The background color is #1E213F
Add the shadows let see how it really looks like
How close to the design u can get, cuz dats the difficult part of the design
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Nobody: 11:53pm On Jan 21, 2023
Devdevdev:


Just finished this.

You tried but the red circle isn't complete in the original design
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by tollyboy5(m): 1:17am On Jan 22, 2023
To be honest I thought she was capping! grin .
One yeye company gave me task and the css Is less.

The thing really gimme problem gan grin

Less kor sarz ni.

Devdevdev learn sass css too.
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Davidcorny: 2:52am On Jan 22, 2023
Devdevdev:


This is more of Photoshop than CSS. There isn't any background on the shirt. Even if I was to use a high z-index and do all the positioning tricks, I can't replicate this without some form of photo editing.
Technically you can.

You can put the image as a background image with the url pointing to it then use a transform translate to position it outside the div.

could use gap property if you aren't well versed in justify-items/justify-content.

You can do it in several ways, make a grid container for the main card, place it at center with place-items: center, create two columns with grid, the left section should have 3 divs, h3 tag for product title, p tag for description and a button for the button, all spaced with justify items space around, which means the 3 divs needs to be in a parent div, then the clothe div on the right you can just use background image and give it a max with and max height while using transforms to stick it where you want it to, could also use position absolute for it while the parent div is relative then set a z-index in case the borders cut off.
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Maclink288: 5:55am On Jan 22, 2023
Devdevdev:
I'm very very confident in my vanilla CSS skills and I want to put it to public scrutiny.

Challenge me by posting a screenshot of any UI from any website or any figma design of your choice and I will replicate that design in 30 minutes, for desktop and for mobile view. I'll post my design as well as the CSS code.

I'll use just vanilla CSS. No framework, no Javascript and no external libraries..
Check my collection and replicate anyone of your choice.
https://www.nairaland.com/7204592/ui-ux-design-collection
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by TheStrongest: 8:15am On Jan 22, 2023
majesticguy:


No it's purely CSS... I got it from a CSS product page.

The image is a png image, they're images without background. And yes with positioning, you can actually pull it off, just that you might not get the shadows correctly.

I did something similar in my upcoming project (would be posting it soon), although without the shadows.
I think the shadow on the image actually comes with the image. If that's right, it's a pretty easy design to pull off.
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by WallStreetfx(m): 10:29am On Jan 22, 2023
Devdevdev:
I'm very very confident in my vanilla CSS skills and I want to put it to public scrutiny.

Challenge me by posting a screenshot of any UI from any website or any figma design of your choice and I will replicate that design in 30 minutes, for desktop and for mobile view. I'll post my design as well as the CSS code.

I'll use just vanilla CSS. No framework, no Javascript and no external libraries..

Can I learn from u, I'm finding it hard to use media queries to make website look good on small screen and big screen. Can you share some tricks you use to boost your CSS skills. I just don't like bootstrap and tailwind. Or can I message u if u don't mind.
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Devdevdev(f): 12:23pm On Jan 22, 2023
Maclink288:

Check my collection and replicate anyone of your choice.
https://www.nairaland.com/7204592/ui-ux-design-collection

I love your designs. So beautiful and catchy. These are all figma designs right? You didn't code them?

This is a challenge I will willingly take. I'll start from the first site and recreate all of them using just HTML and CSS
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Maclink288: 12:28pm On Jan 22, 2023
Devdevdev:


I love your designs. So beautiful and catchy. These are all figma designs right? You didn't code them?

This is a challenge I will willingly take. I'll start from the first site and recreate all of them using just HTML and CSS
I did the designs on Figma, no code.
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by JoyousFurnitire(m): 8:59pm On Jan 22, 2023
Devdevdev:


Lol, you couldn't even give any positive response, only complaint. I did that in under an hour, without any prior design info provided. Yet it is better than the nonsense you and your diib team spent weeks making. Look how ugly the UI in the website in the link below looks, like it was made in 1997. People like you have no right to talk rubbish. Biko puor nuzo.

You want to teach Machine Learning, Data Science, Robotics and Artificial Intelligence, when you cant teach ordinary html and css. Rubbish!

https://www.nairaland.com/6258720/take-look-portfolio-website-designed

Lol be calming down. You should expect critics since you're building in public. Besides maybe I missed it he/she didn't say anything bad. 😏

1 Like

Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by JoyousFurnitire(m): 9:02pm On Jan 22, 2023
GREATIGB0MAN:


Hmm nawao.
Is this reply not too harsh for that guy's comment.

If another person replied you this way you'd pick offense immediately.

He just said the colours didn't match. grin

Dat person fit go dey break him oga head for work if them say ma he refactor code 😁
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Qinglong(m): 12:10am On Jan 23, 2023
There's the frontendmentor website for challenges like this as well.

1 Like

Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by rohitnegi: 7:07am On Jan 24, 2023
Devdevdev:


I wasn't given a link to the website. All i was given was screenshots.
https://brainalyst.in/what-is-big-data-analytics/
https://brainalyst.in/advanced-excel/
https://brainalyst.in/benefits-of-learning-data-science/
Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by 404Dev: 11:02pm On Jan 26, 2023
Devdevdev:
I'm very very confident in my vanilla CSS skills and I want to put it to public scrutiny.

Challenge me by posting a screenshot of any UI from any website or any figma design of your choice and I will replicate that design in 30 minutes, for desktop and for mobile view. I'll post my design as well as the CSS code.

I'll use just vanilla CSS. No framework, no Javascript and no external libraries..

Can you create this for me?

I will pay for this.

I need just the CSS and HTML, don't worry about the functionality of the close button or the positioning of the toast.

Need Just the design

Re: CSS Challenge: Post Any UI And I'll Replicate It In 30 Minutes. by Devdevdev(f): 3:30am On Jan 28, 2023
404Dev:


Can you create this for me?

I will pay for this.

I need just the CSS and HTML, don't worry about the functionality of the close button or the positioning of the toast.

Need Just the design


What's the width of the modal?

(1) (2) (3) (Reply)

The Ultimate python tutorial series for 2019 / Best responsive website design #2017 / How Has Programming Changed Your Life And The Way You Think?

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 64
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.