Typography

H1Design and development

H2Design and development

H3Design and development

aIt is a challenge for anyone born a significant amount of time after a tragedy (I was born in 1979 - 34 years after the catastrophe) to create a visual symbol for that event which represents the emotions involved. On the other hand, I have a personal connection to the event.

pIt is a challenge for anyone born a significant amount of time after a tragedy (I was born in 1979 - 34 years after the catastrophe) to create a visual symbol for that event which represents the emotions involved. On the other hand, I have a personal connection to the event.

strongSpeaking literally, I exist because my family was able to escape from the city. One of our distant family members was able to help my grandpa and grandma run away from Kiev just before the Germans took it over in the autumn of 1941 and one of the most notorious episodes of the Holocaust – the Babi Yar execution - happened.

emSpeaking literally, I exist because my family was able to escape from the city. One of our distant family members was able to help my grandpa and grandma run away from Kiev just before the Germans took it over in the autumn of 1941 and one of the most notorious episodes of the Holocaust – the Babi Yar execution - happened.

It is a challenge for anyone born a significant amount of time after a tragedy.
It is a challenge for anyone born a significant amount of time after a tragedy (I was born in 1979 - 34 years after the catastrophe) to create a visual symbol for that event which represents the emotions involved.

dot-hr

blockquote
You will work hard for your food, until your face is covered with sweat. You will work hard until the day you die, and then you will become dust again. I used dust to make you, and when you die, you will become dust again.

Genesis 3:19

left-line-section

The United States Holocaust Memorial Museum (USHMM) is the United States' official memorial to the Holocaust. Adjacent to the National Mall in Washington, D.C., the USHMM provides for the documentation, study, and interpretation of Holocaust history.

pre/codeclassName {
    margin: 20px 0 1px;
    background: #454545;
    font-family: inherit;
    }

demo-buttonVersion 7.1.3 demo

Text blocks layout

The general idea is that almost every text container on the desktop will be positioned relative to the .mixed-content-wrap (50% centered section).

Where used

.display-meta has .left-offset and .right-offset (200px), thus increasing the display area to 400px. Main class: .display-meta
Most of the pages content use .left-offset. Main class: .text-wrap

Some of the pages have even and odd layout for the text bloks (testimonials, archive?).

.text-wrap:nth-of-type(odd) {
     margin-left: -200px;
    }
.text-wrap:nth-of-type(even) {
     margin-left: 200px;
    }

.display-meta content structure

Number. "Name". For whom name

Project definition.
Concept.
Slogan.
Visual identity (Logo. Icons. Stamp. Star. Badges. Certificates. Custom typeface. Color palette).
Website design (Wireframe kit. Similarity map. User flows. UI).
Website development (PHP + PEAR repository. MySQL. JS + JQuery).

When created

Images

The .image-caption can be used with all examples.

When the images follow each other use .clear-both in between.

Non-transparent with wrap

Big left offset.
Small left offset.
Non-offset (not recommended).

Non-transparent without wrap, but with shadow

In use when the border around the image not wanted. For example screenshot with very similar to white-grey background. The shadow helps to stand image out.

Big left offset.
Small left offset.
Non-offset (not recommended).

Transparent

Big left offset.
Small left offset.
Non-offset.

Non-transparent with wrap.

Big left offset.

Non-transparent without wrap, but with shadow.

Small left offset.

Transparent.

Non-offset.

Master page