diff --git a/HFF Clip Hanger.ttf b/HFF Clip Hanger.ttf new file mode 100644 index 0000000..57a199a Binary files /dev/null and b/HFF Clip Hanger.ttf differ diff --git a/Rns_Bobo_Dylan.otf b/Rns_Bobo_Dylan.otf new file mode 100644 index 0000000..bf2661c Binary files /dev/null and b/Rns_Bobo_Dylan.otf differ diff --git a/abril.woff2 b/abril.woff2 new file mode 100644 index 0000000..7889584 Binary files /dev/null and b/abril.woff2 differ diff --git a/fascinate.woff2 b/fascinate.woff2 new file mode 100644 index 0000000..cfbb18f Binary files /dev/null and b/fascinate.woff2 differ diff --git a/fjalla.woff2 b/fjalla.woff2 new file mode 100644 index 0000000..5fcce3f Binary files /dev/null and b/fjalla.woff2 differ diff --git a/fonts.css b/fonts.css new file mode 100644 index 0000000..f2b54d6 --- /dev/null +++ b/fonts.css @@ -0,0 +1,73 @@ +@font-face +{ + font-family: 'HFF Clip Hanger'; + src: url('HFF Clip Hanger.ttf'); +} + +@font-face +{ + font-family: 'Bobo Dylan'; + src: url('Rns_Bobo_Dylan.otf'); +} + +@font-face +{ + font-family: 'Abril Fatface'; + font-style: normal; + font-weight: 400; + src: url('abril.woff2'); +} + +@font-face +{ + font-family: 'Fjalla One'; + font-style: normal; + font-weight: 400; + src: url('fjalla.woff2'); +} + +@font-face +{ + font-family: 'Oswald'; + font-style: normal; + font-weight: 400; + src: url('oswald.woff2'); +} + +@font-face +{ + font-family: 'Fascinate Inline'; + font-style: normal; + font-weight: 400; + src: url('fascinate.woff2'); +} + +.font-abril-fatface +{ + font-family: 'Abril Fatface'; +} + +.font-clip-hanger +{ + font-family: 'HFF Clip Hanger'; +} + +.font-bobo-dylan +{ + font-family: 'Bobo Dylan'; +} + +.font-oswald +{ + font-family: 'Oswald'; +} + +.font-fjalla-one +{ + font-family: 'Fjalla One'; +} + +.font-fascinate-inline +{ + font-family: 'Fascinate Inline'; +} diff --git a/index.css b/index.css index e69de29..758928f 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,76 @@ +figure, +.firstLine, +.vertical, +blockquote, +h1 +{ + text-align: center; +} + +section +{ + column-count: 4; + column-rule: 1px dotted #ddd; + column-fill: auto; + -webkit-column-count: 4; + -moz-column-count: 4; + -webkit-column-fill: auto; + -moz-column-fill: balance; + -webkit-column-rule: 1px dotted #ddd; + -moz-column-rule: 1px dotted #ddd; +} + +figure +{ + break-inside: avoid-column; +} + +figure img +{ + width: 100%; +} + +.first-line +{ + border-bottom: 3px #000 double; + border-top: 3px #000 double; + margin-bottom: 5px; +} + +.vertical +{ + float: left; + width: .85em; + word-break: break-all; + border-radius: 5px; + border: 1px solid #000; + letter-spacing: .2em; + margin: 10px; + padding: 3px; + page-break-inside: avoid; + break-inside: avoid; + -webkit-column-break-inside: avoid; +} + +.border-1-solid +{ + border-bottom: 1px #000 solid; + border-top: 1px #000 solid; +} + +.border-3-double +{ + border-bottom: 3px #000 double; + border-top: 3px #000 double; +} + +article p:first-of-type::first-letter +{ + font-weight: bold; +} + +.break-column { + break-before: always; + -moz-column-break-before: always; + -webkit-column-break-before: always; +} diff --git a/index.html b/index.html index 960eff7..f62b1b1 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,106 @@ - - - Задача «DeLorean DMC-12» - - - + + + Задача «DeLorean DMC-12» + + + + +
+

Lorem Ipsum

+
+ Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... +
+
+
+

+ The standard Lorem Ipsum passage, used since the 1500s +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. +

+
+
+

+ Section 1.10.32 of "de Finibus Bonorum et Malorum", + written by Cicero in 45 BC +

+ +

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa + quae ab illo inventore veritatis et quasi architecto beatae vitae dicta + sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut + odit aut fugit, sed quia consequuntur magni dolores eos qui ratione + voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum + quia dolor sit amet, consectetur, adipisci velit, sed quia non + numquam eius modi tempora incidunt ut labore et dolore magnam aliquam + quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem + ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? + Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse + quam nihil molestiae consequatur, vel illum qui + dolorem eum fugiat quo voluptas nulla pariatur? +

+
+ Nemo enim ipsam voluptatem quia voluptas + sit aspernatur aut odit aut fugit +
+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa + quae ab illo inventore veritatis et quasi architecto beatae + vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia + voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur + magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro + quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, + adipisci velit, sed quia non numquam eius modi tempora incidunt + ut labore et dolore magnam aliquam quaerat voluptatem. + Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? + Quis autem vel eum iure reprehenderit qui in ea voluptate + velit esse quam nihil molestiae consequatur, vel illum qui + dolorem eum fugiat quo voluptas nulla pariatur? +

+
+ lenna.jpg +
This is lenna.jpg
+
+
+
+

1914 translation by H. Rackham

+

+ But I must explain to you how all this mistaken idea of + denouncing pleasure and praising pain was born and I will + give you a complete account of the system, and expound + the actual teachings of the great explorer of the truth, + the master-builder of human happiness. No one rejects, + dislikes, or avoids pleasure itself, because it is pleasure, but because + those who do not know how to pursue pleasure rationally + encounter consequences that are extremely painful. Nor again + is there anyone who loves or pursues or desires to obtain + pain of itself, because it is pain, but because occasionally + circumstances occur in which toil and pain can procure + him some great pleasure. To take a trivial example, + which of us ever undertakes laborious physical exercise, + except to obtain some advantage from it? But who has any right + to find fault with a man who chooses to enjoy a pleasure + that has no annoying consequences, or one who avoids + a pain that produces no resultant pleasure? +

+
+ I will give you a complete account of the system +
+
+
+
+ diff --git a/lenna.jpg b/lenna.jpg new file mode 100644 index 0000000..315f8a0 Binary files /dev/null and b/lenna.jpg differ diff --git a/oswald.woff2 b/oswald.woff2 new file mode 100644 index 0000000..5dae4e7 Binary files /dev/null and b/oswald.woff2 differ