<!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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.