-4

A few days ago I found this nice psd Landing Page and I'm not sure how to style it. I've seen this kind of styling long time ago. Should this line be an image or something? Moreover, can you send me some code examples of similar style?

Screenshot

2
  • You need to code it with HTML/CSS, Tuto: 1stwebdesigner.com/psd-to-html
    – Med
    Oct 29, 2016 at 17:45
  • You're essentially asking someone to code this for you. StackOverflow is more of a place for specific technical questions: "why does X code produce Y result?" I'd recommend you check out some tutorials on HTML and CSS as suggested above. The direction I would go with this would be to simply use a border for the line down the middle, and absolutely-positioned pseudoelements with border-radius for the bubbles on that line. Your markup can be almost entirely text – no need for images or anything really fancy. Oct 29, 2016 at 18:26

1 Answer 1

4

I have wanted to make one of these before so I whipped this up in 10 minutes, I am using SCSS - to view plain CSS click the drop down chevron next to "CSS (SCSS)" then "View Compiled CSS". http://codepen.io/z-/pen/bwPBjY/

Analysis of what I have used: Each event is .entry and they are all contained within .entries, .entries is centered using margin:auto and given a width with a percentage with a maximum width with pixels in order for various screen size support.

Every other entry is on the same side so I'm using :nth-child(2n) to select all even numbered entries so I can float them to the right and text-align to the left; I will be using it to override default styling given to the odd numbered enties.

To put entries on either side of the line I make the width calc(50% - 80px) which basically means that there will be an 80px gap between the text and the line because we are floating outward. We also want the entries to be fairly close height-wise (the image you gave the vertical spacing is uneven so I just ignored it and did my own thing) so we give a negative margin-top of -60px, we also want to make sure that the overlapping that we do is what we want so we need to add in clear:both to stop elements drifting into the open space; so the first entry doesn't vanish off the top of the page we can use the :not() selector .entry:not(:first-child) {margin-top:-60px;} and this will give the negative top margin to all but the first element.

To add the circles we use pseudo-elements :before or :after, I'm using the title as the base and just make a circle and move it out towards the line a number of pixels.


If what I've said has just gone over your head then I suggest you get some base knowledge from somewhere like https://codecademy.com/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.