How to code the 2 lines, 4 buttons and white background ONLY use HTML?

over 4 years ago from , https://www.instagram.com/ohgoodgoodsshop/

see the image sample here: https://s-media-cache-ak0.pinimg.com/736x/4d/bc/d3/4dbcd3ff883de5916de43d49be5a208f.jpg

Hi, guys, is anybody here free now? I'm a designer but a newbie in code, Recently I just start to learn code, the first step--HTML. Today I tried to make a practise , use HTML to code a simple email design. Butuntil now I have a few questions not clearly, please see the image sample, so may I ask some help: 1. the middle white background, how to code this part use HTML ?

  1. the two pink lines, I tried use <hr> for this, but I don't know why the color won't change and the middle space which from first line to iamge top is not corret, so is there any other way to code the line? my current code is :

<hr style="width:210px;padding:2px;line-align:center;color:white"> </hr>

  1. the 4 buttons, I use :
<button type="button"">BACK IN STOCK</button> <button type="button">WHAT'S NEW</button> <br /> <button type="button">SALE DRESSES</button> <button type="button">SALE TOPS</button>

But the button style in browers looks too ugly, and how to change the color? The image sample button pink backgroun looks like use as a shape?

I know these can used CSS to reach the effect(although I haven't start lear it yet), but since I just start my first code lesson--HTML, so I want all things ONLY done in HTML, is this possible based on this sample?

(ps: sorry about my English if someting wrong here, please point out )

Please let me know if any guy who know how to solve these problems.

Big thanks in advance. -N


  • Matt Hollis, over 4 years ago

    Yep, this is definitely achievable, although the custom font pieces are going to be better served as images for to ensure the render correctly.

    The 'buttons' are actually links, so should be coded up as links, and styled.

    This is a really nice starter example, perfect for an new started to have a play with.

    0 points
  • James LaneJames Lane, over 4 years ago

    I've updated your story to actually show the code you are using. But you really do need to use CSS for this. Try something like W3Schools or Codecademy to get started.

    Also, starting in email design is probably going to open up a whole world of pain. If you're a real beginner, why not open up something like Photoshop/Sketch, design it how you want to, then get the code from there? That's how I started at least, it shows you how the basics work. Also, as a beginner, I always used an editor with 'live preview' so I could see what I was doing. Once you're past the beginner stage, you'll start to use sublime/atom, but to get going, it really does help with a live preview. Oh... and read as much as you can!

    0 points
  • David SvezhintsevDavid Svezhintsev, over 4 years ago

    This page might give you some answers: http://responsiveemailpatterns.com/

    "Back in Stock" & "What's New" is not centered vertically/horizontally inside the button on the mockup.

    I don't know what font you are using but custom fonts are a problem in the Email world, so I'd suggest to fallback to System Fonts like Helvetica -> Arial etc.

    I'd suggest to do the buttons and the main graphics as a GIF/JPEG.

    0 points
  • Jimmy OfisiaJimmy Ofisia, over 4 years ago

    Let us «Coder Pros» have a look at your current code, properly. We might reply when we're not busy.

    0 points