<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"><link rel="stylesheet" href="dist/css/lightbox.css">
 </head>
    <body>
   <header>
           
           <div class="head">
           <div class="texto"><a href="index.html"> </p></a></div>
       </div>
       
      </header>
      <div class="main">
      
      
<div class="flex">
     <div id="block1">
   <nav id="menuVertical">
        <ul>
            <li> <a href="index.html"><span>Главная </span></a>
            </li>
            <li> <a href=""><span>Портфолио </span></a>
            </li>
            
            <li> <a href=""><span>Творческая <p>деятельность</p> </span></a>
            <ul>
            <li> <a href="">хореографические постановки</a></li>
            <li> <a href="">Статьи</a></li>
           </ul>
            </li>
            
            <li> <a href="наши выпускники.html"><span>Наши <p> выпускники</p></span></a>
            <ul>
                 <li><a href="">2018 год</a></li>
                 <li><a href="">2017 год</a></li>
                 <li><a href="">2016 год</a></li>
                 <li><a href="">2015 год</a></li>
            </ul>
            <li><a href=""><span> Методические <p> материалы </p> </span></a>
            <ul>
            <li><a href="">Русский язык</a></li>
            <li><a href="">Литература</a></li>
            </ul>
            </li>
             <li> <a href="index.html"><span>Галерея </span></a>
            </li>
        </ul>
      </nav>
   </div> 
    <div class="textoz"><strong>Русский язык</strong>
      <div class="wrapper">

	<div class="cards">

		<figure class="card">

			<img src="https://mrreiha.keybase.pub/codepen/hover-fx/1.jpg" />

			<figcaption>Dota 2</figcaption>

		</figure>

		<figure class="card">

			<img src="https://mrreiha.keybase.pub/codepen/hover-fx/2.jpg" />

			<figcaption>Stick Fight</figcaption>

		</figure>

		<figure class="card">

			<img src="https://mrreiha.keybase.pub/codepen/hover-fx/3.jpg" />

			<figcaption>Minion Masters</figcaption>

		</figure>

		<figure class="card">

			<img src="https://mrreiha.keybase.pub/codepen/hover-fx/4.jpg" />

			<figcaption>KoseBoz!</figcaption>

		</figure>

	</div>


	<div class="news">

		<figure class="article">

			<img src="https://mrreiha.keybase.pub/codepen/hover-fx/news1.jpg" />

			<figcaption>

				<h3>New Item</h3>

				<p>

					In today’s update, two heads are better than one, and three heads are better than that, as the all-new Flockheart’s Gamble Arcana item for Ogre Magi makes its grand debut.

				</p>

			</figcaption>

		</figure>

		<figure class="article">

			<img src="https://mrreiha.keybase.pub/codepen/hover-fx/news2.png" />

			<figcaption>

				<h3>Update</h3>

				<p>

					Just in time for Lunar New Year and the Rat’s time in the cyclical place of honor, the Treasure of Unbound Majesty is now available.

				</p>

			</figcaption>

		</figure>

	</div>

</div>
    </div> 
</div>



<script scr="dist/js/lightbox-plus-jquery.js"></script>
</body>
</html>
*{
    margin: 0;
    border: 0;
}

html{
    background-color:#FFF8E7;
    display: block;
}

body{
    font-family:  'Alegreya', serif;
    margin: 0;
        color: #382512;
}
.head /*шапка*/
{
    background-color: #fdf4e3;
    height: 100px;
    width: auto;
    margin-right: 90px;
    margin-left: 90px;
    margin-top: 10px;
    margin-bottom: 0px;
    box-shadow: 5px 0px 50px 	rgb(110,110,110),
        -5px 0px 50px 	rgb(110,110,110);
}
.texto
{
  font-family: 'Monotype Corsiva';
    font-size: 40px;
    text-align: center;
}
.textoz
{
  width: 100%;
   font-style: italic;
    font-family: 'Alegreya', serif;
    font-size: 45px;
    padding-top:5px;
    color: #382512;
    text-align: center;
}
.texto a
{
    text-decoration: none;
    color: black;
}
TD.leftcol {
    width: 110px; /* Ширина левой колонки с рисунком */
    vertical-align: middle; /* Выравнивание по верхнему краю */
   }

#menuVertical{
    width: 70px;
    height: auto;
    margin: 0px;
/*position: fixed;*/
}

#menuVertical ul /*стиль для маркированного списка*/
{
    display: block;
    width: 50px;
    height: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    white-space: nowrap;
}

#menuVertical ul li /*свойства элементов маркерованного списка*/
{
    display: block;
    width: 150px;
    position: relative;
}

#menuVertical ul li a /* стили для тегов*/
{
    display: block;
    width: 190px;
    height: auto;
    box-sizing: border-box;
    font-size: 20px;
    text-transform: full-width;
    text-decoration: none;
    font-weight: bolder;
    color:#1c1c1c;/*Цвет богокого меню*/
    position: relative;
    line-height: 1em;
    padding: 10px 15px;
}

#menuVertical ul li a:hover,
#menuVertical ul li:hover a
/* стили при наведении на ссылкку или пункт меню*/
{
    background: #d9ddde;
    color: black;
    width: 220px;
}

#menuVertical ul li ul/*выподающие меню*/
{
    position: absolute;
    top: 0px;
    left: 151px;
    display: none;
    white-space: normal;
    
    
}

#menuVertical ul li:hover ul
{
    display: block;
}

#menuVertical ul li ul li a /* стиль ссылок выподающего меню*/
{
   text-transform: none;
    padding: 10px 20px;
    width: 390px;
}

#menuVertical ul li ul li a:hover /*изменение при наведение на недоссылки*/
{
    background: #fff;
    color: brown;
}
.vashno
{
margin-left: 100px;
float: left;
}

.shadow/* тень главной белой штуки*/
{
    box-shadow: 5px 0px 50px 	rgb(187,187,187)  ,
        -5px 0px 50px 	rgb(187,187,187)  ;
}

.flex {
  display: flex;
}

#block1 {
display: block;
    width: 173px;
    background-color: #d5d5d5;
    margin-right: 0px;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    

}

#block2 {
display: block;;
    height: auto;
    min-height:900px;
    width: auto;
    background-color: floralwhite;
    margin-left: 195px;
    margin-top: 0px;
    margin-bottom: 0px;
}

big
{
    font-size: 22px;
}
.hello
{
    text-align: center;
    line-height: 1.7;
}
.port
{
text-align: left;
padding-left: 210px;
}
hr {
    background-color: #cccccc;
    border: none;
    box-sizing: content-box;
    height: 4px;
    margin: 1.0em auto;
    max-width: 75%;
    width: 72%;
}
dl {margin-top: 0em; margin-bottom: 0em;}



.main
{
    width: auto;
    background-color: floralwhite;
    margin-right: 90px;
    margin-left: 90px;
    margin-top: 0px;
    margin-bottom: 0px;  
     box-shadow: 5px 0px 50px 	rgb(110,110,110),
        -5px 0px 50px 	rgb(110,110,110);
}
.container img
{
padding:10px;
transition:0.5s;   
}

.container img: hover
{
transform: scale (1.1);
}
.abs,
h2:after,
.cards .card figcaption,
.cards .card:after,
.news .card figcaption,
.news .card:after,
.news .article figcaption {
  position: absolute;
}
.rel,
h2,
h2 strong,
.cards .card,
.news .card,
.news .article {
  position: relative;
}
.fix {
  position: fixed;
}
.dfix {
  display: inline;
}
.dib {
  display: inline-block;
}
.db {
  display: block;
}
.dn {
  display: none;
}
.df,
.cards,
.news {
  display: flex;
}
.dif {
  display: inline-flex;
}
.dg {
  display: grid;
}
.dig {
  display: inline-grid;
}
.vm,
h2,
h2 strong,
h2 span {
  vertical-align: middle;
}
body {
  background: #24282f;
  font-family: 'Alegreya Sans';
}
.wrapper {
  padding: 15px;
}
h2 span {
  font-size: 0.7em;
  color: #aaa;
  margin-left: 10px;
}
h2:after {
  content: '';
  z-index: 1;
  bottom: 50%;
  margin-bottom: -2px;
  height: 2px;
  left: 0;
  right: 0;
  background: #373d47;
}
.cards,
.news {
  flex-flow: row wrap;
}
.cards .card,
.news .card {
  margin: 20px;
  width: 180px;
  height: 270px;
  overflow: hidden;
  box-shadow: 0 5px 10px rgba(0,0,0,0.8);
  transform-origin: center top;
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: 0.3s;
}
.cards .card img,
.news .card img {
  width: 100%;
  min-height: 100%;
}
.cards .card figcaption,
.news .card figcaption {
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  padding-bottom: 10px;
  font-size: 20px;
  background: none;
  color: #fff;
  transform: translateY(100%);
  transition: 0.3s;
}
.cards .card:after,
.news .card:after {
  content: '';
  z-index: 10;
  width: 200%;
  height: 100%;
  top: -90%;
  left: -20px;
  opacity: 0.1;
  transform: rotate(45deg);
  background: linear-gradient(to top, transparent, #fff 15%, rgba(255,255,255,0.5));
  transition: 0.3s;
}
.cards .card:hover,
.news .card:hover,
.cards .card:focus,
.news .card:focus,
.cards .card:active,
.news .card:active {
  box-shadow: 0 8px 16px 3px rgba(0,0,0,0.6);
  transform: translateY(-3px) scale(1.05) rotateX(15deg);
}
.cards .card:hover figcaption,
.news .card:hover figcaption,
.cards .card:focus figcaption,
.news .card:focus figcaption,
.cards .card:active figcaption,
.news .card:active figcaption {
  transform: none;
}
.cards .card:hover:after,
.news .card:hover:after,
.cards .card:focus:after,
.news .card:focus:after,
.cards .card:active:after,
.news .card:active:after {
  transform: rotate(25deg);
  top: -40%;
  opacity: 0.15;
}
.news .article {
  overflow: hidden;
  width: 350px;
  height: 235px;
  margin: 20px;
}
.news .article img {
  width: 100%;
  min-height: 100%;
  transition: 0.2s;
}
.news .article figcaption {
  font-size: 14px;
  text-shadow: 0 1px 0 rgba(51,51,51,0.3);
  color: #fff;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 40px;
  box-shadow: 0 0 2px rgba(0,0,0,0.2);
  background: rgba(6,18,53,0.6);
  opacity: 0;
  transform: scale(1.15);
  transition: 0.2s;
}
.news .article figcaption h3 {
  color: #3792e3;
  font-size: 16px;
  margin-bottom: 0;
  font-weight: bold;
}
.news .article:hover img,
.news .article:focus img,
.news .article:active img {
  filter: blur(3px);
  transform: scale(0.97);
}
.news .article:hover figcaption,
.news .article:focus figcaption,
.news .article:active figcaption {
  opacity: 1;
  transform: none;
}






















External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.