Help to convert this image into CSS & Html

i will attach photo which i need to convert it to html & CSS



for example

LOGO | text written EN
| text Written Arabic

Each text will have separated font and color

Thankyou

 

Only the orange logo (the actual graphic logo) needs t8 be an image. The rest can be done with pure text.
Use an <h1>, place the logo as the background image, and add the text to it within <span> to be able to style it with different fonts and direction.

 

Could you please show me some example code ?

 

Assuming the document is set to lang="en", and let's make the whole thing an anchor to the home page.

<h1>
	<a href="/">
		<span lang="ar">الخليج رحلة و مصنع ديكور</span>
		Gulf Journey & Decor Factory
	</a>
</h1>

Code (markup):

If the document is arabic, use:

<h1>
	<a href="/">
		الخليج رحلة و مصنع ديكور
		<span lang="en">Gulf Journey & Decor Factory</span>
	</a>
</h1>

Code (markup):

Then for the CSS (this should work with either of the above)

h1 {
	font:bold 125%/120% arial,helvetica,sans-serif;
}
h1 a {
	display:block;
	/*
		top and bottom padding should be larger than:
			(image height - 24) / 2
		to account for different font sizes within acceptable limits
		left padding is width of the image plus any extra desired space
	*/
	padding:16px 0 16px 200px;
	background:url(images/h1Logo.png) center left no-repeat;
}

h1 span {
	display:block;
}

Code (markup):

This also assumes you are using the HTML 4 "logical document structure" instead of 5's "go ahead and piss it out any old way" -- as such a page should have one and only one H1, that is the same on every page to say they are all part of the same site/document.

Remember, semantically a H1 is the heading under which everything on the page is a subsection, H2's indicate the start of subsections of the H1, H3 indicate the start of subsections of the H2 and so forth -- which is why pairing H1+H2 for a heading and tagline is gibberish; it's why jumping to a H5 when there's no H4 or H3 before it is gibberish, etc, etc...

As a rule of thumb, TRY not to put actual text into your images; it's accessibility rubbish, misses the chance to identify multi-language (as I showed in the above examples), makes it harder to reformat or change when it comes time to make the layout responsive, AND it's a missed chance to give search engines something to look at!

* side note * - excuse the broken Arabic, I don't speak the language so I used google translate... though I'm not even 100% sure that the original image was Arabic; wild guess.... oops, your image says joinery, not journey! Oh well, you can sort that out.

 

Thanks for passing by can you take look again in the attachemnt which im trying to attach simple horizontal line by using the trick showing here in the

https://css-tricks.com/examples/hrs/


some thing like

LOGO |EN
..........AR

 

Easiest way if you don't care about the gradient would be to simply use border-top or border-bottom on that nested span and adjust your paddings accordingly. If you "need" the gradient there are two approaches that are "decent"

1) attach an image to that span as background image either "center top" or "center bottom" depending on which language model you went with.

2) you could add a sandbag like <i></i> to the markup between the two lines of texxt and target that (good for legacy support) or use generated content to create an extra element to contain it. Then you could use CSS3's linear gradient or even box-shadow:inset to create the divider on the fly -- or again use a background-image there.

For example in the <span lang="en"> version you could do :

h1 span:before {
	content:" ";
	display:block;
	height:2px;
	padding-bottom:1em; /* same as margin-bottom*/
	font-size:1px; /* prevent legacy IE weirdness */
	background:#CCC;
	-webkit-box-shadow:
		inset 128px 0 64px #FFF,
		inset -128px 0 64px #FFF;
	box-shadow:
		inset 128px 0 64px #FFF,
		inset -128px 0 64px #FFF;
}

Code (markup):

If the span was first for the <span lang="ar"> version just flip the padding:

h1 span:after {
	content:" ";
	display:block;
	height:2px;
	padding-top:1em; /* same as margin-top */
	font-size:1px; /* prevent legacy IE weirdness */
	background:#CCC;
	-webkit-box-shadow:
		inset 128px 0 64px #FFF,
		inset -128px 0 64px #FFF;
	box-shadow:
		inset 128px 0 64px #FFF,
		inset -128px 0 64px #FFF;
}

Code (markup):

I prefer using box-shadow instead of linear-gradient when possible as you don't have to dick with as many "browser specific" versions. Which can quickly get infuriating with linear-gradient!