-
Notifications
You must be signed in to change notification settings - Fork 67
Малахов Александр #69
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from all commits
34c904b
1253d9a
e74a0a0
aebced6
1c2763d
fe009a7
a5af040
fedfb32
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,196 @@ | ||
| /*onclick="document.getElementById('main').style.fontSize='40px'*/ | ||
| @font-face | ||
| { | ||
| font-family: 'CyrillicGoth'; | ||
| src: url('fonts/CyrillicGoth.ttf') format('TrueType'); | ||
| } | ||
|
|
||
| html | ||
| { | ||
| background-color: aliceblue; | ||
| color: black; | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
| font: 20px 'CyrillicGoth', 'Times New Roman', serif; | ||
|
|
||
| } | ||
|
|
||
| body | ||
| { | ||
| width: 80%; | ||
| max-width: 960px; | ||
| background-color: beige; | ||
| margin: 0 auto; | ||
| border: 2px solid green; | ||
| } | ||
|
|
||
| input[name='scale'][id='50']:checked ~ .main | ||
| { | ||
| font-size: 50%; | ||
| } | ||
|
|
||
| input[name='scale'][id='100']:checked ~ .main | ||
| { | ||
| font-size: 100%; | ||
| } | ||
|
|
||
| input[name='scale'][id='150']:checked ~ .main | ||
| { | ||
| font-size: 150%; | ||
| } | ||
|
|
||
| .paperHead | ||
| { | ||
| text-align: center; | ||
| text-shadow: 1px 1px 6px red; | ||
| font-family: 'Times New Roman', fantasy; | ||
| font-size: 40px; | ||
| color: darkblue; | ||
| letter-spacing: 2px; | ||
| word-spacing: 1px; | ||
| font-variant: all-small-caps; | ||
| font-stretch: ultra-expanded; | ||
| } | ||
|
|
||
| .main | ||
| { | ||
| font-size: 1rem; | ||
| color: inherit; | ||
| background-color: beige; | ||
| } | ||
|
|
||
| main.paperColumns | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Незачем явно указывать тег, у тебя этот стиль только один раз используется, а вложенность выросла |
||
| { | ||
| position: relative; | ||
| padding: 10px; | ||
| margin: 10px; | ||
| text-indent: 5%; | ||
| text-align: justify; | ||
| color: inherit; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| .paperColumns p | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. В общем случае лучше использовать селектор на основе классов, а не тегов, ведь у тебя могут быть несколько тегов |
||
| { | ||
| text-align: left; | ||
| -webkit-hyphens: manual; | ||
| hyphens: manual; | ||
| font-family: 'Segoe Print'; | ||
| } | ||
|
|
||
| .paperColumns p::first-letter | ||
| { | ||
| font: 2em 'CyrillicGoth', serif; | ||
| font-style: italic; | ||
| font-weight: 900; | ||
| color: #69ff50; | ||
| float: left; | ||
| } | ||
|
|
||
| .paperColumns p::first-line | ||
| { | ||
| font-stretch: ultra-expanded; | ||
| letter-spacing: 2px; | ||
| } | ||
|
|
||
| article > header | ||
| { | ||
| text-transform: uppercase; | ||
| text-align: center; | ||
| margin: 10px; | ||
| column-span: all; | ||
| color: #1f1dff; | ||
| font-size: 1em; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .date | ||
| { | ||
| float: right; | ||
| color: darkblue; | ||
| text-shadow: 1px 1px 6px red; | ||
| font-family: 'Times New Roman', fantasy; | ||
| } | ||
|
|
||
| .article1 | ||
| { | ||
| position: relative; | ||
| width: 65%; | ||
| float: left; | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. В данном задании нельзя использовать |
||
| height: 55%; | ||
| font-size: 1.1em; | ||
| margin: 5px; | ||
| padding: 5px; | ||
| column-count: 2; | ||
| -moz-column-count: 2; | ||
| column-rule: 2px solid; | ||
| column-width: auto; | ||
| } | ||
|
|
||
| .actualArticle | ||
| { | ||
| float: right; | ||
| width: 30%; | ||
| top: 10px; | ||
| margin: 5px; | ||
| padding: 5px; | ||
| font: 1em 'Times New Roman', serif; | ||
| color: inherit; | ||
| } | ||
|
|
||
| .article2 | ||
| { | ||
| position: relative; | ||
| top: 10px; | ||
| width: 97%; | ||
| font-size: 1em; | ||
| margin: 5px; | ||
| padding: 5px; | ||
| column-count: 3; | ||
| -moz-column-count: 3; | ||
| column-rule: 2px solid; | ||
| column-width: auto; | ||
| } | ||
|
|
||
| .actualArticle > header | ||
| { | ||
| float: left; | ||
| color: #e223af; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .actualArticle > cite | ||
| { | ||
| font-style: italic; | ||
| color: #1f1dff; | ||
| } | ||
|
|
||
| .leitmotif2 | ||
| { | ||
| column-span: all; | ||
| color: red; | ||
| font-stretch: ultra-condensed; | ||
| font-style: oblique; | ||
| padding-top: 10px; | ||
| padding-bottom: 10px; | ||
| } | ||
|
|
||
| .imgRoad | ||
| { | ||
| float: left; | ||
| } | ||
|
|
||
| .imgRoad > figcaption | ||
| { | ||
| text-align: center; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .imgRoad > img | ||
| { | ||
| width: 150px; | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. У картинок обязательно указывай и |
||
| } | ||
|
|
||
| .PowersThatBe > img | ||
| { | ||
| width: 150px; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,7 +2,138 @@ | |
| <html lang="ru"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Paper</title> | ||
| <link rel="stylesheet" href="index.css"> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <p class="date">27 октября 2016г.</p> | ||
| <p class="paperHead">Верстник недели</p> | ||
| </header> | ||
| <p>Масштаб</p> | ||
| <input id="50" name="scale" type="radio"> | ||
| <label for="50">50%</label><br> | ||
| <input id="100" name="scale" type="radio" checked> | ||
| <label for="100">100%</label><br> | ||
| <input id="150" name="scale" type="radio"> | ||
| <label for="150">150%</label><br> | ||
| <main class="main"> | ||
| <section class="paperColumns"> | ||
| <article class="article1"> | ||
| <header> | ||
| <h1>Раз­ра­бот­чи­ков обя­жут | ||
| предо­став­лять ис­ход­ный код ПО | ||
| при гос­за­куп­кахM</h1> | ||
| </header> | ||
| <p>В про­ект пла­на «Обес­пе­че­ние су­ве­ре­ни­те­та в | ||
| об­ла­сти ин­фор­ма­ци­он­ных тех­но­ло­гий и | ||
| те­ле­ком­му­ни­ка­ций» | ||
| вне­се­но пред­ло­же­ние, в | ||
| со­от­вет­ствии с ко­то­рым | ||
| раз­ра­бот­чи­ки долж­ны бу­дут предо­став­лять | ||
| ис­ход­ный | ||
| код сво­их про­грамм­ных про­дук­тов при | ||
| гос­за­куп­ках.<br> | ||
| По мне­нию неко­то­рых участ­ни­ков от­рас­ли, | ||
| го­судар­ствен­ные ор­га­ны долж­ны за­пра­ши­вать | ||
| ис­ход­ни­ки при лю­бых за­куп­ках про­грамм­но­го | ||
| обес­пе­че­ния (ПО). Это станет свое­об­раз­ной | ||
| га­ран­ти­ей на слу­чай, ес­ли раз­ра­бот­чик | ||
| про­дук­та | ||
| пре­кра­тит су­ще­ство­ва­ние или, ска­жем, | ||
| свернёт предо­став­ле­ние тех­ни­че­ской | ||
| под­держ­ки. Од­на­ко пред­ста­ви­те­ли соф­твер­ной | ||
| ин­ду­стрии вы­сту­пи­ли про­тив от­кры­тия ко­да | ||
| ли­цен­зи­ру­е­мых про­дук­тов.<br> | ||
| По­это­му, как со­об­ща­ет га­зе­та «Из­ве­стия», | ||
| сей­час об­суж­да­ет­ся воз­мож­ность | ||
| за­пра­ши­ва­ния | ||
| го­сор­га­на­ми ис­ход­ни­ков при раз­ра­бот­ке | ||
| про­дук­тов на за­каз. Это не толь­ко поз­во­лит | ||
| ор­га­ни­за­ции са­мо­сто­я­тель­но про­дол­жить | ||
| раз­ви­тие про­дук­та в слу­чае лик­ви­да­ции | ||
| раз­ра­бот­чи­ка, но и по­вы­сит без­опас­ность. | ||
| В част­но­сти, экс­пер­ты смо­гут про­ве­рить | ||
| код на на­ли­чие уяз­ви­мо­стей или «чёр­ных хо­дов».<br> | ||
| </p> | ||
| <p>Сергей Карасёв</p> | ||
| </article> | ||
| <article class="actualArticle"> | ||
| <header> | ||
| <h1>А<br>к<br>т<br>у<br>а<br>л<br>ь<br>н<br>о</h1> | ||
| </header> | ||
| <cite>«Был бы человек, статья найдется»</cite><br> | ||
| - И.В. Сталин<br> | ||
| <cite>«Это не конец. Это даже не начало конца, но, возможно, конец начала».<br> | ||
| (Now this is not the end. It is not even the beginning of the end, but it is, perhaps, the end | ||
| of the beginning.)»</cite><br> | ||
| - У. Черчилль, 10 ноября 1942 года.<br> | ||
| <cite>«Я не самый умный человек в этом мире, но я, несомненно, | ||
| умею находить умных соратников.»</cite><br> | ||
| - Ф. Д. Рузвельт<br> | ||
| <figure class="PowersThatBe"> | ||
| <img src="img/PowersThatBe.jpg" alt="Сильные мира сего"> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Нужно указать атрибут |
||
| <figcaption> | ||
| И. В. Сталин, Ф. Д. Рузвельт и У. Черчилль в Тегеране 1943г. | ||
| </figcaption> | ||
| </figure> | ||
| </article> | ||
| <article class="article2"> | ||
| <header> | ||
| <h1>Пластиковые дороги</h1> | ||
| </header> | ||
| <p>Ни­дер­ланд­ская ком­па­ния VolkerWessels | ||
| пред­ло­жи­ла стро­ить | ||
| ав­то­мо­биль­ные до­ро­ги из | ||
| пе­ре­ра­бо­тан­но­го | ||
| пла­сти­ка. Но­вая тех­но­ло­гия поз­во­лит | ||
| сни­зить за­тра­ты | ||
| на стро­и­тель­ство и по­вы­сить дол­го­веч­ность | ||
| ма­ги­стра­лей. | ||
| </p> | ||
| <figure class="imgRoad"> | ||
| <figcaption>Дороги будущего</figcaption> | ||
| <img src="img/plasticRoad.jpg" alt="Пластиковые дороги"> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Тут тоже |
||
| </figure> | ||
| <p>До­ро­ги бу­дут со­сто­ять из от­дель­ных по­лых | ||
| сек­ций, со­еди­нен­ных меж­ду со­бой. | ||
| Пе­ре­ра­бо­тан­ный | ||
| пла­стик, не под­да­ю­щий­ся кор­ро­зии и воз­дей­ствию | ||
| ат­мо­сфер­ных усло­вий, спо­со­бен вы­дер­жи­вать | ||
| тем­пе­ра­ту­ры от ми­нус 40 до плюс 80 гра­ду­сов | ||
| Цель­сия.<br> | ||
| Срок экс­плу­а­та­ции та­ко­го по­кры­тия | ||
| мо­жет быть при­мер­но в три ра­за боль­ше, | ||
| чем у ас­фаль­то­во­го. От­сут­ствие необ­хо­ди­мо­сти | ||
| про­во­дить по­сто­ян­ный ре­монт сни­зит | ||
| ко­ли­че­ство | ||
| до­рож­ных про­бок. Дру­гим пре­иму­ще­ством | ||
| пла­сти­ко­вой до­ро­ги яв­ля­ет­ся её лег­кость | ||
| мон­та­жа в пес­ча­ную и ис­то­щен­ную поч­ву. Кро­ме | ||
| то­го, по­лые ни­ши внут­ри па­не­лей мо­гут | ||
| слу­жить для от­во­да во­ды, а так­же | ||
| при­ме­нять­ся для про­клад­ки труб и ка­бе­лей. | ||
| </p> | ||
| <div class="leitmotif2">Един­ствен­ный ми­нус | ||
| пла­сти­ко­вой до­ро­ги в том, что во вре­мя до­ждя | ||
| она мо­жет быть скольз­кой.<br> | ||
| </div> | ||
| <p>К то­му же, стро­и­тель­ство та­ких | ||
| до­рог бу­дет за­ни­мать неде­ли, | ||
| а не ме­ся­цы. Пла­сти­ко­вая до­ро­га | ||
| лег­кая, что умень­ша­ет | ||
| дав­ле­ние на зем­лю, и по­лая, что обес­пе­чи­ва­ет | ||
| быст­рый до­ступ к под­зем­ным ком­му­ни­ка­ци­ям.<br> | ||
| Ма­те­ри­а­лом для про­из­вод­ства | ||
| до­рож­ных бло­ков станет оке­ан­ский | ||
| пла­сти­ко­вый му­сор. По­ми­мо чист­ки окру­жа­ю­щей | ||
| сре­ды, при усло­вии ши­ро­ко­го | ||
| рас­про­стра­не­ния | ||
| дан­ная тех­но­ло­гия к то­му же обес­пе­чит | ||
| со­кра­ще­ние вред­ных вы­бро­сов.<br> | ||
| </p> | ||
| </article> | ||
| </section> | ||
| </main> | ||
| </body> | ||
| </html> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Лучше еще указать атрибут
local