Share your repls and programming experiences

← Back to all posts
Weekly 5 – Product Page
h
Bookie0

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 ✨

Navbar

  • 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:

#2c517b:

#b3cadc

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! 👋

Voters
a-repl-user
Whippingdot
PixiGem
CodeMaster007
maxina
NobleNeon111
VulcanWM
Bunnytoes
IMayBeMe
sn236
Comments
hotnewtop
FlaminHotValdez

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

Bookie0

@FlaminHotValdez lmfaoooo thanks! :)

ruiwenge2
IMayBeMe

Finally someone who likes macs :)

Bookie0

@IMayBeMe lmao

Whippingdot

Windows 11 do be coming tho @Bookie0

Bookie0

I know. @Whippingdot

fuzzyastrocat

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 :)

Bookie0

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

fuzzyastrocat

@Bookie0 Ah okay, well yeah probably still fine anyway

Bookie0

I guess, thx though! :) @fuzzyastrocat

Whippingdot

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)

Bookie0

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

FloCal35

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

Bookie0

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

jihhyuu202

i think this is gonna win

Bookie0

Lol thanks! :) @jihhyuu202

Aivoybia

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

Bookie0

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

Aivoybia

@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.

Bookie0

@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

Aivoybia

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

Bookie0

@Aivoybia Oh ok, thanks! :)

VulcanWM

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

Bookie0

Thanks! :) 🤞 @VulcanWM

VulcanWM

np! :) yeah i hope so too @Bookie0

Bookie0
Bunnytoes

this is very cool

Bookie0

@Bunnytoes Thanks lol! :D

RayhanADev

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

Bookie0

@RayhanADev Lmaooooo thank you!! xD

RayhanADev

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

Bookie0

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

Go Cosmic Kittens™️!
@RayhanADev

Whippingdot

Lol doesn't this picture look off...

Bookie0

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

Whippingdot

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

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

Bookie0

@StringentDev
Navbar with light gray border

StringentDev

@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)

Bookie0

Yep lol (read the whole Steve Jobs) @StringentDev

Bunnytoes

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

Bookie0

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

Bunnytoes

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

Bookie0

oh lol @Bunnytoes