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.

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

Шмонина Ирина #44

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
123 changes: 123 additions & 0 deletions index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
body
{
background: #cf9;
}

header
{
text-align: center;
font-size: 1.6em;
font-family: 'Lobster', cursive;
}

h3
{
text-align: center;
font-size: 1.2em;
font-family: 'Poiret One', cursive;
}

h2
{
text-align: center;
font-size: 1.2em;
font-family: 'Lobster', cursive;
margin: 0;
padding: 0;
}

img
{
display: inline-block;
margin: 1%;
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 1), inset 0 2px
1px rgba(255, 255, 255, .5), inset 0 -9px
2px rgba(0, 0, 0, .6), inset 0 -12px 2px
rgba(255, 255, 255, .3);
-moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 1), inset 0 2px
1px rgba(255, 255, 255, .5), inset 0 -9px
2px rgba(0, 0, 0, .6), inset 0 -12px 2px
rgba(255, 255, 255, .3);
box-shadow: inset 0 0 4px rgba(0, 0, 0, 1), inset 0 2px
1px rgba(255, 255, 255, .5), inset 0 -9px
2px rgba(0, 0, 0, .6), inset 0 -12px 2px
rgba(255, 255, 255, .3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

div
{
width: 22.5%;
vertical-align: top;
display: inline-block;
margin: 1%;
}

.section2,
.section3,
p
{
display: none;
}

.page-2:checked ~ .section2
{
display: block;
}

.page-2:checked ~ .section1,
.page-2:checked ~ .section3
{
display: none;
}

.page-3:checked ~ .section3
{
display: block;
}

.page-3:checked ~ .section1,

Choose a reason for hiding this comment

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

У тебя много где повторяется display: none и display: block. Лучше будет их все объединить

.page-3:checked ~ .section2
{
display: none;
}

div:hover p
{
display: block;
}

section:target ~ .exit
{
display: block;
}


img[tabindex='0']
Copy link

@dotokoto dotokoto Nov 16, 2016

Choose a reason for hiding this comment

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

Какой-то странный селектор по tabindex. Почему именно по нему? И для чего тут вообще нужен tabindex?

{
cursor: zoom-in;
}

img[tabindex='0']:focus
{
position: fixed;
z-index: 10;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: auto;
height: auto;
max-width: 99%;
max-height: 99%;
margin: auto;
box-shadow: 0 0 20px, 0 0 0 1000px rgba(128,128,128,.8);
}

img[tabindex='0']:focus,
{
pointer-events: none;
cursor: zoom-out;
}
161 changes: 161 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,168 @@
<html lang="ru">
<head>
<meta charset="utf-8">
<title>slide show</title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<h1>
Бабушкин огородик!
</h1>

Choose a reason for hiding this comment

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

Можно в одну строку написать

</header>
<section class="slider">
<h3>Добро пожаловать на выстовку от Бабушки Агафьи.</h3>
<input type="radio" name="gallery-page" id="page-1" class="page-1 hidden" checked>
<input type="radio" name="gallery-page" id="page-2" class="page-2 hidden">
<input type="radio" name="gallery-page" id="page-3" class="page-3 hidden">
<br>
<section class="section1">
<h2>Цветы</h2>
<div>
<img src="http://img.7dach.ru/uploads/images/03/17/10/2014/03/29/2ceb286161.jpg"
width="300" height="250" alt="арка в цветах" tabindex="0">
<p>Кам&shy;не&shy;лом&shy;ка цве&shy;ток (Saxifraga) – мно&shy;го&shy;лет&shy;нее
тра&shy;вя&shy;ни&shy;стое рас&shy;те&shy;ние, про&shy;из&shy;рас&shy;та&shy;ю&shy;
щее в уме&shy;рен&shy;ном и хо&shy;лод
&shy;ном кли&shy;ма&shy;те Се&shy;вер&shy;но&shy;го по&shy;лу&shy;ша&shy;рия. Весь
уча&shy;сток усы&shy;пан эти&shy;ми
за&shy;ме&shy;ча&shy;тель&shy;ны&shy;ми цве&shy;та&shy;ми. По&shy;смот&shy;ри&shy;
те как кра&shy;си&shy;во они укра&shy;
ша&shy;ют ар&shy;ку.</p>
</div>
<div>
<img src="http://www.phytology.ru/images/stories/5822cb0994a7.jpg" width="300"
height="250" alt="цветы около дома" tabindex="0">
<p>Не&shy;при&shy;хот&shy;ли&shy;вый и очень кра&shy;соч&shy;ный цве&shy;ток га&shy;
ца&shy;ния, ро&shy;ди&shy;ной ко&shy;то&shy;ро&shy;го яв&shy;ля&shy;ет&shy;ся да&shy;
ле&shy;кий и жар&shy;кий аф&shy;ри&shy;
кан&shy;ский кон&shy;ти&shy;нент, за&shy;во&shy;е&shy;вал лю&shy;бовь цве&shy;то&shy;
во&shy;дов и са&shy;до&shy;во&shy;
дов всей стра&shy;ны и ча&shy;сто встре&shy;ча&shy;ет&shy;ся на клум&shy;бах и в улич
&shy;ных ва&shy;зо&shy;нах.</p>
</div>
<div>
<img src="http://elitefon.ru/images/201211/elitefon.ru_5643.jpg" width="300" height="250"
alt="розы" tabindex="0">
<p>По&shy;жа&shy;луй, ни об од&shy;ном рас&shy;те&shy;нии не су&shy;ще&shy;ству&shy;
ет столь&shy;ко ми&shy;фов и ле&shy;генд, как о ро&shy;зе – этот цве&shy;ток по&shy;
явил&shy;ся на зем&shy;ле мно&shy;
го мил&shy;ли&shy;о&shy;нов лет на&shy;зад и до сих пор поль&shy;зу&shy;ет&shy;ся
по&shy;вы&shy;шен&shy;ной по&shy;пу&shy;
ляр&shy;но&shy;стью у цве&shy;то&shy;во&shy;дов всех стран ми&shy;ра.</p>
</div>
<div>
<img src="http://st03.kakprosto.ru//images/article/2012/3/14/1_52550920105e6525509201063b.jpg"
width="300" height="250" alt="тюльпаны" tabindex="0">
<p>Цвет&shy;ки тюль&shy;па&shy;нов жиз&shy;не&shy;ра&shy;дост&shy;ные рас&shy;те&shy;
ния, по&shy;это&shy;му они ши&shy;ро&shy;ко рас&shy;кры&shy;ва&shy;ют&shy;ся солн&shy;
цу и пря&shy;чут&shy;ся но&shy;чью и
в пас&shy;мур&shy;ную по&shy;го&shy;ду. Так гла&shy;сит и ле&shy;ген&shy;да, по&shy;
вест&shy;ву&shy;ю&shy;щая о бу&shy;
то&shy;не жёл&shy;то&shy;го тюль&shy;па&shy;на, в ко&shy;то&shy;ром бы&shy;ло за&shy;
ло&shy;же&shy;но сча&shy;стье, до
ко&shy;то&shy;ро&shy;го ни&shy;кто не мог до&shy;брать&shy;ся.</p>
</div>
</section>
<section class="section2">
<h2>Ягоды</h2>
<div>
<img src="http://ogorodsadovod.com/sites/default/files/u79/2015/01/raspberry.jpg"
width="300" height="250" alt="малина" tabindex="0">
<p>Пло&shy;ды ма&shy;ли&shy;ны об&shy;ла&shy;да&shy;ют по&shy;то&shy;гон&shy;ным свой&shy;
ством. Са&shy;ли&shy;ци&shy;ло&shy;вая кис&shy;ло&shy;та, со&shy;дер&shy;жа&shy;ща&shy;
я&shy;ся в пло&shy;дах, ока&shy;
зы&shy;ва&shy;ет ан&shy;ти&shy;сеп&shy;ти&shy;че&shy;ское, жа&shy;ро&shy;по&shy;ни&shy;
жа&shy;ю&shy;щее, по&shy;то&shy;
гон&shy;ное и про&shy;ти&shy;во&shy;вос&shy;па&shy;ли&shy;тель&shy;ное дей&shy;ствие.
Для ли&shy;стьев и цвет&shy;ков
ма&shy;ли&shy;ны, кро&shy;ме то&shy;го ха&shy;рак&shy;тер&shy;ны кро&shy;во&shy;оста&shy;
нав&shy;ли&shy;ва&shy;ю&shy;щие и
ан&shy;ти&shy;ток&shy;си&shy;че&shy;ские свой&shy;ства.</p>
</div>
<div>
<img src="http://supercook.ru/images-490-plody/490-38-s-01.jpg" width="300" height="250"
alt="СЛИВА" tabindex="0">
<p>Сли&shy;ва, ко&shy;то&shy;рая у ме&shy;ня рас&shy;тет, на&shy;зы&shy;ва&shy;ет&shy;ся
«рен&shy;клод кол&shy;хоз&shy;ный». Я са&shy;ма дол&shy;гое вре&shy;мя не зна&shy;ла,
что «рен&shy;клод» — это обо&shy;
зна&shy;че&shy;ние груп&shy;пы сор&shy;тов до&shy;маш&shy;ней сли&shy;вы. У них круг&shy;
лые пло&shy;ды, неж&shy;ная,
соч&shy;ная мя&shy;коть и хо&shy;ро&shy;шо от&shy;де&shy;
ля&shy;е&shy;мая ко&shy;сточ&shy;ка.</p>
</div>
<div>
<img src="http://yagodavtomske.ru/attachments/Image/oblepikha_3_600.jpg?template=generic"
width="300" height="250" alt="облепиха" tabindex="0">
<p>Цен&shy;ность мас&shy;ла из ягод об&shy;ле&shy;пи&shy;хи из&shy;вест&shy;на с
дав&shy;них пор, оно при&shy;ме&shy;ня&shy;ет&shy;ся в це&shy;леб&shy;ных це&shy;
лях Яго&shy;ды об&shy;ле&shy;пи&shy;хи
очень бо&shy;га&shy;ты мас&shy;лом. Его це&shy;леб&shy;ная си&shy;ла из&shy;вест
&shy;на с дав&shy;них вре&shy;мен.</p>
</div>
<div>
<img src="http://ogorodsadovod.com/sites/default/files/u55/2012/05/0_490fb_2d857229_xl.jpg"
width="300" height="250" alt="клубника" tabindex="0">
<p>Сорт клуб&shy;ни&shy;ки Маль&shy;ви&shy;на ро&shy;дом из Гер&shy;ма&shy;нии.
Куст рос&shy;лый, с тем&shy;но-зе&shy;ле&shy;ной лист&shy;вой. Яго&shy;ды «ту&shy;гие»
, яр&shy;ко-крас&shy;ные,
слад&shy;кие, со&shy;зре&shy;ва&shy;ют в ав&shy;гу&shy;сте-ок&shy;тяб&shy;ре.
Сорт устой&shy;чив к «клуб&shy;нич&shy;ным»
бо&shy;лез&shy;ням.</p>
</div>
</section>
<section class="section3">
<h2>Овощи</h2>
<div>
<img src="http://www.saharniy-diabet.com/userfiles/morkov.jpg" width="300"
height="250" alt="морковь" tabindex="0">
<p>Этот овощ мож&shy;но сме&shy;ло на&shy;звать не&shy;при&shy;хот&shy;ли&shy;вым
рас&shy;те&shy;ни&shy;ем. А со&shy;бран&shy;ный уро&shy;жай мо&shy;жет, при долж&shy;
ном хра&shy;не&shy;нии, про&shy;
ле&shy;жать до са&shy;мой вес&shy;ны. В хо&shy;ро&shy;ших усло&shy;ви&shy;ях он со
&shy;хра&shy;нит и свой при&shy;вле&shy;
ка&shy;тель&shy;ный внеш&shy;ний вид и все пи&shy;та&shy;тель&shy;ные и по&shy;лез&shy;
ные ве&shy;ще&shy;ства.</p>
</div>
<div>
<img src="http://ogorodsadovod.com/sites/default/files/u79/2015/11/beet3.jpg"
width="300" height="250" alt="свекла" tabindex="0">
<p>Свек&shy;ла нор&shy;ма&shy;ли&shy;зу&shy;ет ра&shy;бо&shy;ту сер&shy;деч&shy;но-со&shy;
су&shy;ди&shy;стой си&shy;сте&shy;мы, она яв&shy;ля&shy;ет&shy;ся от&shy;лич&shy;ным про
&shy;фи&shy;лак&shy;ти&shy;че&shy;ским и ле&shy;чеб&shy;
ным сред&shy;ством при ате&shy;ро&shy;скле&shy;ро&shy;зе и ги&shy;пер&shy;то&shy;нии,
спо&shy;соб&shy;ству&shy;ет сни&shy;
же&shy;нию ар&shy;те&shy;ри&shy;аль&shy;но&shy;го дав&shy;ле&shy;ния, сти&shy;му&shy;ли
&shy;ру&shy;ет об&shy;ра&shy;зо&shy;
ва&shy;ние крас&shy;ных кро&shy;вя&shy;ных те&shy;лец и умень&shy;ша&shy;ет со&shy;дер
&shy;жа&shy;ние хо&shy;ле&shy;сте&shy;
ри&shy;на в кро&shy;ви..</p>
</div>
<div>
<img src="http://www.supersadovnik.ru/binfiles/images/00000031/00056948.jpg"
width="300" height="250" alt="кабачок" tabindex="0">
<p>Ка&shy;бач&shy;ки по&shy;лез&shy;ны бла&shy;го&shy;да&shy;ря боль&shy;шо&shy;му
со&shy;дер&shy;жа&shy;нию клет&shy;
чат&shy;ки, ви&shy;та&shy;ми&shy;нов и цен&shy;ных ве&shy;ществ.</p>
</div>
<div>
<img src="http://parnikiteplicy.ru/wp-content/uploads/2013/10/ogurcy.jpg" width="300"
height="250" alt="огурцы" tabindex="0">
<p>Огур&shy;цы об&shy;ла&shy;да&shy;ют от&shy;лич&shy;ны&shy;ми очи&shy;ща&shy;ю&shy;
щи&shy;ми свой&shy;ства&shy;ми.
Ре&shy;гу&shy;ляр&shy;ное упо&shy;треб&shy;ле&shy;ние их в пи&shy;щу чи&shy;стит поч
&shy;ки, вы&shy;во&shy;дит лиш&shy;
нюю во&shy;ду из ор&shy;га&shy;низ&shy;ма, спо&shy;соб&shy;ству&shy;ет устра&shy;не
&shy;нию оте&shy;ков, пре&shy;ду&shy;
пре&shy;жда&shy;ет по&shy;яв&shy;ле&shy;ние за&shy;по&shy;ров, об&shy;лег&shy;ча&shy;
ет пе&shy;ре&shy;ва&shy;ри&shy;ва
&shy;ние тя&shy;же&shy;лой пи&shy;щи и спо&shy;соб&shy;но убе&shy;речь от пе&shy;ре
&shy;еда&shy;ния.</p>
</div>
</section>
</section>
</body>
</html>