Design to Html code

HTML & CSS
1

I’ve designed this in Illustrator and i wonder
a) what is the equivalent to html code for this?
b) if there is a way to convert what ive designed to html code using an app

TitleTextBox
TitleTextBox1402×248 41.6 KB

2

The HTML for this will be quite simple, a block container, within it a heading followed by paragraph.
Eg:

<div>
   <h1>Lorem</h1>
   <p>Lorem ipsum dolor...</p>
</div>

However to make it look like your design you will also need CSS code.
HTML only provides structure for the content, it is CSS that give a design its look.

2 Likes
3

It is best to use CSS whenever possible and many web developers will insist it is the only way to do things but most of that can be done using HTML, as in the following.

<div style="background-color: #cccccc;">
<div style="text-align: center; color: #ad6d34;">Lorem</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

I do not know how to make a box that has two curved corners and two regular corners like that. That probably requires CSS. Perhaps you are asking about that specifically and if so then you should be more specific.

1 Like
4

HTML

<body>
  <h1>Page Description</h1>
  <div>
   <h2>Lorem</h2>
   <p>
    Lorem ipsum dolor sit consectetur adipiscing elit, sed do 
    eiusmod tempur incididunt ut labore et dolore magna aliqua.
   </p>
 </div> 
</body>

CSS

body {
    background-color: #fff;
    font: normal 1em / 1.5  sans-serif;
 }
h1{
   text-align: center;
 }
div {
   max-width: 30em;
   padding: 0.5em;
   margin: auto;
   font-size: 1.25em;
   border-radius: 1.6em 0;
   background-color: #f2f2f3;
 }
div h2 {
   margin: 0;
   font-weight: normal;
   color: #c46c2f;
   text-align: center;
 }
div p {
   margin: 0.8em;
 }
3 Likes
5

If you require the exact font styles, then you’ll want to look up Google Fonts, or other repository, to find them and add them to the site. Here is sample code to do so:

head>
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
    <style>
      body {
        font-family: 'Crimson Pro', serif;
        font-size: 48px;
      }
    </style>
  </head>

From https://developers.google.com/fonts/docs/css2

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.