Skip to content
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.

Sign up for GitHub

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

Вихарев Вячеслав #86

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Вихарев Вячеслав #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 107 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
.newspaper
{
margin: 0 auto;
padding: 3%;
width: 768px;
}

.newspaper-header-text
{
text-align: center;
font-size: 48px;
}

.three-columns
{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}

.copyright
{
text-align: center;
}

.copyright small
{
display: block;
}

.copyright small:nth-child(2)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

вместо такого селектора (по нему во-первых, не понять сразу к чему применяется стиль, во вторых, при добавлении новых элементов его придется менять) лучше добавь нужному элементу класс и примени стили к нему

{
font-weight: bold;
}

.newspaper-section
{
text-align: justify;
}

.newspaper-section p:first-of-type:first-letter
{
font-size: 2em;
}

.section-header
{
text-align: center;
}

.watermark
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

watermark это другое, тут же просто author

{
display: block;
text-align: right;
font-style: italic;
}

.quote
{
margin: 0;
font-family: 'Pacifico', cursive;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

попробуй подключить еще один шрифт, но не с гугл-фонтс, а самостоятельно

text-indent: 10px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

тоже наверное лучше указывать в em

}

.quote:before,
.quote:after
{
content: '\"';
}

.section-picture
{
width: 100%;
height: initial;
background-color: #fff;
}

.font-size[id='smaller']:checked ~ .newspaper
{
font-size: smaller;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

как мне кажется, лучше использовать конкретные значения вместо ключевых слов

}

.font-size[id='normal']:checked ~ .newspaper
{
font-size: normal;
}

.font-size[id='larger']:checked ~ .newspaper
{
font-size: larger;
}

.font-type[id='serif']:checked ~ .newspaper
{
font-family: serif;
}

.font-type[id='sans-serif']:checked ~ .newspaper
{
font-family: sans-serif;
}

.read-mode[id='night-mode']:checked ~ .newspaper
{
background-color: #111;
color: #eee;
}
103 changes: 97 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,100 @@
<!DOCTYPE html>
<html lang="ru">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

кажется, страница уже не на русском

<head>
<meta charset="utf-8">
<title>Задача «DeLorean DMC-12»</title>
</head>
<body>
</body>
<head>
<meta charset="utf-8">
<title>DeLorean DMC-12</title>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<span>Font size:</span>
<input class="font-size" type="radio" id="smaller" name="font-size">
<label for="smaller">Smaller</label>
<input class="font-size" type="radio" id="normal" name="font-size" checked>
<label for="normal">Normal</label>
<input class="font-size" type="radio" id="larger" name="font-size">
<label for="larger">Larger</label><br>
<span>Font type:</span>
<input class="font-type" type="radio" id="serif" name="font-type" checked>
<label for="serif">Serif</label>
<input class="font-type" type="radio" id="sans-serif" name="font-type">
<label for="sans-serif">Sans-serif</label><br>
<label for="night-mode">Night mode:</label>
<input class="read-mode" type="checkbox" id="night-mode">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

можно все эти настройки объединить в блок с семантичным тегом


<article class="newspaper">
<header class="newspaper-header">
<h1 class="newspaper-header-text">The New York Times</h1>
<hr>
<div class="copyright three-columns">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

кажется, название copyright тут не очен подходит, потому что здесь информация не только про это

<small>Copyright 1997 The New York Times</small>
<small>NEW YORK, SATURDAY, FEBRUARY 15, 1997</small>
<small>I beyond the greater New York metropol</small>
</div>
</header>
<hr>
<section class="newspaper-section three-columns">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

кажется, здесь article подошел бы больше, ибо это по сути статья

<h2 class="section-header">Robert Mallary, 79, Junk Artist Behind the Growth of Sculpture</h2>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. In eget nisl urna. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Duis suscipit elit vel orci
vehicula, ac pharetra dolor interdum. Fusce semper leo in erat varius, nec
semper purus pretium. Duis pharetra odio tristique justo ullamcorper
dignissim. Cras eu massa varius metus venenatis egestas. Nulla mattis
lectus non mauris semper commodo eget quis ex. Suspendisse eleifend
commodo arcu vel congue. Fusce eu mauris elit. Nam nec pulvinar turpis.
Nam vitae lacus commodo, faucibus elit eu, scelerisque dolor.
</p>
<p>
Nunc ultricies accumsan eleifend. Nunc a congue magna, in blandit ex.
Aenean mollis ex et molestie pulvinar. Vivamus consequat posuere purus,
sed sodales nulla laoreet eget. Duis non dui ex. Nullam odio dui,
vulputate a purus nec, vestibulum accumsan nisl. Etiam congue porttitor
felis sed pellentesque. Nullam justo lacus, imperdiet vitae dolor eget,
molestie suscipit arcu.
</p>
<img
class="section-picture"
src="http://www.ibiblio.org/eldritch/hmt/myfps2.gif"
alt="Henry Major Tomlinson"
width="307" height="369">
<blockquote class="quote">Donec
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

переносы у blockquote в другом стиле, нежели чем у p

sit amet est vel neque fringilla
lacinia in vitae diam. Nam gravida
sapien nec tellus varius, vitae mattis lectus
aliquet. Integer justo risus,
lobortis quis aliquam sed, tempus sit amet
ligula.</blockquote>
<p>
Suspendisse rhoncus volutpat leo, sed vestibulum justo posuere non.
Mauris porta cursus mi eget auctor. Pellentesque imperdiet diam euismod
fringilla porta. Aliquam nec rutrum est, ut volutpat nisl. Vestibulum
sit amet lectus porttitor, auctor nisl ut, pulvinar urna. Vivamus dapibus
sapien metus, sit amet pellentesque sapien bibendum nec. Vivamus egestas
sed tortor non imperdiet. Nulla diam enim, ultrices ut pretium eu, sagittis
id tellus. Duis et lacinia dui. Praesent luctus justo magna,
sollicitudin varius magna bibendum rutrum.
</p>
<p>
Pellentesque orci ipsum, tristique in libero id, pretium eleifend metus.
Praesent nulla nisi, consectetur vel tortor eget, egestas vulputate est.
Fusce porta pulvinar sem, eu ultrices ligula porta a. Etiam sodales
tincidunt lacus, nec facilisis purus gravida vitae. Mauris id ex nec
dolor consequat mattis. Quisque quis dapibus est. Phasellus tristique,
est ac efficitur tincidunt, ex nisi ultricies ante,
eget auctor neque velit id nibh.
</p>
<p>
Vivamus eget metus ac nunc auctor finibus. Cras dictum rhoncus venenatis.
Nullam erat tortor, varius eu mollis sit amet, elementum sed purus.
Sed ac urna porta, maximus quam in, suscipit sem. Vestibulum lacus
tellus, interdum vitae justo ut, commodo vehicula orci. Aliquam ac
magna nisl. Phasellus tristique, est ac efficitur tincidunt.
</p>
<small class="watermark">By ROBERTA SMITH</small>
</section>
<hr>
</article>
</body>
</html>
Loading