My product landing page challenge: Magma Computers

Code Feedback
1

After a busy summer during which I didn’t have time to take care of this project, I finally managed to work on it in the last few weeks, here is the result:

https://codepen.io/scwd/full/LgRvRw/

Thanks!

2 Likes
2

Really nice landing page :+1:

2 Likes
3

this is very impressive, well done.:ok_hand:

2 Likes
4

This is very nice. I like the alternating color scheme.

I would suggest fixing the image of the desktop on smaller screens.

image
image1920×1040 627 KB

(use http://quirktools.com/screenfly/ to test repressiveness)

5

Thanks for your feedbacks, it’s very encouraging for me :slight_smile:

1 Like
6

Thanks for your advice.

By the way, the image positioned at the bottom on smaller screen is the normal behavior. If you look at the html code, you can see I use an image showing only the top of the computer case on smaller screen and a different one showing the entire case on larger screen:

<img class="intro-picture intro-picture-md hidden-xs" src="https://dl.dropbox.com/s/185br47gbf09hqq/desktop-full.png" alt="full desktop view">
<img class="intro-picture intro-picture-xs hidden-md" src="https://dl.dropbox.com/s/10636aegwp8e0jy/desktop-top.png" alt="top desktop view">

I use media queries to display the appropriate image according to the screen size. :slight_smile:

1 Like
7

So i cant see your product on a product landing page?

8

Let’s say you can see it but not entirely, its the effect I wanted. I had to make that choice due to low space availability on smaller screen…

EDIT: I changed the smaller screen image for a bigger one.

1 Like
9

Looks better now that you can see more of it. I can understand the space situation.

10

This looks crazy good, unfortunately I have to be the one to introduce you to the headache that is 100% vertical scaling on iOS Safari. Since you use min-height: 100vh; in your intro-section css the website will not work on iOS devices. iOS Safari returns a value the size of all content in the body element instead of the device’s actual viewport dimensions. Depending on the situation it will take different approaches to solve this problem to meet your desired outcome. For example you can use a media query for each iOS device and send a fixed height input but this is a bit messy. Just wanted to give you a heads up that it won’t render as expected for iOS.

1 Like
11

This looks awesome!!

I find that it looks simple but engaging at the same time, as well I don’t get lost on the page looking at content or buttons etc. Great job!

1 Like
12

Wow, I didn’t know since I have no iDevice to test my website, thanks for pointing out this issue. I’m gonna look for a workaround :+1:

13

Been a while, but I’ll reply since I got this thread sent to me in a summary email today.

Looks pretty good, but I’d change a few design choices:

  1. Remove the newsletter subscription on mobile devices and fix the picture (it’s cut in half)
  2. Don’t justify the text in the 2nd section.
  3. Center the text in pricing tables

Not really breaking changes but I think they’d make for a better design.