Share your repls and programming experiences

← Back to all posts
Weekly 5 – Product Page

Weekly 5 – Product Page

Hi! 👋

This is my first weekly challenge, a product page.

Well, what's the product?

The product is Apple's new iMac 24"! Here's how it looks like:

It's a responsive site (meaning that it can be viewed on several different screens like computer, tablet, and phone) with several sections.

Links 🔗

Features ✨


  • 4 items
  • Links to landing page, design aspects, tech specs, and buy page

Landing page

  • Title of product (with introduction 'Hello')
  • Image of iMac
  • Down chevron that floats up and down

Feature page

  • Design aspects

    • 4 features
    • Each with title, description, and image
    • Size
    • Power connector
    • Weight
    • Keyboard and mouse
  • Tech specs

    • 6 features
    • Each with image/icon and description
    • 24" 4.5K Retina display
    • 1080p FaceTime HD camera
    • Apple M1 Chip
    • Magic Keyboard with Touch ID
    • Six-speaker sound system
    • MacOS Big Sur

Buy page

  • Discover text
  • Image
  • Buy button

Style 🎨

Most of the colors you can see are directly from the iMac itself; for example the dark blue on behind the computer, or the light blue in front:



Some colors of the text are a gradient of those 2 blue colors, which makes a beautiful result like so:

The font used is -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif. There's also the cursive 'hello' from the landing page:

The icons come from Font Awesome.

The wireframes in this README were made with this Google Slides by me.

Code 💻

Nothing else much to say, except that this site was made in HTML, CSS (of course!!), and a bit of JS.

Here's a bit about the transitions in the landing page (where the text fades in and the image slides in from the right).

For the fade in, we use the property opacity, where opacity: 0; means the content is invisible and can't be seen, and opacity: 1; means the content is fully viewable.

We also use CSS animations with @keyframes; animation: fadeIn 4s; means that the .text element has the animation called fadeIn and it'll last 4 seconds. We can see that, in fadeIn, it starts at opacity: 0; at 0% (so at 0 seconds), then increases to opacity: 1; at 100% (so at 4 seconds). This creates the fade in effect.

Now for the image sliding in from the right, we have position: relative; so that its position can be relative to the top, bottom, left, or right. We have another @keyframes, called slideIn, where we start the image 200px from the left, at 0%. Then at 100%, the image will be 0px away from the left, meaning it will go back to its original position.

There's also the down chevron or down arrow that is used to proceed to the next section. It's not an icon, but just a div with just the bottom and left border showing. Then, with transfor: rotate(-45deg);, we turn it so that it's like half of a diamond, with the borders pointing downwards. animation: down 3s infinite; makes the chevron have the animation down that lasts 3 seconds and goes on forever (infinity). Its position is also relative, so that it can be moved up and down.

In @keyframes, at 0% (0 seconds), the chevron is at its original position (top: 0;). At 25% (so 0.75 seconds), we increase the size of the arrow with scale(1.05);. Halfway, at 50%, or 1.5 seconds, the chevron has moved 20px from the top, and become a big bigger with scale(1.2);. At 75% (2.25 seconds), the size has decreased back to scale(1.05);, and finally at 100%, the chevron is back to its original position, and original size.

You might have noticed that at each percentage, there's rotate(-45deg). This is because scale and rotate are both in the transform property, and if we just assign scale, without rotate, the div will be rotated back to 0deg. That's why it always has to be there.

Lastly, the little bit of JS in the site is used to hide the down chevron until the animation on the site finishes. Both the fade in and the slide in take 3 seconds, so after that period the arrow can show.

We use the setTimeout function so that after 3 seconds, or 3000 milliseconds, the following code will execute. We first replace the .hidden class of the arrow (that has display: none; which hides the element) with the empty string '' (so it basically removes that class), and then update the class of the chevron.

Closing 🚪

Well, that's about all! Make sure to let me know any comments, suggestions, or questions if you have them! :D

Have a fabulous day!!!

Bye! 👋


...And that, repl community, is why one does not simply compete against Bookie0 in frontend weekly challenges.


@FlaminHotValdez lmfaoooo thanks! :)


Finally someone who likes macs :)


@IMayBeMe lmao


Windows 11 do be coming tho @Bookie0


I know. @Whippingdot


Nice page and themeing, but the borders are pretty atrocious on my system ("say hello" is at the very top, with no breathing room, and the final "discover the all-new iMac" has no horizontal space) — my resolution's 1366 x 768 if you want to try it yourself

I know you put a lot of work into this, just hoping to make it better :)


Thanks! Yeah it’s maybe because I have a rather tall screen so that may be why I didn’t experiment that much with responsiveness for laptops and smaller screens lol.

Wish I could try to fix it a bit but unfortunately I don’t have a computer with me for the next few weeks, OBLY an iPad with a smaller resolution than yours lmao.

Thank you for the feedback anyways! :) @fuzzyastrocat


@Bookie0 Ah okay, well yeah probably still fine anyway


I guess, thx though! :) @fuzzyastrocat


Awwww, you killed it! Now I don't know how good mine is gonna get rated :(

You are simply awesome at frontend!

Oh and also I know this is completely random but my dad used to code a long time back so I always show him the weekly challenges because he wants me to become a very good coder as it is the job I want to take in the future. He still remembers a lot of C++ so he helped me with last month's challenges, but he has no knowledge in frontend. I told him about this week's challenge still, and today I showed him your post and your website and he said you should start getting paid for your work! He said your website is amazing! You truly are good at frontend (maybe ask amasad if you guys could work together to make replit look better, not that I have any problems with its design whatsoever)


@Whippingdot lol nice Ted talk.
There are actually some problems with replit’s design lol, so it’s good to report bugs :)


@Bookie0, what's your opinion... iMac or Macbook Pro


Well they’re very different things.. it’s like comparing a truck and a car; they’re both automobiles or vehicles, but still different.

Also depends which models you’re talking about lol @FloCal35


i think this is gonna win


Lol thanks! :) @jihhyuu202


design aspects is a little too faded for me but overall is super pog


@Aivoybia What do you mean by a little too faded? Like not bright enough? Thanks though! :D


@Bookie0 faded as in it looks like there is a little bit of fog In front of the word(no offense)

I think it would look better if the color was a little more solid, and the sub-headings a tiny bit smaller, by 2-3.

This is my feedback so you don't need to change them.


@Aivoybia Ah ok, which words? It might look a bit faded because of the fade in effect I added (for the text on the landing page).

And for the color being a bit more solid, I think I know what you mean.

Thanks for the feedback! :D


Design Aspects, Tech Specs, and Discover the all-new 24”


@Aivoybia Oh ok, thanks! :)


Amazing! There's a pretty big change you're going to win this!


Thanks! :) 🤞 @VulcanWM


np! :) yeah i hope so too @Bookie0


this is very cool


@Bunnytoes Thanks lol! :D


Dangggggggg, I knew you'd do Apple and absolutely crush us but this is insane! Really kewl dude.


@RayhanADev Lmaooooo thank you!! xD


@Bookie0 I'm franticly rushing to make mine even a fraction of as good as yours lmfaoo.


Nah yours is really cool the figma you made is awesome!!

Go Cosmic Kittens™️!


Lol doesn't this picture look off...


What do you mean? @Whippingdot
Maybe it looks a bit tall.


no it seems cut off at the top but that wasn't the subject of your photo so I think it is alright @Bookie0


Ah yeah it’s because I took a screenshot of the animation on Apple’s website. However yeah the subject of the photo is the bottom, the weight of it lol. Thx anyways. @Whippingdot


Navbar with light gray border


@Bookie0 nice. Also you know the original hello campain came from the first Macintosh Computer. The UI was based off Xerox Parc (yes the paper/printer company)


Yep lol (read the whole Steve Jobs) @StringentDev


"Surprisingly light; less than 10 pounds." Aren't they all? or at least mine is


@Bunnytoes What do you mean by 'all'? And what do you have?


@Bookie0 nvm I thought that most of those were less than 10 lbs


oh lol @Bunnytoes