Weekly 5 – Product Page
Weekly 5 – Product Page
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.
- 4 items
- Links to landing page, design aspects, tech specs, and buy page
- Title of product (with introduction 'Hello')
- Image of iMac
- Down chevron that floats up and down
- 4 features
- Each with title, description, and image
- Power connector
- Keyboard and mouse
- 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
- Discover text
- Buy button
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.
Nothing else much to say, except that this site was made in
CSS (of course!!), and a bit of
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: 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
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
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.
0 seconds), the chevron is at its original position (
top: 0;). At
0.75 seconds), we increase the size of the arrow with
scale(1.05);. Halfway, at
1.5 seconds, the chevron has moved
20px from the top, and become a big bigger with
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
rotate are both in the
transform property, and if we just assign
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.
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!!!
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
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)
Dangggggggg, I knew you'd do Apple and absolutely crush us but this is insane! Really kewl dude.